WordPress 4.5 i błędy jQuery – rozwiązanie problemu

WordPress - bugWydany nieco ponad tydzień temu WordPress 4.5 wprowadził nieco zamieszania – wielu użytkowników donosi, że na ich stronach po aktualizacji przestały działać skrypty JavaScript. Objawia się to w różny sposób – od niedziałających elementów strony do znikających obrazków. Znaczna część tych problemów ma swoje źródło w nowej wersji popularnej biblioteki jQuery, która w najnowszym wydaniu WordPressa została zaktualizowana do wersji 1.12.x. Co ciekawe, nie jest to błąd w samej bibliotece (wręcz przeciwnie – o czym za chwilę), ale w kodzie motywów i wtyczek.

Na szczęście problem jest dość łatwy do zdiagnozowania i naprawienia.

Diagnoza problemu

Jeśli po aktualizacji do WordPressa 4.5 na naszej stronie zaczęły dziać się dziwne rzeczy, to przede wszystkim powinniśmy zajrzeć do konsoli przeglądarki. W Chrome znajdziemy ją w menu Więcej narzędzi → Narzędzia programistów (zakładka Console), a w Firefoksie w menu Narzędzia → Konsola przeglądarki. W konsoli znajdziemy między innymi wszystkie błędy w kodzie JavaScript, jakie wystąpiły na naszej stronie.

Komunikat, którego szukamy, wyglądać może na przykład tak:

Uncaught Error: Syntax error, unrecognized expression: a[href*=#]

albo tak:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'a[href*=#]' is not a valid selector.

W obu przypadkach problemem jest ten selektor: a[href*=#]. W różnych przypadkach może on różnie wyglądać, ale zawsze zawiera znak #, który jest przyczyną problemu.

Rozwiązanie problemu

W pierwszej kolejności sprawdźmy, czy używany przez nas motyw został uaktualniony przez autora – jeśli tak, to wykonajmy aktualizację. Jeśli jednak okaże się, że autor nie usunął błędu, to będziemy musieli poradzić sobie z nim sami.

Niestety, komunikat ten nie wskazuje na plik, w którym znajduje się błędny selektor, tak więc będziemy musieli poszukać go sami. Może on znajdować się w kodzie strony (wyświetlamy w przeglądarce źródło strony i szukamy widocznego w komunikacie o błędzie kodu) lub w plikach .js używanego motywu lub wtyczek. Jeśli mamy problem ze zlokalizowaniem miejsca występowania błędnego kodu, to najprościej będzie pobrać wszystkie pliki motywu na swój komputer i przeszukać je.

Gdy już znajdziemy problematyczny fragment kodu, znak # należy objąć apostrofami lub cudzysłowami (zależnie od kontekstu), tak aby wyglądał na przykład tak:

a[href*='#']

albo tak:

a[href*="#"]

Przyczyna problemu

Jak już napisałem na wstępie, wbrew pozorom nie jest to błąd jQuery. W nowej wersji biblioteki usprawniono wykrywanie nieprawidłowej składni selektorów, a pokazana wyżej składnia jest po prostu niepoprawna (a z jakiegoś powodu dość powszechnie używana).

Problem jest znany twórcom WordPressa, ale nie są oni w stanie nic z nim zrobić, bo nie leży on po ich stronie. Po prostu wiele motywów i wtyczek zawiera błędny kod JavaScript, który przez długi czas działał (mimo że nie powinien), a teraz przestał. Sytuacja ta jest jednak dość uciążliwa dla użytkowników (szczególnie tych mniej zaawansowanych), a większość z nich (nie bez powodu) dopatruje się przyczyny problemów w aktualizacji WordPressa do wersji 4.5.

Bezpośredni link