Все о добавлении стилей и скриптов в WordPress
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. Для этой функции требуется дескриптор скрипта, поставленный в очередь. Вторым параметром будет имя переменной, а третьим ее значение. Значение может быть массивом, например :
Внутри вашего скрипта у вас есть доступ к переданным переменным, например:
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 использует для вывода тегов сценария для всех поставленных в очередь сценариев, например так (не забудьте указать свой сценарий по его дескриптору):
Полезные ссылки на документацию
- wp_enqueue_scripts (крючок)
- admin_enqueue_scripts (крючок)
- login_enqueue_scripts (крючок)
- wp_enqueue_style
- wp_dequeue_style
- wp_enqueue_script
- wp_dequeue_script
- wp_localize_script
- wp_add_inline_style