Стандартний спосіб включити JavaScript та CSS у WordPress

Якщо ви розробник WordPress, ви чули про такі слова, як wp_enqueue_script, wp_enqueue_style та wp_enqueue_scripts. Це методи, які ми повинні використовувати для включення JavaScript та CSS в WordPress.

Що стосується WordPress, не слід використовувати теги скриптів і посилань для додавання файлів JavaScript і CSS.

Переваги використання стандартних методів

Для веб-сайту зазвичай використовують різні види ефектів та анімації для покращення взаємодії з користувачем. В Інтернеті є безліч готових плагінів, що дозволяє нам додавати слайдери, контактні форми, каруселі тощо на ваш веб-сайт. Коли ми використовуємо ці зовнішні ресурси, нам потрібно використовувати надані ними файли JS та CSS. За допомогою методів, наданих WordPress, ми можемо контролювати сторінки, на яких можуть використовуватись лише такі плагіни. Наприклад, якщо ми відображаємо слайдер на домашній сторінці, тоді немає необхідності включати файли JS та CSS слайдера на іншу сторінку. Завжди є гарною практикою включати JS та CSS лише за потреби. Це хороша практика, яка використовувалась для підвищення продуктивності сайту та пришвидшення завантаження нашого сайту.

Фактичний код для включення JavaScript та CSS

Припустимо, у нас є файли custom.js та custom.css, які потрібно додати на нашому сайті. Для цього нам потрібно розмістити нижче код.

add_action('wp_enqueue_scripts', 'include_js_css');
function include_js_css() {
    wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
    wp_enqueue_script('my-custom-script');
 
    wp_register_style( "my-custom-style", get_stylesheet_directory_uri(). "/css/custom.css", array(), false, "all" );
    wp_enqueue_style( "my-custom-style" );
}

Примітка: 3-й параметр у функції wp_register_script. Ми передали масив (‘jquery’), що означає, що наш custom.js залежить від файлу jquery.js. Тут ви можете мати масив emapy, якщо ваш скрипт не має залежностей.

Для останнього параметра встановлено значення true, що означає включення файлу custom.js у нижній колонтитул (перед кінцем тегу body).

Пояснення параметрів для функції wp_register_script ()

$ handle (Обов’язково): Назва сценарію. Має бути унікальним.
$ src (Обов’язково): Повна URL-адреса сценарію або шлях до сценарію щодо кореневого каталогу WordPress.
$ deps (Необов’язково): масив зареєстрованих скриптів обробляє цей сценарій.
Значення за замовчуванням: array ()
$ ver (Необов’язково): рядок із зазначенням номера версії сценарію, якщо він має такий, який додається до URL-адреси як рядок запиту для знищення кешу. Якщо для версії встановлено значення false, номер версії автоматично додається, що дорівнює поточній встановленій версії WordPress. Якщо встановлено значення null, жодна версія не додається. Значення за замовчуванням хибне
$ in_footer (Необов’язково): чи потрібно розміщувати скрипт у черзі перед закриттям тегу body, а не в head. Типове значення "false".

Пояснення параметрів для функції wp_register_style ()

$ handle (Обов’язково): Назва таблиці стилів. Має бути унікальним.
$ src (Обов’язково): Повна URL-адреса таблиці стилів або шлях до таблиці стилів щодо кореневого каталогу WordPress.
$ deps (Необов’язково): масив зареєстрованих таблиць стилів обробляє цю таблицю стилів.
Значення за замовчуванням: array ()
$ ver (Необов’язково): рядок із зазначенням номера версії таблиці стилів, якщо він має такий, який додається до URL-адреси як рядок запиту для знищення кешу. Якщо для версії встановлено значення false, номер версії автоматично додається, що дорівнює поточній встановленій версії WordPress. Якщо встановлено значення null, жодна версія не додається. Значення за замовчуванням: false
$ media(Необов’язково): Носій, для якого було визначено цю таблицю стилів. Приймає типи носіїв, такі як ‘усі’, ‘друк’ та ‘екран’, або медіа-запити на зразок ‘(орієнтація: портрет)’ та ‘(максимальна ширина: 640 пікселів)’. Значення за замовчуванням: ‘все’.

Вся справа в тому, як включити JavaScript і CSS в WordPress. Якщо у вас є якісь запитання чи пропозиції, залиште коментарі нижче.