Время для прочтения: 1 мин. 15 сек.

«Сенсейский» способ подключения скриптов внутри шорткода

Если вы пишите WordPress-плагин, который использует шорткоды и для его работы необходим какой-то JavaScript-файл, то у вас возникает соблазн подключить его через хук wp_enqueue_scripts. Поясню, почему так делать не стоит.

Обычный способ

function mihdan_wp_enqueue_scripts() {
	wp_enqueue_script( 'script-name', plugins_url( '/js/script.js' , __FILE__ ), array(), '1.0.0', false );
}
add_action( 'wp_enqueue_scripts', 'mihdan_wp_enqueue_scripts' );

С первого взгляда всё работает идеально и соответствует кодексу, но данный пример можно использовать только на этапе разработки, так как ваш JavaScript-файл загружается абсолютно на всех страницах, даже там, где он не нужен и где нет шорткода от плагина.

Это очень неэффективно с точки зрения оптимизации загрузки сайта.

Этот код можно немного оптимизировать, если обернуть его в условные теги и подключать, например, только на страницах архивов:

function mihdan_wp_enqueue_scripts() {
	if ( is_archive() ) {
		wp_enqueue_script( 'script-name', plugins_url( '/js/script.js' , __FILE__ ), array(), '1.0.0', false );
	}
}
add_action( 'wp_enqueue_scripts', 'mihdan_wp_enqueue_scripts' );

Уже лучше, но, всё-равно, скрипт подключается на страницах, где нет вашего шорткода.

Сенсейский метод

Суть его заключается в том, чтобы зарегистрировать ваш JavaScript-файл при возникновении события wp_enqueue_scripts, а подключить только внутри вашего шорткода.

Для начала зарегистрируйте ваш JavaScript-файл без подключения через wp_register_script():

function mihdan_wp_enqueue_scripts() {
	wp_register_script( 'script-name', plugins_url( '/js/script.js' , __FILE__ ), array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mihdan_wp_enqueue_scripts' );

Этим вы дадите знать ядру WordPress о существовании вашего файла, но он не будет загружен на страницу.

Последний параметр true в функции wp_register_script() даёт указание движку вставлять ваш файл в подвал сайта, а не его шапку, как это сделано по-умолчанию.

Следующим шагом будет подключение вашего скрипта по требованию, то есть прямо внутри шорткода:

function mihdan_shortcode( $atts ) {
	// Код вашего шорткода
	...

	// Подключение вашего скрипта по требованию
	wp_enqueue_script( 'script-name' );
}
add_shortcode( 'mihdan_shortcode', 'mihdan_shortcode' );

Получается, что скрипт подключается в футер только на тех страницах, где он реально необходим и только, если на этих страницах есть ваш шорткод, профит.

Если вам надо, чтобы скрипты в обязательном порядке загрузились в <header>, то этот способ не для вас, так как при данном подходе скрипты убегут в футер.

Ссылки

Пошерить
Плюсануть
Отправить
Вотсап

WordPress Digest Мой канал в Телеграм, посвящённый WordPress

Благодарю за гайд, нашёл наконец таки 🙂

Кобзарёв Михаил

Рад, что помог

Все верно. У меня другой вопрос: как будет себя вести такое подключение, если на странице например 5 раз используется такой шорткод? Каждый раз подключаться? Или только один раз, а остальные запросы проигнорируются?

Кобзарёв Михаил

Подключится только один раз, о чем написано в документации:

Функция добавляет скрипт, только если он еще не был добавлен и другие скрипты от которых он зависит зарегистрированы.

Внутри ядра слаг скрипта кладется в ключ массива, поэтому двух одинаковых быть не может

Понятно, спасибо

Кобзарёв Михаил

Пожалуйста

А если обязательно в шапке надо подключить этот скрипт ?

Кобзарёв Михаил

Тогда просто не трогайте последний параметр в функции wp_register_script(). Если его не указывать — файл по-дефолту подключится в шапке.

Миш, как может скрипт, указанный на вывод в шоткоде, попасть в шапку? Ну никак же)) Когда шоткод преобразуется в контенте, то шапка уже сформирована. Так что скрипт улетит на хук wp_footer.

Кобзарёв Михаил

Честно, не заморачивался настолько глубоко шапочным вопросом, так как, обычно, у меня все скрипты опущены в футер.

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

1. Нажимая на кнопку "Отправить", я даю согласие на обработку персональных данных.

2. Для вставки кода используйте специальные теги [code lang="php"]ваш код[/code]