Anonim

Tulad ng inaangkin ng nangungunang pamayanan ng CMS, 25% ng internet ang gumagamit ng WordPress. Nakakakita ng mga uso, wala kaming pagpipilian ngunit upang paniwalaan ang mga ito, halos bawat 2 nd na blog at bawat 4 na site ay tila gumagamit ng tila pinakamalakas at palakaibigan ng CMS. Inaasahan ito, sinimulan ng mga tao at mga developer ang paglilipat ng kanilang mga site sa WordPress Platform.

Sa pagsisikap na ibahin ang anyo ng iyong matamis at simpleng website sa isang kumplikado, Mataas na pagganap na CMS site, ang mga tao ay natigil sa isang napaka-pangunahing hakbang at humihiling sa tanong: Para sa Pag-ibig, paano ko makuha ang panlabas na JavaScript (.js) file na ito nagtatrabaho sa WordPress tema na ito? Ikaw din ba ang nagtatanong ng parehong tanong? Well amigos, ikaw ay sa wakas sa tamang lugar: Narito ako upang gabayan ka nang hakbang sa pamamagitan ng pinakasimpleng paraan na posible upang makamit ang gawaing ito!

Ngayon sa pag-aakala na mayroon kang WordPress na naka-install at pinaputok nang may panlabas na JS na handa na, magsama tayo sa gawain ng kasama ang file!

Tandaan: Gumagamit ako ng sumusunod na file (testrun.js) para sa tutorial na ito at ang temang nagtatrabaho ako ay Dalawampu't Labing-anim.

alerto ('Kumusta');

Magsimula tayo!

Lahat ng mga script at styleheets ay nai-load mula sa loob ng mga function.php . Ito ang tamang paraan upang mai-load ang mga ito sa loob ng WordPress upang maiwasan ang pagkakasalungatan sa anumang iba pang mga script na mai-load alinman sa WordPress mismo o ginagamit ang iyong mga plugin. Kung pinapayagan mo ang WordPress na pamahalaan ang lahat ng mga kasama na file, dapat malaman nito na nais mong maisama ang file na ito sa header (pagsisimula) o footer (dulo) na bahagi ng file. Ang bawat template / tema ay may sariling mga function.php kaya ang eksaktong pangalan ng mga pag-andar na kasama ang lahat ng mga file na isasama ay magiging mahirap na gawing pangkalahatan. Dahil kumukuha ako ng dalawampu't labing anim bilang isang tema, sa ibaba ay ang snapshot ng kung paano ang aking mga function.php (ginamit para sa kabilang ang mga file). Ang iyong sarili ay dapat na katulad nito:

Ang pag-andar ng wp_enqueue_script ay nag -uugnay sa isang file ng script sa nabuong pahina sa tamang oras ayon sa mga dependency ng script, kung ang script ay hindi kasama at kung ang lahat ng mga dependencies ay nakarehistro. Maaari mong mai-link ang isang script gamit ang isang hawakan na nakarehistro na gamit ang wp_register_script () function, o ibigay ang function na ito sa lahat ng mga parameter na kinakailangan upang mai-link ang isang script.

Ang wp_enqueue_script ($ hawakan, $ src, $ deps, $ ver, $ in_footer) ay tumatagal sa mga sumusunod na params:

$ hawakan

(string) (Kinakailangan) Pangalan ng script.

$ src

(string | bool) (Opsyonal) Landas sa script mula sa direktoryo ng ugat ng WordPress. Halimbawa: '/js/myscript.js'.

Halaga ng default: hindi totoo

$ deps

(array) (Opsyonal) Ang isang hanay ng mga rehistradong humahawak sa script na ito ay nakasalalay.

Halaga ng Default: array ()

$ ver

(string | bool) (Opsyonal) String na tinukoy ang numero ng bersyon ng script, kung mayroon ito. Ginagamit ang parameter na ito upang matiyak na ang tamang bersyon ay ipinadala sa kliyente anuman ang caching, at sa gayon ay dapat isama kung ang isang numero ng bersyon ay magagamit at may katuturan para sa script.

Halaga ng default: hindi totoo

$ in_footer

(bool) (Opsyonal) Kung upang maipalabas ang script bago o bago . Default na 'false'. Tumatanggap ng 'maling' o 'totoo'.

Halaga ng default: hindi totoo

Maaari mong balewalain ang function na wp_register_script () para sa tutorial na ito. Ang aming layunin ay isama ang isang panlabas na JS lamang. Dapat itong gumana nang maayos kung wala ito!

Samakatuwid, kung nais kong pangalanan ang aking script bilang "pagsubok" tandaan na ang param na ito ($ hawakan) AY HINDI kinakailangang maging pangalan ng aktwal na file, at ang aking file ay may panlabas na dependency sa jquery at bersyon ay 1.0 at naglo-load bago mag-load ang pahina. kung gayon ang hitsura ng aking hitsura:

wp_enqueue_script ('tutorial', get_template_directory_uri (). '/js/testrun.js', array ('jquery'), '1.0', maling);

Kung napansin mo, ginamit ko ang get_template_directory_uri (), kung gayon, ang string ay pinagsama pagkatapos ng pagpapaandar, iyon ay " /js/testrun.js " ay talagang ang landas ng file na wrt ang index file ng template .

Kaya ang iyong $ src na katangian, na siyang pinagmulan ng iyong js file ay nagiging: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

Samakatuwid, ang panghuling pag- andar.php ay mukhang:

Humawak doon, halos tapos na kami! I-save lamang ito ngayon at pindutin ang pag-refresh sa iyong website … dapat mong makita ang gumaganang JS! Narito ang akin:

Dahil itinakda namin ang opsyon na $ in_footer sa maling, nag-load ang script bago naglo-load ang pahina, ngunit pagkatapos na ma-load ang JQuery dahil naidagdag ito bilang isang dependency!

At .. Voila! Dito ka pupunta .. Matagumpay mong isinama ang isang panlabas na pasadyang JS file sa iyong WP tema!

Maligayang Coding !!

Sanggunian: Enqueue Function: WordPress Codex

Ano ang pinakamahusay na paraan upang magdagdag ng pasadyang panlabas na js sa wordpress