Pravi način dodajanja Javascripta v WordPress teme

Obstaja poseben način za dodajanje Javascripta v vašo WordPress temo, da preprečite kakršne koli konflikte s vtičniki ali nadrejenimi WordPress temami. Težava je v tem, da mnogi “razvijalci” kličejo svoje datoteke JavaScript neposredno v datoteko header.php ali footer.php, kar je napačen način..


V tem priročniku vam bom pokazal, kako pravilno pokličete datoteke javascript z datoteko function.php, tako da se naložijo neposredno v oznako glave ali noge vašega spletnega mesta. Tako, če razvijate temo za distribucijo in vaš končni uporabnik želi spremeniti skripte prek podrejene teme, ki jo lahko, ali če uporablja minimiranje / predpomnjenje ali druge optimizacijske vtičnike, bodo delovali pravilno. In če delate z otroško temo, so vaši skripti dodani na pravi način, ne da bi kopirali datoteke header.php ali footer.php v otroško temo, ki nikoli ne bi bile potrebne (pri delu z dobro kodirano temo)

Napačen način za dodajanje Javascripta v WordPress teme

Klicanje javascripta v datoteki header.php ali footer.php, kot je prikazano spodaj, NI pravilen način, zato ga toplo priporočam, pogosto kadar povzroči konflikte z drugimi vtičniki in ročno početje pri delu s CMS ni nikoli dobra ideja.

Pravi način za dodajanje Javascripta v WordPress teme

Bolje za dodajanje javascripta v vašo WordPress temo je, da to storite prek datoteke function.php z uporabo wp_enqueue_script. Uporaba dejanja wp_enqueue_scripts za nalaganje javascripta vam bo pomagala preprečiti težave.

Primer

wp_enqueue_script ('moj-skript', get_template_directory_uri (). '/js/my-script.js', array (), true);

Zgornja koda bo na vašo spletno stran naložila datoteko my-script.js. Kot lahko vidite, sem vključil samo ročaj $, vendar lahko dodate tudi odvisnosti od skripta, številke različice in tega, ali ga naložite v glavo ali nogo (privzeto je glava).

Funkcijo wp_enqueue_script () lahko tehnično uporabimo v kateri koli datoteki predloge teme ali vtičnika, če pa nalagate globalne skripte, jo boste morali umestiti v datoteko function.php teme ali v ločeno datoteko, posebej namenjeno nalaganju skriptov v spletnega mesta. Če pa želite samo naložiti skript v določeno datoteko predloge (na primer v objavah v galeriji), lahko funkcijo postavite desno v datoteko predloge, vendar osebno priporočam, da vse skripte shranite na enem mestu in z uporabo pogojnih pogojev skripte po potrebi.

WordPress gosti skripte

Kul pri WordPressu je, da že obstaja kopica skript, ki jih gosti in registrira, ki jih lahko uporabite pri razvoju svojih tem. Na primer, jQuery, ki se uporablja v skoraj vsakem projektu, je TUDI vedno naložen z WordPress-a in ga nikoli ne gostijo na drugem spletnem mestu, kot je Google. Preden dodate skript po meri v svoj projekt, preverite seznam registrirani skripti da se prepričajte, da je že ni vključeno v WordPress, in če je, bi morali naložiti tisto, namesto da bi registrirali svojo.

Uporaba kljuke WordPress Enqueue

Prej smo omenili funkcijo, ki je potrebna za nalaganje skripta na vaše spletno mesto, vendar morate pri delu z datotekami, ki niso predloge, kot je datoteka function.php, to funkcijo dodajati v drugo funkcijo, priključeno v ustrezne kljuke WordPress. registrirano z vsemi drugimi skripti, ki jih registrirajo WordPress, dodatki tretjih oseb in matična tema, ko uporabljate otroško temo.

WordPress ima dve različni akcijski kljuki, ki ju lahko uporabite za klicanje skript.

  1. wp_enqueue_scripts – dejanje, ki se uporablja za nalaganje skriptov na sprednji del
  2. admin_enqueue_scripts – dejanje, ki se uporablja za nalaganje skriptov v skrbnika WP

Tu je primer (ki bi bil dodan vaši funkciji.php datoteki), kako ustvariti funkcijo in nato s pomočjo kljuke WordPress poklicati svoje skripte.

/ **
* Enqueue skript
* /
funkcija myprefix_enqueue_scripts () {
wp_enqueue_script ('moj-skript', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
dodajanje ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Opomba: Oglejte si, kako uporabljamo funkcijo “get_template_directory_uri” pri določanju lokacije vašega skripta? Ta funkcija ustvari URL v mapo z temi. Če delate z otroško temo, boste namesto tega želeli uporabiti “get_stylesheet_directory_uri”, tako da kaže na otroško temo in ne na nadrejeno temo.

Dodajanje vdelane kode Javascript

Čeprav lahko vdelani javascript vstavite v katero koli datoteko predloge prek oznake skripta, je dobro, da za dodajanje vdelane kode uporabite tudi WordPress kljuke, še posebej, če gre za jedrni vtičnik ali kodo teme. Spodaj je primer dodajanja vdelanih skriptov na vaše spletno mesto:

funkcija myprefix_add_inline_script () {
wp_add_inline_script ('moj-skript', 'opozorilo (' zdravi svet ');', 'po');
}
dodajanje ('wp_enqueue_scripts', 'myprefix_add_inline_script');

To bo storilo, če dodate svoj vhodni javascript po predhodno registriranem skriptu »moj-skript«. Ko uporabljate wp_add_inline_script, lahko dodate samo vdelano kodo pred ali po že registriranem skriptu, tako da, če poskušate spremeniti kodo določenega skripta, se prepričajte, da je naložena po njej, ali če morate samo dodati nekaj kode po meri, jo lahko priklopite lahko v skriptu jquery, ki je na splošno naložena večina tem WordPress, in če ne, lahko uporabite wp_enqueue_script za nalaganje različice jQuery, ki jo gosti WordPress.

Z uporabo te metode lahko ljudje preprosto odstranijo vaše vmesne skripte prek otroške teme ali dodatka, ohrani vse vaše javascript prilagojene, ureja pa ga WordPress, ki je lahko varnejši. Če uporabljate otroško temo, lahko svoje skripte naložite prek datoteke function.php, namesto da kopirate preko datotek header.php ali footer.php na otroško temo.

Če delate na otroški temi, vam tega ni treba storiti, lahko kodo preprosto vrnete v svojo glavo z uporabo wp_head ali wp_footer kavljev, kot je spodnji primer:

dodajanje ('wp_footer', funkcija () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map