Все о добавлении стилей и скриптов в WordPress

Последнее обновление Авг 10, 2022

Содержание

Добавление скриптов и стилей в интерфейс

Добавление скриптов и стилей в админку

Добавление скриптов и стилей на страницу входа

Вывод переменных Javascript

Вывод встроенных стилей

Добавление асинхронных тегов в скрипты

Полезные ссылки на документацию

WordPress предлагает несколько способов добавления стилей и скриптов для внешнего интерфейса и администратора, как для добавления файлов, так и для прямого вывода переменных/вывода. В этом посте подробно рассказывается с примерами кода о том, как правильно добавлять скрипты и стили в WordPress.

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

Если нет особой необходимости в регистрации стилей или скриптов, вы можете просто поставить их в очередь сразу, пропустив регистрацию. Также можно отменить регистрацию или исключить из очереди стили и скрипты (wp_dequeue_scriptи wp_dequeue_style), обратившись к дескриптору. Обычно помогает добавление более высокого числа в приоритет хука (чтобы он запускался после хука, в котором элементы были поставлены в очередь).

PS: Добавление стилей и скриптов в Гутенберг (как админку, так и фронтэнд-блоки) объясняется в моем посте Гутенберг: Основы.

Добавление скриптов и стилей в интерфейс

Для добавления стилей и скриптов только во внешний интерфейс используйте хук 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. Для этой функции требуется дескриптор скрипта, поставленный в очередь. Вторым параметром будет имя переменной, а третьим ее значение. Значение может быть массивом, например :

add_action('wp_enqueue_scripts', function() {
    // wp_enqueue_script('main-script');  // Must exist!
    $variable_to_js = [
        'ajax_url' => admin_url('admin-ajax.php')
    ];
    wp_localize_script('main-script', 'Theme_Variables', $variable_to_js);
});

Внутри вашего скрипта у вас есть доступ к переданным переменным, например:

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

В этом хуке вы можете получить доступ к глобальным переменным $pagenowи $post_typeдополнительно указать, где вы хотите поставить в очередь свои стили и скрипты.

Вывод встроенных стилей

Если вам нужно вывести встроенные стили, например, для переменных темы, которые вы настроили в Customizer (например, с помощью 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 использует для вывода тегов сценария для всех поставленных в очередь сценариев, например так (не забудьте указать свой сценарий по его дескриптору):

add_filter('script_loader_tag', function($tag, $handle, $src) {
    if ('main-script' != $handle) {
        return $tag;
    }
    return str_replace('<script', '<script async', $tag);
}, 11, 3);

Полезные ссылки на документацию

Источник записи: awhitepixel.com