В WordPress нельзя просто вставить скрипт в файл темы и рассчитывать на стабильную работу. CMS использует систему хуков и очередей, поэтому правильное подключение JavaScript требует соблюдения определённой структуры. Иначе скрипты могут конфликтовать между собой, загружаться дважды или не работать вовсе.
Базовый способ – регистрация и подключение скрипта через функцию wp_enqueue_script(). Её следует вызывать внутри хука wp_enqueue_scripts для фронтенда или admin_enqueue_scripts – для панели администратора. Это гарантирует, что скрипт будет добавлен в нужное место и в правильное время.
Пример подключения кастомного скрипта:
function my_custom_script() {
wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_custom_script');В этом примере скрипт my-script.js подключается с зависимостью от jQuery, без указания версии, и будет загружен перед закрывающим тегом </body> (пятый аргумент – true). Не стоит вставлять теги <script> напрямую в header.php или footer.php, если только не используется очень специфичная задача, не решаемая стандартными средствами.
Если вы разрабатываете плагин или кастомную тему, уместно использовать plugin_dir_url(__FILE__) или get_stylesheet_directory_uri() вместо жёстко прописанных путей. Это повысит переносимость и устранит привязку к структуре папок.
Где хранить пользовательские скрипты в структуре WordPress
Пользовательские JavaScript-файлы рекомендуется размещать в каталоге темы, чтобы сохранить изоляцию от ядра WordPress и плагинов. Наиболее подходящее место – директория /wp-content/themes/ваша-тема/js/. Если папка js отсутствует, её нужно создать вручную.
Файл можно назвать, например, custom.js. Подключать его следует через functions.php текущей темы с помощью функции wp_enqueue_script(). Пример:
function add_custom_scripts() {
wp_enqueue_script(
'custom-script',
get_template_directory_uri() . '/js/custom.js',
array('jquery'),
null,
true
);
}
add_action('wp_enqueue_scripts', 'add_custom_scripts');Если используется дочерняя тема, путь нужно строить через get_stylesheet_directory_uri() вместо get_template_directory_uri(), чтобы избежать конфликтов при обновлении родительской темы.
Скрипты, завязанные на административную часть, следует размещать в отдельной папке, например, /wp-content/themes/ваша-тема/admin/js/, и подключать только в is_admin()-контексте.
Хранить пользовательские скрипты в плагинах стоит только при разработке функциональности, независимой от темы. В этом случае файлы размещаются внутри каталога плагина, а подключение происходит аналогично, с использованием plugins_url().
Подключение JavaScript через functions.php с помощью wp_enqueue_script
Открой файл functions.php активной темы. Он находится в директории wp-content/themes/название_темы/. Добавьте следующий код:
function my_theme_enqueue_scripts() {
wp_enqueue_script(
'custom-script', // Уникальный идентификатор
get_template_directory_uri() . '/js/custom.js', // Путь к файлу
array(), // Зависимости, например: array('jquery')
null, // Версия (можно указать конкретную или null)
);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');
get_template_directory_uri() используется для стандартной темы. Если используется дочерняя, замените на get_stylesheet_directory_uri().
Файл custom.js должен находиться в папке js внутри темы. Если такой папки нет, создайте её и разместите файл вручную.
Если скрипт зависит от других библиотек (например, jQuery), укажите их в массиве зависимостей. WordPress автоматически подключит их перед основным скриптом.
Чтобы отключить кэширование при разработке, можно добавить текущую временную метку вместо версии:
wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom.js', array(), time(), true);Для подключения только на определённых страницах используйте условия внутри функции, например:
if (is_page('контакты')) {
wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom.js', array(), null, true);
}Избегайте прямой вставки тегов <script> в header.php или footer.php. Такой способ усложняет поддержку и нарушает структуру WordPress.
Как задать зависимости и порядок загрузки скриптов
Для подключения JavaScript в WordPress с учётом порядка и зависимостей используется функция wp_enqueue_script(). Она вызывается внутри хука wp_enqueue_scripts в functions.php вашей темы или подключаемого плагина.
Пятый аргумент этой функции – массив зависимостей. Если скрипт должен загружаться после jQuery, укажите array('jquery'). Пример:
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true);
});Значение true в шестом аргументе перемещает скрипт в footer, что сокращает время загрузки страницы. Если загрузка должна происходить в head, укажите false.
WordPress уже регистрирует ряд библиотек, включая jQuery, underscore и backbone. Повторно регистрировать их не нужно – достаточно указать нужный handle в массиве зависимостей.
Порядок загрузки формируется автоматически: WordPress расставит скрипты в соответствии с указанными зависимостями. Если не задать зависимость, скрипт может загрузиться раньше, чем требуется, что приведёт к ошибкам выполнения.
Для регистрации без немедленного подключения используйте wp_register_script(). Это позволяет сначала описать скрипт с зависимостями, а затем подключить его при необходимости:
wp_register_script('my-lib', get_template_directory_uri() . '/js/lib.js', array(), null, true);
wp_enqueue_script('my-lib');Если один скрипт зависит от другого, но вы не укажете это явно, WordPress не сможет гарантировать правильную последовательность. Всегда описывайте зависимости чётко и избегайте ручного подключения через <script> в шаблоне.
Подключение скрипта только на нужных страницах
Чтобы не загружать скрипт на всех страницах сайта, используйте условные теги WordPress в файле functions.php или в подключаемом плагине. Это уменьшит нагрузку и ускорит загрузку страниц.
Пример: скрипт нужен только на главной странице:
function load_custom_script_home() {
if ( is_front_page() ) {
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), null, true );
}
}
add_action( 'wp_enqueue_scripts', 'load_custom_script_home' );Для подключения только на отдельных записях:
function load_custom_script_single() {
if ( is_single() ) {
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), null, true );
}
}
add_action( 'wp_enqueue_scripts', 'load_custom_script_single' );Если требуется подключение только на странице с определённым ID:
function load_custom_script_specific_page() {
if ( is_page(42) ) {
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), null, true );
}
}
add_action( 'wp_enqueue_scripts', 'load_custom_script_specific_page' );Для нескольких страниц можно передать массив ID:
if ( is_page(array(42, 58, 73)) ) { /* код */ }Если шаблон создаёт уникальные условия, используйте is_page_template() с указанием пути к файлу шаблона.
Также можно использовать wp_register_script() отдельно от wp_enqueue_script() и вызывать регистрацию один раз, а подключение – только при выполнении нужных условий.
Добавление JavaScript через виджеты и текстовые блоки
Для вставки JavaScript-кода через виджеты, откройте админку WordPress, перейдите в Внешний вид → Виджеты. Выберите область, куда нужно вставить скрипт (например, подвал или сайдбар), и добавьте виджет Текст или HTML-код.
Во вставленном блоке вставьте код внутри тега <script>. Например:
<script>
alert('Скрипт работает');
</script>
Убедитесь, что редактор не перешёл в визуальный режим – он может удалить скрипт. Используйте только текстовый режим. Для работы скрипта на всех страницах выберите глобальную область (например, нижний колонтитул).
Если скрипт подключается с внешнего источника, добавьте ссылку вида:
<script src="https://example.com/script.js"></script>
Некоторые темы и плагины блокируют исполнение скриптов в виджетах по соображениям безопасности. Если код не срабатывает, проверьте настройки фильтрации HTML. При необходимости отключите фильтрацию с помощью хука unfiltered_html, но только для доверенного пользователя (администратора).
Для размещения скрипта только на главной странице добавьте условие через if ( is_front_page() ) в файле functions.php или используйте плагин Insert Headers and Footers с выбором позиции.
Встраивание JavaScript через плагин Insert Headers and Footers
Для встраивания скрипта через данный плагин выполните следующие шаги:
- Установите и активируйте плагин Insert Headers and Footers. Перейдите в раздел «Плагины» → «Добавить новый» в админке WordPress, найдите плагин и нажмите «Установить», а затем «Активировать».
- После активации плагина откройте меню «Настройки» → «Insert Headers and Footers».
- В разделе «Scripts in Header» вставьте код JavaScript, если нужно добавить его в заголовок страницы. Для футера используйте поле «Scripts in Footer».
- Нажмите «Сохранить», чтобы изменения вступили в силу.
Вставляя JavaScript через этот плагин, вы обеспечиваете стабильную работу скриптов, так как их внедрение происходит на уровне сайта, без вмешательства в код темы. Это удобно при использовании сторонних сервисов, таких как Google Analytics, Facebook Pixel, или кастомных функций.
Рекомендуется добавлять скрипты в футер, чтобы они не замедляли загрузку страницы. Если скрипт критичен для функционала страницы, можно добавить его в заголовок. Важно, чтобы код был проверен на ошибки перед встраиванием, иначе это может повлиять на работу сайта.
Плагин также предоставляет возможность встраивания других элементов, таких как мета-теги или внешние стили, с минимальными усилиями. Для администраторов, которые не знакомы с PHP или файловой структурой WordPress, это идеальный способ интегрировать дополнительные функции на сайт.
Как добавить инлайн-скрипт без нарушения кэширования
1. Использование хеширования в URL скрипта. Важно, чтобы каждый инлайн-скрипт имел уникальный идентификатор, который будет изменяться при изменении самого скрипта. Для этого можно использовать параметр с хешем в URL скрипта, который будет автоматически обновляться, если содержимое изменится. Например, добавление версии или даты в URL скрипта поможет обновить его в кэше.
2. Асинхронная загрузка. Чтобы избежать блокировки рендеринга страницы, инлайн-скрипт можно загрузить асинхронно. Использование атрибута async позволяет загрузить и выполнить скрипт без задержек для остальной части страницы.
3. Управление сроком жизни кэша через HTTP заголовки. Правильная настройка сроков жизни кэшированных файлов с помощью заголовков HTTP позволяет не повторно загружать скрипты, пока они не были изменены. Заголовки, такие как Cache-Control, помогут браузеру эффективно управлять временем хранения кэшированных ресурсов.
4. Минификация и объединение скриптов. Для повышения производительности следует объединить несколько инлайн-скриптов в один и минимизировать его размер. Минификация скрипта уменьшает его размер, что способствует более быстрому кэшированию и загрузке страницы.
5. Использование Content Security Policy (CSP). Для обеспечения безопасности можно настроить политику CSP, которая ограничит выполнение скриптов на странице. Если правильно настроить CSP, это не только повысит безопасность, но и поможет избежать загрузки устаревших или ненадежных инлайн-скриптов.
Эти подходы помогут интегрировать инлайн-скрипты в WordPress без проблем с кэшированием, улучшая производительность и безопасность сайта.
Вопрос-ответ:
Как добавить JavaScript код на сайт WordPress?
Для добавления JavaScript на сайт WordPress, можно использовать несколько методов. Один из самых простых — это вставить код непосредственно в файл темы. Для этого нужно открыть файл footer.php или header.php и добавить код перед закрывающим тегом
Загрузка...
