Как добавить js в wordpress

Как добавить js в wordpress

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

Чтобы зарегистрировать и подключить скрипт, необходимо использовать хук wp_enqueue_scripts. Например, для подключения файла custom.js из папки темы, используется следующий код: wp_enqueue_script(‘custom-js’, get_template_directory_uri() . ‘/js/custom.js’, array(), null, true);. Последний аргумент true указывает, что скрипт должен быть загружен в футере, что снижает влияние на время загрузки страницы.

Для Child-тем необходимо использовать функцию get_stylesheet_directory_uri() вместо get_template_directory_uri(), чтобы избежать путаницы при наследовании. Также важно соблюдать порядок подключения скриптов, особенно если один зависит от другого – для этого используется параметр dependencies в виде массива, например: array(‘jquery’).

Добавление JavaScript в административную часть сайта осуществляется через хук admin_enqueue_scripts. Это позволяет подключать скрипты только там, где они действительно нужны, что улучшает производительность и упрощает отладку. Например, можно ограничить загрузку скрипта только на странице настроек темы с помощью проверки get_current_screen()->id.

Подключение собственного JavaScript-файла через functions.php

Подключение собственного JavaScript-файла через functions.php

Для подключения собственного JavaScript-файла в теме WordPress необходимо использовать хук wp_enqueue_scripts в файле functions.php текущей темы. Это обеспечивает корректную загрузку скриптов с учётом зависимостей и порядка подключения.

  1. Откройте файл functions.php в корне вашей темы.
  2. Добавьте следующий код:
function mytheme_enqueue_scripts() {
wp_enqueue_script(
'custom-script', // Уникальный идентификатор
get_template_directory_uri() . '/js/custom.js', // Путь к файлу
array('jquery'), // Зависимости (опционально)
null, // Версия (null – без версии)
true // true – подключение в footer
);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');
  • get_template_directory_uri() – возвращает URL текущей темы. Для дочерней темы используйте get_stylesheet_directory_uri().
  • Убедитесь, что файл custom.js находится в каталоге /js внутри вашей темы.
  • Если скрипт не зависит от других библиотек, укажите пустой массив в параметре зависимостей.
  • Рекомендуется подключать скрипты в нижней части страницы (true в последнем параметре), чтобы ускорить загрузку контента.

Никогда не вставляйте теги <script> напрямую в шаблоны. Используйте только wp_enqueue_script – это гарантирует совместимость с плагинами и кэшированием.

Использование wp_enqueue_script для добавления скриптов

Функция wp_enqueue_script обеспечивает правильное подключение JavaScript-файлов в WordPress, предотвращая конфликты и дублирование. Её вызов должен осуществляться внутри хука wp_enqueue_scripts для фронтенда или admin_enqueue_scripts для панели администратора.

function my_theme_enqueue_scripts() {
wp_enqueue_script(
'my-custom-script', // Уникальный идентификатор
get_template_directory_uri() . '/js/custom.js', // Путь к файлу
array('jquery'), // Зависимости
'1.0.0', // Версия
true // Подключение в footer
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
  • Уникальный хендл: каждый скрипт должен иметь уникальное имя, чтобы избежать конфликтов.
  • Корректный путь: используйте get_template_directory_uri() или get_stylesheet_directory_uri() для доступа к файлам темы или дочерней темы.
  • Зависимости: указывайте библиотеки, от которых зависит скрипт (например, jquery), чтобы обеспечить правильный порядок загрузки.
  • Версионирование: задавайте версию для облегчения кэширования и обновления файлов.
  • Размещение: параметр true размещает скрипт перед закрывающим </body>, улучшая производительность загрузки.

Для загрузки скрипта только на определённых страницах используйте условные теги:

function enqueue_conditional_script() {
if (is_page('contacts')) {
wp_enqueue_script(
'map-script',
get_template_directory_uri() . '/js/map.js',
array(),
null,
true
);
}
}
add_action('wp_enqueue_scripts', 'enqueue_conditional_script');

Не используйте <script> напрямую в шаблонах. Это нарушает архитектуру WordPress и мешает кешированию и управлению зависимостями. Используйте wp_register_script для предварительной регистрации скрипта, если он подключается не сразу:

wp_register_script('lazy-load', get_template_directory_uri() . '/js/lazyload.js', array(), '2.0', true);
wp_enqueue_script('lazy-load');

Все кастомные скрипты подключайте через functions.php или в соответствующих плагинах. Это обеспечит масштабируемость и совместимость темы с другими компонентами.

Добавление инлайнового JavaScript к определённым страницам

Добавление инлайнового JavaScript к определённым страницам

Чтобы вставить JavaScript-код только на конкретных страницах WordPress, используйте условные теги внутри функции wp_head или wp_footer. Добавьте следующий код в functions.php активной темы:

function add_inline_js_to_specific_page() {
if (is_page('kontakt')) {
echo '<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("Скрипт для страницы Контакты активен");
});
</script>';
}
}
add_action('wp_footer', 'add_inline_js_to_specific_page');

Замените kontakt на слаг нужной страницы. Вместо is_page() можно использовать is_single(), is_front_page() и другие условные теги для более точного таргетинга.

Размещайте код в wp_footer, чтобы избежать блокировки рендеринга страницы. Если необходима загрузка до отображения контента – используйте wp_head, но минимизируйте объём скрипта.

Инлайновый код должен быть безопасен: экранируйте переменные через wp_json_encode() при передаче данных из PHP в JavaScript.

Загрузка скрипта только на определённых шаблонах

Загрузка скрипта только на определённых шаблонах

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

Пример подключения скрипта только на шаблоне страницы page-contact.php:

function my_custom_scripts() {
if (is_page_template('page-contact.php')) {
wp_enqueue_script('contact-form', get_template_directory_uri() . '/js/contact-form.js', array('jquery'), null, true);
}
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

Для шаблонов записей используйте is_single() с указанием ID, слага или массива:

if (is_single(array(42, 'my-post-slug'))) {
wp_enqueue_script('single-post-script', get_template_directory_uri() . '/js/single.js', array(), null, true);
}

Если шаблон создаётся с помощью get_header() и других функций, а не через is_page_template(), можно проверять get_page_template_slug() в комбинации с is_page():

if (is_page() && get_page_template_slug() === 'custom-template.php') {
wp_enqueue_script('custom-template-script', get_template_directory_uri() . '/js/custom.js', array(), null, true);
}

Для типов записей применяйте is_singular():

if (is_singular('product')) {
wp_enqueue_script('product-script', get_template_directory_uri() . '/js/product.js', array(), null, true);
}

Убедитесь, что проверка условий происходит внутри действия wp_enqueue_scripts, чтобы избежать ошибок и обеспечить корректную регистрацию скриптов.

Работа с зависимостями и порядком загрузки скриптов

Работа с зависимостями и порядком загрузки скриптов

Для корректного подключения скриптов в WordPress используется функция wp_enqueue_script(), которая принимает аргументы: хэндл, путь к файлу, массив зависимостей, версия и флаг загрузки в футере.

Чтобы задать порядок загрузки, указывайте зависимости в третьем параметре. Например, если скрипт зависит от jQuery:

wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), null, true );

WordPress автоматически обеспечит, чтобы jQuery был загружен раньше my-script.js.

Не используйте wp_register_script(), если не планируете многократное подключение. Для единичного вызова используйте только wp_enqueue_script().

Загрузка во футере (пятый аргумент true) минимизирует блокировку рендеринга. Не устанавливайте значение false, если нет технической необходимости.

Для подключения модулей с вложенными зависимостями, создавайте цепочку загрузки через массивы зависимостей. Пример:

wp_enqueue_script( 'chart-lib', get_template_directory_uri() . '/js/chart.min.js', array(), null, true );
wp_enqueue_script( 'custom-charts', get_template_directory_uri() . '/js/charts-init.js', array( 'chart-lib' ), null, true );

При неправильном порядке загрузки возможны ошибки Uncaught ReferenceError. Используйте wp_script_is() для проверки подключения зависимостей перед их вызовом.

Добавление атрибута defer или async к JavaScript-файлам

Добавление атрибута defer или async к скриптам в WordPress позволяет улучшить производительность сайта, минимизируя время блокировки рендеринга страницы. Эти атрибуты влияют на порядок загрузки и выполнение JavaScript-файлов.

Атрибут defer заставляет браузер загружать JavaScript-файл в фоновом режиме, не блокируя рендеринг страницы. Скрипт будет выполнен только после загрузки всех элементов страницы и когда DOM полностью сформирован. Это полезно, если скрипт не зависит от других элементов и должен быть загружен в конце. Для добавления этого атрибута к скрипту в WordPress нужно использовать фильтр script_loader_tag. Пример:

add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );
function add_defer_attribute( $tag, $handle ) {
if ( 'my_script' === $handle ) {
return str_replace( ' src', ' defer="defer" src', $tag );
}
return $tag;
}

Атрибут async позволяет браузеру загружать и выполнять JavaScript-файл параллельно с рендерингом страницы. Скрипты с этим атрибутом выполняются сразу после загрузки, не дожидаясь завершения загрузки других ресурсов. Это подходит для скриптов, которые не зависят от DOM или других скриптов. Пример добавления атрибута async:

add_filter( 'script_loader_tag', 'add_async_attribute', 10, 2 );
function add_async_attribute( $tag, $handle ) {
if ( 'my_script' === $handle ) {
return str_replace( ' src', ' async="async" src', $tag );
}
return $tag;
}

Важное замечание: использование async и defer не совместимо друг с другом для одного скрипта. Оба атрибута изменяют поведение загрузки, и их применение к одному файлу может привести к непредсказуемым результатам.

Применение этих атрибутов может значительно ускорить загрузку страниц, особенно на ресурсах с большим количеством внешних JavaScript-файлов. Однако следует учитывать зависимости между скриптами. Например, если один скрипт зависит от другого, лучше использовать defer, чтобы сохранить порядок выполнения.

Вопрос-ответ:

Ссылка на основную публикацию