Javascripti lisamine WordPressi teemadesse Õige tee

Javascripti lisamiseks oma WordPressi teemale on konkreetne viis, et vältida konflikte pistikprogrammide või vanemate WordPress-kujundustega. Probleem on selles, et paljud arendajad kutsuvad oma javascripti faile otse päises.php või footer.php faili, mis on vale viis seda teha.


Selles juhendis näitan teile, kuidas javascripti faile õigesti helistada, kasutades faili function.php, nii et need laaditakse otse teie saidi päise- või jalusildisse. Sel viisil, kui töötate välja levitamisteema ja teie lõppkasutaja soovib skripte modifitseerida lapseteema kaudu, mida nad saavad, või kui nad kasutavad minimeerimist / vahemällu salvestamist või muid optimeerimise pistikprogramme, siis töötavad need õigesti. Ja kui töötate lasteteemal, lisatakse teie skriptid õigesti, ilma kopeerimata päisteteemat.php- või footer.php-faile lapseteemasse, mida ei peaks kunagi olema vaja (kui töötate hästi kodeeritud teemaga)

Vale viis JavaScripti lisamiseks WordPressi teemadesse

Nagu allpool näidatud, faili header.php või footer.php javascripti kutsumine EI OLE õige viis ja soovitan seda tungivalt vältida, sageli põhjustab see konflikte teiste pistikprogrammidega ja CMS-iga töötades ei tehta kunagi käsitsi asju. hea mõte.

Õige viis JavaScripti lisamiseks WordPressi teemadesse

Javascripti lisamiseks oma WordPressi teemale on parem seda teha funktsiooni ph.php kaudu, kasutades wp_enqueue_script. Toimingu wp_enqueue_scripts kasutamine javascripti laadimiseks aitab hoida teie teema probleemideta.

Näide

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

Ülaltoodud kood laadib teie saidile faili my-script.js. Nagu näete, olen lisanud ainult käepideme $, kuid saate lisada ka sõltuvusi skripti, versiooni numbri ja selle kohta, kas laadida päisesse või jalusesse (vaikimisi on päis).

Funktsiooni wp_enqueue_script () saab tehniliselt kasutada mis tahes teema- või pistikprogrammimalli failis, kuid kui laadite globaalseid skripte, peate selle paigutama kas oma teema function.php faili või eraldi faili, mis on mõeldud spetsiaalselt skriptide laadimiseks sait. Kuid kui otsite skripti laadimist ainult kindlale mallifailile (näiteks galerii postitustele), võite funktsiooni paigutada otse mallifaili, kuid isiklikult soovitan hoida kõiki skripte ühes kohas ja kasutada laadimiseks tingimisi. skriptid vastavalt vajadusele.

WordPressi hostitud skriptid

WordPressi üks lahe asi on see, et juba on hunnik skripte, mida hostitakse ja registreeritakse, mida saate kasutada oma teema arendamisel. Näiteks jQuery, mida kasutatakse peaaegu igas projektis, peaks ALATI olema laaditud WordPressist ja seda ei tohiks kunagi majutada kolmanda osapoole saidil nagu Google. Nii et enne oma projektile kohandatud skripti lisamist kontrollige registreeritud skriptid veendumaks, et see ei sisaldu juba WordPressis ja kui see on nii, peaksite selle laadima, mitte oma.

WordPressi Enqueue Hook kasutamine

Varem mainisime skripti oma saidile laadimiseks vajalikku funktsiooni, kuid mitte-mallifailidega (nt teie function.php) töötades peaksite selle funktsiooni lisama teise funktsiooni sisse, mis on ühendatud õigete WordPressi konksudega, nii saavad teie skriptid registreeritud kõigi teiste WordPressi registreeritud skriptide, kolmanda osapoole pistikprogrammide ja teie lapseteema kasutamisel lapseteemaga.

WordPressil on kaks erinevat toimingukonksu, mida saate kasutada oma skriptide helistamiseks.

  1. wp_enqueue_scripts – tegevus, mida kasutatakse skriptide laadimiseks kasutajaliidesele
  2. admin_enqueue_scripts – tegevus, mida kasutatakse skriptide laadimiseks WP-i administraatorisse

Siin on näide (mis lisatakse teie faili function.php), kuidas funktsiooni luua ja seejärel skriptide kutsumiseks kasutada WordPressi konksu.

/ **
* Vali skript
* /
funktsioon myprefix_enqueue_scripts () {
wp_enqueue_script ('minu skript', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Märge: Vaadake, kuidas me kasutame skripti asukoha määratlemisel funktsiooni „get_template_directory_uri”? See funktsioon loob teie teemakausta URL-i. Lapse teemaga töötades peaksite kasutama hoopis „get_stylesheet_directory_uri”, et see osutaks teie lapseteemale, mitte vanemteemale.

Sisu Javascripti koodi lisamine

Ehkki tekstisisest javascripti saab skriptisildi abil hõlpsalt kleepida mis tahes mallifaili, võib olla hea kasutada tekstisisese koodi lisamiseks ka WordPressi konksu, eriti kui see on põhiplugina või teemakood. Allpool on näide saidil olevate skriptide lisamisest:

funktsioon myprefix_add_inline_script () {
wp_add_inline_script ('minu skript', 'hoiatus (' tere maailm ');', 'pärast');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Selleks lisage oma tekstisisene javascript pärast varem registreeritud skripti “minu skript”. Wp_add_inline_scripti kasutamisel saate lisada tekstisisese koodi kas enne juba registreeritud skripti või pärast seda, nii et kui proovite konkreetse skripti koodi muuta, veenduge, et see oleks pärast seda laaditud või kui peate lihtsalt lisama mõne kohandatud koodi, võite selle konksu siduda. selle jquery skripti jaoks, mille tavaliselt laadib enamik WordPressi teemasid, ja kui ei, siis võite kasutada WordPressi hostitud jQuery versiooni laadimiseks wp_enqueue_scripti.

Seda meetodit kasutades saavad inimesed hõlpsasti teie tekstisisese skripti lapseteema või pistikprogrammi lisandmooduli kaudu eemaldada, see hoiab kogu teie kohandatud javaskripti korralikult korrastatud ja WordPress parsib seda, mis võib olla turvalisem. Ja kui kasutate lapseteemat, saate skriptid laadida failide function.php kaudu, selle asemel et kopeerida faile header.php või footer.php üle oma lapseteemale..

See tähendab, et kui töötate lasteteemal, mida te ei pea tegema, võite oma koodi lihtsalt päisesse visata, kasutades näiteks wp_head- või wp_footer-konksu, näiteks allolevas näites:

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

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