Подключаем стили и cкрипты в WordPress ( wp_enqueue_scripts )

Как правильно подключать стили и скрипты в WordPress?

На хук wp_enqueue_scripts (который срабатывает в момент хука wp_head с приоритетом 1) принято вешать функции wp_enqueue_style() и wp_enqueue_script(), которые подключают соответственно стили и скрипты.

Для работы этого хука необходима функция wp_head() в файле header.php.

Простой способ подключения:

add_action( 'wp_enqueue_scripts', 'custom_theme_scripts' );
  function custom_theme_scripts() { 
  // подключаем css файл темы
  wp_enqueue_style( 'main-style', get_stylesheet_uri() );
  // подключаем js файл темы
  wp_enqueue_script( 'main-script', get_template_directory_uri() .'/assets/js/example.min.js', array( 'jquery' ), '1.0', true );
}

Если в функции присутствует префикс get_template_, то будет подключен файл из родительской темы, если же префикс get_stylesheet_, то — из дочерней темы, если дочерняя тема активирована (если не активирована — из родительской).

Как сделать подключение скриптов по условию

При подключении скриптов и стилей на хуке wp_enqueue_scripts глобальные переменные уже определены, поэтому все условные теги вида is_home(), is_front_page(), is_archive(), is_page() и подобные будут работать.

Ниже мы подключаем на главную одни стили (slyle-home.min.css), а на страницу категорий другие (slyle-cats.min.css). Общий файл стилей будет подключен на все страницы сайта (slyle-common.min.css).

add_action( 'wp_enqueue_scripts', 'custom_theme_scripts' );
function custom_theme_scripts() {

  wp_enqueue_style( 'slyle-common', get_theme_file_uri( 'assets/css/slyle-common.min.css' ) );

  if ( is_home() || is_front_page() ) {
    wp_enqueue_style( 'slyle-home', get_theme_file_uri( 'assets/css/slyle-home.min.css' ) );
  }

  if ( is_category() ) {
    wp_enqueue_style( 'slyle-cats', get_theme_file_uri( 'assets/css/slyle-cats.min.css' ) );
  }
}

Подключаем стили и скрипт, только на одну страницу

add_action('wp', 'add_my_script');
 function add_my_script(){
 if( is_page(77) ) 
 add_action( 'wp_enqueue_scripts', 'calc_scripts' );
}

function calc_scripts() {
 wp_enqueue_style( 'calc_styles', get_stylesheet_directory_uri() . '/calc/style.css' );
 wp_enqueue_script( 'calc_scripts', get_stylesheet_directory_uri() . '/calc/script.js', array( 'jquery' ) ); }

Где is_page(77) — проверка нужной страницы (id = 77).
По аналогии можно делать любые другие проверки…

Как сделать обновление скриптов в кеше браузера

Один из часто задаваемых вопросов звучит примерно так: «Почему я изменяю css файл, но эти изменения не видны на сайте?».

Ответ: при первом посещении сайта браузер скачивает файлы стилей, скриптов, изображения и т.д. себе в кеш. При каждом последующем посещении браузер уже не будет скачивать их заново, а возьмет из своего локального хранилища (кеша). Это работает в целях оптимизации посещения интернет-ресурсов.

Но есть отличный способ динамически сообщать браузеру об изменениях в ваших файлах — указывать их версии. Это удобно делать с помощью функции filemtime().

Теперь браузер будет проверять, изменилась ли версия (время последнего изменения) файла и только в случае положительного ответа скачивать файл заново.

К тому же, в одной из последних версий добавили функцию get_theme_file_uri(), которая проверяет наличие файла в дочерней теме перед подключением, это довольно удобно.

Если мы применим эти советы, то получим примерно следующее:

