Как подключить JavaScript и CSS в тему или плагин WordPress
Для дизайнеров и разработчиков, которые работают с 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' />
Последние посты
Самые красивые и впечатляющие мосты со всего мира (ТОП-10)
Мост — это нечто большее, чем просто сооружение, соединяющее два берега. Для того, чтобы появился… Читать далее
Соломон
Жизнь нас учит, что свою пару мы познаем, когда разводимся, своих братьев мы познаем, когда… Читать далее
Чак Паланик
Кто может — тот делает. Кто не может — тот критикует Чак Паланик Читать далее
Ричард Бах
Ни одно желание не дается тебе отдельно от силы, позволяющей его осуществить. Хотя, возможно, для… Читать далее
Стивен Кинг
Жизнь – это непрерывный опыт, и даже самые плохие моменты занимают свое место в пазле… Читать далее
неизвестный автор
Люди, которые любят одиночество, дорого заплатили за дружбу с кем-то... неизвестный автор Читать далее