Paano Tamang Magdagdag ng JavaScripts at Estilo sa WordPress

Nais mo bang malaman kung paano maayos na magdagdag ng mga estilo ng JavaScripts at CSS sa WordPress? Maraming mga gumagamit ng DIY ang madalas na nagkakamali ng direktang pagtawag sa kanilang mga script at styleheet sa mga plugin at tema. Sa artikulong ito, ipapakita namin sa iyo kung paano maayos na magdagdag ng JavaScripts at styleheet sa WordPress. Ito ay magiging kapaki-pakinabang lalo na para sa mga nagsisimula pa ring malaman ang tema ng WordPress at pag-unlad ng plugin.


Wastong pagdaragdag ng JavaScripts at estilo sa WordPress

Karaniwang Pagkakamali Kapag Nagdaragdag ng Mga script at Estilo ng Estilo sa WordPress

Maraming mga bagong plugin ng WordPress at mga developer ng tema ang nagkakamali ng direktang pagdaragdag ng kanilang mga script o inline na CSS sa kanilang mga plugin at tema.

Ang ilan ay nagkakamali na gumamit ng wp_head function upang mai-load ang kanilang mga script at styleheet.

<?php
add_action (‘wp_head’, ‘wpb_bad_script’);
gumana wpb_bad_script () {
echo ‘jQuery napunta dito’;
}
?>

Habang ang code sa itaas ay maaaring mukhang mas madali, ito ay maling paraan ng pagdaragdag ng mga script sa WordPress, at hahantong ito sa higit pang mga salungatan sa hinaharap.

Halimbawa, kung mano-mano ang pag-load mo ng jQuery at ang isa pang plugin ay nag-load ng jQuery sa pamamagitan ng tamang pamamaraan, pagkatapos ay mayroon kang jQuery na na-load nang dalawang beses. Kung ito ay nai-load sa bawat pahina, kung gayon ito ay negatibong makakaapekto sa bilis at pagganap ng WordPress.

Posible rin na ang dalawa ay magkakaibang mga bersyon na maaari ring magdulot ng mga salungatan.

Na sinabi, tingnan natin ang tamang paraan ng pagdaragdag ng mga script at mga styleheet.

Bakit ang Mga Enqueue Script at Estilo sa WordPress?

Ang WordPress ay may isang malakas na komunidad ng developer. Libu-libong mga tao mula sa buong mundo ang nagkakaroon ng mga tema at plugin para sa WordPress.

Upang matiyak na gumagana nang maayos ang lahat, at walang sinuman ang tumapak sa mga daliri ng paa ng iba, ang WordPress ay may isang sistema ng enqueuing. Ang system na ito ay nagbibigay ng isang naproseso na paraan ng pag-load ng JavaScripts at CSS styleheets.

Sa pamamagitan ng paggamit ng wp_enqueue_script at wp_enqueue_style function, sinabi mo sa WordPress kung kailan mag-load ng isang file, kung saan mai-load ito, at kung ano ang mga dependencies.

Pinapayagan din ng system na ito ang mga developer na magamit ang built-in na mga library ng JavaScript na naka-bundle sa WordPress kaysa sa paglo-load ng parehong script ng third-party nang maraming beses. Binabawasan nito ang oras ng pag-load ng pahina at nakakatulong upang maiwasan ang mga salungatan sa iba pang mga tema at plugin.

Paano Wastong Enqueue script sa WordPress?

Ang pag-load ng mga script ng maayos sa WordPress ay napakadali. Nasa ibaba ang isang halimbawa ng code na mai-paste mo sa iyong mga plugins file o sa file ng function.php ng ​​iyong tema upang maayos na mai-load ang mga script sa WordPress.

?php
gumana 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:

Nagsimula kami sa pamamagitan ng pagrehistro ng aming script sa pamamagitan ng wp_register_script () function. Tumatanggap ang function na ito ng 5 mga parameter:

  • $ hawakan – Ang hawakan ay ang natatanging pangalan ng iyong script. Kami ay tinawag na “my_amazing_script”
  • $ src – src ang lokasyon ng iyong script. Gumagamit kami ng pag-andar ng plugins_url upang makuha ang tamang URL ng aming folder ng plugin. Kapag nahanap ito ng WordPress, pagkatapos ay hahanapin nito ang aming filename amazing_script.js sa folder na iyon.
  • $ deps – Ang deps ay para sa dependency. Dahil ang aming script ay gumagamit ng jQuery, nagdagdag kami ng jQuery sa lugar ng dependency. Awtomatikong mai-load ng WordPress ang jQuery kung hindi ito nai-load na sa site.
  • $ ver – Ito ang numero ng bersyon ng aming script. Hindi kinakailangan ang parameter na ito.
  • $ in_footer – Nais naming i-load ang aming script sa talampakan, kaya itinakda namin ang halaga upang maging totoo. Kung nais mong i-load ang script sa header, kung gayon gagawin mo itong mali.

Matapos maibigay ang lahat ng mga parameter sa wp_register_script, maaari lamang nating tawagan ang script sa wp_enqueue_script () na naganap ang lahat.

Ang huling hakbang ay ang paggamit ng wp_enqueue_scripts action hook upang aktwal na mai-load ang script. Dahil ito ay isang halimbawa ng code, naidagdag namin iyon mismo sa ibaba ng lahat.

Kung idinagdag mo ito sa iyong tema o plugin, pagkatapos ay maari mong ilagay ang pagkilos na ito kung saan aktwal na kinakailangan ang script. Pinapayagan ka nitong mabawasan ang bakas ng memorya ng iyong plugin.

Ngayon ay maaaring magtaka ang ilan kung bakit namin pupunta ang dagdag na hakbang upang irehistro muna ang script at pagkatapos ay ipalista ito? Kaya, pinapayagan nito ang iba pang mga may-ari ng site na deregister ang iyong script nang hindi binabago ang pangunahing code ng iyong plugin.

Wastong Enqueue Estilo sa WordPress

Tulad ng mga script, maaari mo ring pinahusay ang iyong mga styleheet. Tingnan ang halimbawa sa ibaba:

<?php
gumana wpb_adding_styles () {
wp_register_style (‘my_stylesheet’, plugins_url (‘my-styleheet.css’, __FILE__));
wp_enqueue_style (‘my_stylesheet’);
}
add_action (‘wp_enqueue_scripts’, ‘wpb_adding_styles’);
?>

Sa halip na gumamit ng wp_enqueue_script, gumagamit kami ngayon ng wp_enqueue_style upang idagdag ang aming styleheet.

Pansinin na ginamit namin ang wp_enqueue_scripts pagkilos para sa parehong mga estilo at script. Sa kabila ng pangalan, gumagana ang function na ito para sa pareho.

Sa mga halimbawa sa itaas, ginamit namin ang pag-andar ng plugins_url upang ituro sa lokasyon ng script o istilo na nais naming mapukaw.

Gayunpaman, kung gumagamit ka ng function ng enqueue script sa iyong tema, pagkatapos ay gamitin lamang ang get_template_directory_uri () sa halip. Kung nagtatrabaho ka sa isang tema ng bata, pagkatapos ay gumamit ng get_stylesheet_directory_uri ().

Sa ibaba ay isang halimbawa ng code:

<?php

gumana wpb_adding_scripts () {
wp_register_script (‘my_amazing_script’, get_template_directory_uri (). ‘/js/amazing_script.js’, array (‘jquery’), ‘1.1’, totoo);
wp_enqueue_script (‘my_amazing_script’);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_adding_scripts’);
?>

Inaasahan namin na ang artikulong ito ay nakatulong sa iyo na malaman kung paano maayos na magdagdag ng jacvascript at estilo sa WordPress. Maaaring gusto mo ring pag-aralan ang source code ng mga nangungunang plugin ng WordPress para sa ilang mga halimbawa ng totoong buhay.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map