Рано или поздно, порыв оптимизации приходит к каждому вордпрессовцу. Связано это с увеличением нагрузки на веб-сайт. Последняя появляется вследствие установки новых скриптов, плагинов, заполнения базы данных (БД) контентом, по многим другим причинам. Кэширование, инструменты оптимизации делают свое дело, но в определенный момент их становится недостаточно. Наступает время, когда нужно ускорять ресурс на уровне кода. Многие новички всячески избегают данного процесса. Похвалить или поругать их за это нельзя. Не зря у программистов есть железное правило – не трогай, пока это работает J Но сегодня мы от него отступим, рассмотрев крайне интересную тему отключения старой и установки новой библиотеки jQuery в WordPress.
Что такое, с чем едят
Система управления контентом WordPress поддерживает множество типов файлов. Основными являются классические HTML, CSS, JavaScript. Для простоты понимания, представьте, что это строительные материалы. При возведении сооружения, – создании шаблона, – следует придерживаться ряда правил. Ключевым является соблюдение порядка размещения файлов в директориях, построения их взаимосвязей. Принимаем как данность, продолжаем разработку. Хотя постойте… Кто сказал, что файлы разных типов не будут между собой конфликтовать? Должен существовать гарант их совместимости. Светилы веб-программирования нашли простое решение проблемы – скрипт. Если вы внимательно следите за материалами на нашем сайте, но наверняка заметили, что данная конструкция способна решить любую задачу. Подробно останавливаться на взаимосвязях не станем. Рассмотрим пример одной – совместимости JavaScript (JS) и HTML.
И те, и другие часто встречаются в директориях тем, системы управления контентом. Файлы HTML представлены статичными программными конструкциями. Это могут быть графические элементы, надписи, абсолютно все неподвижное, что видим на сайте. Однако современный сайт – это повсеместная динамика. Анимационные эффекты свойственны большей части элементов ресурса. За это отвечает JavaScript. Данный тип файлов работает по заранее заданному алгоритму. Вообще, он подходит для широкого круга задач. Вот лишь малая часть примеров:
- математические операции;
- обработка в режиме оффлайн – без подключения к Интернету;
- панель управления, меню прочие динамические объекты для использования пользователем;
- связывание HTML и CSS;
- анимационные, графические эффекты.
Важность JS переоценить невозможно: без этого формата существование веб-ресурса на «ВордПресс» или любой другой современной CMS сложно представить. Однако как связать JavaScript и HTML? Здесь на выручку приходит jQuery. Она представлена файлом, являющемся специальной библиотекой с предопределенными функциями. JS получил широкое распространение в веб-разработке, ввиду чего jQuery встречается так же часто. Если обратите внимание на страницы загрузки, то практически на каждой из них встретится данный файл. Часто он имеет солидный программный вес. Дело в том, что на него возлагается важная дополнительная функция запуска часто используемого на странице кода. То есть, все повторяемые на ней функции генерируются в jQuery, что значительно ускоряет загрузку. Движок WordPress, язык программирования PHP, HTML, JS и CSS не стоят на месте. Они регулярно модернизируются, совершенствуются, изменяются. jQuery как основополагающий инструмент их взаимодействия должен оставаться актуальным. В противном случае многие функции выбранной темы WP могут не работать. При использовании устаревшей версии jQuery, необходимо ее обновить. Благодаря инструкции, приведенной далее, с задачей справится даже новичок.
Отключение и подключение jQuery
Код, отвечающий за отключение библиотеки, вставляется в разных файлах. Для современной версии движка, предлагаем выводить его в functions.php. Находим файл в директории шаблона, открываем его. К слову, рекомендуем именно скачать functions.php на ПК, сделать резервную копию и править код утилитой Notepad++. Последняя является специализированным инструментом для работы с PHP. Имеет построчная нумерация, подсветка функций, автоматический выбор при вводе, масса других полезностей. Итак, открыли functions.php, вставляем следующие строки:
if ( !is_admin() ) {
wp_deregister_script(‘jquery’);
}
Данное решение можно назвать наиболее удобным, универсальным, корректным. Во-первых, обратите внимание на is_admin. Это функция прописывается не случайно. Она отключает библиотеку на веб-ресурсе, но сохраняет ее опцион в панели администратора. То есть, jQuery отключает точечно без ущерба для сторонних алгоритмов. У этого варианта есть оговорка: он сработает, когда библиотека прописана в header.php посредством команды wp_head. Если jQuery представлена скриптовым тегом, просто его удаляете. Не уходя далеко, рассмотрим этот метод ее добавления в файлы темы. В интернете часто предлагают аналог в виде подключения библиотеки тегом script. В нынешних реалиях, применять его не стоит. Он отличается рядом серьезных минусов, которые отразятся на сторонних алгоритмах. Первая и самая веская – работа смежных скриптовых модулей. Тег – это простое, но сквозное решение. Он инициирует работу напрямую, игнорируя сторонние функции. Часто результатом становится необъяснимые отключения, крэши соседних скриптов. Вторая причина глубже – невозможность оптимизации. Она станет понятна позднее.
С отключением разобрались, но как инициировать обратный процесс подключения? Обращаемся к уже знакомому functions.php. Новый кусок кода не сильно отличается от предыдущего. В нем используется скриптовая команда с обратным параметром подключения – wp_enqueue_script. Запомните ее назначение, для понимания дальнейшего процесса обновления.
<?php
function my_scripts_method(){
if ( !is_admin() ) {
wp_enqueue_script( ‘jquery’ );
}
}
add_action( ‘wp_enqueue_scripts’, ‘my_scripts_method’ );
?>
На этом с процессами отключения, подключения библиотеки покончено. Это может потребоваться для обновления в ручном, а не автоматическом режиме, тестировании работы других скриптов, нахождении ошибок в работе системы методом от «обратного» и т.д.
Автообновление через код
Имеется ввиду вставка соответствующей кодовой конструкции. Ничего сложного в этом нет. Главное, разобраться, что и от чего зависит. Первое – установка протекает в 3 этапа. В ходе 1-го jQuery отключается. При этом используется ранее упомянутая функция wp_deregister_script. Вторая часть обновления представляет собой регистрацию новой версии. После этого идет этап непосредственной загрузки, установки нового скрипта через функцию wp_enqueue_script. Если ранее не сталкивались с подобными решениями, рекомендуем поинтересоваться полным спектром их возможностей. Они являются стандартными решениями «ВордПресс». Вообще, вопрос разбора функционального назначения предустановленных скриптов от WP достоин отдельного рассмотрения. Вскоре планируем выпустить отдельный, мегаинтересный материал на эту тему. Вы удивитесь, на что способны скрипты, изначально заложенные в WordPress. Подводя итоги, еще раз приводим решения, которые будут задействованы в рамках обновления jQuery:
- wp_deregister_script – удаление ранее используемой версии;
- wp_register_script – регистрация новой;
- wp_enqueue_script – загрузка и установка, обновления.
Самые догадливые уже представили примерный вид будущего скрипта. Разместим его в том же functions.php.
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);
Дадим краткую справку касаемо работы данного скрипта. Видим is_admin – решение не затрагивает панель управления CMS, действует исключительно в рамках оболочки веб-сайта. Скрипт wp_deregister_script приступает к удалению устаревшего jQuery, что прописано в соответствующей строке. Далее все это регистрируется посредством прямой ссылки. Если далеки от программирования, вникать не стоит – она подойдет всем. Ваш сайт постоянно связан с базой обновлений jQuery. В случае появления «свежей», она моментально загружается и устанавливается с предварительным удалением ранее используемой. За этап инсталляции ответственная функция wp_enqueue_script. Постарались объяснить максимально доступно. Теперь следует взять во внимание ряд нюансов.
- В конце строки регистрации зеленым прописаны значения true и false для событий с возможностью подобных решений. Дословный перевод этих вариантов – «да» и «нет». Единственное true в строке гарантирует загрузку jQuery в футере, вместо head. При этом задействуется иная функция wp_footer. Она найдется в библиотеке любой темы «ВордПресс». Знать эту особенность необходимо для соблюдения работоспособности ранее установленных расширений, скриптов. Некоторые из них запускаются только после jQuery. Следовательно, она должна выводится не в footer, а head. Для этого просто меняем true на false.
- Предлагаемая нами скриптовая конструкция подразумевает подгрузку актуального jQuery по технологии CDN от Google. При это задействуется не заданный, а ближайший к пользователю сервер. Такое решение в разы ускоряет загрузку, экономит сетевые ресурсы.
Казалось бы, качественный, финальный результат. Вынуждены не согласиться. Еще одной особенностью работы с jQuery является необходимость обеспечения совместимости модулей темы с более ранними версиями. Проблема на 100% актуальна для версий 1.9 и ниже. Углубляться в причины подобной нужды не станем. За совместимость в шаблонах отвечает отдельный скрипт – jquery-migrate.min.js. В случаях, когда требуется поддержка устаревших библиотек, трогать его не рекомендуют. Но как? Ранее представленный кусок кода обновляет пакет полностью. Выход – скриптовая конструкция с исключением. Она мало чем отличается от предыдущей.
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’ обновленным ‘jquery-core’. Он инициирует удаление, регистрацию, установку только основной библиотеки. Упомянутый jquery-migrate.min.js остается без изменений. Замечено, что загрузка решения в футере, при наличии такой возможности, по какой-то причине не работает. Особой проблемы в этом нет, но полезно знать.
Обновление плагином
В WordPress многие проблемы решаются установкой специального расширения. Обновление библиотеки jQuery не стало исключением. Существует несколько популярных плагинов для инициации данной процедуры. По отзывам пользователей, рейтингам аудиторов мы выявили оптимальный вариант – дополнение jQuery Updater. Оно известно многим профессиональным веб-разработчикам. На момент середины 2019, актуальная версия 3.4.1. Плагин изменяется каждые 3-5 месяцев, и автообновления самого расширения не предусмотрены, поэтому не забываем следить за актуальностью установленной версии jQuery Updater. Сейчас зарегистрировано более 40 000 скачиваний этого дополнения. Солидный показатель для плагинов данной категории. Updater без проблем работает на движке 4.2 и выше, вплоть до современной 5.2.2. Имеется поддержка PHP 5.6+. Языковой пакет не включает русского перевода, но есть английский язык. Рейтинг расширения составляет 4.6 из 5. В настоящее время, разработчик решает 3 заявленные проблемы. Хорошо, что он вообще над ним работает. Многие забрасывают подобные проекты.
Суть плагина заключается в моментальном обновлении библиотеки до самой последней версии. Автор заявляет, что в движке «ВордПресс» она по умолчанию далека от актуальной. Согласимся с этим: иногда первоклассная, свежая версия WP поставляется с морально устаревшим пакетом jQuery. Благодаря использованию Migrate, дополнение не изменяет файлов. После удаления расширения систем полностью возвращается в исходное состояние. Создатель готов проконсультировать по вопросам использования Updater в рамках форума WordPress. На тему настройки скриптов, самой библиотеки общаться не желает. В принципе, и не обязан. Хорошее решение, если нет желания править код. Хотя прописанный вручную скрипт надежнее.
Вывод
Библиотека jQuery используется во многих динамических алгоритмах сайта. Отсутствие актуальной версии станет причиной деактивации ряда функций или даже плагинов. Существует несколько решений проблемы. В сегодняшней статье приведено наиболее правильное. Мы от и до разложили процесс формирования конечного варианта скрипта для автоматического обновления jQuery. В качестве альтернативы приведен специализированный плагин. С его помощью библиотека обновляется в пару нажатий через панель WP. Рассмотрены плюсы, минусы, особенности, нюансы каждого способа. По итогу, материал дает четкий, простой, подробный ответ касаемо процесса обновления в целом, а также сути конкретных этапов – подключения, отключения, регистрации jQuery.
