Приблизительное время чтения: 7 минут
Использовать произвольный код JavaScript на сайте WordPress для реализации собственных идей не так сложно, как может показаться на первый взгляд. Для осуществления такой задачи существует несколько различных способов, о которых мы и поговорим в нашей сегодняшней статье.
Полезно: JavaScript и Flash – что лучше?
Добавление
Вставить пользовательский JavaScript на сайте WordPress можно одним из двух основных способов. Первым вариантом считаются разнообразные плагины, которые распространяются на платной или бесплатной основе. С их помощью ресурс может получить тот или иной функционал, и JS-код не является исключением. Они значительно упрощают процесс работы со скриптом, гарантируя правильную работу всего ресурса.
Вторым способом являются встроенные функции и хуки WordPress, которые прописываются в файле functions.php. Среди них стоит отметить функцию wp_enqueue_script(), разработанную специально для страниц под управлением CMS WordPress. Также можно воспользоваться хуки действий, среди которых:
- wp_enqueue_scripts;
- wp_head/wp_footer (для шапки и подвала ресурса);
- login_enqueue_scripts (для раздела входа в систему);
- admin_enqueue_scripts (для административной панели).
Самым простым способом использования скрипта считают прямое указание его в файлах шаблона. Это значит, что тег <script> со всем включенным в него кодом прописывают прямо в теле темы, то есть в файлах header.php или footer.php.
Данный способ является нежелательным, потому что WordPress придерживается определенной последовательности загрузки и получения данных. Использование скрипта в теле шаблона может привести к сбоям и неполадкам в работе темы, плагина или даже ядра системы. А уже это сделает ваш сайт неработоспособным. Лучше отдавать предпочтение более безопасным способам, либо работать с файлами безопасными способами.
Использование плагина
Мы советуем пользоваться для работы со скриптом специализированными модулям, которые точно выполнят свои задачи и помогут избежать появления неисправностей. Первым рассмотренным нами способом будет использование плагина для добавления собственного JavaScript на сайте WordPress. Рекомендуется отдавать предпочтение этому варианту, если вы не хотите напрямую работать с исходными файлами системы или нужно добавить фрагмент кода, который будет использовать вне зависимости от выбранной темы. Это значительно упростит сам процесс добавления скрипта.
Существует несколько видов плагинов, которые различаются между собой способами работы. Первый пример – это плагины для изменения футера и хедера шаблона, которые включают новый код в файлы, задавая им правильную очередность подключения. Шапка сайта редактируется в том случае, если скрипт должен подгружаться до того, как загрузится все остальное содержимое сайта. В нижнем разделе страницы размещают те фрагменты, которые должны появиться последними по очереди.
Insert Headers and Footers – это один из модулей для работы со скриптом в подобном формате. Он добавляет скрипты к хукам действий. Чтобы им воспользоваться, достаточно вставить любую часть кода в два поля ввода, а затем включить скрипты за счет специального тега. Плагин подойдет также для использования новых CSS-стилей, но при этом нужно выбрать тег <style>.
Вторым примером среди плагинов будут модули для добавления пользовательского JS. Большинство из них имеют схожий способ воздействия, но при этом дают доступ к большему количеству параметром при настройке.
Полезно: Как сделать отложенную загрузку JavaScript для ускорения страницы
Одним из таких продуктов является Simple Custom CSS and JS. Он генерирует постоянную ссылку для пользовательских файлов JavaScript, которые сохраняются в папке с контентом ресурса. С ним легко управлять скриптами, как новыми типами записей и другими аналогичными элементами.
Третьим вариантом плагинов мы рассмотрим специфичные скрипты. Наиболее популярные JavaScript-библиотеки выкладывают в свободном доступе плагины, в которые можно вставлять свои скрипты.
Подобные модули сразу предоставляются с рядом встроенных параметров конфигурации, соответствующих той или иной библиотеки JS.
Одним из подобных плагинов будет GA Google Analytics. С его помощью можно интегрировать менеджер Google Analytics на свой сайт напрямую через панель администратора. Модуль содержит функционал, специфичный для его скрипта.
Читайте также:
- Как подключить ваш сайт на WordPress к Fediverse
- Общайтесь С Большим Количеством Клиентов: Появился Наш Каталог Партнеров
- Открыта регистрация на сайте WordPress.com: Бесплатные веб-сайты для студентов
Редактирование
Следующим рассмотренным нами вариантом вставки JavaScript на сайте WordPress будет прямое редактирование файла functions.php дочернего шаблона. Данный способ предполагает, что будут задействованы встроенные функции и хуки системы. Пользователю придется вручную загружать скрипт на собственный сервер, а затем прописывать в документе нужные ссылки.
Для редактирования файлов лучше воспользоваться функционалом дочерней темы, что позволит сохранить все ваши настройки при последующих обновлениях.
Актуально: Как купить яхту мечты?
Пользовательские скрипты обычно загружаются прямо в корень нового шаблона, а если их количество велико, то можно сгенерировать новую папки и назвать ее «scripts». Далее можно добавлять PHP-код, который и будет отображать JS-скрипт, добавленный вами на сайт. Выполнить данное действие можно через административную панель сайта, перейдя на вкладку «Внешний вид» и воспользовавшись редактором.
Функция
Справочник WordPress предлагает воспользоваться функцией wp_enqueue_script(), которая также дает возможность включить код JS. Ее работа заключается в том, чтобы поставить пользовательские скрипты на загрузку в правильном порядке, что не приведет к возникновению сбоев. С ее помощью можно легко добавлять собственный код в шаблоны напрямую в хедер или футер. Функция же по умолчанию перенаправит их в раздел <head>.
Когда речь идет о добавление скрипта в шапку сайта, то нужно прописать собственный дескриптор и путь, а также получить адрес каталога дочерней темы через get_stylesheet_directory_uri().
Далее add_action() позволяет добавить новую функцию tutsplus_enqueue_custom_js() и записать ее через хук действия wp_enqueue_scripts. Таким образом, пользовательский скрипт попадает в очередь загрузки.
Полезно: Создание пользовательских блоков в Gutenberg без JavaScript
Общий код будет при этом выглядеть следующим образом:
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
wp_enqueue_script('example', get_stylesheet_directory_uri().'/scripts/example.js');
}
Функция и хук действия обладают схожими именами, однако при этом являются абсолютно разными методами, предназначенными для взаимодействия с JavaScript на сайте WordPress.
Функция подходит для включения пользовательских скриптом в шапку темы оформления сайта. Для этого в нее требуется передавать определенный ряд параметров:
- массив зависимостей, которые в нашем случае отсутствуют;
- версия скрипта выставляется в false, если мы не хотим добавлять ей нумерацию;
- true ставится из-за того, что мы работаем в футере, который не является стандартным вариантом.
Общий вид самой функции будет выглядеть следующим образом:
wp_enqueue_script(' example', get_stylesheet_directory_uri().'/scripts/example.js', array(), false, true);Если у вас предусматриваются зависимости, то их можно занести в параметр array(). В сети можно найти несколько известных скриптов и библиотек, зарегистрированных в ядре WordPress. Для их добавления достаточно прописать «jquery».
Если же вам нужна зависимость, не зарегистрированная в системе, то можно прописать собственный дескриптор. Но предварительно его следует зарегистрировать и поставить в очередь, при помощи специальной функции wp_enqueue_script().
Для запуска скрипта в административной панели необходимо воспользоваться хуком действия admin_enqueue_scripts, а когда речь идет о странице входа в систему, то есть login_enqueue_scripts – его роль добавить скрипт в очередь только для этого момента.
Полезно: Wp_register_script() выводит rocketscript вместо javascript
Хуки действий
Следующим способом использования JavaScript на сайте WordPress являются хуки действий. Они отображают пользовательские шрифты только в шапке и футере. Подобный механизм подходит для внешних и внутренних скриптов в равной степени.
Наглядным примером использования хука для хедер является следующий фрагмент кода:
<?php
add_action('wp_head', 'tutsplus_add_script_wp_head');
function tutsplus_add_script_wp_head() {
?>
<script> console.log("example head."); </script>
<?php
}
Аналогичный пример будет работать и для хука подвала сайта:
<?php
add_action('wp_footer', 'tutsplus_add_script_wp_footer');
function tutsplus_add_script_wp_footer() {
?>
<script> console.log("example footer."); </script>
<?php
}
Данные скрипты не будут функционировать в панели администратора или на страничке входа на сайт. Для их активации в подобных случаях следует внести коррективы в add_action(), прописав дополнительные хуки действий.
Плагины, которые мы рассмотрели выше, подходят для использования не только внутренних скриптов, но и сторонних файлов с расширением .js. Однако, эти модули выполняют дополнительные проверки, за счет чего соблюдается правильная последовательность загрузки сайта WordPress. Ручной способ добавления скрипта именно с помощью функции является предпочтительным.
Полезно: Какой хук WooCommerce подойдет для действий после оплаты?
Заключение
Использование плагина позволяет избежать множества проблем и неисправностей, которые могут возникнуть при включении JavaScript на сайте WordPress. Именно поэтому мы рекомендуем отдавать предпочтение им. Ручной ввод требует особых знаний и навыков. Но в любом случае, при правильной реализации все скрипты будут функционировать корректно и загружаться в верном порядке.
