Окт
11
6

Правильное обновление и подключение jQuery в WordPress

jQuery в WordPressПри установке нового шаблона для своего персонального блога я столкнулся с ситуацией, когда из-за подключенной старой версии jQuery в WordPress не срабатывала нужная мне дополнительная функциональность. Решение этой задачи, в принципе не такое и сложное — процесс обновление jQuery в Вордпресс выполняется всего несколькими строками кода. Однако в ходе изучения вопроса, нашел несколько интересных нюансов о работе с данной библиотекой, поэтому решил рассмотреть вопрос более комплексно.

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

Как отключить и подключить jQuery в WordPress

В статье про удаление лишнего кода из header вы уже могли видеть код, позволяющий отключить jQuery в WordPress:

if ( !is_admin() ) { 
	wp_deregister_script('jquery'); 
}

Размещается эта конструкция в файле functions.php. Условие is_admin позволяет убрать библиотеку только на самом сайте (фронтэнде), если там она вам не нужна. При этом в WP админке скрипт останется для корректной работы всех функций. Данный вариант сработает, когда jQuery добавляется с помощью вызова wp_head в header.php. В некоторых шаблонах вы можете встретить вставку библиотеки напрямую через тег script. В таком случае дабы его отключить просто убираете данную строку.

Вообще, следует заметить, что использовать подключение jQuery в WordPress напрямую с помощью тега script в HEAD крайне не желательно:

<script type='text/javascript' src='https://site.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

Это ошибка! Она, во-первых, может повлечь за собой конфликт между скриптами, вызываемыми разными модулями, во-вторых, мешает оптимизации кода. Лучше следовать правилам системы вордпресс и использовать специальную функцию wp_enqueue_script дабы корректно подключить библиотеку WordPress jQuery. Код размещается в functions.php:

<?php 
function my_scripts_method(){
	if ( !is_admin() ) { 
		wp_enqueue_script( 'jquery' );
	}
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

После выполнения данных строк в результирующем HTML коде сайта появится строка со script из примера выше. Но повторюсь, добавлять этот тег в шаблон напрямую не есть правильно!

Как обновить jQuery в WordPress

Если говорить о моей задаче с обновлением библиотеки, то здесь весь процесс состоит из двух частей — сначала нужно отключить в Вордпресс jQuery скрипт, а затем заново активировать. При этом используются функции wp_deregister_script, wp_register_script,wp_enqueue_script. Вот нашел статью где о них можно почитать детальнее, если вкратце, то:

  • wp_register_script — регистрирует скрипт, который нужно подключить (автоматически он не грузится);
  • wp_enqueue_script — загружает скрипт для сайта/темы/плагина;
  • wp_deregister_script — удаляет зарегистрированный ранее скрипт.

Итого код обновления jQuery в WordPress для functions.php выглядит следующим образом:

// Remove themes old version of jQuery and load a compatible version
function my_update_jquery () {
	if ( !is_admin() ) { 
	   wp_deregister_script('jquery');
 	   wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, false, true);
	   wp_enqueue_script('jquery');
	}
}
add_action('wp_enqueue_scripts', my_update_jquery);

Здесь есть несколько нюансов:

  • Используемый мною путь на ajax.googleapis.com позволяет подключить в WordPress библиотеку jQuery самой последней и актуальной на данный момент версии (по желанию вы можете указывать какое-то конкретное значение).
  • Значения true в качестве самого последнего параметра будет грузить jQuery в футер, если это возможно. Тут уж для вывода нужна не wp_head, а функция wp_footer, которая также должна быть в каждой теме.
  • После обновления jQuery важно проверить работоспособность установленных плагинов/скриптов на сайте. Если им для работы требуется данная библиотека, то она дожна вызываться раньше, поэтому, вероятно, перенос кода в футер не всегда подойдет.
  • Данный код подключает jQuery с CDN Google вместо базового скрипта из самой системы вордпресс. Технология CDN позволяет использовать файлы с наиболее близкого для пользователя сервера, что ускоряет загрузку.

Кстати, если вы внимательно посмотрите на HTML код своих WP сайтов, то зачастую там вместе с jQuery можно заметить еще один похожий скрипт — jquery-migrate.min.js. Данная библиотека позволяет устранить все несовместимости вашего шаблона/модулей с более ранними версиями jQuery 1.9.x и ниже. Если при обновлении библиотеки jQuery в Вордпресс вам нужно оставить этот migrate скрипт, то предыдующий код будет иметь иной вид:

function my_update_jquery () {
	if ( !is_admin() ) { 
	   wp_deregister_script('jquery-core');
	   wp_register_script('jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, false, true);
	   wp_enqueue_script('jquery');
	}
}
add_action('wp_enqueue_scripts', my_update_jquery);

Параметр jquery-core указывает на то, что заменяться будет только основной скрипт библиотеки, а jquery-migrate.min.js данная процедура не затронет. Кстати, в этом случае скрипт jQuery почему-то не хочет грузиться в футере (хотя это не столь важно).

WordPress плагин jQuery Updater

В поисках решения задачи я наткнулся на специальный плагин jQuery Updater, который может помочь обновить библиотеку до последней официальной версии. Учитывая то, что модуль использует версию jQuery 2+ сюда также включен скрипт Migrate, о котором мы рассказывали выше.

Плагин jQuery Updater для WordPress

В описании модуля сказано, что он обновляет jQuery до самой актуальной версии, которая, скорее всего, старше той, что использует вордпресс на вашем сайте. Однако не совсем понятно, почему при этом в FAQ на вопрос нужен ли плагин, если у вас установлена самая последняя версия WP, — автор говорит, что он не требуется. Немного странно.

Я так понимаю модуль пригодится, если какой-то плагин, скрипт или стороннее решение требует наличие библиотеки более старшей версии нежели поддерживается последним релизом WP. У меня на сайте как раз и была такая ситуация — использовалась самая акуальная версия вордпресс но jQuery, загружаемая фреймворком/шаблоном была морально устаревшей. В таком случае вы либо делаете все изменения вручную, либо пробуете работать с модулем. После его активации никаких дополнительных действий делать не нужно. Если же установка WordPress jQuery плагина приводит к появлению глюков на сайте, то лучше его отключить.

Я, в принципе, больше склоняюсь к варианту с правкой файла functions.php. В данном вопросе нет ничего слишком сложного чтобы ставить дополнительный модуль. Если у вас есть что добавить про jQuery в вордпресс, пишите комментарии.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 5, средний балл: 6,80 из 7)
Загрузка...

категория Категории: Возможности;
теги Теги: , , , , .

комментариев 6 к статье “Правильное обновление и подключение jQuery в WordPress”

  • Газиз Исмаил   15.10.2016

    Привет,

    Спасибо за интересную статью. Помню когда только осваивал Вордпресс намучался с подключением jQuery. И плагин придется весьма кстати.

    Спасибо за статью, сделаю ретвит)

  • Tod   16.10.2016

    Газиз, спасибо. Уже второй или третий раз сталкиваюсь с jQuery, поэтому решил написать свой пост по теме дабы не искать опять решение в сети)

  • Алекс   22.06.2017

    А код обновления jQuery в WordPress для functions.php остается там постоянно или нужно потом удалить?

  • Tod   22.06.2017

    Алекс, код остается навсегда, т.к. в нем задается источник/адрес загрузки скрипта — и каждый раз система его оттуда считывает.

  • Виктор   05.03.2018

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

  • Tod   05.03.2018

    Виктор, в принципе, как-то об этом не подумал — добавил один дополнительный пункт в «нюансы»:) Но ведь и подключение скриптов плагинов тоже можно перенести в футер, разве нет?

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости