Kako rešiti grešku “jQuery is not Defined” u WordPress-u

jQuery je mala JavaScript biblioteka koja omogućava jednostavno rukovanje dinamičkim elementima na web sajtu, kao što su animacije, meniji, obrasci i drugi interaktivne funkcionalnosti. WordPress koristi ovu biblioteku za mnoge važne funkcionalnosti, kako u temama, tako i u plugin-ima.

Međutim, može se desiti da u nekom momentu na vašem WordPress web sajtu naiđete na grešku “jQuery is not defined”. Ova greška znači da iz nekog razloga WordPress ne može da pronađe ovu biblioteku ili da je ona nepravilno učitana.

U ovom tekstu ćemo objasniti šta je to greška “jQuery is not defined”, kada se ona javlja, kako da je prepoznate i što je najvažnije, kako da je rešite.

Šta je greška “jQuery is not Defined” u WordPress-u?

Greška “jQuery is not defined” se javlja kada WordPress pokušava da koristi funkcije iz jQuery biblioteke, ali ona iz nekog razloga nije dostupna ili ne funkcioniše ispravno. Najčešći uzroci mogu biti:

• Konflikti unutar ili između WordPress tema i plugina.
• Problemi sa JavaScript ili jQuery fajlovima (npr. neispravne verzije fajlova).
• Zavisne greške gde JavaScript fajlovi pokušavaju da se izvrše pre učitavanja jQuery-a.
• Problemi sa CDN-om, koji može biti privremeno nedostupan. Ukoliko do sada niste podesili da vaš web sajt radi preko CDN-a, pročitajte Kako da aktivirate Cloudflare u cPanel-u.
• Loše performanse hosting servera.

Jednostavno rečeno, u tom momentu vaš web sajt ne može da koristi jQuery biblioteku zbog tehničkih problema sa učitavanjem ili konfliktima u kodu.

Poslednju stavku (Loše performanse hosting servera) možete izbeći tako što ćete zakupiti hosting paket iz naše Premium web hosting usluge, ili neki od naših VPS servera. U oba slučaja dobijate stabilan, pouzdan i brz hosting server koji će omogućiti da vaš web sajt radi besprekorno u svakom trenutku.

Kako se manifestuju jQuery greške?

JQuery greške se mogu manifestovati na različite načine:

1. Neispravne funkcionalnosti
   Elementi poput navigacionih menija, pop-up prozora, slajdera ili animacija ne rade ispravno.
2. Prazne stranice ili delimično učitavanje
   Stranice se učitavaju samo delimično, pri čemu im nedostaju elementi kao što su galerije ili kontakt forme.
3. Sporo učitavanje stranice
   Konflikti sa jQuery-om mogu da uspore učitavanje sajta, jer browser bezuspešno pokušava da pronađe nedostupne resurse.
4. JavaScript greške u konzoli browsera
   browser često prikazuje poruke poput:
   • "Uncaught ReferenceError: jQuery is not defined"
   • "Uncaught TypeError: $(...).function is not a function"

Kako prepoznati da je u pitanju jQuery greška?

Da biste tačno identifikovali problem, pratite ove korake:

1. Proverite konzolu browsera
   Otvorite svoju stranicu, pritisnite F12 da biste ušli u Developer tools i idite na tab pod nazivom Console. Potražite u konzoli poruke poput:
   • "Uncaught ReferenceError: jQuery is not defined"
   • "Uncaught TypeError: $(...).function is not a function"

1. Proverite učitavanje skripti
   U tabu Network, filtrirajte fajlove po tipu “JS” i proverite da li je jquery.min.js učitan. Ako ga nema, jQuery nije dostupan vašem sajtu.

1. Pregledajte izvorni kod stranice
   Desnim klikom na stranicu odaberite opciju “View Page Source”, zatim potražite termin jquery.min.js koristeći CTRL+F. Ako ne pronađete ovaj fajl, to znači da jQuery nije uključen.
2. Testirajte funkcionalnost specifičnih elemenata
   Proverite elemente sajta koji koriste jQuery, poput pop-up prozora, galerija ili slajdera. Njihova nefunkcionalnost ukazuje na problem sa jQuery-om.

Kako rešiti grešku “jQuery is not defined”?

Pre nego što započnete bilo kakvu aktivnost na rešavanju greške, preporučujemo da napravite backup (rezervnu kopiju) sajta, kako biste bili sigurni da možete da se vratite na prethodno stanje ako nešto pođe po zlu.

Ukoliko niste sigurni kako da uradite backup, predlažemo da pročitate Kako da uradite backup kopiju svog web sajta u cPanel nalogu.

Ako imate mogućnost, koristite localhost za isprobavanje ovih rešenja.

Ukoliko niste upoznati sa instalacijom WordPress-a na localhost-u, predlažemo da pročitate naš vodič Kako da instalirate WordPress na lokalnom računaru (local server/localhost).

1. Proverite da li je jQuery uključen

WordPress automatski dolazi sa jQuery-om, ali ponekad se ova biblioteka ne učitava zbog problema sa temom ili nekim plugin-om.

1. Otvorite svoju stranicu u browseru.
2. Kliknite desnim tasterom bilo gde na stranici i izaberite opciju “View Page Source” (Pogledaj izvor stranice).
3. Pritisnite CTRL+F (ili CMD+F na Mac-u) da otvorite polje za pretragu, i upišite jquery.min.js.
   • Ako nađete ovaj fajl, jQuery je uključen.
   • Ako ga ne vidite, potrebno je da ga ručno dodate.
4. Ako jQuery nije uključen, potrebno je da dodate sledeći kod u functions.php fajl vaše teme:

function load_jquery() {
    if (!is_admin()) {
        wp_enqueue_script('jquery');
    }
}
add_action('wp_enqueue_scripts', 'load_jquery');

Ovaj kod omogućava da se jQuery automatski učitava na svim stranicama vašeg sajta. Nakon dodavanja ovog koda, osvežite stranicu i ponovo proverite da li je problem rešen.

Ukoliko niste upoznati sa functions.php fajlom, preporučujemo da pročitate Čemu sve služi functions.php fajl.

2. Proverite da li se jQuery pravilno učitava

Čak i ako je jQuery uključen, može da se desi da se ne učitava pravilno. To često uzrokuju problemi sa redosledom učitavanja skripti ili konfliktima između plugina i tema.

1. Otvorite stranicu i pritisnite F12 na tastaturi da otvorite Developer tools u browseru.
2. Kliknite na karticu Console (Konzola) i potražite poruke poput:
   • "Uncaught ReferenceError: jQuery is not defined"
   • "Uncaught TypeError: $(...).function is not a function"

Ako u konzoli vidite ove greške, problem može biti u redosledu učitavanja skripti. Da biste to rešili, koristite funkciju wp_enqueue_script u functions.php fajlu vaše teme:

wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true);

Ovaj kod omogućava da se jquery.min.js učita pre bilo koje druge skripte koja zavisi od njega, čime se rešava problem redosleda.

3. Dodajte rezervni lokalni jQuery

Ako koristite jQuery sa CDN-a (Content Delivery Network) i CDN je trenutno nedostupan, vaša stranica neće moći da pronađe ovu biblioteku. U tom slučaju, možete postaviti lokalnu verziju jQuery-a kao alternativu.

1. Otvorite header.php fajl svoje teme.
2. Pre zatvaranja <head> taga, dodajte sledeći kod:

<script>
window.jQuery || document.write('<script src="/wp-content/themes/your_theme/js/jquery.min.js"><\/script>');
</script>

Ovaj kod proverava da li je jQuery dostupan preko CDN-a. Ako nije, automatski koristi lokalnu kopiju jQuery-a sa vašeg sajta. Da bi ovo radilo potrebno je da imate kopiju jquery.min.js na navedenoj putanji (/wp-content/themes/your_theme/js/).

4. Izmenite wp-config.php

Ako i dalje imate problem, možete izmeniti WordPress konfiguraciju kako biste omogućili pojedinačno učitavanje skripti, što često rešava konflikte.

1. Pomoću nekog FTP/SFTP klijenta (npr. FileZilla) ili direktno preko vašeg cPanel naloga se povežite sa serverom vašeg sajta. Ukoliko do sada niste koristili FTP/SFTP klijente, pročitajte ovde koji su to Najpopularniji FTP/SFTP klijenti.
2. Pronađite fajl pod nazivom wp-config.php (nalazi se u root direktorijumu vašeg sajta – najčešće je to public_html)
3. Preuzmite fajl na svoj računar i otvorite ga u bilo kom tekst editoru (recimo Notepad).
4. Neposredno iznad linije / That’s all, stop editing! Happy blogging. / dodajte sledeći kod:

define('CONCATENATE_SCRIPTS', false);

Ovaj kod sprečava WordPress da kombinuje više skripti u jednu, što omogućava lakše rešavanje problema sa učitavanjem. Da bi izmene bile primenjene, nakon izmena, vratite fajl na server i osvežite stranicu.

5. Ručno dodajte jQuery

Ako nijedan od prethodnih koraka ne uspe, možete ručno dodati najnoviju verziju jQuery-a direktno iz Google Hosted Libraries.

Google Hosted Libraries su javno dostupni resursi (poput JavaScript biblioteka i framework-a) koje Google hostuje na svojim serverima. Oni vam omogućavaju da koristite popularne biblioteke, poput jQuery-a, AngularJS-a, React-a i drugih, bez potrebe da ih lokalno čuvate na svojim serverima.

1. Idite na Google Hosted Libraries.
2. Pronađite najnoviju verziju jQuery-a i kopirajte sledeći kod:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

3. Otvorite header.php fajl vaše teme i nalepite ovaj kod pre zatvaranja <head> taga.

Ovaj kod dodaje jQuery direktno sa Google-ovog servera, čime zaobilazi probleme sa lokalnim ili CDN jQuery fajlovima.

Zaključak

Kao što ste videli, greška “jQuery is not defined” nije tako strašna, kako na prvi pogled to možda izgleda. Pre svega je važno da utvrdite uzrok problema sa jQuery bibliotekom i nakon toga samo ispratite korake koje smo opisali u ovom tekstu.

U pitanju je greška koja se u najvećem broju slučajeva rešava jednostavnim uključivanjem biblioteke, odnosno postavljanjem njene kopije na lokalni server. Dodavanjem par jednostavnih linija koda i uz malo strpljenja problem će biti rešen, a vaš web sajt će opet funkcionisati normalno.

Nenad Mihajlović