Gusto mo bang malaman kung paano maayos na magdagdag ng mga estilo ng JavaScript at CSS sa WordPress? Maraming mga gumagamit ng DIY ay madalas na nagkakamali ng direktang pagtawag sa kanilang mga script at stylesheet sa mga plugin at tema. Sa artikulong ito, ipapakita namin sa iyo kung paano maayos na magdagdag ng mga JavaScript at stylesheet sa WordPress. Ito ay magiging kapaki-pakinabang lalo na para sa mga taong nagsisimula lamang na matuto ng WordPress tema at pag-develop ng plugin.
Karaniwang Pagkakamali Kapag Nagdaragdag ng Mga Script at Stylesheet sa WordPress
Maraming mga bagong WordPress plugin at mga developer ng tema ang nagkakamali nang direkta sa pagdaragdag ng kanilang mga script o inline na CSS sa kanilang mga plugin at tema.
Ang ilang mga pagkakamali gamitin ang wp_head gumana upang i-load ang kanilang mga script at mga stylesheet.
Habang ang code sa itaas ay maaaring tila mas madali, ito ay ang maling paraan ng pagdaragdag ng mga script sa WordPress, at ito ay humahantong sa higit pang mga kontrahan sa hinaharap.
Halimbawa, kung load mo ang manu-manong jQuery at naglo-load ng isa pang plugin ang jQuery sa pamamagitan ng tamang pamamaraan, pagkatapos ay mayroon kang jQuery na na-load nang dalawang beses. Kung load ito sa bawat pahina, ito ay negatibong makakaapekto sa bilis at pagganap ng WordPress.
Posible rin na ang dalawa ay iba’t ibang mga bersyon na maaari ring maging sanhi ng mga salungatan.
Iyon ay sinabi, tingnan natin ang tamang paraan ng pagdaragdag ng mga script at stylesheets.
Bakit Nakasulat ang Mga Script at Estilo sa WordPress?
May malakas na komunidad ng developer ang WordPress. Libu-libong tao mula sa buong mundo ang bumuo ng mga tema at mga plugin para sa WordPress.
Upang matiyak na ang lahat ng bagay ay gumagana ng maayos, at walang sinumang lumakad sa paa ng iba, ang WordPress ay may isang sistema ng enqueuing. Ang sistemang ito ay nagbibigay ng isang programmable na paraan ng paglo-load ng mga template ng JavaScript at CSS.
Sa pamamagitan ng paggamit ng wp_enqueue_script at wp_enqueue_style function, sabihin mo sa WordPress kung kailan mag-load ng isang file, kung saan i-load ito, at kung ano ang dependencies nito.
Pinapayagan din ng system na ito ang mga developer na gamitin ang mga built-in na JavaScript library na kasama ng WordPress sa halip na mag-load ng parehong third-party na script nang maraming beses. Binabawasan nito ang oras ng pagkarga ng pahina at tumutulong na maiwasan ang mga kontrahan sa iba pang mga tema at mga plugin.
Paano Maayos ang Enqueue Script sa WordPress?
Ang pag-load ng mga script ng maayos sa WordPress ay napakadaling. Sa ibaba ay isang halimbawang code na iyong idikit sa iyong mga file ng plugin o sa mga function.php ng iyong tema upang ma-load nang maayos ang mga script sa WordPress.
? php
function wpb_adding_scripts () {
wp_register_script ('my_amazing_script', plugins_url ('amazing_script.js', __FILE__), array ('jquery'), '1.1', totoo);
wp_enqueue_script ('my_amazing_script');
}
add_action ('wp_enqueue_scripts', 'wpb_adding_scripts');
?>
Paliwanag:
Sinimulan namin ang pagrehistro sa aming script sa pamamagitan ng wp_register_script () function. Tinatanggap ng function na ito ang 5 parameter:
- $ hawakan – Ang handle ay ang natatanging pangalan ng iyong script. Tinatawag tayong “my_amazing_script”
- $ src – src ay ang lokasyon ng iyong script. Ginagamit namin ang function ng plugins_url upang makuha ang wastong URL ng aming mga folder ng plugin. Sa sandaling natagpuan ng WordPress iyon, pagkatapos ay hahanapin nito ang aming mga file na amazing_script.js sa folder na iyon.
- $ deps – Deps ay para sa dependency. Dahil ang aming script ay gumagamit ng jQuery, nagdagdag kami ng jQuery sa dependency area. Awtomatikong mai-load ng WordPress ang jQuery kung hindi ito load sa site.
- $ ver – Ito ang numero ng bersyon ng aming script. Hindi kinakailangan ang parameter na ito.
- $ in_footer – Gusto naming i-load ang aming script sa footer, kaya itinakda namin ang halaga upang maging totoo. Kung nais mong i-load ang script sa header, pagkatapos ay gagawin mo itong mali.
Matapos ibigay ang lahat ng mga parameter wp_register_script , maaari naming tawagan lamang ang script sa wp_enqueue_script () na gumagawa ng lahat ng bagay na mangyayari.
Ang huling hakbang ay ang paggamit ng wp_enqueue_scripts action hook upang aktwal na i-load ang script. Dahil ito ay isang halimbawa code, idinagdag namin na tama sa ibaba lahat ng iba pa.
Kung idinadagdag mo ito sa iyong tema o plugin, maaari mong ilagay ang action hook na kung saan ang script ay talagang kinakailangan. Pinapayagan ka nito na bawasan ang memory footprint ng iyong plugin.
Ngayon ang ilan ay maaaring magtaka kung bakit kami ay pagpunta sa dagdag na hakbang upang magparehistro muna ang script at pagkatapos enqueuing ito? Bueno, pinapayagan nito ang ibang mga may-ari ng site na i-deregister ang iyong script nang hindi binabago ang pangunahing code ng iyong plugin.
Maayos na Enqueue Styles sa WordPress
Katulad ng mga script, maaari mo ring ipalit ang iyong mga estilo. Tingnan ang halimbawa sa ibaba:
Sa halip na gamitin wp_enqueue_script , ginagamit na namin ngayon wp_enqueue_style upang idagdag ang aming stylesheet.
Pansinin na ginamit namin wp_enqueue_scripts action hook para sa parehong estilo at script. Sa kabila ng pangalan, gumagana ang function na ito para sa pareho.
Sa mga halimbawa sa itaas, ginamit namin plugins_url function upang ituro ang lokasyon ng script o estilo na gusto naming enqueue.
Gayunpaman, kung ginagamit mo ang mga script ng enqueue na gumana sa iyong tema, pagkatapos ay gamitin lamang get_template_directory_uri () sa halip. Kung nagtatrabaho ka sa tema ng bata, pagkatapos ay gamitin get_stylesheet_directory_uri () .
Nasa ibaba ang isang halimbawa code: