Există un mod specific de adăugare a Javascript-ului la tema dvs. WordPress, pentru a preveni orice conflict cu plugin-urile sau cu temele WordPress părinte. Problema este că mulți „dezvoltatori” își apelează fișierele javascript direct în fișierul header.php sau footer.php, care este un mod incorect de a face acest lucru..


În acest ghid vă voi arăta cum să apelați corect fișierele dvs. javascript folosind fișierul funcții.php, astfel încât acestea să se încarce direct în capul sau eticheta de subsol a site-ului dvs. În acest fel, dacă dezvoltați o temă pentru distribuție și utilizatorul final dorește să modifice scripturile printr-o temă pentru copii pe care o pot sau dacă utilizează pluginuri de minifiere / cache sau alte pluginuri de optimizare, acestea vor funcționa corect. Și dacă lucrați cu o temă pentru copil, scripturile dvs. li se adaugă modul corect, fără a copia fișierele header.php sau footer.php în tema copilului dvs. care nu ar trebui să fie niciodată necesare (atunci când lucrați cu o temă bine codată)

Mod greșit de a adăuga Javascript la temele WordPress

Apelarea javascript în fișierul dvs. header.php sau fișierul footer.php, cum ar fi arătat mai jos, NU este modul corect și vă recomand cu mare încredere, de multe ori provoacă conflicte cu alte pluginuri și faceți lucrurile manual atunci când lucrați cu un CMS nu este niciodată o idee buna.

Calea potrivită de a adăuga Javascript la temele WordPress

Mai bine pentru a adăuga javascript la tema dvs. WordPress este să faceți acest lucru prin intermediul fișierului funcții.php folosind wp_enqueue_script. Utilizarea acțiunii wp_enqueue_scripts pentru a încărca javascriptul dvs. vă va ajuta să vă păstrați problema din probleme.

Exemplu

wp_enqueue_script ('scriptul meu', get_template_directory_uri (). '/js/my-script.js', array (), true);

Codul de mai sus va încărca fișierul meu-script.js pe site-ul dvs. După cum vedeți, am inclus doar mânerul $, dar puteți adăuga și dependențe pentru scriptul dvs., numărul versiunii și dacă îl încărcați în antet sau subsol (implicit este antet).

Funcția wp_enqueue_script () poate fi folosită din punct de vedere tehnic în orice fișier de șablon de temă sau plugin, dar dacă încărcați scripturi globale, veți dori să o așezați fie în fișierul theme.php al temei dvs., fie într-un fișier separat destinat special pentru încărcarea scripturilor pe site-ul. Dar dacă încercați doar să încărcați un script pe un fișier de șablon specific (de exemplu pe postările din galerie), puteți plasa funcția chiar în fișierul șablon, totuși, personal vă recomand să păstrați toate scripturile într-un singur loc și să folosiți condiționate pentru a încărca scripturi după cum este necesar.

Scripturi gazduite WordPress

Un lucru interesant despre WordPress este că există deja o grămadă de scripturi găzduite de și înregistrate pe care le puteți folosi în dezvoltarea temei. De exemplu, jQuery care este utilizat în aproape fiecare proiect ar trebui să fie încărcat întotdeauna de pe WordPress și niciodată găzduit pe un site terț, cum ar fi Google. Deci, înainte de a adăuga un script personalizat la proiectul dvs., verificați lista cu scripturi înregistrate pentru a vă asigura că nu este deja inclus în WordPress și dacă este cazul, ar trebui să îl încărcați pe acesta decât spre a vă înregistra.

Utilizarea WordPress Enqueue Hook

Anterior am menționat funcția necesară pentru a încărca un script pe site-ul dvs., cu toate acestea, atunci când lucrați cu fișiere non-șablon, cum ar fi fișierul dvs. funcții.php, ar trebui să adăugați această funcție în interiorul unei alte funcții agățate în cârligele WordPress corespunzătoare, în acest fel scripturile dvs. se obțin. înregistrat cu toate celelalte scripturi înregistrate de WordPress, plugin-uri de la terți și tema părintească atunci când utilizați o temă pentru copii.

WordPress are două cârlige de acțiune diferite pe care le puteți utiliza pentru apelarea scripturilor.

  1. wp_enqueue_scripts – acțiune folosită pentru încărcarea scripturilor pe front-end
  2. admin_enqueue_scripts – acțiune utilizată pentru încărcarea scripturilor în administratorul WP

Iată un exemplu (care ar fi adăugat la fișierul dvs. funcții.php) despre cum să creați o funcție și apoi utilizați cârligul WordPress pentru a vă chema scripturile.

/ **
* Caută un script
* /
function myprefix_enqueue_scripts () {
wp_enqueue_script ('scriptul meu', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Notă: Vedeți cum folosim funcția „get_template_directory_uri” la definirea locației scriptului dvs.? Această funcție creează o adresă URL a folderului dvs. cu temă. Dacă lucrați cu o temă pentru copii, veți dori să folosiți „get_stylesheet_directory_uri” în loc să indice tema copilului dvs. și nu tema părintească..

Adăugarea codului Javascript în linie

Deși puteți insera cu ușurință javascriptul inline în orice fișier șablon prin intermediul etichetei script, poate fi o idee bună să folosiți și cârlige WordPress pentru adăugarea codului dvs. inline, mai ales atunci când este un plugin principal sau un cod tematic. Mai jos este un exemplu de adăugare de scripturi inline pe site-ul dvs.:

function myprefix_add_inline_script () {
wp_add_inline_script ('scriptul meu', 'alertă („salut lume");', 'după');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Acest lucru va face este să adăugați javascriptul dvs. inline după scriptul „my-script” înregistrat anterior. Când utilizați wp_add_inline_script, puteți adăuga doar cod inline, fie înainte, fie după un script deja înregistrat, așa că dacă încercați să modificați codul unui script particular, asigurați-vă că acesta este încărcat după acesta sau dacă trebuie doar să adăugați un cod personalizat, puteți agăța acesta la scriptul jquery care este în general încărcat de majoritatea temelor WordPress și, dacă nu, puteți utiliza wp_enqueue_script pentru a încărca versiunea găzduită de WordPress a jQuery.

Folosind această metodă, oamenii vă pot elimina cu ușurință scripturile inline printr-o temă pentru copii sau un supliment suplimentar, vă păstrează toate javascript-urile bine organizate și este analizat de WordPress, care poate fi mai sigur. Și dacă utilizați o temă pentru copii, vă puteți încărca scripturile prin fișierul funcții.php în loc să copiați fișierele header.php sau footer.php pe tema copilului dvs..

Acestea fiind spuse, dacă lucrați într-o temă pentru copii, nu trebuie să faceți acest lucru, puteți să vă aruncați pur și simplu codul în antet, fie folosind wp_head sau wp_footer hooks, cum ar fi exemplul de mai jos:

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