Для дизайнеров и разработчиков, которые работают с WordPress, очень важно знать, как правильно подключаются файлы JavaScript и CSS в тему и/или плагин. Ведь неправильное включение таких файлов может привести к конфликтам с другими темами и плагинами, и создать потенциальные уязвимости.
Есть один вариант правильного подключения JS/CSS файлов в ВордПрессе, и один неправильный, и мы их сегодня детально рассмотрим.
1-й вариант:
Загрузка и подключение скриптов через функцию wp_register_script в файле functions.php
wp_register_script ($handle, $src, $deps, $ver, $in_footer);
где:
$handle — рабочее название скрипта в системе (уникальный ID)
$src — путь к исходному файлу в вашем плагине или теме
$deps — массив, содержащий $handle для любых других скриптов, от которых зависит ваш скрипт
$ver — номер версии скрипта. По умолчанию WordPress будет использовать свой собственный номер версии (версия движка)
$in_footer — вы хотите, чтобы ваш скрипт загружался в футере (подвале сайта)? Тогда используйте значение true. Значение false – это значение по умолчанию, при котором скрипт загружается в секции head.
Рассмотрим пример подключения скрипта в файле functions.php темы:
function podklyucheniye_scriptov(){
// Регистрируем скрипт в системе (для плагина):
wp_register_script( 'nekiy-script', plugins_url( '/js/nekiy-script.js', __FILE__ ) );
// или
// Регистрируем скрипт в системе (для темы):
wp_register_script( 'nekiy-script', get_template_directory_uri() . '/js/nekiy-script.js' );
// После регистрации мы можем ставить в очередь вызов скрипта для любого плагина или темы:
wp_enqueue_script( 'nekiy-script' );
}
//вызываем хук-событие
add_action( 'wp_enqueue_scripts', 'podklyucheniye_scriptov ' );
Теперь более детально о коде.
Для начала мы регистрируем скрипт, чтобы WordPress «узнал» о нем, присваиваем ему системное имя и указываем его расположение.
Затем, если ваш скрипт нуждается в одной из библиотек, которые включены в WordPress, такие как jQuery, вы можете использовать 3-й параметр функции $deps, который «помещает» ваш скрипт после подключения скриптов, указанных в этом параметре:
wp_register_script ('nekiy-script', plugins_url ('/js/nekiy-script.js', __FILE__), array ('jquery'));
Этот параметр является массивом, поэтому вы можете подключать несколько скриптов, например,
array ('jquery', 'jquery-ui-core') .
Если вам нужно, чтобы к названию файла скрипта добавлялась версия, используйте 4-й параметр функции $ver. Для примера воспользуемся сегодняшней датой и посмотрим, как теперь выглядит код:
wp_register_script ('nekiy-script', plugins_url ('/js/nekiy-script.js', __FILE__), array ('jquery'), '29072015');
а на сайте, в разделе head целая строчка подключения JS-скрипта будет выглядеть так:
<script type='text/javascript' src='http://vashsait.com/wp-content/plugins/vashplugin/js/nekiy-script.js?ver=29072015'></script>
Вы можете использовать любую версию нумерации по своему усмотрению.
И, в завершение, рассмотрим 5-й параметр: подключение скрипта в футер сайта — $in_footer для этого в функцию регистрации скрипта добавляем 5-м параметром true.
wp_register_script ('nekiy-script', plugins_url ('/js/nekiy-script.js', __FILE__), array ('jquery'), '29072015', true);
Со всеми параметрами наша функция приобретает следующий вид:
function podklyucheniye_scriptov(){
// Регистрируем скрипт в системе (для плагина):
wp_register_script( 'nekiy-script', plugins_url( '/js/nekiy-script.js', __FILE__ ), array( 'jquery' ), '29072015', true );
// или
// Регистрируем скрипт в системе (для темы):
wp_register_script( 'nekiy-script', get_template_directory_uri() . '/js/nekiy-script.js', array( 'jquery' ), '29072015', true );
// После регистрации мы можем ставить в очередь вызов скрипта для любого плагина или темы:
wp_enqueue_script( 'nekiy-script' );
}
add_action( 'wp_enqueue_scripts', 'podklyucheniye_scriptov' );
Процесс подключения стилей почти идентичен процессу подключения скриптов. Это делается с помощью функции WordPress под названием wp_register_style, а вот его использование в соответствии с WordPress Codex:
wp_register_style ($handle, $src, $deps, $ver, $media);
Обратите внимание, что единственная разница между wp_register_script и wp_register_style в том, что вместо параметра $in_footer, используется параметр $media. Этот параметр может принимать следующие значения: ‘all’, ‘screen’, ‘handheld’, и ‘print’, или любой другой тип носителя, определенный W3C.
Рассмотрим пример подключения файла стилей в файле functions.php:
function podklyucheniye_stiley(){
// Регистрируем файл стилей в системе (для плагина):
wp_register_style( 'nekiy-style', plugins_url( '/css/nekiy-style.css', __FILE__ ), array(), '29072015', 'all' );
// или
// Регистрируем стиль в системе (для темы):
wp_register_style( 'nekiy-style', get_template_directory_uri() . '/css/nekiy-style.css', array(), '29072015', 'all' );
// После регистрации мы можем ставить в очередь вызов файла стилей для любого плагина или темы:
wp_enqueue_style( 'nekiy-style' );
}
//вызываем хук-событие
add_action( 'wp_enqueue_scripts', 'podklyucheniye_stiley' );
Это достаточно полный пример, в котором используется большинство параметров, а на выходе он выглядит следующим образом:
<link rel='stylesheet' id='nekiy-style-css' href='http://vashsait.com/wp-content/plugins/vashplugin/css/nekiy-style.css?ver=29072015' type='text/css' media='all' />
2-й вариант (ошибочный):
Загрузка и подключение скриптов через файлы шаблона header.php и footer.php
Это самый простой вариант, но далеко не идеальный. Использовать его рекомендуется в самых крайних случаях, поскольку это чревато вероятностью появления проблем с функционированием шаблона или плагинов.
Чтобы подключить скрипты и файлы стилей в хедере и футере, нужно лишь добавить строчки кода в файлы header.php (для загрузки в секцию head) и footer.php (для загрузки в подвал сайта):
пример для подключения скриптов
<script type='text/javascript' src='http://vashsait.com/wp-content/plugins/vashplugin/js/nekiy-script.js?ver=29072015'></script>
пример для подключения стилей
<link rel='stylesheet' id='nekiy-style-css' href='http://vashsait.com/wp-content/plugins/vashplugin/css/nekiy-style.css?ver=29072015' type='text/css' media='all' />
Нужно больше информации?
