Mikä on paras tapa lisätä mukautettuja ulkoisia js Wordpressiin

Kuten johtava CMS-yhteisö väittää, 25% Internetistä käyttää WordPressiä. Nähdessään trendit, meillä ei ole muuta vaihtoehtoa kuin uskoa niihin, melkein joka ^toinen blogi ja joka neljäs sivusto näyttää käyttävän ilmeisesti tehokkainta ja käyttäjäystävällistä CMS: ää. Ihmiset ja kehittäjät ovat alkaneet siirtyä sivustoihinsa WordPress Platformiin.

Pyrkiessään muuttamaan suloisen ja yksinkertaisen verkkosivustosi monimutkaiseksi, tehokkaaksi CMS-sivustoksi ihmiset takertuvat hyvin perusaskeleeseen ja esittävät kysymyksen: Rakkaudelle, kuinka saan tämän ulkoisen JavaScriptin (.js) tiedoston työskentelevätkö tässä WordPress-teemassa? Kysytkö sinä myös samaa kysymystä? No amigos, olet vihdoin oikeassa paikassa: Olen täällä opastamassa sinua askel askeleelta yksinkertaisimmalla mahdollisella tavalla tämän tehtävän saavuttamiseksi!

Oletetaan nyt, että kaikki WordPress on asennettu ja potkut ulkoisen JS: n kanssa valmiina, aloittakaamme tehtävä sisällyttää tiedosto!

Huomaa: Käytän seuraavaa tiedostoa (testrun.js) tähän opetusohjelmaan, ja työskentelemäni teema on WordPressin kaksikymmentäkuusi.

alert ( 'Hei');

Aloitetaanpa!

Kaikki skriptit ja tyylitaulukot ladataan function.php: stä . Tämä on oikea tapa ladata ne WordPressiin, jotta vältetään ristiriidat muiden WordPressin tai käyttämien pluginien lataamien muiden skriptien kanssa. Jos annat WordPressin hallita kaikkia mukana olevia tiedostoja, sinun on ilmoitettava sille, että haluat tämän tiedoston sisältyvän tiedoston otsikko- (aloitus-) tai alatunnisteeseen (loppuun). Jokaisella mallilla / teemalla on omat function.php, joten toimintojen tarkka nimi, joka sisältää kaikki sisällytettävät tiedostot, olisi vaikea yleistää. Koska otan teemana kaksikymmentäkuusi, alla on tilannekuva siitä, miten function.php (jota käytetään tiedostojen sisällyttämiseen). Sinun tulisi jossain määrin muistuttaa tätä:

Wp_enqueue_script- funktio linkittää skriptitiedoston luodulle sivulle oikeaan aikaan skriptiriippuvuuksien mukaan, jos skriptiä ei ole jo sisällytetty ja jos kaikki riippuvuudet on rekisteröity. Voit joko yhdistää komentosarjan kahvaan, joka on aiemmin rekisteröity wp_register_script () -toiminnolla, tai antaa tälle toiminnolle kaikki skriptin linkittämiseen tarvittavat parametrit.

Wp_enqueue_script ($ kahva, $ src, $ deps, $ ver, $ in_footer) ottaa seuraavat parametrit:

$ kahva

(merkkijono) (Pakollinen) Komentosarjan nimi.

$ src

(merkkijono | bool) (valinnainen) Polku WordPressin juurihakemiston skriptiin. Esimerkki: '/js/myscript.js'.

Oletusarvo: väärä

$ deps

(taulukko) (valinnainen) Rekisteröityjen kahvojen ryhmä, josta tämä skripti riippuu.

Oletusarvo: taulukko ()

$ ver

(merkkijono | bool) (valinnainen) Merkkijono, joka määrittää komentosarjan versionumeron, jos sillä on sellainen. Tätä parametria käytetään varmistamaan, että oikea versio lähetetään asiakkaalle välimuistista riippumatta. Siksi se tulisi sisällyttää, jos versionumero on käytettävissä ja se on järkevä skriptille.

Oletusarvo: väärä

$ in_footer

(bool) (valinnainen) onko valloitettu skripti ennen tai ennen . Oletusarvo 'väärä'. Hyväksyy 'väärät' tai 'totta'.

Oletusarvo: väärä

Voit ohittaa tämän oppaan wp_register_script () -toiminnon. Tarkoituksenamme on sisällyttää vain ulkoinen JS. Sen pitäisi toimia hienosti ilman sitä!

Siksi, jos haluan nimetä skriptini "testi", muista, että tämä param ($ -kahva) EI välttämättä ole oikean tiedoston nimi, ja tiedostollani on ulkoinen riippuvuus jquerystä ja versio on 1.0 ja latautuu ennen sivun lataamista silloin toimintoni näyttäisi seuraavalta:

wp_enqueue_script ('opetusohjelma', get_template_directory_uri (). '/js/testrun.js', taulukko ('jquery'), '1.0', väärä);

Jos huomaat, olen käyttänyt get_template_directory_uri () -tapahtumaa, joten funktion jälkeen kytketty merkkijono, eli “ /js/testrun.js ”, on oikeastaan ​​tiedoston polku mallin hakemistotiedoston kanssa .

Joten $ src -attribuutistasi, joka on js-tiedostosi lähde, tulee: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

Siksi lopullinen function.php näyttää seuraavalta:

Pysy siinä, olemme melkein valmis! Tallenna vain tämä nyt ja paina päivitä verkkosivustollesi … sinun pitäisi nähdä JS toimivan! Tässä on minun:

Koska olemme asettaneet $ in_footer -asetukseksi väärän, skripti latautuu ennen sivun lataamista, mutta kun JQuery on ladattu, koska se lisättiin riippuvuudeksi!

Ja .. Voila! Täällä voit mennä .. Olet onnistuneesti sisällyttänyt ulkoisen mukautetun JS-tiedoston WP-teemaasi!

Hyvää koodausta !!

Viite: Enqueue Function: WordPress Codex