Бесконфликтное подключение скриптов и стилей в 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, а я заканчиваю данную статью. Надеюсь все понятно, если нет, задавайте вопросы не стесняйтесь.

Похожие записи: Основные функции WordPress – мини-справочник php функций Правильная настройка заголовка H1 в WordPress Виджеты для WordPress: создание и удаление виджетов WP Как удалить ненужный код в head WordPress?
Добавлено коментариев -  8
  • Ден 17.05.2017 20:33

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

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

      Если в header.php у вас статически прописано подключение, типа:

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

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

      <?php wp_head(); ?>
      Ответить
  • Иван 14.03.2018 03:00

    Спасибо друг!

    Узнал что можно прописать true и добавится скрпит в подвал. Проблема переноса была в плагине wpdiscuz, он подключал скрипт обычный wp_enqueue_script , а также wp_localize_script (эта херабора подключает CDATA в шапку и никак не избавиться от неё). Перенос всех скриптов через function выдавал сбой плагина, а вручную прописать в footer строки нельзя, т.к. в этом CDATA есть уникальные данные для каждой странице. В итоге в корневом файле плагина wpdiscuz я прописал в подключаемый скрипт в конец true и он вместе с CDATA вывелся в подвал и нормально работает. УРА! Пол дня) но всё равно УРА!)))

    Ответить
    • Евгений 14.03.2018 03:12

      Пожалуйста! Рад, что у вас все получилось ))

      Ответить
  • Антон 29.03.2018 22:55

    Не подскажете как вставить рекламный банер такого плана?

    Ответить
    • Евгений 29.03.2018 23:42

      Код можно вставить в виджет или прямо в файл шаблона, тот код который вы показали кривой скопируйте его еще раз.

      Ответить
      • антон 30.03.2018 05:53

        куда только не вставлял и в виджеты через текст и с помощью плагинов ничего не помогает помогите пожалуйста очень надо

        Ответить
        • Евгений 30.03.2018 13:20

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

          Ответить

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

Нажимая на кнопку «Добавить», я даю согласие на обработку своих персональных данных в соответствии с политикой конфиденциальности