Верх страницы
Обложка к записи «Сенсейский» способ подключения скриптов внутри шорткода
Время для прочтения: 0 мин. 7 сек.

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

Если вы пишите 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>, то этот способ не для вас, так как при данном подходе скрипты убегут в футер.

Ссылки

ВКонтакте
Одноклассники
Linkedin
Telegram
WhatsApp

Комментарии
Подписаться
Уведомить о
guest
16 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
petrozavodsky
3 лет назад

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

campusboy
3 лет назад
Ответить на  Кобзарёв Михаил

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

Артем
3 лет назад

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

Артем
3 лет назад
Ответить на  Кобзарёв Михаил

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

Кирилл
3 лет назад

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

Сергей
Сергей
2 лет назад

А с комментариями так можно сделать? Чтобы загружать скрипт только в том случае, если есть шорткод в комментариях?

Сергей
Сергей
2 лет назад
Ответить на  Кобзарёв Михаил

Есть скрипт, который нужно загрузить при наличии на странице шорткода стандартной галереи. Все написанное в статье работает только в том случае, если шорткод расположен в контенте записи или страницы. Если шорткод написать в комментарии, то скрипт не загружается.

Сергей
Сергей
2 лет назад
Ответить на  Кобзарёв Михаил

Спасибо, буду пробовать