Бесконфликтное подключение скриптов и стилей в WordPress

Здравствуйте, друзья! В этой статье речь пойдет о подключении скриптов и стилей в WordPress. Разберем, как избежать конфликт скриптов, и рассмотрим варианты подключения библиотеки jQuery.

Для чего это нужно, если и так все работает?

Бесконфликтный метод необходим по нескольким причинам: предотвращает конфликт при подключении одного скрипта разными плагинами. При таком подключении метод позволяет объединить несколько js файлов в один и отдавать в сжатом виде браузеру для оптимизации скорости загрузки страницы. Так же при правильном подключении скриптов процесс обновления будет проходить безболезненно.

Правильное подключение библиотеки jQuery, скриптов и стилей в WordPress

Начнем с  библиотеки jQuery. Часто библиотеку подключают стандартным способом, прописав в <head>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Первый вариант правильно подключить  jQuery средствами самого WordPress

function my_jquery_method(){
 wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_jquery_method' );

При таком подключении библиотека будет подключена один раз и точно не создаст конфликтов. Данный код нужно вставить в functions.php, а стандартное подключение удалить из header.php.

Я рекомендую второй вариант: воспользоваться CDN Google. При таком подключении jQuery есть преимущества: во-первых, файл подгружается в отдельный поток и весит меньше, так как отдается в сжатом виде, а во-вторых, если пользователь посещал перед вашим сайтом другой сайт, на котором библиотека jQuery подключается таким же способом, то она вообще не будет загружаться, так как уже присутствует в его кэше. Код подключения выглядит вот так:

function my_jquery() {
    wp_deregister_script( 'jquery-core' );
    wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, null );
    wp_enqueue_script( 'jquery' );
}    
add_action( 'wp_enqueue_scripts', 'my_jquery' );

Подключаем скрипты и стили

Также в файл functions.php после подключения библиотеки jQuery подключаем все скрипты и стили.

function my_scripts(){
 wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css', false, null );
 wp_enqueue_script( 'script-one', get_template_directory_uri() . '/js/script.one.js', array(), null, true );
 wp_enqueue_script( 'script-two', get_template_directory_uri() . '/js/script.two.js', array(), null, true );
}
add_action('wp_enqueue_scripts', 'my_scripts');

Теперь разберем код.

  • my_scripts() – пользовательская функция, которую мы регистрируем с помощью add_action() и цепляем на хук-действие wp_enqueue_scripts
  • wp_enqueue_style() – правильно добавляет файл стилей, перед этим регистрируя его, если он не был зарегистрирован ранее
  • get_template_directory_uri() – получает URL текущей темы, к которому добавляется оставшейся путь к файлу . ‘/style.css’
  • wp_enqueue_script() – правильно подключает js файлы

Давайте подробнее разберем параметры функции подключения скриптов – wp_enqueue_script()

  • script-one – название скрипта (присваивается произвольно и пишется в нижнем регистре)
  • get_template_directory_uri() . ‘/js/script.one.js’ – URL js файла
  • array() – массив, в который вписываются названия скриптов, если данный скрипт зависит от каких-то скриптов, подключаемых ранее
  • null – в этом параметре указывается версия скрипта, если оставить пустым, то выведется текущая версия WordPress, а при использовании null никакая версия не будет указана.
  • true – в последнем параметре указывается месторасположение скрипта, если оставить пустым или указать false, то скрипт будет подключен в <head> после тега wp_head(), а если указать  true, то скрипт подключится в футере после тега wp_footer().

Более подробное описание всех функций и хуков смотрите на официальном сайте codex.wordpress.org, а я заканчиваю данную статью. Надеюсь все понятно, если нет, задавайте вопросы не стесняйтесь.

Добавлено коментариев  -    4

  1. Владислав

    functions… а не fanctions

    с гугл подход верный =)

    1. Евгений

      Спасибо! Опечатку исправил 😉

  2. Дэн

    Есть вопрос, при использовании второго варианта производятся аналогичные действия «… код нужно вставить в functions.php, а стандартное подключение удалить из header.php….» ?

    1. Евгений

      Здравствуйте. Да, все так же, код нужно вставить перед подключением всех скриптов, чтобы сначала переподключить jQuery, а ниже подключайте все скрипты.
      Если в header.php у вас статически прописано подключение, типа:

      <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

      тогда да, его нужно удалить, библиотека подключиться динамически там где указан:

      <?php wp_head(); ?>

Добавить комментарий