Pagdaragdag ng Javascript Sa Mga Tema ng WordPress Ang Tamang Daan

May isang tiyak na paraan para sa pagdaragdag ng Javascript sa iyong tema ng WordPress upang maiwasan ang anumang mga salungatan sa mga plugin o mga Tema ng magulang ng WordPress. Ang problema ay maraming “developer” ang tumawag sa kanilang mga file ng javascript nang direkta sa header.php o footer.php file na kung saan ay hindi tamang paraan ng paggawa nito.


Sa gabay na ito ay ipapakita ko sa iyo kung paano tatawag nang tama ang iyong mga file ng javascript gamit ang iyong function.php file upang ma-load nila mismo ang ulo o tag ng paa ng iyong site. Sa ganitong paraan kung nagkakaroon ka ng isang tema para sa pamamahagi at nais ng iyong end user na baguhin ang mga script sa pamamagitan ng isang tema ng bata na maaari nila o kung gumagamit sila ng minifying / caching o iba pang mga plugin ng pag-optimize ay gagana sila nang tama. At kung nagtatrabaho ka sa isang tema ng bata, ang iyong mga script ay idinagdag sa tamang paraan, nang hindi kinopya ang header.php o mga file ng footer.php sa tema ng iyong anak na hindi kinakailangan (kapag nagtatrabaho sa isang mahusay na naka-code na tema)

Maling Way Upang Magdagdag ng Javascript Sa Mga Tema ng WordPress

Ang pagtawag ng javascript sa iyong header.php file o footer.php file tulad ng ipinakita sa ibaba, HINDI ang tamang paraan at lubos kong inirerekumenda laban dito, madalas na nagdudulot ito ng mga salungatan sa iba pang mga plugin at ginagawa nang manu-mano kapag nagtatrabaho sa isang CMS ay hindi kailanman isang magandang ideya.

Ang Tamang Paraan Upang Magdagdag ng Javascript Sa Mga Tema ng WordPress

Ang mas mahusay para sa pagdaragdag ng javascript sa iyong WordPress na tema ay gawin ito sa pamamagitan ng paggamit ng function.php file wp_enqueue_script. Ang paggamit ng aksyon na wp_enqueue_scripts upang mai-load ang iyong javascript ay makakatulong na mapangalagaan ang iyong tema sa problema.

Halimbawa

wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), totoo);

Ang code sa itaas ay mai-load ang my-script.js file sa iyong site. Tulad ng nakikita mo ay isinama ko lamang ang $ hawakan ngunit maaari ka ring magdagdag ng mga dependencies para sa iyong script, numero ng bersyon at kung i-load ito sa header o footer (default ay header).

Ang function na wp_enqueue_script () ay maaaring magamit nang teknikal sa anumang tema o template ng template ng plugin ngunit kung naglo-load ka ng pandaigdigang script nais mong ilagay ito alinman sa file ng function.php ng ​​iyong tema o sa isang hiwalay na file na partikular na inilaan upang mag-load ng mga script sa lugar. Ngunit kung naghahanap ka lamang na mag-load ng isang script sa isang tukoy na file ng template (halimbawa sa mga post sa gallery) maaari mong ilagay ang function mismo sa template file, gayunpaman, personal na inirerekumenda kong mapanatili ang lahat ng mga script sa isang lugar at gumagamit ng mga kondisyon upang ma-load mga script kung kinakailangan.

Mga script na naka-host sa WordPress

Isang cool na bagay tungkol sa WordPress ay mayroon nang isang grupo ng mga script na naka-host at nakarehistro na maaari mong magamit sa iyong pag-unlad ng tema. Halimbawa jQuery na ginagamit sa halos bawat proyekto ay dapat Dagdagan ang mai-load mula sa WordPress at hindi kailanman naka-host sa isang site ng 3rd party tulad ng Google. Kaya bago ka magdagdag ng isang pasadyang script sa iyong proyekto suriin ang listahan ng mga rehistradong script upang matiyak na hindi pa ito kasama sa WordPress at kung ito ay dapat mong i-load na ang isa ay taliwas sa pagrehistro ng iyong sarili.

