Правильное обновление и подключение 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 до самой актуальной версии, которая, скорее всего, старше той, что использует вордпресс на вашем сайте. Однако не совсем понятно, почему при этом в FAQ на вопрос нужен ли плагин, если у вас установлена самая последняя версия WP, — автор говорит, что он не требуется. Немного странно.

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

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

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 5, средний балл: 6,80 из 7)

Загрузка...

Категории: Возможности;
Теги: обновление, решение задач wordpress, скрипты, сниппеты, функции wordpress.