Хук wp_enqueue_scripts в WordPress является основным способом подключения скриптов и стилей, предназначенных для отображения на фронтенде сайта. Этот хук позволяет разработчикам эффективно управлять загрузкой ресурсов, избегая дублирования и обеспечивая корректную зависимость между скриптами.
do_action( ‘wp_enqueue_scripts’ )Хук wp_enqueue_scripts срабатывает в момент, когда скрипты и стили добавляются в очередь для последующей загрузки. Это событие вызывается перед выводом тега <head> на странице, что позволяет уверенно использовать функции wp_enqueue_script() и wp_enqueue_style().
Чтобы добавить свои скрипты и стили, разработчики используют данный хук в своих функциях. Важно отметить, что для административных страниц следует использовать хук admin_enqueue_scripts, а для страниц входа — login_enqueue_scripts.
Использование
Пример базовой реализации подключения скриптов и стилей выглядит следующим образом:
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
function my_theme_enqueue_scripts() {
// Подключение основного стиля темы
wp_enqueue_style('my-theme-style', get_stylesheet_uri());
// Подключение JavaScript файла темы
wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true);
}
Подключение динамических стилей
С помощью функции wp_add_inline_style() можно добавлять динамические стили, которые могут зависеть от условий на сайте.
add_action('wp_enqueue_scripts', 'enqueue_dynamic_styles');
function enqueue_dynamic_styles() {
wp_enqueue_style('dynamic-style', get_theme_file_uri('/css/style.css'));
// Добавляем динамический CSS
$custom_css = ".navbar { background-color: #ff0000; }";
wp_add_inline_style('dynamic-style', $custom_css);
}
Условная загрузка скриптов
Вы можете загружать скрипты только на определенных страницах, что поможет оптимизировать производительность сайта.
add_action('wp_enqueue_scripts', 'selective_script_loading');
function selective_script_loading() {
if (is_page(['home', 'about', 'contact'])) {
wp_enqueue_script('conditional-script', get_template_directory_uri() . '/js/conditional-script.js', array(), '1.0.0', true);
}
}
Использование зависимости
Если один скрипт зависит от другого, вы можете указать зависимости при подключении, что обеспечит их правильный порядок загрузки.
add_action('wp_enqueue_scripts', 'enqueue_dependent_scripts');
function enqueue_dependent_scripts() {
// Подключаем jQuery, если еще не подключен
wp_enqueue_script('jquery');
// Подключаем скрипт, который зависит от jQuery
wp_enqueue_script('my-dependent-script', get_template_directory_uri() . '/js/dependent-script.js', array('jquery'), '1.0.0', true);
}
Заключение
Хук wp_enqueue_scripts является незаменимым инструментом для разработчиков WordPress, обеспечивая корректное подключение и управление стилями и скриптами. С его помощью можно избежать дублирования кода и проблем с зависимостями, что в конечном итоге приводит к более чистому и эффективному коду. Используйте данный хук для оптимизации вашего сайта и улучшения пользовательского опыта.