Как правильно подключать скрипты в Wordpress?

Question

[AltaiR]

Привет всем. Натягиваю верстку на Wordpress. Есть много разных слайдеров на разных страницах Wordpress. Слайдер я использую Slick. Так основной файл slick.min.js я подключил как положено в файле functions.php А есть ли смысл для каждого кусочка кода где инициализируется слайдер:

$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

создавать отдельный js-файл и их тоже подключать в functions.php и еще писать условия для каждого файла типа if ( is_front_page() ) и т.д, или же можно этот кусок кода просто прямо в файл шаблона страницы встраивать? и будет ли это правильным?

Answer 1

[Roman]

Основной файл слайдера подключается через wp_enqueue_script.
Обрати внимание на $in_footer

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Дополнительный код можно и имхо правильно встраивать напрямую в код страницы (т.е. не создавая отдельный файл), используя wp_add_inline_script.
Полный пример:

add_action('wp_enqueue_scripts', function(){
	wp_enqueue_script( 'prefix_slick', get_stylesheet_directory_uri() .'/js/slick.min.js' );
	// добавим произвольный код
	if ( is_front_page() ) {
		wp_add_inline_script( 'prefix_slick', '$(document).ready(function(){ $(".your-class").slick({ setting-name: setting-value }); });' );
	} else if ( is_page_template( $template ) ) {
		wp_add_inline_script( 'prefix_slick', '' );
	}
});

Получим в HTML коде

<script type='text/javascript' src='http://site.ru/wp-content/themes/mytheme/js/slick.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});
</script>

Comments

[AltaiR]

спасибо за развернутый ответ. Если можно встраивать напрямую в код страницы то зачем тогда использовать wp_add_inline_script ? ведь можно же и без этого ставить?

[Roman]

AltaiR: можно и основной файл слайдера подключить напрямую прописав в файле footer.php, но это плохая практика. Функции нужны для управления скриптами (и стилями), чтобы в случае необходимости переопределить скрипт или отключить.

[AltaiR]

Roman: спасибо)

Answer 2

[Вася Петров]

Как правильно подключать скрипты в Wordpress?

С пом https://developer.wordpress.org/reference/function...

Comments

[AltaiR]

ты хотя бы вопрос дочитай до конца