Верх страницы
Обложка к записи «Сенсейский» способ подключения скриптов внутри шорткода
Время для прочтения: 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>, то этот способ не для вас, так как при данном подходе скрипты убегут в футер.

Ссылки

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

16 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
petrozavodsky
7 лет назад

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Предыдущая запись
Следующая запись

Давайте дружить
в Telegram

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы