Skip to content

Alt om WordPress, webutvikling — og mer til

👉 Slik fikser du '$ is not a function' i WordPress: 4 måter
WordPressWebbutvikling
7 min1,335 ord

👉 Slik fikser du '$ is not a function' i WordPress: 4 måter

Du redigerer functions.php, legger til et par linjer jQuery, og nettstedet krasjer med en hvit skjerm. Konsollen viser: Uncaught TypeError: $ is not a function. Høres det kjent ut?

Enhver WordPress-utvikler støter på denne feilen minst én gang. Du kopierer fungerende jQuery-kode fra CodePen eller en kodebit, limer den inn på nettstedet ditt, og WordPress forstår den ikke. Årsaken er ikke ødelagt kode eller plugin-konflikter. Årsaken er hvordan WordPress håndterer jQuery.

Vi går gjennom fire utprøvde metoder for å fikse «$ is not a function»-feilen, fra den trygge IIFE-innpakningen til å fullstendig deaktivere noConflict. Hver metode kommer med ferdig kode du kan kopiere og lime inn.

💡 Rask oversikt:

  • Pakk jQuery-kode inn i en IIFE-anonym funksjon, den tryggeste og mest universelle metoden
  • Bruk jQuery document ready med en dollar-parameter for skript i head
  • Tilordne ditt eget alias via noConflict, praktisk når dollartegnet er opptatt av et annet bibliotek
  • Deaktiver noConflict globalt, kun når det ikke finnes andre biblioteker på nettstedet

Hvorfor «$ is not a function»-feilen oppstår i WordPress

WordPress laster jQuery i noConflict-modus. Dette betyr at $-variabelen, jQuerys korte alias, ikke er globalt tilgjengelig. WordPress' kjerneutviklere gjorde dette med vilje for å unngå konflikter: mange JavaScript-biblioteker (Prototype, MooTools, eldre Bootstrap-versjoner) bruker også $ som sin hovedforkortelse.

Når du skriver i skriptet ditt:

1$("#element").hide();

Vet ikke WordPress at $ er jQuery. Det ser et kall til en ukjent funksjon og kaster TypeError: $ is not a function. Utenfor WordPress, på en «naken» HTML-side, ville den samme koden fungert uten problemer, fordi jQuery registrerer $ globalt der.

Teknisk sett forstår WordPress bare det fulle navnet: jQuery("#element").hide(). Men å skrive jQuery i stedet for $ i hver linje av et flerlinjet skript er upraktisk, koden svulmer opp og mister lesbarhet. Heldigvis finnes det fire måter å omgå denne begrensningen på.

$ is not a function-feil i WordPress-konsollen

Før du redigerer noen temafiler, ta en sikkerhetskopi av nettstedet ditt. Ett manglende semikolon i functions.php, så går nettstedet ned. Med en sikkerhetskopi kan du rulle tilbake endringer på et minutt.

Metode 1: IIFE-innpakning, trygg og universell

Den mest pålitelige måten å få tilbake $ i WordPress-skript på er et Immediately Invoked Function Expression (IIFE). Du sender jQuery som et argument, og inne i funksjonen refererer du til det via den velkjente $.

Kode for footer.php eller innsetting på lavt nivå (nettstedets bunntekst):

1(function($) {
2    // Your jQuery code here
3    $("#element").hide();
4})(jQuery);

Hva som skjer her: en anonym funksjon aksepterer $-parameteren og kalles umiddelbart med jQuery-argumentet. Inne i denne funksjonen er $ === jQuery, mens $ forblir udefinert utenfor. Konflikt med andre biblioteker er eliminert.

Denne metoden fungerer for skript i bunnteksten. Hvis skriptet må kjøres i <head>, bruk metode 2.

Metode 2: jQuery(document).ready med $-parameter

Når et skript må kjøres i sidens topptekst (før DOM lastes), pakk det inn i jQuery(document).ready. Merk: $ sendes til callback-parameteren, dette er ikke en skrivefeil, men et nøkkelpoeng.

Kode for header.php eller functions.php via wp_enqueue_script:

1jQuery(document).ready(function($) {
2    // Your jQuery code here
3    console.log($);
4});

.ready()-metoden venter på full DOM-lasting, og jQuery sender seg selv til callbacken som $. Inne i denne callbacken fungerer $ igjen som i et normalt JavaScript-miljø. Og, i motsetning til metode 1, starter skriptet fra <head>, noe som er nyttig for kritiske initialiseringsoperasjoner.

De fleste tema- og plugin-utviklere kjenner til denne WordPress-særheten, så i kvalitetsprodukter vil du nesten alltid se jQuery i stedet for $, eller en av innpakningene ovenfor.

Metode 3: opprett ditt eget alias via noConflict

jQuery lar deg ikke bare få tilbake $, men også tilordne et hvilket som helst annet kort alias, for eksempel variablene $j eller jq, eller en hvilken som helst variabel du foretrekker. Dette er praktisk når nettstedet allerede bruker et annet bibliotek som har tatt $.

1var jq = jQuery.noConflict();
2jq("div p").hide();
3 
4// Another library continues using its own $
5$("content").style.display = "none";

jQuery.noConflict()-metoden frigjør $ for andre biblioteker og returnerer jQuery til variabelen din (jq i eksemplet). Etter dette gjøres kall via jq(...), mens $ fungerer for nabobiblioteket, konflikten forsvinner fullstendig.

