Как подключить 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' />

Теги: WordPress