👉 Kuinka korjata '$ is not a function' WordPressissä: 4 tapaa
Muokkaat functions.php-tiedostoa, lisäät pari riviä jQuerya, ja sivusto kaatuu valkoiseen ruutuun. Konsolissa lukee: Uncaught TypeError: $ is not a function. Kuulostaako tutulta?
Jokainen WordPress-kehittäjä törmää tähän virheeseen vähintään kerran. Kopioit toimivan jQuery-koodin CodePenistä tai koodinpätkästä, liität sen sivustollesi, ja WordPress ei ymmärrä sitä. Syy ei ole rikkinäinen koodi tai lisäosien ristiriita. Syy on siinä, miten WordPress käsittelee jQuerya.
Käymme läpi neljä toimivaksi todettua tapaa korjata "$ is not a function" -virhe, turvallisesta IIFE-kääreestä noConflictin täydelliseen poistamiseen. Jokaisen tavan mukana tulee valmis koodi, jonka voit kopioida ja liittää.
💡 Pikakatsaus:
- Kääri jQuery-koodi IIFE-anonyymifunktioon, turvallisin ja yleispätevin tapa
- Käytä jQuery document ready -metodia dollari-parametrilla headissa oleville skripteille
- Määritä oma alias noConflictin avulla, kätevää kun dollarimerkki on toisen kirjaston varaama
- Poista noConflict käytöstä globaalisti, vain kun sivustolla ei ole muita kirjastoja
Miksi "$ is not a function" -virhe ilmenee WordPressissä
WordPress lataa jQueryn noConflict-tilassa. Tämä tarkoittaa, että $-muuttuja, jQueryn lyhyt alias, ei ole käytettävissä globaalisti. WordPressin ydinkehittäjät tekivät tämän tarkoituksella välttääkseen ristiriitoja: monet JavaScript-kirjastot (Prototype, MooTools, vanhemmat Bootstrap-versiot) käyttävät myös $-merkkiä päälyhenteenään.
Kun kirjoitat skriptissäsi:
1 $("#element").hide();
WordPress ei tiedä, että $ on jQuery. Se näkee kutsun tuntemattomaan funktioon ja antaa virheen TypeError: $ is not a function. WordPressin ulkopuolella, "paljaalla" HTML-sivulla, tämä sama koodi toimisi ongelmitta, koska jQuery rekisteröi $-merkin siellä globaalisti.
Teknisesti WordPress ymmärtää vain täyden nimen: jQuery("#element").hide(). Mutta jQuery-sanan kirjoittaminen $-merkin sijaan jokaisella rivillä monirivisessä skriptissä on hankalaa, koodi paisuu ja menettää luettavuutensa. Onneksi on neljä tapaa kiertää tämä rajoitus.
Ennen kuin muokkaat mitään teematiedostoja, tee varmuuskopio sivustostasi. Yksi puuttuva puolipiste functions.php-tiedostossa, ja sivusto menee nurin. Varmuuskopion avulla voit perua muutokset minuutissa.
Tapa 1: IIFE-kääre, turvallinen ja yleispätevä
Luotettavin tapa palauttaa $ WordPress-skripteissä on IIFE (Immediately Invoked Function Expression). Välität jQuery-muuttujan argumenttina, ja funktion sisällä viittaat siihen tutulla $-merkillä.
Koodi footer.php-tiedostoon tai matalan tason lisäykseen (sivuston alatunniste):
1 (function($) { 2 // Your jQuery code here 3 $("#element").hide(); 4 })(jQuery);
Mitä tässä tapahtuu: anonyymi funktio ottaa vastaan $-parametrin ja sitä kutsutaan välittömästi jQuery-argumentilla. Tämän funktion sisällä $ === jQuery, kun taas ulkopuolella $ pysyy määrittelemättömänä. Ristiriita muiden kirjastojen kanssa on eliminoitu.
Tämä tapa toimii alatunnisteessa oleville skripteille. Jos skriptin on suoritettava <head>-osiossa, käytä tapaa 2.
Tapa 2: jQuery(document).ready $-parametrilla
Kun skriptin on suoritettava sivun otsikossa (ennen DOMin latautumista), kääri se jQuery(document).ready-metodiin. Huomaa: $ välitetään callback-parametrille, tämä ei ole kirjoitusvirhe vaan keskeinen seikka.
Koodi header.php-tiedostoon tai functions.php-tiedostoon wp_enqueue_script-funktion kautta:
1 jQuery(document).ready(function($) { 2 // Your jQuery code here 3 console.log($); 4 });
.ready()-metodi odottaa DOMin täyttä latautumista, ja jQuery välittää itsensä callback-funktiolle $-merkkinä. Tämän callbackin sisällä $ toimii taas kuten normaalissa JavaScript-ympäristössä. Ja toisin kuin tapa 1, skripti käynnistyy <head>-osiosta, mikä on hyödyllistä kriittisissä alustustoimenpiteissä.
Useimmat teema- ja lisäosakehittäjät tietävät tästä WordPressin erikoisuudesta, joten laadukkaissa tuotteissa näet lähes aina jQuery-sanan $-merkin sijasta tai jonkin yllä olevista kääreistä.
Tapa 3: luo oma alias noConflictin avulla
jQueryn avulla voit paitsi palauttaa $-merkin, myös määrittää minkä tahansa muun lyhyen aliaksen, esimerkiksi muuttujat $j tai jq, tai minkä tahansa haluamasi muuttujan. Tämä on kätevää, kun sivustolla on jo toinen kirjasto, joka on varannut $-merkin.
1 var jq = jQuery.noConflict(); 2 jq("div p").hide(); 3 4 // Another library continues using its own $ 5 $("content").style.display = "none";
jQuery.noConflict()-metodi vapauttaa $-merkin muita kirjastoja varten ja palauttaa jQueryn sinun muuttujaasi (jq esimerkissä). Tämän jälkeen kutsut tehdään jq(...)-muodossa, kun taas $ toimii naapurikirjastolle, ristiriita häviää kokonaan.
Tämä lähestymistapa on erityisen hyödyllinen sivustoilla, joilla WordPress-teema elää rinnakkain kolmannen osapuolen JavaScript-kehyksen kanssa, joka käyttää $-merkkiä omiin tarkoituksiinsa.
Tapa 4: poista noConflict kokonaan käytöstä (käytä varoen)
Jos tiedät varmasti, ettei sivustolla ole muita $-merkkiä vaativia kirjastoja, voit poistaa noConflict-tilan käytöstä globaalisti:
1 $ = jQuery.noConflict(true);
Tämän rivin jälkeen $ toimii taas globaalina jQuery-aliaksena kaikkialla, missä tahansa skriptissä, missä tahansa sivulla. Tämä tapa on kuitenkin riskialttein. Jos myöhemmin asennat lisäosan, joka myös käyttää $-merkkiä, sivusto hajoaa vaikeasti toistettavan bugin vuoksi.
Suosittelemme tapoja 1 ja 2 ensisijaisina, ne ovat turvallisia, eristettyjä ja kattavat valtaosan todellisista skenaarioista. Tapa 4 on tilanteisiin, joissa ylläpidät suurta vanhaa skriptiä etkä voi kääriä jokaista funktiota erikseen.
Yllä olevalla videolla on visuaalinen esittely kaikista neljästä tavasta toiminnassa. Katso se, jos pidät visuaalisesta selityksestä tekstin sijaan.
⁉️🤔 Usein kysytyt kysymykset
Miksi WordPress ylipäätään poisti $-merkin käytöstä jQuerylta?
WordPressin ydinkehittäjät ottivat
jQuery.noConflict()-tilan oletuksena käyttöön suojatakseen sivustoja ristiriidoilta muiden JavaScript-kirjastojen kanssa. Prototype.js, MooTools ja jotkin vanhemmat kehykset rekisteröivät myös globaalin$-muuttujan. Jos WordPress antaisi$-merkin jQuerylle, mikä tahansa tällaista kirjastoa käyttävä teema tai lisäosa rikkoisi hallintapaneelin tai julkisen sivun. WordPress on ajanut jQuerya noConflict-tilassa versiosta 3.6 lähtien, tämä ei ole bugi vaan arkkitehtoninen päätös.$-muuttuja globaalissa näkyvyysalueessa pysyy vapaana kolmannen osapuolen kirjastoille. Juuri siksi$("#id")kääreen ulkopuolella antaa ainaTypeError-virheen.
Voinko vain sisällyttää jQueryn toisen kerran, WordPressin ulkopuolelta?
Teknisesti kyllä, voit sisällyttää jQueryn CDN-linkin kautta toisen kerran, ja se rekisteröi
$-merkin globaalisti. Mutta tämä on huono käytäntö: kaksi jQuery-versiota yhdellä sivulla aiheuttaa ristiriitoja, sivun koko kasvaa, ja WordPress-lisäosat odottavat juuri sitä jQuery-versiota, joka on rekisteröitywp_enqueue_script-funktion kautta. Työskentele aina sen jQuery-version kanssa, jonka WordPress tarjoaa, se on testattu yhteensopivaksi ytimen ja hallintapaneelin kanssa. jQueryn sisällyttäminen uudelleen tarkoittaa uusien ongelmien luomista alkuperäisen ratkaisemisen sijaan.
Mitä tehdä, jos virhe ilmenee vain tietyillä sivuilla?
Tarkista, lataako kyseinen sivu kolmannen osapuolen skriptin lisäosan tai widgetin kautta. Jotkin välimuisti- ja minifiointilisäosat järjestelevät skriptejä aggressiivisesti uudelleen, ja jQuery saattaa latautua koodisi jälkeen. Poista optimointilisäosat käytöstä yksi kerrallaan löytääksesi syyllisen. Useimmissa tapauksissa "$ is not a function yhdellä sivulla" -ongelma johtuu skriptien latausjärjestyksestä. Minifiointi- tai välimuistilisäosa asettaa skriptisi ennen jQuerya, eikä
$ole vielä olemassa kutsun hetkellä. Ratkaisu: joko sulje skripti minifioinnin ulkopuolelle tai kääri se tavan 1 IIFE-kääreeseen, joka ei riipu globaalista$-merkistä.
Onko olemassa valmista lisäosaa, joka korjaa tämän virheen?
Ei ole erillistä lisäosaa "$ is not a function -virheen korjaamiseen", eikä sellaista tarvita. Ongelma ratkeaa yhden rivin kääreellä, ja erillisen lisäosan asentaminen tätä varten on liioittelua. On kuitenkin lisäosia, kuten Code Snippets, joiden avulla voit lisätä JavaScript- ja PHP-koodia muokkaamatta teematiedostoja, mikä on turvallisempaa aloittelijoille. Code Snippets tallentaa koodisi tietokantaan, ei
functions.php-tiedostoon. Jos teet syntaksivirheen, lisäosa peruu muutokset automaattisesti, eikä sivusto kaadu. Suosittelemme aloittelijoita lisäämään kaiken JS-koodin sen kautta, ei muokkaamalla teematiedostoja.
"$ Is not a function" -virhe on korjattu, mitä seuraavaksi?
Tärkein oivallus: ongelma ei ole koodissasi eikä WordPressissä. Tämä on sisällönhallintajärjestelmän vakiotoimintaa, ja se korjataan yhdellä kääreellä. Valtaosassa tapauksista tapa 1 (IIFE) tai tapa 2 (.ready() $-merkillä) riittää. Ne eivät riko muita skriptejä ja toimivat missä tahansa WordPress-versiossa, 4.0:sta uusimpaan.
Jos työskentelet usein jQueryn kanssa WordPressissä, kehitä tavaksi aloittaa jokainen skripti rivillä (function($) { ja lopettaa riviin })(jQuery);, tästä tulee lihasmuistia viikossa ja se poistaa virheen pysyvästi.
Jaa artikkeli kollegoille, jotka yhä muokkaavat functions.php-tiedostoa yrityksen ja erehdyksen kautta, yksi valmis kääre säästää heiltä tunnin debuggausta.
Ammattimainen kirjoittajien ja toimittajien tiimi, joka on erikoistunut laadukkaan sisällön luomiseen.