15 Сентябрь 2014

Проблемы после обновления до WordPress 4.0

Уже несколько раз мне встретилась странная проблема. После обновления WordPress до версии 4.0 в админке перестал работать ряд функций, связанный с красивыми эффектами jQuery:

  • Не изменяется адрес постоянной ссылки записи.
  • Не выпадают подменю.
  • И т.д. т.п.

Оказывается, в исходном коде админки исчезла инструкций подключения jQuery. Т.е. в публичной части сайта все работает нормально и библиотека успешно подключается, а в админке ранее присутствовавшая инструкция подключения jQuery в разделе head попросту пропала.

Если интересно, под катом находится решение.

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

<script type='text/javascript' src='http://vas_domen.ru/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>

Если вы найдете эту строку в разделе head публичной части, но не найдете ничего подобного на странице админки, то диагноз ясен.

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

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

Старая версия библиотеки может привести к неправильной работе скриптов jQuery. Кроме того, как утверждается в книге «jQuery — от новичка до ниндзя», лучше подключать библиотеку с серверов Гугла. Это и трафик на вашем хостинге сэкономит (вдруг у вас трафик тарифицируется) и позволит ускорить процесс загрузкой библиотеки из кеша браузера пользователя (т.к. он много где уже загружал библиотеку с такого же адреса).

Т.е. наша цель вывести в раздел head публичной части сайта и админки инструкцию подключения jQuery следующего вида:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=1.11.1'></script>

Сделать это можно дописав ряд инструкций в файле function.php активной темы. Инструкции можно вставлять в самый низ данного файла. Только если в конце файла вы встретите код ?>, то вставку нужно провести перед этими символами, а еще лучше — вместо этих символов.

Листинг 1. Код для решения проблемы в админке

if( is_admin()){
	wp_deregister_script('jquery_admin');
	wp_register_script('jquery_admin', ("http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"), false, '1.11.0');
	wp_enqueue_script('jquery_admin');
}

В первой строке кода идет проверка, нахожусь ли я в админки. Если я в админке, то выполнится блок инструкций в фигурных скобках. Это безопасный способ подключить jQuery. Во второй строке я, на всякий случай, убираю все возможные связи с именем «jquery_admin», третья строка — указываю новую связь между именем «jquery_admin» и фалом на сервере Гугла и в четвертой строке внедряю инструкцию подключения в раздел head.

Теперь разберемся с тем, как подключить свежую версию jQuery с серверов Google.

Листинг 2. Код для подключения jQuery с серверов Google в публичной части сайта

if( !is_admin()){
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"), false, '1.11.1');
	wp_enqueue_script('jquery');
}

Как видите, разница в первой строке и в названии подключаемого скрипта. Теперь инструкция подключения jQuery с серверов Google попадет в раздел head только в том случае, если я не в админке.

Внимательный читатель обратит внимание на то, что для админки подключается версия jQuery 1.11.0, а для публичной части 1.11.1. Дело в том, что в админке, при подключении версии 1.11.1 ничего не работает :) Странно все это.

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

UPD:

Как правильно написал в комментариях BOLVERIN и как написано в официальном руководстве (ссылка выше) есть правильный способ, отличающийся от листинга 1 и листинга 2.

Во-первых нужно написать функцию, которая будет запускать при наступлении определенного события.

Листинг 3. Функция, подключающая jQuery

function my_scripts_method(){
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"), false, '1.11.0');
	wp_enqueue_script('jquery');
}

Теперь запустим нашу функцию при наступлении события «подключение скриптов для внешней части сайта»:

Листинг 4. Запуск функции my_scripts_method при возникновении события wp_enqueue_scripts

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Как видно из кода выше, событие «подключение скриптов для внешней части сайта» на языке WordPress называется wp_enqueue_scripts. При возникновении события wp_enqueue_scripts, запустится функция из листинга 3 (ведь именно ее название указано вторым параметром метода add_action) и в разделе head появится код подключения скрипта с сервера Google.

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

Листинг 5. Запуск функции my_scripts_method при возникновении события admin_enqueue_scripts

add_action( 'admin_enqueue_scripts', 'my_scripts_method' );

Теперь, чтобы все работало правильно и в админке и в публичной части сайта, достаточно вставить в файл function.php код листингов 3, 4 и 5.

MAXCACHE: 0.85MB/0.00043 sec