Связываем jQuery с WordPress

Начиная с WordPress 2.7, многие библиотеки Javascript, в том числе и jQuery, стали по-новому подключаться к теме: через Script API, посредством удобной функции wp_enqueue_script.

Регистрация jQuery в WP-темах

Вы можете активировать jQuery в WordPress двумя различными способами. Первый из них основывается на размещении приведенного ниже кода в файле header.php перед закрывающим тегом </head>.

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type="text/javascript">
//add jQuery code here
jQuery(document).ready(function() {
jQuery("p").click(function() {
alert("Hello world!");
});
});
</script>

Альтернативный вариант: зарегистрировать wp_enqueue_script в файле functions.php. Если ваша тема не имеет functions.php, достаточно создать такой файл и поместить его в корневую директорию, где находятся остальные файлы шаблона темы. Просто добавьте следующий код в файл functions.php:

<?php wp_enqueue_script('jquery');/*this registers jquery*/
function jq_test(){ /*This is your custom jQuery script*/
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("p").click(function() {
alert("Hello world!");
});
});
</script><?php
}
add_filter('wp_head', 'jq_test');/*this adds your script to the wp_
head() hook in the header.php file and ensures your custom jQuery
script is run*/
?>

Обход проблем с регистрацией jQuery

Первые мои попытки подключения jQuery через wp_enqueue_script неизменно заканчивались неудачей. Библиотека отказывалась работать. После длительного изучения WordPress Codex, я смог выделить для себя следующие факты:

  • Если вы подключаете библиотеку jQuery в файле header.php, удостоверьтесь в том, что функция wp_enqueue_script находится выше, чем функция wp_head. Произвольный jQuery-код должен идти под функцией wp_head.
  • Если вы регистрируете wp_enqueue_script в functions.php, удостоверьтесь, что ее объявление находится перед всеми остальными функциями, которые загружаются через add_filter в wp_head.

Блог про WordPress
Комментарии: 6
  1. Ka

    spasibo!!! ochen pomogli

  2. Валерий

    Большое спасибо, очень помогло в решении проблем!

  3. Sergey

    Добрый день! Спасибо большое за такую статью! Но проблема, указываю путь к своему логотипу, а у меня по прежнему вордпрессовский этот стоит, что я могу неправильно делать?

    1. Дмитрий (автор)

      А причем тут jQuery? :)
      Зависит многое от темы, которую вы используете.

  4. Ксения

    Здравствуйте, есть ли какой-нибудь способ контролировать порядок вывода кода функцией wp_head(); т.е мне не нравится что у меня идет тайтл, потом идет куча кода выводимого wp_head, а потом где то внизу идет дескрипшн и кейвордц, так же выводимые функцией wp_head (у меня это делает плагин ALL in SEO pack)

  5. Дмитрий (автор)

    В данном случае это можно контролировать через приоритет у add_action.

    Подробнее про это: https://developer.wordpress.org/reference/functions/add_action/

    Но ради этого придется вносить коррективы в код плагина, в результате чего его потом не получится обновить (изменения пропадут).

Добавить комментарий

Получать новые комментарии по электронной почте.