Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 03.07.2022)
35970
солдат
217
самолетов
187
вертолетов
1584
танков
3744
ББМ
801
артиллерия
105
ПВО
246
РСЗО
2618
машин
15
корабли и катера
Как подключить JavaScript и CSS в тему или плагин WordPress

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

 

 

Добавить комментарий

Ваш адрес email не будет опубликован.