Добавление скриптов jquery в WordPress
Несмотря на то, что в WordPress не было никаких кардинальных изменений уже долгое время, и способ добавления скриптов не менялся много лет, но до сих пор остается некоторая путаница в том, как правильно подключать Javascript. Поскольку jQuery является наиболее популярным фреймворком Javascript, давайте на его примере посмотрим, как правильно добавить простой скрипт в плагин или тему.
Содержание
Как нужно подключать скрипты
В WordPress, процесс подключения скриптов называется «enqueueing» (примерно, постановка в очередь).
Если на обычном HTML сайте мы используем тег для добавления Javascript, то в WordPress нужно делать это с помощью специальных функций.
По сути, они делают тоже самое, т.е. добавляют сценарий на страницу тегом , но при этом, правильно обрабатываются все зависимости, что позволяет соблюдать очередность подключения.
Таким образом, если вы работаете с темой, то вам нужно использовать функцию wp_enqueue_script () в файле functions.php. Только так вы сможете организовать правильное подключение скрипта, не приводящее к конфликтам со встроенными библиотеками. Это выглядит так:
function simple_script () {
wp_enqueue_script('first-simple-script', get_template_directory_uri() . '/js/first-simple-script.js', array('jquery'), '1.1.1', true);
}
add_action ('wp_enqueue_script', 'simple_scripts');
Данная функция принимает 5 аргументов, которые нужно указывать для подключения собственного скрипта. В эти аргументы входят такие данные, как:
- Имя скрипта (должно быть уникальным и записываться в нижнем регистре);
- Полный URL-адрес к файлу или путь по отношению к корневой директории (задается только тогда, когда он подключается первый раз);
- Массив зависимостей, обрабатывающий очередность подключения (не обязательно);
- Номер версии скрипта (если он один), который добавляется к URL в виде строки запроса для очистки кэша;
- Следует ли загружать сценарий перед тегом , а не внутри (по умолчанию, false).
Обратите внимание, хоть массив зависимостей указывать и не обязательно, но если ваш сценарий зависит от какой-то библиотеки, то желательно все-таки это сделать. Это нужно для того, чтобы он всегда загружался после основной библиотеки. Так же, последний аргумент имеет значение true, чтобы подключение происходило в конце страницы и не замедляло ее загрузку.
Помимо этой функции, вы также можете сделать подключение сценария только в панели администратора или на странице входа. Для этого, существуют такие хуки, как admin_enqueue_scripts () и login_enqueue_scripts () соответственно. Они принимают точно такие же параметры, как и в предыдущем случае.
Режим совместимости
WordPress поставляется с уже предустановленной в ядре библиотекой, которую вам необходимо использовать в своем коде. Когда она загружается, то включается режим совместимости, гарантирующий отсутствие конфликтующих между собой библиотек.
Из-за этого режима совместимости, вам нельзя пользоваться в своих сценариях псевдонимом идентификатора $, как в других проектах. Когда вы пишите для WordPress, вам обязательно нужно делать прямое обращение вместо псевдонима, иначе высока вероятность получения ошибок совместимости. Вот что имеется ввиду:
/* Обычный код */
$(function(){
$("title h1").css("font-size", "30px");
});})
/* Код в режиме совместимости */
jQuery(function(){
jQuery("title h1").css("font-size", "30px");
})
Согласитесь, если каждый раз, во всех своих функциях, использовать полную запись вместо простого псевдонима $, то код становится слишком раздутым и его трудно даже просто прочитать, не то что проверить. А если вы разработчик полноценного плагина, с собственной страницей в панели администратора и т.д., то функций у вас становится очень много, а это вообще кошмар. К счастью, эту проблему достаточно просто решить, сделав всего несколько изменений в коде.
Если вы загружаете свои сценарии только в конце страницы, то вы можете обернуть их код в простую анонимную функцию, чтобы приравнивать полную запись к псевдониму. Это выглядит так:
(function($) {
Здесь можно использовать $
})(jQuery);
Если вы, все-таки, загружаете свои сценарии в начале страницы (чего желательно не делать), то вы можете просто включить весь код в функцию document-ready, передавая псевдоним $ по пути. Вот так:
jQuery(document).ready(function($) {
Здесь тоже можно использовать $
});
Используйте условные теги
Многие разработчики рекомендуют использовать условные теги для своих сценариев, чтобы загружать их только тогда, когда это необходимо. Чаще всего, подобный подход применяют для панели администратора, где требуется подключение сценариев только на конкретной странице, а не на всей панели.
Это значительно экономит пропускную способность и время обработки страницы, что означает более быструю загрузку вашего сайта. Более подробно с этим подходом можно ознакомиться в кодексе Вордпресс, на странице хука admin_enqueue_scripts ().
Вывод
Добавлять простые скрипты в WordPress совсем не сложно, если знать, как правильно это делается. Конечно, здесь все немного запутанней, чем в обычном HTML, но это дает и дополнительные преимущества. Например, вы можете самостоятельно управлять зависимостями, что исключает возможность возникновения конфликтов практически полностью.
Загрузка...
