Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 02.12.2024)
743920
солдат
369
самолетов
329
вертолетов
9478
танков
19397
ББМ
20953
артиллерия
1019
ПВО
1253
РСЗО
30606
машин
28
корабли и катера
Как подключить 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 не будет опубликован. Обязательные поля помечены *


Быстрый доступ по сайту SebWeo
Угости меня кофе