Всем привет друзья!
Эта небольшая инструкция поможет вам разобраться с подключением Javascript файлов к вашему сайту на Wordpress.
Первым делом нужно загрузить ваш JS файл на хостинг где установлен Wordpress (Что такое хостинг и как с ним работать)
Я буду размещать файл(test.js) в папке моей темы, затем в папке assets и потом в папке js, т.е. получу следующий путь:
https://v-fetisov.ru/wp-content/themes/ryancv/assets/js/test.js
Мы можем попробовать пройти по данному пути, что бы убедиться что файл действительно лежит там, где нужно.
После того, как мы загрузили файл в нужную папку, нам необходимо отредактировать файл functions.php в корневой папке нашего шаблона WP, в моем случае путь будет следующий:
https://v-fetisov.ru/wp-content/themes/ryancv/functions.php
В самом низу functions.php мы и подключим наш JS файл при помощи add_action и функции wp_enqueue_script
wp_enqueue_script - стандартная WP функция, очень важно подключать скрипы именно через нее, а не просто вставлять тэг <script> внизу страницы, как мы привыкли это делать в обычных html файлах.
https://gist.github.com/Flin007/f7b7a84f01cd5e4d8436eead9630d2bf
Небольшие пояснения:
get_template_directory_uri() . '/assets/js/test.js' - тут происходит конкатенация, т.е. склеивание пути до папки с нашей темой и строки '/assets/js/test.js'.
Если бы файл лежал не в папке с темой, а например в папке js, в корне нашего сайта, то мы бы подключили его так '/js/test.js' и не использовали бы функцию get_template_directory_uri()
Немного теории об wp_enqueue_script
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
$handle - обязательный параметр, строка в нижнем регистре, подразумеваeт название скрипта, можно указать версию добавив например ?v=2 в конце названия
$src - путь до файла, лучше использовать get_template_directory_uri() для тем и plugins_url() для плагинов, но можно указать и полный путь, например https://v-fetisov.ru/wp-content/themes/ryancv/assets/js/test.js
$deps - массив, в нем можно передать названия всех скриптов, от которых зависит наш, подключаемый скрипт. Все эти скрипты будут загружены перед загрузкой нашего.
$ver - строка, указывает версию скрипты, необходима для того, что бы человек получил новую версию после внесения изменений, а не ту, что закешировалась у него в браузере
$in_footer - логический, по умолчанию false. Если установить true, скрипт будет подключен в подвале сайта где вызывается wp_footer()
На этом все, если статья была вам полезной - обязательно поставьте лайк, а если остались вопросы - задавайте их в комментариях!
