Как добавить JavaScript код на WordPress сайт?

Вы попали на эту страницу, поскольку вы искали Как добавить JavaScript код на WordPress? Ниже вы найдете ответ на данный вопрос:

Как добавить JavaScript код на WordPress сайт?

Если вы хотите добавить пользовательский JavaScript на свой сайт на WordPress, вам не удастся воспользоваться встроенным инструментом Customizer, который доступен для CSS. Вместо этого, вам нужно будет использовать плагин или изменить файл functions.php своей темы.

На WordPress можно добавлять пользовательский JavaScript несколькими способами. Один из таких методов – использование различных плагинов.

Для добавления пользовательского JavaScript на WordPress можно использовать следующие типы плагинов:

• Плагины для редактирования шаблонов header и footer.
• Плагины для добавления пользовательского JS кода на сайт.
• Скрипт-специфические плагины для добавления и настройки сторонних скриптов, таких как Google Analytics или AdSense.

Кроме того, для добавления пользовательского JavaScript на сайт на WordPress можно использовать функции и хуки WordPress в файле functions.php. Для этого можно использовать следующие хуки:

• Хуки действий (action hooks) wp_head и wp_footer.
• Хуки действий admin_enqueue_scripts, login_enqueue_scripts и wp_enqueue_scripts.
• Функцию WordPress wp_enqueue_script().

Выбор способа добавления JavaScript кода зависит от ваших потребностей и уровня технической подготовки. Рассмотрите все возможности и выберите наиболее подходящий вариант для своего сайта на WordPress.

Не делай этого никогда, при добавлении JavaScript

Хоть добавление скрипта на сайт WordPress может показаться простым – достаточно добавить тег <script> непосредственно в файл шаблона header.php или footer.php, но этого делать не следует. Это связано с тем, что у WordPress есть определенная последовательность загрузки, которую необходимо уважать в любом случае.

Если вы вставляете свой пользовательский JavaScript непосредственно в шаблон header.php или footer.php, это может вызвать конфликты с вашей темой, плагинами, работающими на вашем сайте, или ядром WordPress. Вместо этого вы должны использовать одну из техник, подробно описанных в этой статье.

Так что никогда не добавляйте строку, подобную следующей, в файлы header.php или footer.php (даже если это технически возможно):

<script src="https://example.com/wp-content/themes/your-theme/js/script.js"></script>

Плагин для добавления JavaScript на WordPress

Использование плагина – это рекомендуемый способ, если вы:

• не хотите напрямую редактировать исходные файлы;
• хотите добавить JavaScript, который не зависит от темы и будет доступен даже после смены темы.

Существует несколько видов плагинов, которые вы можете использовать для добавления пользовательского JavaScript на ваш сайт WordPress.

Плагины для редактирования header.php и footer.php

Первый вариант – использовать плагин, который позволяет редактировать файлы шаблонов header.php и footer.php вашей темы WordPress. Если вы хотите добавить скрипты, которые загружаются до содержимого страницы, такие как аналитические и отслеживающие скрипты, вам нужно отредактировать шаблон Шапки, в то время как сценарии, которые загружаются после содержимого, идут в шаблон Подвала. Обычно, когда ваш скрипт изменяет элемент, отображаемый на странице, такой как сценарий галереи изображений, его следует поместить в подвал.

Insert Headers and Footers – хороший пример плагина, который позволяет редактировать шаблоны заголовка и подвала. У него простой пользовательский интерфейс с двумя текстовыми областями – одна для заголовка и одна для сценариев подвала. Он добавляет ваши сценарии в хуки действий wp_head или wp_footer.

Вы можете вставлять любой вид сценария в два поля ввода. Вы должны заключить свои сценарии в тег <script></script>. Кроме того, вы также можете использовать этот плагин для добавления пользовательского CSS в ваш шаблон заголовка – вам нужно только заключить его в тег <style></style> (обратите внимание, что CSS всегда должен добавляться в шапку).

Плагины для добавления JavaScript кода

