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

Question

[Александр Тягунов]

Объясните пожалуйста раз и на всегда такому чайнику как я, как правильно подключать javascript-ы и дополнительные стили к сайту под управлением wordpress. Прочел множество статей на эту тему, но то ли я совсем по пояс деревянный, то ли у всех свое мнение относительно этого вопроса, но понимания как это делать у меня нет=(

Answer 1

[WP Panda]

https://codex.wordpress.org/%D0%A1%D0%BF%D1%80%D0%...

c пояснениями - wp-panda.com/wp-enqueue-script

Answer 2

[Игорь Воротнёв]

Запомните несколько простых правил.

1. Никогда не используйте jQuery из стороннего источника (например, Google CDN). НИКОГДА. И другие библиотеки тоже. Кроме того, чаще всего не нужно jQuery грузить принудительно, достаточно для своего кастомного скрипта указать аргументом dependency значение array( 'jquery' ).
2. Скрипты и стили подключаются ТОЛЬКО через функции wp_register_style() / wp_register_script() и wp_enqueue_style() / wp_enqueue_script(), вызов функций группируется в одну функцию, которая вешается на соответствующие хуки. Как правильно делать - написано в документации.
3. Не обязательно подключать все вручную. Если вы правильно зарегистрировали ваши скрипты и стили (функциями wp_register_*), то можете просто подгрузить только один свой кастомный срипт (main.js например), а к нему все остальные указать в виде зависимостей (как и jQuery в п.1). Кроме того, можно (и нужно) подключать скрипты и стили только там, где они нужны. Например, если слайдер у вас только на главной, оберните его подгрузку в if( is_home() ).
4. На продакшне убирайте ?xxx (версии скриптов и стилей), используйте плагин типа WP Better Minify для минификации и конкатенации скриптов и стилей.

Кажется все.

Comments

[Ferragut]

Можете объяснить на счет минификации стилей и скриптов, я только начал изучать вордпресс, пока только верстальщик и обычно использую по несколько js и css библиотек + конечно свои(кастомные) стили и скрипты . Конкатенирую и минифицирую все это Gulp-ом в style.min.css и script.min.js и все работает.
Но во всех уроках по верстке, вордпрессу всегда подлючают отдельно?
Частично я уже понял, что это чтобы подключать разное количество скриптов в зависимости от страницы(в вордпрессе) А если это лендинг или статический сайт?

[Игорь Воротнёв]

Ferragut: Что именно вас интересует? Зачем это делать или на каком этапе?

[Ferragut]

Да, и то и другое.

[Игорь Воротнёв]

Ferragut: Если вы используете HTTP/1.1, то на выходе делайте минификацию скриптов и стилей + конкатенацию в один файл. Впрочем, на стороне WP это делается с помощью плагинов, которые собирает все вместе, поэтому не обязательно делать это галпом. Если используете HTTP/2 то это не нужно вообще. Ну ок, минификация еще возможно (надо тестить), а вот конкатенация не только не нужна.

Answer 3

[Martyer]

CSS: прописать в файле функций вашего шаблона wp_enqueue_style( 'FILENAME', get_template_directory_uri() . '/css/FILENAME.css' );

JS: прописать в файле функций вашего шаблона wp_enqueue_script( 'FILENAME ', get_template_directory_uri() . '/js/FILENAME.js', array( 'jquery' )

FILENAME замени на свои имена файлов.