Как правильно добавлять Javacript-скрипты и CSS-стили в WordPress

Дата публикации:Июль 3, 2013

Недавно мы сделали обзор кода для плагина, написанного одним из наших пользователей. Плагин прекрасно работал, однако его разработчик не придерживался устоявшейся практики загрузки внешних JavaScript-скриптов. В WordPress имеется специальная система для добавления внешних скриптов и стилей, которая помогает избежать конфликтов среди плагинов. Поскольку у большинства пользователей запущено более одного плагина на сайте, разработчикам всегда важно следовать устоявшимся практикам написания кода. В данной статье мы покажем вам, как правильно добавлять JavaScript и стили в WordPress. Это будет особенно полезно для тех, кто только начинает изучать разработку плагинов и тем WordPress.

Ошибочное использование

В WordPress есть функция wp_head, которая позволяет загружать что-либо в разделе head сайта. Разработчики, которые не знают лучшего решения, просто добавляют свои скрипты следующим образом:

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

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

Давайте взглянем на правильное решение.

Зачем подключать скрипты в WordPress?

Система WordPress отличается широким сообществом разработчиков. Тысячи людей во всем мире создают темы и плагины для WP. Чтобы убедиться в том, что все работает правильно, в WordPress есть специальная функция подключения скриптов. Функция обеспечивает систематический способ загрузки JavaScript и стилей. Используя wp_enqueue_script, вы говорите WordPress, когда загружать скрипт, где загружать его и какие у него имеются зависимости.

Функция позволяет использовать встроенные JavaScript библиотеки, которые поставляются в комплекте с WordPress, чтобы не загружать постоянно сторонние скрипты. Это также помогает снизить время загрузки страницы обойти конфликты с другими плагинами и темами.

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

Корректная загрузка скриптов в WordPress происходит достаточно просто. Ниже приведен пример кода, который вам нужно вставить в файл вашего плагина или в файл functions.php вашей темы, чтобы правильно подключить скрипты в WP.

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Объяснение:

Регистрация скрипта начинается с функции wp_register_script(). Эта функция принимает пять параметров:

  • $handle – уникальное название вашего скрипта. В нашем случае это my_amazing_script.
  • $src – расположение вашего скрипта. Мы используем функцию plugins_url  для получения правильного URL нашей папки с плагинами. Как только WP найдет папку, затем он будет искать файл amazing_script.js в этой папке.
  • $deps – зависимости плагина. Поскольку наш скрипт использует jQuery, мы добавим jQuery в область зависимостей. WordPress автоматически загрузит jQuery, если библиотека не была уже загружена ранее.
  • $ver – версия скрипта. Этот параметр не является обязательным.
  • $in_footer – Мы желаем загрузить наш скрипт в футер, потому мы установим значение переменной true. Если вы хотите загрузить скрипт в хэдере, то в таком случае вам достаточно установить переменную в false.

После передачи всех этих параметров в wp_register_script мы можем просто вызвать скрипт в wp_enqueue_script().

Некоторые могут задаться вопросом – почему мы сначала регистрируем скрипт, и только потом уже его подключаем? Ответ прост: это позволяет другим людям в случае необходимости дерегистрировать скрипт без редактирования кода вашего плагина.

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

По аналогии со скриптами вы можете подключать и стилевые таблицы. Взгляните на пример, представленный ниже:

<?php
function wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

Заметьте, что мы использовали в примерах один и тот же хук wp_enqueue_scripts для стилей и скриптов. Невзирая на свое название, эта функция работает и для стилей.

В примерах выше мы использовали plugins_url для указания расположение скрипта или файла стилей, который мы хотим подключить. Однако если вы будете использовать функцию подключения скриптов в своей теме, то используйте вместо plugins_url функцию get_template_directory_uri(). Если вы работаете с дочерней темой, то используйте get_stylesheet_directory_uri(). Пример кода:

<?php

function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}

add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Мы надеемся, что эта статья поможет вам правильно добавить Javascript и стили к своим темам или плагинам WordPress.

Источник: www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/

Поделиться

18 комментариев

  1. Дуо says:

    «Заметьте, что мы использовали в примерах один и тот же хук wp_enqueue_scripts для стилей и скриптов. Невзирая на свое название, эта функция работает и для стилей.»

    Не взирая на wp_enqueue_scripts, для стилей в WP есть свои функции wp_register_style и wp_enqueue_style :)

    • Architect Of Ruin says:

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

  2. Здравствуйте подключите мне джаваскрипт, платно) http://vk.com/id178802767

  3. Николай says:

    Заметил, что в версии 3.8.1 не подключаются скрипты на основе jquery из ряда плагинов. Приходится ручками плагины править

  4. Иван says:

    Здравствуйте. Подскажите пожалуйста — как подключить скрипт — в котором 2 js файла и 2 css — к нему. В частности я говорю о скрипте markitup (возможность редактирования комментариев). Я имею ввиду как правильно подключить все 4 файла правильным способом чтобы они все нормально работали? Обычным, через — легко подключается, а здесь не очень понятно. И второй вопрос: подскажите как сделать чтобы скрипт загружался только на одной странице (или в одном разделе меню) или при определенном действии пользователя, возможно ли это?

    • Дмитрий Алёшин says:

      Вот пример подключения скрипта markitup только для страницы виджетов:

      function register_markitup(){
          wp_enqueue_script( 'markitup-widgets', WP_PLUGIN_URL . '/your-plugin/js/markitup-ajax.js' );
      }
      
      add_action( &quot;admin_print_scripts-widgets.php&quot;, 'register_markitup' );
  5. Иван says:

    Спасибо. Попробую.

  6. Андрей says:

    Здравствуйте!
    Во всех источниках правильного подключения файла стилей в своей теме используется функция get_template_directory_uri(). Но у меня никак не желает подключаться файл с помощью этой функции. Однако работает вот такая конструкция:
    function butterfly_css() {
    wp_enqueue_style( ‘butterfly-style’, get_stylesheet_uri() );
    }
    add_action( ‘wp_enqueue_scripts’, ‘butterfly_css’ );
    Мой файл стилей лежит в основной директории моей темы. Почему не работает get_template_directory_uri()? Тема не дочерняя. В файле стилей указано ее собственное имя и нет ссылки на родительскую.
    Что я недопонимаю?

    • Андрей says:

      Пробовал переложить основной файл стилей в отдельную папку css. Тоже не работает с функцией get_template_directory_uri().
      Правильно ли я понял, что Основной файл стилей ВСЕГДА подключается с помощью get_stylesheet_uri(), а уже дополнительные стили get_template_directory_uri()?

  7. Дмитрий Алёшин says:

    get_template_directory_uri() получает URL папки с текущей темой. Функция может использоваться для подключения любых файлов, в том числе и основного CSS-файла. Проблем с подключением может быть много разных, так на лету идентифицировать вашу проблему сложно. Можете выложить скриншот кода на imgur.com и потом вставить сюда ссылку. Посмотрим, в чем состоит проблема.

    p.s. В принципе, вы можете пользоваться и get_stylesheet_uri(), ничего страшного в этом нет.

    • Андрей says:

      Спасибо за быстрый ответ.
      Вот скрины. С imgur.com работаю первый раз. Там вроде и без регистрации можно грузить:
      http://imgur.com/DUZNxYl
      http://imgur.com/SlIrdgd
      Первый скрин -сам файл стилей, второй- структура моей темы.

      • Андрей says:

        Прошу прощения, сам файл стилей вот. Точнее его шапка.
        http://imgur.com/Qgp8Bpl
        Стоит только в functions заменить get_stylesheet_uri() на get_template_directory_uri(), сразу летит вся тема. Движок пишет ошибку. Нет файла стилей и сайт слетает на дефолтную тему.

        • Дмитрий Алёшин says:

          Вы не указываете точный путь к файлу стилей. В вашем случае нужно писать:

          wp_enqueue_style ('butterfly-style', get_template_directory_uri() . '/style.css');

          Попробуйте так, возможно, что получится.

  8. Андрей says:

    К сожалению, так тоже не получается.Наверное, не зря во всех дефолтных темах основной файл подключается get_stylesheet_uri() . Просто запомню этот факт. Раньше не обращал внимание. Еще раз спасибо за потраченное время, Дмитрий.

    • Дмитрий Алёшин says:

      Ок, главное, что хотя бы таким способом работает. А там посмотрю еще, в чем могут заключаться проблемы.

  9. Юрий says:

    Добрый вечер ! Подскажите , надо ли для вывода
    add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ );
    В header прописать для зацепа вщ_action(wp_enqueue_scripts)

  10. Сергей says:

    А если нужно подключить стили и скрипт с внешнего источника, с другого сайта?

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.