Еще один вариант – это использовать плагин, который позволяет добавлять пользовательский JavaScript на ваш сайт WordPress. Эти плагины очень похожи на плагины для редактирования шапки и подвала, и большинство из них также используют хуки действий wp_head и wp_footer. Однако они обычно предоставляют вам больше опций настройки.

Например, плагин Simple Custom CSS and JS позволяет вам определить постоянную ссылку на пользовательские файлы JavaScript, сохранить их в папке wp-content/, управлять вашими скриптами как пользовательским типом записи и многое другое. Если вы хотите добавить несколько файлов JavaScript на ваш сайт WordPress и сохранить их организованными, вы найдете этот тип плагина очень полезным.

Плагины для определенных скриптов

Наконец, если вы хотите добавить только один сторонний скрипт на свой сайт, то также можно проверить, есть ли для него плагин интеграции для WordPress. Создатели популярных сторонних библиотек JavaScript часто публикуют бесплатный плагин в репозитории WordPress.org, чтобы вы могли легко добавить их инструмент на свой сайт. Самым большим преимуществом этого типа плагина является то, что он обычно содержит встроенные параметры конфигурации для этой конкретной библиотеки JavaScript.

Например, популярный плагин GA Google Analytics позволяет добавить Google Analytics на ваш сайт прямо из административной области WordPress. Он содержит встроенные функции, специфические для скрипта Google Analytics, такие как расширенная атрибуция ссылок, анонимизация IP, настраиваемые объекты трекера и другие.

Редактирование файла functions.php вашей дочерней темы

Помимо использования плагинов, вы также можете использовать встроенные функции и action-хуки WordPress, чтобы добавлять JavaScript на ваш сайт. В этом случае вам нужно отредактировать файл functions.php и вручную загрузить скрипты на сервер. Также рекомендуется создать дочернюю тему для ваших настроек, чтобы вы могли безопасно обновлять родительскую тему, не теряя настраиваемый код. Вы можете загрузить свои пользовательские скрипты в корневую папку дочерней темы или, если у вас есть более одного скрипта, вы можете создать для них папку scripts.

Вам нужно добавить PHP-код, который добавляет или выводит ваш JavaScript, в файл functions.php вашей дочерней темы. Вы можете отредактировать этот файл в своем редакторе кода и вручную загрузить обновленную версию на сервер, или отредактировать его через меню Внешний вид – Редактор тем в вашей панели WordPress (см. скриншот ниже).

Подключение через функцию wp_enqueue_script(). Как добавить JavaScript код на WordPress.

Руководство WordPress рекомендует использовать функцию wp_enqueue_script() для добавления пользовательских скриптов на ваш сайт. Эта встроенная функция соблюдает последовательность загрузки WordPress и добавляет ваши пользовательские скрипты в правильном порядке, так что они не будут конфликтовать с другими скриптами, загруженными ядром WordPress и плагинами, работающими на вашем сайте.

С помощью wp_enqueue_script() вы можете добавить свой JavaScript код как в шапку, так и подвала. По умолчанию он добавляет скрипты в раздел <head> страницы.

Если вы хотите добавить свой скрипт в шапку, вам нужно определить свой собственный идентификатор (‘custom’ в примере ниже) и путь к скрипту. Как вы можете видеть ниже, я также использовал функцию get_stylesheet_directory_uri() WordPress, чтобы получить URI каталога дочерней темы. А функция add_action() добавляет пользовательскую функцию geniuscourses_enqueue_custom_js() для подключения к действию wp_enqueue_scripts, которое позволяет добавлять скрипты.

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'geniuscourses_enqueue_custom_js');
function geniuscourses_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js');
}

Будьте осторожны, хотя встроенная функция WordPress wp_enqueue_script() и action-хук wp_enqueue_scripts имеют почти одинаковое название, они представляют собой разные вещи.

Кроме того, помимо добавления скриптов для шапки, вы также можете использовать функцию wp_enqueue_script() для добавления JavaScript в подвал (footer). Однако в этом случае вам также необходимо определить все необязательные параметры:

1. зависимости: array() так как у нас пока нет зависимостей.
2. версия скрипта: false, так как мы не хотим добавлять номера версий.
3. расположение в шапке или подвале: true, так как мы переключаемся на шаблон подвала, который является нестандартным вариантом. (false – расположение в шапке)

