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

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

Ссылки

Источник: https://www.kobzarev.com/wordpress/sensible-script-enqueuing-shortcodes/

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

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

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

%d такие блоггеры, как: