Wp enqueue script не работает

wp_enqueue_script() WP 2.1

Правильно подключает скрипт (JavaScript файл) на страницу.

Использовать эту функцию для подключения js файлов важно, потому что так вы в дальнейшем сможете без лишних проблем объединять JS файлы в один. Также в некоторых случаях избавитесь от конфликтов скриптов, когда зависимый скрипт подключается до основного (того от которого он зависит).

Функция добавляет скрипт, только если он еще не был добавлен и другие скрипты от которых он зависит, зарегистрированы. Зависимые скрипты добавляются автоматически.

ВАЖНО! Это ошибка начинающих разработчиков. Функция ничего не выведет, если в теме не используется wp_head() или wp_footer(). Именно в момент вызова этих функций срабатывает хук, который добавляет скрипты.

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

Если скрипт не зарегистрирован, то его можно зарегистрировать и подключить одной функцией — wp_enqueue_script() :

С версии 3.3. wp_enqueue_script() можно вызывать во время генерации страницы. В этом случае вызываемый скрипт будет подключен в подвале, в момент срабатывания события wp_footer .

Функция обычно вызываться во время следующих событий (вешаться на хуки):

• wp_script_add_data() — используйте эту функци, когда нужно подключить скрипт с условием, например, . .
• wp_add_inline_script() — используйте эту функцию, когда нужно добавить JS код из PHP.

В версии 3.5 WordPress изменил положение о минимизации скриптов и CSS стилей. До этого минимизированные файлы имели расширения: .js и .css соответственно, а не минимизированные .dev.js и .dev.css . Теперь, минимизированные файлы имеют расширение: .min.js и .min.css , а обычные .js и .css .

Возвращает

null . Ничего не возвращает.

Использование

Шаблон использования

Название скрипта (рабочее название). Строка в нижнем регистре.

Если строка содержит знак вопроса (?): scriptaculous?v=1.2 , то предшествующая часть будет названием скрипта, а все что после будет добавлено в УРЛ как параметры запроса. Так можно указывать версию подключаемого скрипта.

УРЛ файла скрипта. Например: http://example.com/wp-content/themes/my-theme/my-theme-script.js .

Этот параметр необходим только, когда скрипт не зарегистрирован и WordPress еще не знает об этом скрипте, смотрите функцию wp_register_script().

Не нужно писать УРЛ жестко, он должен определяться динамически. Для этого используйте функции получения URL:

Ссылки на внешние скрипты можно указывать без указания протокола: //otherdomain.com/js/their-script.js .

Уже зарегистрированные в WP скрипты смотрите ниже в этой статье.

$deps(массив) Массив названий скриптов от которых зависит этот скрипт; скрипты которые должны быть загружены перед этим скриптом. Этот параметр необходим только в случае, если WordPress еще не знает об этом скрипте.
По умолчанию: array() $ver(строка)

Строка указывающая версию скрипта, если она у него есть. Этот параметр используется для того чтобы удостовериться, что клиент получил верную версию скрипта, а не из кеша.

Если параметр не указан, то в качестве версии скрипта будет использована версия WordPress.

Если указать null , то никакая версия не будет добавлена.

По умолчанию: false

Подключить скрипт в подвал?

Обычно скрипт подключается в документа, если указать true, то скрипт будет подключен перед тегом

Источник

WordPress wp_enqueue_script Not Working

I’m developing a theme and trying to get wp_enqueue_script to work. The curious thing, is that nothing shows up. It doesn’t do anything. Here’s my setup:

in functions.php I have:

in header.php I call

And in the HTML, nothing shows up at all.

4 Answers 4

You should have registered your jquery file after remove the default wordpress jquery. I use this code.. hope it helps..

Gerald is spot on. You’ve deregistered the jQuery that comes with WordPress without registering an alternative version.

Normally the shipped version is removed if you want to load it directly from a CDN. An example would be below;

If you want to deregister it you need to register another version straight away before enqueing other JS dependant on jQuery

Is the constant «tz_JS» is defined correctly? Presuming yes, you should be able to simplify your function like so:

wp_enqueue_scripts is the proper hook to use for loading front-end scripts (see Codex). You don’t need to check is_admin() since admin_enqueue_scripts is the corresponding hook for loading scripts on the admin side.

If you are developing a child theme use get_stylesheet_directory_uri() when loading js within your theme directory.

Not the answer you’re looking for? Browse other questions tagged javascript wordpress or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.18.40487

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

WordPress.org

Русский

Не могу подключить JS

Здравствуйте! Работаю с Contact Form 7, на локальном сервере, пытаюсь добавить JS код для перехвата события Sumbit формы.
Смотрел множество с сайтов с примерами, но так и не получилось реализовать.
В директорию с файлом funtions.php добавил js файл с названием customscript.js со следующим кодом:

в файл Functions вставил следующий код, который не заработал:

Пробовал также следующий вариант, который также не заработал:

Подскажите, пожалуйста, где я допустил ошибку. Спасибо большое!

• Тема изменена 1 год, 5 месяцев назад пользователем Yui . Причина: please use CODE button for code formatting

Работаю с Contact Form 7, на локальном сервере

WP и всё, что ему сопутствует правильно работает только там, где должно работать

@zoltsmaster Поясните, пожалуйста, а почему именно не должно работать? Плагин скачан с сайта WordPress, поставлен на чистую свежую сборку WordPress, в документации плагина (https://contactform7.com/dom-events/) описано, что такие способы возможны. Если Вы про локальный сервер, почему оно не должно на нём работать?

• Ответ изменён 1 год, 5 месяцев назад пользователем yalaby .
• Ответ изменён 1 год, 5 месяцев назад пользователем yalaby .

@zoltsmaster добавил тот же код на хостинг, разницы нет.

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

вставил следующий код, который не заработал

В чём это выражается?

Если скрипт customscript.js не появился в исходном коде страницы — то да, проблема в этом коде.

Если появился, но не привёл к желаемому результату — возможно, скрипт просто загружается раньше, чем выводится форма, как заметили выше.

У wp_enqueue_script() есть параметр $in_footer (пятый по счёту) — попробуйте задействовать его.

Если Вы про локальный сервер, почему оно не должно на нём работать?

Должно, этот вопрос не зависит от сервера. Просто у некоторых участников форума сложилось стойкое предубеждение против работы на локальном сервере и появилось стремление навязать своё мнение всем остальным 🙂 Отчасти потому что в случае проблем сайт на хостинге можно посмотреть, чтобы дать совет, а локальный сайт снаружи недоступен, и остаётся только гадать и задавать уточняющие вопросы.

@flector @sergeybiryukov Благодарю Вас за ответы!
попробовал в customscript.js написать следующий код для упрощения и отвязки от отслеживания CF7:

Однако, при загрузке страницы ничего не поменялось, алерт не выходит, а в отладчике своего скрипта не нахожу, соответственно, я неправильно его объявил. Грешу на строчку, но не уверен, потому что пытался прописать абсолютный путь, тоже не помогло
get_template_directory_uri() . ‘/customscript.js’,

_________________________________________
Пока писал сообщение попытался ввести следующий код в файл functions.php, если вы посмотрите на него, увидите, что я все параметры указал, в том числе внёс код в footer (если быть точным, то в файл storefront-functions.php т.к. работаю с темой storefront):

теперь мой скрипт появился в отладчике, однако Алерта так и нет
кстати, абсолютный путь указан уже не к локальному серверу, потому что я решил решать всё прямо на хостинге
______________________________________________________________
Далее я решил исправить свой JS код

написал в customscript.js просто строку
alert («fire!»);

и это дело заработало.

и тут я понял что объявлял функцию, но не вызывал её. Следующий код полностью заработал

После чего я решил попробовать вернуть следующую строку вместо абсолютного имени файла JS:

и код перестал работать. В общем, нужно указывать абсолютный путь. Видимо, я не до конца разобрался в синтаксисе get_template_directory_uri().

P.S. Расписал это всё как я делал для того, чтобы если кто то столкнётся с такой же проблемой он быстрее решил её. Благодарю всех причастных!)

• Ответ изменён 1 год, 5 месяцев назад пользователем yalaby .
• Ответ изменён 1 год, 5 месяцев назад пользователем yalaby .
• Ответ изменён 1 год, 5 месяцев назад пользователем yalaby .

Источник

Подключаем правильно скрипты js в шаблоне WordPress

Подключать стили и скрипты в шаблон в файле header.php — неправильно.
Правильная практика — подключать их в файле functions.php используя функцию wp_enqueue_scripts , это позволит избежать конфликтов и без лишних проблем объединять JS файлы в один.

wp_enqueue_script() добавляет скрипт, только если он еще не был добавлен и другие скрипты от которых он зависит зарегистрированы. Зависимые скрипты добавляются автоматически.

Подключаем файлы скриптов .js через functions.php

jQuery регистрируется в WP по умолчанию. Поэтому для его подключения достаточно одной строки:

Зарегистрировать и подключить новый скрипт (скрипт подключится в ):

Чтобы подключить скрипт в футере после основного содержимого, можно использовать такой формат:

jQuery можно не подключать дополнительно, если один из скриптов указывает на зависимость от jQuery array(‘jquery’) , то есть библиотека jQuery подключится вместе с этим скриптом.

Кстати, библиотека jQuery подключается в из-за того, что много других скриптов и плагинов зависят от нее, и поэтому она должна быть подключена в первую очередь.

Использование

Шаблон использования

Параметры

