В тази публикация ще се спра над разрешаването на един често срещан проблем след defer на Javascript в WordPress. Ако вече си приложил тази процедура по оптимизация на сайта ти за скорост, то със сигурност си забелязал за някой JS файл, че получаваш грешка, че някоя функция или променлива е Undefined. Тези грешки излизат в конзолата на браузъра ти и по всяка вероятност можеш да ги засечеш, ако не си логнат в сайта.
Защо undefined грешките след defer на Javascript засят не-логнатите потребители в WordPress?
Отговорът се състои в идеята, че при defer на Javascript в WordPress, трябва да се изключи admin панелът, защото вероятността да се счупи е голяма. Това автоматично означава, че всеки потребител с достъп до някаква част от този панел трябва да вижда сайта, без да се прилага defer на Javascript. Това обяснява защо всеки логнат потребител няма грешки тип undefined в конзолата си и всички функционалности, които зависят от Javascript и в частност от jQuery работят коректно.
За съжаление не-логнатите WordPress потребители не са пощадени от потенциални грешки и неработещи функционалности. Ето защо е важно да се подходи по следния начин:
- Идентифициране на наличието на грешка и неработеща функционалност;
- Откриване, кой Javascript файл предизвиква проблемът или той е свързан с jQuery като цяло + прилагане на опционален фикс, свързан с jQuery за текущата страница;
- Изключване на въпросния Javascript файл от defer в WordPress;
Нека да разгледаме стъпките за справяне с undefined грешки след defer на Javascript в детайли:
1. Как да открия наличието на undefined грешка след defer na Javascript в WordPress?
За целта трябва да достъпиш сайта като не-логнат потребител. Горещо препоръчвам да направиш това през Incognito/Private режима на браузъра, който използваш. Така няма да имаш кеш, нито бисквитки, нито нещо друго, което да ти попречи да тестваш на спокойствие.
След това отвори конзолата (в повечето случаи това става с клавиш F12) и следи за грешки в нея. Ако има такива, те ще са в червен цвят, а конкретно за undefined грешка ще видиш и текст, че нещо е undefined. Тук е моментът да споделя, че издирването на грешка от този тип следва да се направи, само ако установиш, че дадена функционалност на твоя WordPress сайт не работи добре за не-логнат потребител. Разбира се, можеш да провериш и профилактично, за да си сигурен какво се случва.
2. Как да открия кой Javascript файл трябва да изключа от defer на Javascript в WordPress? А какво правя, ако грешката е „jQuery is not defined“?
Тук няма просто решение. Има вероятност да разбереш директно за кой файл става въпрос от самата грешка или, ако минеш през дебъгера на браузъра ти (в повечето случаи ще можеш да кликнеш на грешката в конзолата и ще бъдеш насочен към дебъгера като е възможно да се наложи да презаредиш страницата).
Ако става въпрос за код, писан от теб самия, тогава сигурно ще откриеш лесно за кой файл става на въпрос. Ако говорим за Javascript файл от плъгин или тема – възможно е отново да се досетиш за кой плъгин или тема иде реч. След това трябва или да потърсиш в нейната документация, или да провериш за подобна грешка в съпорт форума в WordPress за плъгина/темата или на съответния сайт на разработчика.
Възможно е обаче да не се досетиш по никакъв начин и тогава ти остава само едно – копираш грешката и я търсиш в Google! Ще откриеш с какво е свързана като функционалност, а в доста случаи директно ще разбереш и за кой плъгин/тема става въпрос. Ако последното все още не е изяснено, поне ще знаеш какво прави дадената променлива или функция, която предизвиква undefined грешка. След това помисли кое на твоя WordPress сайт има такива функционалности. Така ще откриеш „виновника“.
След като знаеш кой плъгин/тема не се спогажда с defer на Javascript в WordPress, тогава трябва да откриеш файла, който трябва да изключиш от defer. Тук може да ти бъде от полза и дебъгера, защото той казва в кой файл, коя функция гърми.
А ако грешката е свързана с това, че „jQuery is not defined“, тогава за въпросната страница е добра идея или да извикаш jQuery файла или функцията, която подозираш че не работи (ти ще знаеш кое не работи на страницата, повярвай ми) или във футъра (тук ще трябва да потърсиш допълнителна информация или ако знаеш кой е файла и си го добавял ръчно – да използваш Insert Headers and Footers плъгина и просто да преместиш скрипта във футъра) или да добавиш някъде над функцията извикване на jQuery.
Последното може да стане чрез прост HTML блок в който и да е от редакторите на WordPress, в който добавяш jQuery по един от начините, представени на сайта му и в неговата документация. Съветвам те обаче, от гледна точка на GDPR, да си свалиш версия на jQuery и да я извикаш от твоя домейн и хостинг.
Important!
Преди да продължим трябва да ти кажа нещо много важно, свързано с предходния пасаж. Местенето на скрипт във футъра е ОК за скорост и SEO. Извикването на нов jQuery по предложения начин – не особено. Затова прибягвай до последното само в изключително наложителни случаи. Също така напомням, че не съм програмист и е възможно да има и по-интелигентен начин. Колегите от бранша, които се занимават с писане на код, могат да помогнат, ако желаят, чрез коментар към тази статия. Мисля, че всички ще сме благодарни! 🙂Също така, просто за всеки случай, можеш да прегледаш и тази публикация. В нея може би не става въпрос за undefined грешки, породени от defer на Javascript в WordPress, но като цяло може да ти бъде от полза в други случаи.
3. Как да изключа Javascript файл от defer в WordPress?
Тук зависи дали ползваш плъгин за оптимизация или си подходил спрямо показаното във видео урок № 74. За първия вариант трябва да видиш къде в настройките на твоя плъгин има секция за изключване на Javascript файл от defer. Съответно просто го постави в тази exclude секция и запази настройките. След това задължително изчисти кеша на сайта и би трябвало всичко да е наред с проблемния скрипт.
Ако си ползвал метода от видео урок № 74, тогава по-долу ще видиш добре познатата ти функция, но с една добавка. Напомням, че това се поставя във functions.php на дъщерната ти тема.
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don't break WP Admin
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
if ( strpos( $url, 'syntaxhighlighter' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );Забележи реда:
if ( strpos( $url, 'syntaxhighlighter' ) ) return $url;В него аз изключвам Javascript файла за плъгина SyntaxHighlighter Evolved, който имаше проблем след defer на Javascript в Optibg.com. На този ред просто казваш следното – ако в url-а има стринг за скрипт, който отговаря на описаното в кавичките, тогава вместо да се приложи defer атрибута за този скрипт, ще се върне целия url в оригиналния му вид. Така на практика можеш да добавяш няколко инструкции като променяш записа в кавичките спрямо файла, който трябва да изключиш от defer в WordPress.
Както се казва – Simple as that! Надявам се с това да си открил как да разрешиш казуса с Undefined грешките. До нови срещи!
