Wydany 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.