$handle (строка) (обязательный)
Название скрипта (рабочее название). Строка в нижнем регистре.
Если строка содержит знак вопроса (?): scriptaculous&v=1.2 , то предшествующая часть будет названием скрипта, а все что после будет добавлено в УРЛ как параметры запроса. Так можно указывать версию подключаемого скрипта.

$src (строка)
УРЛ файла скрипта. Например: http://example.com/wp-content/themes/my-theme/my-theme-script.js .
Этот параметр необходим только, когда скрипт не зарегистрирован и WordPress еще не знает об этом скрипте, смотрите функцию wp_register_script() .
Не нужно писать УРЛ жестко, он должен определяться динамически. Для этого используйте функции получения URL:
plugins_url() — для плагинов
get_template_directory_uri() — для тем.
Ссылки на внешние скрипты можно указывать без указания протокола: //otherdomain.com/js/their-script.js .
Уже зарегистрированные в WP скрипты смотрите ниже в этой статье.
По умолчанию: false

$deps (массив)
Массив названий скриптов от которых зависит этот скрипт; скрипты которые должны быть загружены перед этим скриптом. Этот параметр необходим только в случае, если WordPress еще не знает об этом скрипте.
По умолчанию: array()

$ver (строка)
Строка указывающая версию скрипта, если она у него есть. Этот параметр используется для того чтобы удостовериться, что клиент получил верную версию скрипта, а не из кеша.
Если параметр не указан, то в качестве версии скрипта будет использована версия WordPress.
Если указать null , то никакая версия не будет добавлена.
По умолчанию: false

$in_footer (логический)
Подключить скрипт в подвал?
Обычно скрипт подключается в документа, если указать true, то скрипт будет подключен перед тегом

Источник

Как правильно подключать стили и cкрипты в дочерней теме WordPress?

На эту тему написано уже десятки статей, но тема продолжается обсуждаться, а в чатах и на форумах люди снова и снова задают вопросы и сталкиваются с проблемами. Давайте вместе попробуем на примерах разобраться как же правильно подключать стили и скрипты в WordPress.

Начнем по порядку. Есть хук wp_enqueue_scripts , который срабатывает в момент подключения в очередь на вывод файлов стилей и скриптов. Это событие срабатывает в момент хука wp_head с приоритетом 1. Учтите, что для его работы в файле header.php необходима функция wp_head() .

На этот хук wp_enqueue_scripts принято вешать функции, которые подключают стили и скрипты темы с помощью функций wp_enqueue_style() и wp_enqueue_script() соответственно.

Простой способ подключения может выглядеть следующим образом:

Заметьте, что если в функции присутствует префикс get_template_ , то будет подключен файл из родительской темы, если же префикс get_stylesheet_ , то файл будет подключен из дочерней темы только в том случае, если дочерняя тема активирована (если не активирована, файл подключается из родительской).

Как сделать подключение скриптов по условию

При подключении скриптов и стилей на хуке wp_enqueue_scripts глобальные переменные уже определены, поэтому все условные теги вида is_home() , is_front_page() , is_archive() , is_page() и подобные будут работать. В примере ниже мы подключаем на главную одну таблицу стилей, а на страницу категорий другую. Общий файл стилей будет подключен на все страницы сайта.

Как сделать обновление скриптов в кеше браузера

Один из часто задаваемых вопросов звучит примерно так: «Почему я изменяю css файл, но эти изменения не видны на сайте?».

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

Но есть отличный способ динамически сообщать браузеру об изменениях в ваших файлах — указывать их версии. Это удобно делать с помощью функции filemtime() .

Теперь браузер будет проверять, изменилась ли версия (время последнего изменения) файла и только в случае положительного ответа скачивать файл заново.

К тому же, в одной из последних версий добавили функцию get_theme_file_uri() , которая проверяет наличие файла в дочерней теме перед подключением, это довольно удобно.

Если мы применим эти советы, то получим примерно следующее:

Как добавить один скрипт после другого

Еще, при работе со скриптами полезно знать, что в третьем параметре функции wp_enqueue_script() можно указать зависимость этого скрипта от других. Например, если вы укажите array(‘jquery’) , то скрипт example.min.js будет подключен после скрипта jquery.min.js.

Кроме того, существует полезная функция wp_add_inline_script() , которая позволит вам добавить скрипт прямо в html документ, после указанного. Аналогично для стилей будет работать функция wp_add_inline_style() . Рассмотрим пример подключения slick-слайдера:

Как видите, сначала нужные файлы подключаются с помощью функций wp_enqueue_style() и wp_enqueue_script() , после чего скрипт инициализации слайдера вставляется с помощью wp_add_inline_script() после основного slick.min.js.

Как сделать предварительную регистрацию скриптов

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

Сначала мы регистрируем скрипты библиотеки masonry для того, чтобы сделать красивые фото-галереи у нас на сайте. Эти скрипты не будут подключены в html-документ до тех пор, пока вы не используете функцию wp_enqueue_style() или wp_enqueue_script() .

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

Источник