Paggamit ng WordPress Enqueue Hook

Dati nabanggit namin ang pag-andar na kinakailangan upang mag-load ng isang script sa iyong site, gayunpaman, kapag nagtatrabaho sa mga file na hindi template tulad ng iyong function.php file dapat mong idagdag ang function na ito sa loob ng isa pang function na nakakabit sa tamang mga kawit ng WordPress, sa ganitong paraan makuha ang iyong mga script nakarehistro sa lahat ng iba pang mga script na nakarehistro ng WordPress, mga plugin ng 3rd party at ang iyong tema ng magulang kapag gumagamit ng isang tema ng bata.

Ang WordPress ay may dalawang magkakaibang pagkilos ng aksyon na magagamit mo para sa pagtawag sa iyong mga script.

  1. wp_enqueue_scripts – pagkilos na ginamit upang mai-load ang mga script sa harap-dulo
  2. admin_enqueue_scripts – kilos na ginamit upang mai-load ang mga script sa admin ng WP

Narito ang isang halimbawa (na idadagdag sa iyong mga function.php file) kung paano lumikha ng isang function at pagkatapos ay gamitin ang WordPress hook upang tawagan ang iyong mga script.

/ **
* I-enqueue ang isang script
* /
gumana myprefix_enqueue_scripts () {
wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), totoo);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Tandaan: Tingnan kung paano namin ginagamit ang function na “get_template_directory_uri” kapag tinukoy ang lokasyon ng iyong script? Ang function na ito ay lumilikha ng isang URL sa iyong folder ng tema. Kung nagtatrabaho ka sa isang tema ng bata ay nais mong gamitin ang “get_stylesheet_directory_uri” sa halip na ituro nito ang tema ng iyong anak at hindi ang tema ng magulang.

Pagdaragdag ng Inline Javascript Code

Habang madali mong mai-paste ang inline na javascript sa anumang template ng template sa pamamagitan ng tag ng script maaari itong magandang ideya na gumamit din ng mga kawit ng WordPress para sa pagdaragdag ng iyong inline na code, lalo na kung ito ay isang pangunahing plugin o code ng tema. Sa ibaba ay isang halimbawa ng pagdaragdag ng mga inline na script sa iyong site:

gumana myprefix_add_inline_script () {
wp_add_inline_script ('my-script', 'alerto ("hello world");', 'after');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Ang gagawin nito ay idagdag ang iyong inline na javascript matapos ang nakarehistrong naunang script na “my-script”. Kapag gumagamit ng wp_add_inline_script maaari ka lamang magdagdag ng inline na code alinman sa bago o pagkatapos ng isang naka-rehistrong script kaya kung sinusubukan mong baguhin ang code ng isang partikular na script siguraduhing na-load ito pagkatapos nito, o kung kailangan mo lamang magdagdag ng ilang pasadyang code maaari kang mag-hook ito sa script ng jquery na sa pangkalahatan ay na-load ng karamihan sa mga tema ng WordPress at kung hindi mo magagamit ang wp_enqueue_script upang mai-load ang WordPress na naka-host na bersyon ng jQuery.

Sa pamamagitan ng paggamit ng pamamaraang ito ay madaling maalis ng mga tao ang iyong mga script ng inline sa pamamagitan ng isang tema ng bata o plugin add-on, pinapanatili nito nang maayos ang lahat ng iyong pasadyang javascript at ito ay naka-parse ng WordPress na maaaring maging mas ligtas. At kung gumagamit ka ng isang tema ng bata maaari mong mai-load ang iyong mga script sa pamamagitan ng iyong file ng function.php sa halip na kopyahin ang header.php o mga file ng footer.php sa tema ng iyong anak.

Sinabi nito, kung nagtatrabaho ka sa isang tema ng bata hindi mo kailangang gawin ito maaari mo lamang itapon ang iyong code sa iyong header alinman sa paggamit ng wp_head o ang mga wp_footer hooks tulad ng halimbawa sa ibaba:

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

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