În WordPress, în loc să adăugați pur și simplu acestea la antet, ar trebui să utilizați o metodă numită enqueueing, care este o modalitate standardizată de gestionare a activelor dvs. cu un bonus suplimentar de gestionare a dependențelor. Aflați mai jos cum să o faceți folosind wp_enqueue_scripts.

• Cum funcționează enqueueing-ul
• Noțiuni de bază despre enqueueing cu wp_enqueue_scripts
• Gestionarea dependențelor
• Încărcați scripturile în Footer
• Specificarea mediilor pentru stiluri

Cum funcționează punerea în coadă

Există doi pași parcurși atunci când se pune în coadă un script sau un stil. Mai întâi îl înregistrați – îi spuneți lui WordPress că este acolo – și apoi îl puneți efectiv în coadă, care în cele din urmă îl scoate în antet sau chiar înainte de tag-ul de închidere a corpului.

Motivul pentru a avea doi pași are legătură cu modularitatea. Uneori veți dori să anunțați WordPress despre un activ, dar este posibil să nu doriți să îl utilizați pe fiecare pagină. De exemplu: Dacă construiți un shortcode pentru o galerie personalizată care utilizează Javascript, trebuie să încărcați de fapt JS doar atunci când este utilizat shortcode-ul – probabil nu pe fiecare pagină.

Modalitatea de a face ca acest lucru să se întâmple este să înregistrați mai întâi scriptul și să îl puneți efectiv în coadă doar atunci când este afișat codul scurt (lectură sugerată: The Ultimate Guide to WordPress Shortcodes).

Bazele punerii în coadă cu wp_enqueue_scripts

Pentru a pune în coadă scripturi și stiluri în front-end va trebui să folosiți cârligul wp_enqueue_scripts. În cadrul funcției cu cârlig puteți utiliza funcțiile wp_register_script(), wp_enqueue_script(), wp_register_style() și wp_enqueue_style().

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) ); wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' );}

În exemplul de mai sus am înregistrat și pus în coadă activele în cadrul aceleiași funcții, ceea ce este puțin redundant. De fapt, puteți folosi funcțiile enqueue pentru a înregistra și a pune în coadă imediat, folosind aceleași argumente ca și în funcțiile register:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}

Dacă ar fi să separ cele două funcții, aș face acest lucru folosindu-le în cârlige diferite. Într-un exemplu din lumea reală am putea folosi cârligul wp_enqueue_scripts pentru a înregistra activele și funcția shortcode-ului pentru a le enqueue.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}add_shortcode( 'custom_gallery', 'custom_gallery' );function custom_gallery( $atts ){ wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' ); // Gallery code here}

Gestiunea dependențelor

Mecanismul de enqueueing al WordPress are un suport încorporat pentru gestionarea dependențelor, folosind al treilea argument al ambelor funcții wp_register_style() și wp_register_script(). De asemenea, puteți utiliza imediat funcțiile de punere în coadă dacă nu aveți nevoie să le separați.

Al treilea parametru este o matrice de scripturi/stiluri înregistrate care trebuie să fie încărcate înainte ca activul curent să fie pus în coadă. Exemplul nostru de mai sus se va baza cel mai probabil pe jQuery, așa că haideți să specificăm asta acum:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );}

Nu trebuie să înregistrăm sau să punem noi înșine în coadă jQuery, deoarece acesta face deja parte din WordPress. Puteți găsi o listă de scripturi și stiluri disponibile în WordPress în Codex.

Dacă aveți dependențe proprii, va trebui să le înregistrați, altfel scripturile dvs. nu se vor încărca. Iată un exemplu:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );}

Să presupunem că primul script este o galerie, iar al doilea este o extensie a acestuia care face ca imaginile să se deschidă într-o cutie luminoasă. Rețineți că, deși al doilea script se bazează pe jQuery, nu trebuie să specificăm acest lucru, deoarece primul nostru script va încărca deja jQuery. Acestea fiind spuse, poate fi o idee bună să precizați toate dependențele, doar pentru a vă asigura că nimic nu se poate strica dacă uitați să includeți o dependență.

WordPress știe acum de ce scripturi avem nevoie și poate calcula în ce ordine trebuie adăugate în pagină.

Încărcați scripturile în subsol

Dacă puteți scăpa cu încărcarea scripturilor în subsol, ar trebui să o faceți. Acest lucru mărește timpii de încărcare aparentă a paginii și poate împiedica ca site-ul dvs. să se blocheze în timp ce se încarcă scripturile, mai ales dacă acestea conțin apeluri AJAX.

Mecanismul de punere în coadă poate adăuga scripturi în subsol folosind al cincilea parametru (al patrulea fiind un număr de versiune opțional). Exemplul nostru de mai sus ar încărca scripturile în subsol dacă îl modificăm ușor.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );}

Specificarea lui true ca al cincilea parametru va pune scripturile în subsol, folosirea lui false sau omiterea parametrului va încărca lucrurile în antet. Așa cum am menționat anterior, ori de câte ori este posibil, încărcați scripturile în subsol.

Specificarea mediilor pentru stiluri

Utilizând cel de-al cincilea parametru al funcțiilor de înregistrare/încărcare a stilurilor puteți controla tipul de mediu pentru care a fost definit scriptul (print, ecran, handheld etc.). Prin utilizarea acestui parametru puteți restricționa încărcarea stilurilor pentru un anumit tip de media, ceea ce reprezintă un mic truc de optimizare la îndemână.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );}

Pentru o listă completă a tipurilor de media care pot fi utilizate, aruncați o privire la specificațiile CSS.

Summary

Enqueueing assets este un mod puternic de a le gestiona. Îți oferă ție și altor creatori de pluginuri/teme mai mult control asupra sistemului în ansamblu și îți ia din mână gestionarea dependențelor.

Dacă nu era de ajuns, este modalitatea de adăugare a activelor tale, multe piețe de teme și depozitul WordPress în sine nu-ți vor aproba munca dacă nu folosești această metodă.

.