add_action( 'wp_enqueue_scripts', 'custom_theme_scripts' );
function custom_theme_scripts() {

  // подключаем css файл темы
  wp_enqueue_style( 'main-style', get_stylesheet_uri(), array(), filemtime( get_theme_file_path( '/style.css' ) ) );

  // подключаем js файл темы
  wp_enqueue_script( 'main-script', get_theme_file_uri( 'assets/js/example.min.js' ), array( 'jquery' ), filemtime( get_theme_file_path( '/assets/js/example.min.js' ) ) );

}

add_action( 'wp_enqueue_scripts', 'rufri_child_style' ); function rufri_child_style() {     $d = time();   wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), $d);   wp_enqueue_style( 'rufri-style', get_stylesheet_directory_uri() . '/rufri.css', array(), $d); }

Как добавить один скрипт после другого

Еще, при работе со скриптами полезно знать, что в третьем параметре функции wp_enqueue_script() можно указать зависимость этого скрипта от других. Например, если вы укажите array('jquery')(где jqueryимя скрипта из первого параметра wp_enqueue_script()  этого скрипта), то скрипт example.min.js будет подключен после скрипта jquery.min.js.

Кроме того, существует полезная функция wp_add_inline_script(), которая позволит вам добавить скрипт прямо в html документ, после указанного. Аналогично для стилей будет работать функция wp_add_inline_style(). Рассмотрим пример подключения slick-слайдера:

add_action( 'wp_slick_scripts', 'enqueue_slick_scripts' );
function enqueue_slick_scripts() {

  wp_enqueue_style( 'slick-style', get_stylesheet_directory_uri() . '/assets/libs/slick/slick.min.css' );
  wp_enqueue_style( 'slick-theme', get_stylesheet_directory_uri() . '/assets/libs/slick/slick-theme.min.css' );
  wp_enqueue_script( 'slick-scripts', get_stylesheet_directory_uri() . '/assets/libs/slick/slick.min.js', array( 'jquery' ) );


$slick_init = 'jQuery(function($) {
  $(".slick-container").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
  });
});';

wp_add_inline_script( 'slick-scripts', $slick_init );

}

Как видите, сначала нужные файлы подключаются с помощью функций wp_enqueue_style() и wp_enqueue_script(), после чего скрипт инициализации слайдера вставляется с помощью wp_add_inline_script() после основного slick.min.js.

Как сделать предварительную регистрацию скриптов

Еще одной важной особенностью работы со скриптами является то, что скрипт можно только зарегистрировать c помощью функции wp_register_script(), а выполнять подключение уже в любом другом месте проекта по необходимым условиям. Рассмотрим на примере:

add_action( 'wp_enqueue_scripts', 'enqueue_masonry_scripts' );
function enqueue_masonry_scripts() {

  wp_register_style( 'masonry-styles', get_stylesheet_directory_uri() . '/assets/libs/masonry/masonry.min.css' );
  wp_register_script( 'masonry-scripts', get_stylesheet_directory_uri() . '/assets/libs/masonry/masonry.min.js', array( 'jquery' ) );

}

Сначала мы регистрируем скрипты библиотеки masonry для того, чтобы сделать красивые фото-галереи у нас на сайте. Эти скрипты не будут подключены в html-документ до тех пор, пока вы не используете функцию wp_enqueue_style() или wp_enqueue_script().

Сами фото-галереи выводятся с помощью шорткодов и мы можем прямо здесь выполнить их подключение. Таким образом эти скрипты будут подключены в html-документе только в том случае, если на странице будет использован этот шорткод.

add_shortcode( 'masonry-gallery', 'masonry_gallery' );
function masonry_gallery( $atts ) {

//<...>



wp_enqueue_style( 'masonry-styles' );
wp_enqueue_script( 'masonry-scripts' );

$masonry_init = 'jQuery(function($) {
   var $container = $(".masonry");
    $container.imagesLoaded( function() {
      $container.masonry({
      columnWidth: ".masonry__item",
      itemSelector: ".masonry__item"
    });
  });
});';

wp_add_inline_script( 'masonry-scripts', $masonry_init );

}

источник