Denne tilnærmingen er spesielt nyttig på nettsteder der et WordPress-tema sameksisterer med et tredjeparts JavaScript-rammeverk som bruker $ til sine egne formål.

Metode 4: deaktiver noConflict fullstendig (bruk med forsiktighet)

Hvis du vet med sikkerhet at nettstedet ikke har andre biblioteker som krever $, kan du deaktivere noConflict-modus globalt:

1$ = jQuery.noConflict(true);

Etter denne linjen fungerer $ igjen som et globalt jQuery-alias overalt, i ethvert skript, hvor som helst på siden. Denne metoden er imidlertid den mest risikable. Hvis du senere installerer en plugin som også bruker $, vil nettstedet knele med en feil som er vanskelig å reprodusere.

Vi anbefaler metode 1 og 2 som primære, de er trygge, isolerte og dekker de aller fleste virkelige scenarioer. Metode 4 er for situasjoner der du vedlikeholder et stort, gammelt skript og ikke kan pakke inn hver funksjon separat.

I videoen ovenfor får du en visuell demonstrasjon av alle fire metodene i aksjon. Se den hvis du foretrekker visuell forklaring fremfor tekst.

⁉️🤔 Ofte stilte spørsmål

Hvorfor deaktiverte WordPress $ for jQuery i utgangspunktet?

WordPress' kjerneutviklere aktiverte jQuery.noConflict() som standard for å beskytte nettsteder mot konflikter med andre JavaScript-biblioteker. Prototype.js, MooTools og noen eldre rammeverk registrerer også en global $-variabel. Hvis WordPress ga $ til jQuery, ville ethvert tema eller plugin med et slikt bibliotek ødelegge administrasjonspanelet eller frontend. WordPress har kjørt jQuery i noConflict-modus siden versjon 3.6, dette er ikke en feil, men en arkitektonisk beslutning. $-variabelen i det globale scopet forblir ledig for tredjepartsbiblioteker. Det er nettopp derfor $("#id") utenfor en innpakning alltid vil kaste TypeError.

Kan jeg bare inkludere jQuery en gang til, utenfor WordPress?

Teknisk sett, ja, du kan inkludere jQuery via en CDN-lenke en gang til, og det vil registrere $ globalt. Men dette er dårlig praksis: to jQuery-versjoner på én side kommer i konflikt, sidestørrelsen vokser, og WordPress-plugins forventer nøyaktig den jQuery-versjonen som er registrert via wp_enqueue_script. Jobb alltid med den jQuery-versjonen WordPress leverer, den er testet for kompatibilitet med kjerne og administrasjonspanel. Å inkludere jQuery på nytt betyr å skape nye problemer i stedet for å løse det opprinnelige.

Hva gjør jeg hvis feilen bare vises på bestemte sider?

Sjekk om den bestemte siden laster et tredjepartsskript via en plugin eller widget. Noen caching- og minifiserings-plugins omorganiserer skript aggressivt, og jQuery kan lastes etter koden din. Deaktiver optimaliserings-plugins én etter én for å finne synderen. I de fleste tilfeller er «$ is not a function på én side»-problemet forårsaket av skriptets innlastingsrekkefølge. En minifiserings- eller caching-plugin plasserer skriptet ditt før jQuery, og $ eksisterer ennå ikke på tidspunktet for kallet. Løsning: enten ekskluder skriptet fra minifisering, eller pakk det inn i IIFE fra metode 1, som ikke er avhengig av global $.

Finnes det en ferdig plugin som fikser denne feilen?

Det finnes ingen dedikert plugin «for å fikse $ is not a function», og det er ikke nødvendig. Problemet løses med en énlinjes innpakning, og å installere en egen plugin for dette er overdrevent. Det finnes imidlertid plugins som Code Snippets som lar deg legge til JavaScript- og PHP-kode uten å redigere temafiler, noe som er tryggere for nybegynnere. Code Snippets lagrer koden din i databasen, ikke i functions.php. Hvis du gjør en syntaksfeil, ruller plugin-en automatisk tilbake endringer, og nettstedet krasjer ikke. Vi anbefaler nybegynnere å legge til all JS-kode gjennom den, ikke ved å redigere temafiler.

«$ Is not a function»-feilen er fikset, hva nå?

Hovedpoenget: problemet ligger ikke i koden din og ikke i WordPress. Dette er standard CMS-oppførsel, og det fikses med én innpakning. I de aller fleste tilfeller er metode 1 (IIFE) eller metode 2 (.ready() med $) tilstrekkelig. De ødelegger ikke andre skript og fungerer i enhver WordPress-versjon, fra 4.0 til den nyeste.

Hvis du ofte jobber med jQuery i WordPress, utvikle vanen med å starte hvert skript med (function($) { og avslutte med })(jQuery);, dette vil bli muskelminne i løpet av en uke og for alltid eliminere feilen.

Del artikkelen med kolleger som fortsatt redigerer functions.php ved prøving og feiling, én ferdig innpakning vil spare dem for en time med feilsøking.

Redaksjonen
RedaksjonenRedaksjonelt team→ All publications

Et profesjonelt team av forfattere og redaktører som spesialiserer seg på å lage kvalitetsinnhold.