Cum să adăugați corect JavaScript și stiluri în WordPress

Doriți să aflați cum să adăugați corect JavaScripts și foi de stiluri CSS în WordPress? Mulți utilizatori DIY fac adesea greșeala de a-și apela direct scripturile și foile de stil în pluginuri și teme. În acest articol, vă vom arăta cum să adăugați corect JavaScripts și stil de foi în WordPress. Acest lucru va fi deosebit de util pentru cei care încep să învețe tema WordPress și dezvoltarea plugin-urilor.

Greșeală obișnuită la adăugarea de scripturi și foi de stil în WordPress

Multe pluginuri WordPress noi și dezvoltatorii temelor fac greșeala de a adăuga în mod direct scripturile lor sau CSS inline în pluginurile și temele lor.

Unele utilizează în mod eronat wp_head pentru a încărca scripturile și foile de stil.

În timp ce codul de mai sus poate părea mai ușor, este un mod greșit de a adăuga scripturi în WordPress și duce la mai multe conflicte în viitor.

De exemplu, dacă încărcați manual jQuery și un alt plugin încarcă jQuery prin metoda corectă, atunci aveți jQuery încărcat de două ori. Dacă este încărcat pe fiecare pagină, atunci aceasta va afecta negativ viteza și performanța WordPress.

De asemenea, este posibil ca cele două versiuni să fie diferite, ceea ce poate provoca și conflicte.

Acestea fiind spuse, să aruncăm o privire la modul corect de a adăuga scripturi și foi de stil.

De ce enqueue script-uri și stiluri în WordPress?

WordPress are o comunitate puternică de dezvoltatori. Mii de oameni din întreaga lume dezvoltă teme și pluginuri pentru WordPress.

Pentru a vă asigura că totul funcționează corespunzător și că nimeni nu urcă pe degetele altora, WordPress are un sistem enqueuing. Acest sistem oferă o modalitate programabilă de a încărca JavaScript și foi de stiluri CSS.

Prin utilizarea funcțiilor wp_enqueue_script și wp_enqueue_style, îi spui WordPress când să încarce un fișier, unde să îl încarce și care sunt dependențele lui.

Acest sistem permite, de asemenea, dezvoltatorilor să folosească bibliotecile JavaScript încorporate care vin împreună cu WordPress, în loc să se încarce același script de terță parte de mai multe ori. Acest lucru reduce timpul de încărcare a paginii și ajută la evitarea conflictelor cu alte teme și pluginuri.

Cum de a încorpora corect scripturile în WordPress?

Încărcarea corectă a scripturilor în WordPress este foarte ușoară. Mai jos este un exemplu de cod pe care l-ați lipi în fișierul plugins sau în fișierul functions.php al temei pentru a încărca corect scripturi în WordPress.

 ?php funcția wpb_adding_scripts () wp_register_script ('my_amazing_script', plugins_url ('amazing_script.js', __FILE__), array ('jquery'), '1.1', true); wp_enqueue_script ( 'my_amazing_script');  add_action ('wp_enqueue_scripts', 'wpb_adding_scripts'); ?> 

Explicaţie:

Am început prin înregistrarea scenariului nostru prin wp_register_script () funcţie. Această funcție acceptă 5 parametri:

• $ mâner - Mâner este numele unic al scenariului tău. Numele nostru este numit "my_amazing_script"
• $ src - src este locația scriptului tău. Folosim funcția plugins_url pentru a obține adresa URL adecvată a dosarului nostru de pluginuri. După ce WordPress va găsi acest lucru, atunci va căuta numele fișierului amazing_script.js în acel dosar.
• $ dependențele - deps este pentru dependență. Deoarece scriptul nostru utilizează jQuery, am adăugat jQuery în zona de dependență. WordPress va încărca automat jQuery dacă nu este încărcat deja pe site.
• $ ver - Acesta este numărul versiunii scriptului nostru. Acest parametru nu este necesar.
• $ in_footer - Vrem să încărcăm scriptul în subsol, așa că am setat valoarea să fie adevărată. Dacă doriți să încărcați scriptul în antet, atunci îl veți face fals.

După furnizarea tuturor parametrilor în wp_register_script, putem numi scriptul în wp_enqueue_script () ceea ce face ca totul să se întâmple.

Ultimul pas este să utilizați cârligul de acțiune wp_enqueue_scripts pentru a încărca efectiv scriptul. Deoarece acesta este un exemplu de cod, am adăugat acest lucru sub orice altceva.

Dacă ați adăugat acest lucru la tema sau plugin-ul dvs., atunci puteți plasa acest cârlig de acțiune în cazul în care scriptul este de fapt necesar. Acest lucru vă permite să reduceți amprenta de memorie a pluginului.

Acum, unii ar putea să se întrebe de ce mergem pasul suplimentar pentru a înregistra scenariul mai întâi și apoi să-l enqueuăm? Acest lucru permite altor proprietari de site-uri să vă deregistreze scriptul fără a modifica codul de bază al pluginului.

Incepeți în mod corespunzător stiluri în WordPress

La fel ca și scenariile, puteți să vă înșeleți foile de stil. Uitați-vă la exemplul de mai jos:

În loc de a folosi wp_enqueue_script, acum folosim wp_enqueue_style pentru a adăuga foaia de stil.

Observați că am folosit wp_enqueue_scripts cârlig de acțiune pentru ambele stiluri și scripturi. În ciuda numelui, această funcție funcționează pentru ambele.

În exemplele de mai sus, am folosit plugins_url funcție pentru a indica locația scenariului sau stilului pe care am vrut să-l enqueue.

Cu toate acestea, dacă utilizați funcția scripturilor enqueue în tema dvs., atunci pur și simplu utilizați get_template_directory_uri () in schimb. Dacă lucrați cu o temă de copil, atunci utilizați get_stylesheet_directory_uri ().

Mai jos este un exemplu de cod:

Sperăm că acest articol v-a ajutat să învățați cum să adăugați în mod corect jacvascript și stiluri în WordPress. S-ar putea să doriți, de asemenea, să studiați codul sursă al pluginurilor WordPress de top pentru câteva exemple de coduri de viață reală.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.