/* Custom script with no dependencies, enqueued in the footer */
add_action('wp_enqueue_scripts', 'geniuscourses_enqueue_custom_js');
function geniuscourses_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', 
    array(), false, true);
}

Если ваш скрипт зависит от других скриптов, вам нужно добавить их в параметр array() функции wp_enqueue_script(). Есть несколько популярных скриптов и библиотек, таких как jQuery, которые уже зарегистрированы в ядре WordPress, поэтому вы можете добавить их, используя их зарегистрированный handle (‘jquery‘ в примере ниже).

/* Custom script with jQuery as a dependency, enqueued in the footer */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/custom.js', 
    array('jquery'), false, true);
}

Если у вас есть зависимость, которая не зарегистрирована в WordPress, вам нужно зарегистрировать и включить ее с помощью другой функции wp_enqueue_script() перед тем, как добавить ее в качестве зависимости, используя ее handle.

Если вы хотите подключить свой скрипт в панели администратора вместо фронтэнда вашего сайта, вам нужно использовать action-хук admin_enqueue_scripts вместо wp_enqueue_scripts в функции add_action(). А для экрана входа в систему вы должны использовать action-хук login_enqueue_scripts, которое добавляет пользовательские скрипты только на страницу входа в систему.

Распечатайте свой встроенный скрипт с помощью хуков действия wp_head или wp_footer.

Хотя документация WordPress рекомендует использовать функцию wp_enqueue_script() для пользовательских скриптов, вы также можете добавлять встроенные скрипты на свой сайт с помощью хуков действия wp_head и wp_footer. Вместо добавления ваших пользовательских скриптов, эти хуки только выводят их в шаблоне шапки или подвала. Поэтому вы должны использовать эту технику только для добавления встроенных скриптов, но не для внешних .js файлов.

Вот как можно использовать хук действия wp_head, чтобы вывести скрипт в шапке:

<?php
/* Inline script printed out in the header */
add_action('wp_head', 'geniuscourses_add_script_wp_head');
function geniuscourses_add_script_wp_head() {
    ?>
        <script>
            console.log("I'm an inline script tag added to the header.");
        </script>
    <?php
}

и пример как вывести скрипт в подвале вашего сайта:

<?php
/* Inline script printed out in the footer */
add_action('wp_footer', 'geniuscourses_add_script_wp_footer');
function geniuscourses_add_script_wp_footer() {
    ?>
        <script>
            console.log("I'm an inline script tag added to the footer.");
        </script>
    <?php
}

Так как wp_head и wp_footer срабатывают только на фронт-енде вашего сайта, скрипты, добавленные с помощью этих хуков, не загружаются на странице администратора и на странице входа. Чтобы добавить скрипты в область администратора, вы должны вместо этого использовать хуки admin_head и admin_footer в функции add_action(). А если вы хотите вывести скрипты на странице входа, используйте хуки login_head и login_footer.

Обратите внимание, что упомянутые выше плагины (Insert Headers and Footers и Simple Custom CSS and JS) используют wp_head и wp_footer не только для встроенных сценариев, но и для внешних .js-файлов, однако вы все равно не должны делать это, если не знаете, что делаете. Это связано с тем, что плагины выполняют дополнительные проверки, которые гарантируют, что соблюдается последовательность загрузки WordPress. Если вы хотите добавить свои js скрипты вручную, намного безопаснее и проще придерживаться рекомендуемой функции wp_enqueue_script().

Завершение. Как добавить JavaScript код на WordPress.

Вы можете добавлять JavaScript на свой сайт WordPress либо с помощью плагина, либо редактированием файла functions.php вашей темы или дочерней темы.

Использование плагина является рекомендуемым методом, если вы не хотите редактировать исходные файлы, так как эти плагины обеспечивают правильную последовательность загрузки ваших пользовательских скриптов. Ручное добавление скриптов в файл functions.php позволяет привязать ваши пользовательские скрипты к вашей теме, не прибегая к использованию стороннего плагина на вашем сайте WordPress.

Александр Сокирка

Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.