Обновление кода jQuery в неподдерживаемом плагине или теме WordPress
Это очень обобщенное введение, оно ни в коем случае не является исчерпывающим или полным. Вам предлагается продолжить изучение проблем, с которыми вы можете столкнуться.
С выпуском WordPress 5.5 инструмент, известный как jQuery Migrate, больше не был включен по умолчанию (это часть пути обновления до jQuery 3 в ядре WordPress).
К сожалению, на некоторых пользователей это негативно повлияло, это было своего рода ожидаемым, и плагин для помощи этим пользователям был выпущен до выпуска под названием Enable jQuery Migrate Helper. Он функционирует как временное решение до следующего выпуска WordPress, но к тому времени код должен быть обновлен.
Тем не менее, существуют различные темы и плагины, которые больше не поддерживаются, и пользователи немного не понимают, что они могут делать. В идеале, если это вы, поиск поддерживаемой альтернативы будет лучшим решением. Что не всегда является самым своевременным решением.
Если вы один из тех, кому не повезло, вы используете неподдерживаемый плагин или тему и у вас возникли проблемы, связанные с тем, что jQuery Migrate больше не включен на вашем сайте, ниже приведен список наиболее распространенных устаревших функций и способы их исправления вручную. .
Обратите внимание, что это потребует от вас изменения вашего плагина или темы, и эти изменения будут перезаписаны, если тема или плагин обновятся.
Если вы не хотите, чтобы это произошло, рассмотрите возможность разветвления плагина или создания дочерней темы, но это может быть временное решение.
Это также требует, чтобы вы внесли изменения в код, если вам это неудобно, вы, вероятно, найдете других разработчиков, которые возьмут это на себя как внештатную задачу, или, если у вас есть агентство или разработчик, которых вы часто используете, посоветуйтесь с ними.
Прежде чем ты начнешь
Вот несколько ключевых фраз, которые будут использоваться и которые важно знать, чтобы вы могли быстро определить, что нужно изменить.
- [селектор] – используется для ссылки на определенную разметку HTML, с которой будет работать ваш код JavaScript. Часто в таком формате:
$( [selector] ).function() - [функция] – слово, которое сообщает cvode, что делать в любой момент времени, это то, что на самом деле выполняет код в вашей разметке. Часто в таком формате:
$( 'body' ).[function]() - [событие] – Что-то, что заставляет код работать. Часто в этом формате в более современном коде:
$( 'body' ).on( [event], function() { - $ или jQuery – используется, чтобы указать вашему браузеру использовать библиотеку jQuery, он может использовать любую из этих двух, и вы должны продолжать использовать ту, которая уже используется. В приведенных здесь примерах будет использоваться
$сокращение, поскольку оно более широко используется, но могут быть и другие форматы, поэтому всегда копируйте начало кода.
Вы заметите, что [selector]вокруг него заключены одинарные или двойные кавычки, они должны быть там, чтобы JavaScript знал, что он смотрит на текст, а не на функцию (вот почему в [function]приведенном выше тексте нет кавычек) .
Часто вы можете просто найти в своем файле имя функции, как указано ниже, чтобы найти, где вам нужно внести изменения в свой код.
jQuery.fn.live() устарел
документация jQuery об .live()обработчике событий
Пример: $( 'button' ).live( 'click', function() {
Современный пример: $( 'body' ).on( 'click', 'button', function() {
Объяснение: Вышеупомянутое будет запускаться всякий раз, когда buttonна вашем сайте запускается [event]of click(нажата кнопка), а затем запускается серия кода.
Примеры полей:
[selector]–'button'[function]–.live[event]–'click'
Наиболее частая из возникающих проблем – это использование .live()функции, которую использовал jQuery. Для ясности, это было устаревшим в 2011 году, но это также одна из самых простых проблем для решения.
Если вы посмотрите на современный пример выше, вы увидите, что [selector]он был заменен на более широкий, это сделано потому, что общий пример не может знать структуру веб-сайта yoru, и это всегда будет работать.
Затем [function]его заменили на современный аналог, но [event]он остался прежним.
Наконец, обратите внимание на то, что оригинал [selector]стал частью параметров, используемых модерном [function], а остальная часть строки осталась прежней.
jQuery.browser устарел
Документация jQuery о .browser()функции
Альтернативы этой функции нет. Он использовался для определения того, какой браузер использовал посетитель, но оказался ненадежным и был удален по этой причине.
Если вам нужно определить, какой браузер использует посетитель для применения специальных стилей или аналогичных (его обычное использование), вам следует подумать, чтобы разработчик добавил вместо этого функцию обнаружения.
jQuery.fn.size () устарел
Документация jQuery о .size()функции
Пример: $( 'button' ).size()
Современный пример: $( 'button' ).length
Пояснение: Будет подсчитано, сколько элементов [selector](в данном случае кнопок) найдено на странице. Обратите внимание, что современный пример не заканчивается скобками, это правильно, в конце не должно быть скобок.
Примеры полей:
[selector]–'button'[function]–.size
Такой способ проверки размера часто используется, чтобы увидеть, существуют ли на странице один или несколько HTML-элементов, прежде чем пытаться манипулировать ими с помощью JavaScript, или чтобы проверить, сколько элементов существует в коллекции (массиве) перед выполнением цикла.. Она должна быть простым вопросом замены .size()с .lengthво всех этих случаях.
jQuery.fn.load () устарел
документация jQuery о .load()мероприятии
Эта функция имеет три использования, и только два из них являются устаревшими (если вы получили предупреждение, был обнаружен один из двух методов, указанных ниже, поэтому вам следует найти их и исправить).
Пример: $( 'body' ).load()
Современный пример: $( 'body' ).trigger( 'load' )
Объяснение: Это укажет браузеру запустить любой код, установленный для запуска, после завершения загрузки страницы, даже если она уже завершила загрузку ранее.
Пример: $( 'body' ).load( function() {
Дополнительный пример: $( 'img' ).load( function() {
Современный пример: $( 'body' ).on( 'load', function() {
Дополнительный современный пример: $( 'body' ).on( 'load', 'img', function() {
Объяснение: В приведенном выше примере будет запущен некоторый код, когда выбранный [selector]элемент завершит загрузку.
Примеры полей:
[selector]–window,'body'или'img'[function]–.load[event]–'load'
Если bodyили windowиспользуется в качестве [selector], то функции предназначены для запуска после завершения загрузки страницы.
Дополнительный пример и современный пример будут использоваться для запуска всякий раз, когда в этом примере изображение завершает загрузку на страницу.
Это были наиболее частые проблемы, которые до сих пор возникали у пользователей.
У вас есть другие связанные проблемы или, может быть, у вас есть советы о том, как что-то еще лучше объяснить, пожалуйста, дайте мне знать!
Если вам неудобно вносить такие изменения в неподдерживаемый плагин или тему, доступна временная служба для переноса кода jQuery.
Источник записи: https://clorith.net