К сожалению, иногда бывает так, что есть хорошие и удобные инструменты, но по каким-то причинам ими пользуются далеко не все и не всегда. В результате возникают проблемы, казалось бы, на ровном месте.
Один из таких примеров – подключение JavaScript кода в WordPress.
Этот движок предоставляет удобную функцию wp_enqueue_script. С её помощью можно обеспечить необходимый порядок подключения скриптов и, при этом, гарантируется, что один и тот же скрипт будет подключён только один раз.
Кстати, аналогичные возможности есть и в различных фреймворках, например, Yii.
Но разница между фреймворком и WordPress в том, что с помощью последнего можно создать сайт, не читая документацию, во всяком случае, ту часть, которая касается API. В этом нет ничего плохого, но можно столкнуться с некоторыми нюансами. О них речь пойдет ниже.
Основные проблемы и причины их появления
Возьмем самую распространённую ситуацию. Есть сайт на WP, и есть готовый JS скрипт, который нужно к этому сайту подключить.
Что написано в инструкции по установке скрипта?
«Вставьте тег <script…> в заголовок страницы (между <head> и </head>)».
Тут все правильно. Разработчик пишет инструкцию на общий случай, а не конкретно под WP.
Следующий вопрос. Где находятся теги <head> и </head> в WP?
Обычно в файле header.php текущей темы.
Т.е. если делать строго по инструкции, то нужно добавить теги <script…> в header.php.
Именно здесь и возникают проблемы.
Точнее, если ваш JS скрипт не зависит ни от каких библиотек, и не используется никакими плагинами, то всё будет в порядке, но в противном случае ситуация сложнее.
Проблема 1. Многократная загрузка JS файлов.
Возникает если подключить JS скрипт в файле темы, а затем использовать плагин, которому нужен этот же скрипт. Чаще всего такое происходит с JavaScript библиотеками.
Разработчики плагинов доступа к файлам вашей темы не имеют, но должны гарантировать подключение необходимых скриптов. Поэтому для них единственным вариантом будет использование wp_enqueue_script.
В результате один раз JavaScript файл подключается вашим тегом, второй – тегом, который добавит плагин. Это приводит к увеличению веса страницы, времени её загрузки, росту трафика сервера.
Проблема 2. «Неработающие» плагины.
Вытекает из первой.
Рассмотрим небольшой пример. Допустим скрипты подключены в header.php следующим образом.
<head> ... <script src="...jquery.js" ...></script> <script src="...jquery.my-plugin.js" ...></script> <?php wp_head(); ?> </head>
Что произойдет если какой-то из плагинов WP подключит jQuery?
Функция wp_enqueue_script добавит теги script там, где находится вызов wp_head(). А это, помимо повторной загрузки jquery, означает, что и объект jQuery будет создан заново. И он будет использоваться вместо первого объекта, к которому подключили плагин.
В принципе, проблему можно решить так.
<head> ... <?php wp_head(); ?> <script src="...jquery.my-plugin.js" ...></script> </head>
Но если вы в админке WP отключите плагин, который использует jQuery, то my-plugin.js также перестанет работать. Т.к. jQuery будет не подключена.
Как избежать этих проблем?
Просто не трогайте header.php. В папке с темой есть файл functions.php в который нужно добавить следующий код.
<?php
if ( !is_admin() ) {
function register_my_js() {
wp_enqueue_script( 'my-script', get_bloginfo( 'template_directory' ).'/my-script.js', array( 'jquery' ), '1.0', true );
}
add_action('init', 'register_my_js');
}
?>
Этот код подключит скрипт на всех страницах сайта, кроме админки. Если нужно подключать скрипт только на части страниц, можно в условие проверки добавить is_single(), is_home() и т.д.
Кроме того, библиотеку jQuery явно подключать не нужно, т.к. она указана в массиве зависимостей (третий параметр wp_enqueue_script). WordPress подключит её сам до вашего плагина.
Для справки
Функция wp_enqueue_script подключает JS файл если он не был подключен ранее. Т.е. можно вызвать её несколько раз для одного и того же скрипта и, при этом, скрипт будет вставлен только один раз.
Параметры.
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
$handle – название скрипта, должно быть уникальным.
$src – URL скрипта. Если скрипт был предварительно зарегистрирован с помощью wp_register_script, то его указывать не обязательно.
$deps – массив зависимостей (нужно перечислить названия JS скриптов, которые должны быть загружены перед данным).
$ver – версия скрипта (необязательный).
$in_footer – если равен true, скрипт будет подключен в конце страницы, там где находится wp_footer(). Обычно в файле footer.php перед </body>.
Заключение
Очень советую почитать статью Function Reference/wp enqueue script. Она небольшая, но в ней вы найдёте несколько интересных примеров. Например, объясняющих как заменить версию библиотеки jQuery, которая идёт в дистрибутиве WP.
Интересное в сети.
Возможно, самый оригинальный подарок:фруктовые корзины с доставкой по Москве.
Технология кейс-стади: отлично работает при продаже услуг.
