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

În acest articol vom vedea cum să adăugați corect JavaScript și stiluri în WordPress .

Există mulți dezvoltatori WordPress noi cărora le place să scrie cod și să dezvolte plugin-uri exclusiv pentru propriile lor site-uri web sau să le vândă pe diverse piețe și să obțină un profit frumos.

Există diferite moduri de a scrie un cod, dar există doar câteva moduri selectate de a scrie codul eficient.

Dacă puteți scrie un cod în două rânduri în loc de zece, economisiți multă procesare, precum și memorie.

Dacă s-ar putea să nu conteze pentru un site mic și ușor, dar pentru un site greu, ar putea însemna mult.

Dacă nu scrieți cod clar și utilizați eficient resursele disponibile, veți crea o mulțime de conflicte pentru alte programe.

De exemplu, există diferite moduri de a încărca JavaScript extern gata făcut în WordPress pentru pluginul dvs.

Dar dacă nu respectați standardul corespunzător, toate pluginurile activate se pot bloca grav.

Acest articol se adresează în principal noilor dezvoltatori WordPress care doresc să dezvolte teme și pluginuri WordPress.

Dacă nu codificați corect, codul dvs. va fi neprofesional și orice produs pe care l-ați făcut, indiferent cât de bun ar fi conceptul, nu veți fi niciodată acceptat.

Deci, este mai bine să știți cum să adăugați corect JavaScript și stiluri în WordPress .

Greșelile de a adăuga JavaScript

Unii dintre voi poate fi conștienți de faptul că WordPress are o funcție numită wp_head care vă ajută să încărcați orice în secțiunea antet a site-ului.

Tot ce trebuie să faceți este să adăugați următoarele linii de cod în fișierul dvs. de script și orice și totul va apărea în antet.

add_action('wp_head', 'wpb_bad_script');
funcția wpb_bad_script() {
echo 'jQuery merge aici';
}

Aceasta este o scurtătură pentru a adăuga lucruri, dar nu este cea mai bună cale. Trebuie să urmați standardul adecvat, renunțând la comenzile rapide și acesta este scopul acestei ilustrații.

De exemplu, încărcați manual JQuery în pluginul dvs. și un alt dezvoltator încarcă, de asemenea, același JQuery manual sau prin standardul corespunzător. Dacă o persoană a activat ambele plugin-uri, atunci JQuery va fi încărcat de două ori în memorie, ceea ce este o risipă.

În plus, dacă JQuery încărcat diferă în versiune, atunci ar exista o mulțime de erori în pluginuri din cauza conflictelor. Trebuie să știți cum să adăugați corect JavaScript și stiluri în WordPress înainte de a scrie orice cod.

Cum să eviți astfel de greșeli - Conceptul funcției de coadă?

După cum probabil știți, comunitatea de dezvoltatori WordPress este una mare și puternică. Există literalmente mii și mii de dezvoltatori care dezvoltă noi teme și plugin-uri în fiecare zi.

Dar ceea ce fac ei pentru a se asigura că nu există niciodată vreun conflict cu metoda de codare a celuilalt este prin funcția de script în coadă.

Aceasta este funcția responsabilă pentru adăugarea corectă a JavaScript-urilor și stilurilor în WordPress, astfel încât să nu existe niciodată niciun conflict și blocarea inutilă a memoriei.

Acesta asigură o modalitate sistematică de încărcare a JavaScript-urilor și a stilurilor. Funcția qp_enquque_function spune Wordless când să încarce acele JavaScript și stiluri, unde să le încarce și mai ales în ce condiții.

Cu ajutorul acestora, nu trebuie să încărcați manual JQuery și chestii de genul acesta și, prin urmare, nu va exista niciodată o condiție de blocare a memoriei din cauza încărcării acelorași fișiere din nou și din nou.

Motivul pentru aceasta este faptul că funcția Enqueue vă permite să utilizați bibliotecile încorporate care vin cu WordPress însuși. De asemenea, va reduce povara timpului lent de încărcare a paginii din cauza absenței încărcării manuale a JavaScript-urilor.

Pași pentru a adăuga corect JavaScript și stiluri în WordPress-

1. Puneți în coadă scripturile în WordPress

Următoarele linii de cod încarcă pachetul JavaScript încorporat care vine cu WordPress. Trebuie să plasați aceste linii în fișierul de pluginuri atunci când creați pluginuri sau trebuie să le plasați în functions.php dacă creați o temă.

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('scriptul_meu_uimitor');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts'); 

Explicația Codului

Scriptul este înregistrat prin funcția wp_register_script() care are cinci parametri diferiți.

1. $handle – Este un nume unic pentru script. Aici este „my_amazing_script”.

2. $src – Acesta definește locația scriptului dumneavoastră. Funcția de bibliotecă plugins_url preia adresa URL adecvată a folderului dvs. de pluginuri. După ce este preluat, va începe să caute fișierul amazing_script.js în interiorul acestuia.

3. $deps – Definește dependența. Trebuie să-l adăugați atunci când cereți WordPress să încarce scriptul bibliotecii precum Jquery.

Dacă scripturile sunt deja încărcate în memorie, acestea nu vor fi încărcate din nou și va avea loc o nouă încărcare. Acest lucru asigură niciun conflict, nicio blocare a memoriei și nicio pierdere de timp.

4. $ver – Definește numărul versiunii scriptului. Nu este obligatoriu.

5. $in_footer – Este folosit pentru a încărca scriptul în subsol. Dacă doriți să încărcați scriptul în antet, ar trebui să îl păstrați pe false.

Odată ce totul este definit, trebuie doar să apelați scriptul cu wp_enqueue_script().

2. Stiluri de coadă în WordPress

La fel ca JavaScript, trebuie să puneți în coadă foile de stil. Utilizați următorul cod din fișierul plugin sau fișierul functions.php pentru crearea temei.

funcția wpb_adding_styles() {
wp_register_script('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_script('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles'); 

Codurile de mai sus sunt potrivite în timp ce creați un plugin. Când creați o temă, trebuie să schimbați plugins_url() în get_template_directory_uri(). Restul lucrurilor vor rămâne exact aceleași.

funcția wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('scriptul_meu_uimitor');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts'); 

Dacă creați o temă copil, atunci trebuie să utilizați get_stylesheet_direcroy_uri() în loc de get_template_directory_uri().

Acesta este modul standard de a adăuga corect JavaScript și stiluri în WordPress.

Dacă pluginul sau tema dvs. se confruntă cu erori, ar trebui să modificați codul acestora cu liniile de cod menționate mai sus și poate că erorile vor fi rezolvate.

Urmați întotdeauna standardele de codificare urmate în întreaga lume pentru a fi pe aceeași pagină cu alți dezvoltatori de succes.