Все про додавання стилів і скриптів у WordPress

Останнє оновлення Лис 11, 2022

Зміст

Додавання сценаріїв і стилів до інтерфейсу

Додавання скриптів і стилів в адмінку

Додавання скриптів і стилів на сторінку входу

Виведення змінних Javascript

Виведення вбудованих стилів

Додавання асинхронних тегів до сценаріїв

Корисні посилання на документацію

WordPress пропонує кілька методів додавання стилів і сценаріїв для інтерфейсу та адміністратора, як для додавання файлів, так і для прямого виведення змінних/виведення. У цій публікації детально описано приклади коду того, як правильно додавати сценарії та стилі до WordPress.

Сценарії та стилі можна реєструвати та ставити в чергу шляхом визначення унікальних дескрипторів (ідентифікаторів, подібних до слизняка), що дає змогу WordPress усувати дублікати, як-от численні бібліотеки jQuery, і обробляти залежності (який стиль чи сценарій завантажувати перед цим і тим). .

Якщо немає особливої потреби в реєстрації стилів або сценаріїв, ви можете просто поставити їх у чергу одразу, пропустивши реєстрацію. Також можна скасувати реєстрацію або видалити стилі та сценарії з черги (wp_dequeue_scriptі wp_dequeue_style), посилаючись на дескриптор. Зазвичай допомагає додати вищий номер у пріоритет хука (щоб він запускався після хука, де елементи були поставлені в чергу).

PS: Додавання стилів і сценаріїв до Gutenberg (як блоків адміністратора, так і інтерфейсу) пояснюється в моїй публікації Gutenberg: The Basics.

Додавання сценаріїв і стилів до інтерфейсу

Щоб додати стилі та сценарії лише до інтерфейсу, використовуйте хук wp_enqueue_scripts. Незважаючи на назву хука, він використовується як для сценаріїв, так і для стилів. Ось приклад розміщення таблиці стилів і файлу javascript у черзі в темі:


add_action('wp_enqueue_scripts', function() {
    // Styles
    wp_enqueue_style('main-style', get_stylesheet_directory_uri().'/style.css', [], '1.0');
 
    // Scripts
    wp_enqueue_script('main-script', get_stylesheet_directory_uri().'/assets/js/main.js', ['jquery'], '', true);
});

Третій аргумент і для стилів, і для скриптів — це масив із залежностями. Наприклад, для сценаріїв ви можете завантажити бібліотеку jQuery перед файлом сценарію. Примітка: інсталяції WordPress постачаються з набором поширених бібліотек сценаріїв (наприклад, jQuery, jQuery UI, Backbone і Underscore). Поки ви додаєте будь-який із цих дескрипторів як залежність у своєму enqueue_script, WordPress поставить їх у чергу, тому вам не доведеться додавати власні файли для цих бібліотек.

П’ятий аргумент для сценаріїв полягає в тому, чи слід завантажувати сценарій у кінці <body>(у нижньому колонтитулі), а не всередині <head>тегу.

Для використання в плагіні потрібно використовувати інші методи отримання URL-адреси локального файлу, наприклад plugin_dir_url(__FILE__).

Додавання скриптів і стилів в адмінку

WordPress пропонує ще один гачок, admin_enqueue_scriptsдля додавання стилів і сценаріїв лише для адміністратора. Використовуйте ті самі методи, що й вище, для реєстрації, постановки в чергу та локалізації сценаріїв і стилів:


add_action('admin_enqueue_scripts', function() {
    global $pagenow, $post_type;
    // Example: $hook == 'edit.php'
    // Example: $post_type == 'post'
    // wp_enqueue_style or wp_enqueue_script
});

Додавання скриптів і стилів на сторінку входу

Оскільки жоден із зазначених вище хуків не відображається на екрані входу адміністратора, WordPress пропонує для цієї мети окремий хук login_enqueue_scripts.


add_action('login_enqueue_scripts', function() {
    // wp_enqueue_style or wp_enqueue_script
});

Виведення змінних Javascript

Для виведення змінних Javascript (наприклад, отримання шляхів, перекладених рядків або інших змінних, ви можете використовувати wp_localize_script. Ця функція потребує дескриптора сценарію в черзі. Другим параметром буде ім’я змінної, а третім її значення. Значення може бути масивом, наприклад :

У вашому скрипті ви маєте доступ до переданих змінних, наприклад:


jQuery(document).ready(function($) { 
    console.log(Theme_Variables.ajax_url);
});

У цьому хуку ви можете отримати доступ до глобальних змінних $pagenowі $post_typeдодатково вказати, куди ви хочете поставити свої стилі та сценарії.

Виведення вбудованих стилів

Якщо вам потрібно вивести вбудовані стилі, наприклад, для змінних теми, які ви встановили в настроювачі (наприклад, за допомогою get_theme_mod), ви можете вивести їх за допомогою wp_add_inline_styleфункції. Це працює подібно до виведення змінних Javascript, у яких вам потрібно надати дескриптор стилю в черзі:


add_action('wp_enqueue_scripts', function() {
    // wp_enqueue_style('main-style');  // Must exist!
 
    $color = get_theme_mod('my-custom-color');  // e.g. #FF0000
    $custom_css = "
        body {
            background: {$color};
        }";
        wp_add_inline_style('main-style', $custom_css);
});

Додавання асинхронних тегів до сценаріїв

На жаль, немає прямої функції чи фільтра, який можна додати asyncдо ваших тегів сценарію, але ми можемо досягти цього, маніпулюючи рядком, який WordPress використовує для виведення тегів сценарію для всіх сценаріїв у черзі, ось так (не забувайте вказувати свій сценарій за його описом):

Корисні посилання на документацію

Джерело запису: awhitepixel.com