Bæti Javascript við WordPress þemu réttu leiðina

Það er sérstök leið til að bæta Javascript við WordPress þemað til að koma í veg fyrir árekstur við viðbætur eða foreldra WordPress þemu. Vandamálið er að margir „verktaki“ kalla javascript skrár sínar beint í header.php eða footer.php skrána sem er röng leið til að gera það.


Í þessari handbók mun ég sýna þér hvernig á að hringja javascript skrárnar þínar rétt með því að nota funct.php skrána þína svo þær hleðst beint inn í höfuð- eða fótmerki vefsvæðisins. This vegur ef þú ert að þróa þema til dreifingar og endir notandi þinn vill breyta skriftunum með barn þema sem þeir geta eða ef þeir nota minifying / cache eða önnur fínstillingarforrit munu þau virka rétt. Og ef þú ert að vinna með barnaþema, er handritunum þínum bætt á réttan hátt, án þess að afrita haus.php eða footer.php skrárnar í þema barnsins sem ættu aldrei að vera nauðsynlegar (þegar þú vinnur með vel kóðað þema)

Röng leið til að bæta JavaScript við WordPress þemu

Að hringja í javascriptið í header.php skránni þinni eða fótnum.php skránni eins og sýnt er hér að neðan, er EKKI rétt leið og ég mæli eindregið með því, oft veldur það átökum við önnur viðbætur og gerir hlutina handvirkt þegar þú vinnur með CMS er aldrei góð hugmynd.

Rétt leið til að bæta JavaScript við WordPress þemu

Það betra að bæta JavaScript við WordPress þemað þitt er að gera það í gegnum function.php skrána með því að nota wp_enqueue_script. Að nota wp_enqueue_scripts aðgerðina til að hlaða javascriptið þitt mun hjálpa til við að halda þemu þínu úr vandræðum.

Dæmi

wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', fylki (), satt);

Kóðinn hér að ofan mun hlaða my-script.js skránni á síðuna þína. Eins og þú sérð hef ég aðeins sett með $ handfangið en þú getur líka bætt við ósjálfstæði fyrir handritið þitt, útgáfunúmerið og hvort þú vilt hlaða það í hausinn eða fótinn (sjálfgefið er haus).

Aðgerðin wp_enqueue_script () er tæknilega hægt að nota í hvaða þema eða tappi sniðmát skrá, en ef þú ert að hlaða alheims forskriftir, þá viltu setja það annað hvort í function.php skjal þemans eða í sérstakri skrá sem sérstaklega er ætlað að hlaða forskrift á síða. En ef þú ert aðeins að leita að hlaða handrit á ákveðna sniðmátaskrá (til dæmis í gallerípósti) gætirðu sett aðgerðina rétt í sniðmátaskrána, þó persónulega mæli ég með að hafa öll skriftin á einum stað og nota skilyrð til að hlaða forskriftir eftir þörfum.

WordPress hýst handrit

Einn flottur hlutur við WordPress er að það eru nú þegar fullt af handritum sem hýst er af og skráð sem þú getur notað í þemuþróun þinni. Til dæmis ætti jQuery sem er notað í næstum öllum verkefnum ALLTAF að vera hlaðið frá WordPress og aldrei hýst á þriðja aðila eins og Google. Svo áður en þú bætir við sérsniðnu handriti við verkefnið skaltu skoða listann yfir skráð handrit til að ganga úr skugga um að það sé ekki þegar með í WordPress og ef það er þá ættir þú að hlaða þann í stað þess að skrá þig.

Notkun WordPress Enqueue Hook

Áður nefndum við aðgerðina sem þarf til að hlaða smáforrit á síðuna þína, en þegar þú vinnur með skjalasnið sem ekki er sniðmát eins og þinn function.php skrá, þá ættirðu að bæta þessari aðgerð við í annarri aðgerð sem er festur í réttan WordPress krók, á þennan hátt fá forskriftir þínar skráð með öllum öðrum forskriftum sem skráðar eru af WordPress, þriðja aðila viðbætur og foreldra þema þitt þegar þú notar barn þema.

WordPress hefur tvo mismunandi krókar sem þú getur notað til að hringja í skriftina.

  1. wp_enqueue_scripts – aðgerð notuð til að hlaða forskriftir í framhliðina
  2. admin_enqueue_scripts – aðgerð notuð til að hlaða forskriftir í WP stjórnandann

Hérna er dæmi (sem væri bætt við þinn function.php skrá) um hvernig á að búa til aðgerð og nota síðan WordPress krókinn til að hringja í forskriftirnar þínar.

/ **
* Stofna handrit
* /
virka myprefix_enqueue_scripts () {
wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', fylki (), satt);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Athugið: Sjáðu hvernig við notum „get_template_directory_uri“ aðgerðina þegar þú skilgreinir staðsetningu handritsins? Þessi aðgerð býr til slóð í þemamöppuna þína. Ef þú ert að vinna með barn þema munt þú vilja nota “get_styleheet_directory_uri” í staðinn þannig að það bendir á barn þemað þitt en ekki foreldra þemað.

Bætir við inline Javascript kóða

Þó að þú getur auðveldlega límt inline javascript í hvaða sniðmátaskrá sem er í gegnum handritamerkið getur það verið góð hugmynd að nota líka WordPress krókana til að bæta við inline kóðanum þínum, sérstaklega þegar það er kjarnaviðbót eða þemakóða. Hér að neðan er dæmi um að bæta við inline forskriftum á síðuna þína:

virka myprefix_add_inline_script () {
wp_add_inline_script ('my-script', 'alert (' halló heimur ');', 'eftir');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Hvað þetta mun gera er að bæta við inline javascriptinu þínu eftir áður skráða „my-script“ handritið. Þegar þú notar wp_add_inline_script geturðu aðeins bætt við inline kóða annað hvort fyrir eða eftir nú þegar skráð handrit, svo ef þú ert að reyna að breyta kóðanum á tilteknu handriti skaltu ganga úr skugga um að það sé hlaðið eftir það, eða ef þú þarft bara að bæta við einhverjum sérsniðnum kóða sem þú getur tengt það á jquery handritið sem venjulega er hlaðið af flestum WordPress þemum og ef ekki, þá geturðu notað wp_enqueue_script til að hlaða WordPress hýst útgáfu af jQuery.

Með því að nota þessa aðferð getur fólk auðveldlega fjarlægt inline forskriftir þínar með barni þema eða viðbótartengingu, það heldur öllu sérsniðnu JavaScript-sniði þínu snyrtilega og það er parað af WordPress sem getur verið öruggara. Og ef þú ert að nota barnþema geturðu hlaðið skriftunum þínum í gegnum function.php skránni þinni í stað þess að afrita yfir haus.php eða footer.php skrár yfir í barn þemað..

Sem sagt, ef þú ert að vinna í þema barns þarftu ekki að gera þetta geturðu einfaldlega varpað kóðanum þínum í hausinn annað hvort með wp_head eða wp_footer krókunum eins og dæmið hér að neðan:

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

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