Ce este WP Enqueue și cum îl utilizați?

Publicat: 2017-10-28

Când învățați HTML pentru prima dată, singurul mod în care știți cum să inserați orice fel de interactivitate este utilizarea etichetelor script în antetul sau subsolul paginii pentru a seta tipul și sursa unui fișier JavaScript extern. (Sau dacă chiar înveți, întreaga funcție JS între etichetele de script chiar acolo în corp. Este în regulă pentru învățare, dar este o practică destul de proastă odată ce treci în dezvoltarea avansată WordPress. Intră în funcția de enqueue .

Odată ce treceți pe lângă site-uri web simple, cu o singură pagină, acele practici pentru începători pot crea situații foarte lipicioase. Pe măsură ce începeți să adăugați din ce în ce mai mult JavaScript, site-ul dvs. web devine din ce în ce mai lent. Actualizarea durează mai mult. În cele din urmă, ați făcut o grămadă mare de JavaScript-getti și, oricât de mult ați încerca, acel teanc de tăiței nu se va descurca.

Din fericire, puteți utiliza funcția de enqueue în WordPress pentru a adăuga stiluri și scripturi de care CMS are grijă pentru dvs. Toată dezordinea este gestionată pentru dvs. Deși nu este la fel de simplu ca lipirea directă a scriptului sau a stilurilor pe care le doriți în antetul sau subsolul fiecărei pagini, este modalitatea corectă de a o gestiona. WordPress nu are opinii teribile, există cu siguranță o serie de bune practici despre care ar trebui să știți

Și wp_enqueue_scripts este în fruntea acestor practici.

Care este marea afacere?

Motivul principal pentru care veți dori să utilizați wp_enqueue este să mențineți site-ul dvs. funcțional fără probleme și rapid. Viteza paginii este importantă și utilizarea acelorași scripturi și stiluri de nenumărate ori din nou nu ajută. Deloc.

Din fericire, wp_enqueue este un exemplu de programare funcțională. Tot ceea ce înseamnă este că scrii o singură bucată de cod pentru a fi executată (fragmentul tău JavaScript) și folosești wp_enqueue pentru a-l apela în loc să trebuiască să rescrii / lipi întregul lucru de fiecare dată când ai nevoie de el.

Asta e. Minunat.

Chiar și mai minunat, folosind metoda de enqueue, WordPress însuși introduce etichetele _script_ în antet și subsol unde aparțin automat, încărcându-le fără a fi nevoie să le introduceți separat pe fiecare pagină.

WP Enqueue Syntax și Params

Realizarea scripturilor nu este chiar atât de dificilă. Dacă sunteți suficient de priceput pentru a lucra cu JavaScript, în primul rând, funcțiile PHP pe care le utilizați pentru conectare vor fi foarte mici.

Într-o etichetă script tipică, fie veți importa direct fișierul .js extern, fie veți lipi întregul fragment lung de cod între etichete. (Aceasta este, de asemenea, ceea ce faceți dacă lipiți ceva în modulul codului Divi sau în widget-urile WP Custom HTML sau Text).

Trebuie doar să cunoașteți câțiva parametri de bază și sintaxă.

Codexul oferă acest lucru ca cod de bază de coadă: 

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Una peste alta, este destul de simplu să se împartă în biți utilizabili în funcție de parametri.

  • wp_enqueue_script () este funcția care va pune tot codul în pagina unde merge.
  • $ handle este un nume unic pentru scriptul în sine.
  • $ src reprezintă adresa URL a fișierului .js propriu-zis pe care îl scoateți.
  • $ deps sunt $ handle- ul oricăror dependențe de care are nevoie.
  • $ ver va fi numărul versiunii. Dacă nu este specificat niciunul, veți obține versiunea de instalare WP adăugată automat.
  • $ in_footer sau $ in_header îi spune WordPress unde să îți plaseze scriptul.

Documentația completă pentru a pune în scenă scripturile poate fi văzută în Codex.

Atenție, studenți: Înregistrarea WP începe acum!

În plus față de _wp_enqueue__, WP are și o metodă la îndemână numită _wp_register__. Ambele metode folosesc aceiași parametri și sintaxă, astfel încât să obțineți cu adevărat o afacere două-la-unu cu perechea lor. În esență, înregistrarea unui script este aceeași cu numirea unei funcții în JavaScript.

Deși nu este necesar, înregistrarea scripturilor vă poate ușura viața, deoarece nu va trebui să le declarați ca dependențe mai târziu. Vor fi deja înregistrați. Prin urmare ... _wp_register__. Odată ce un script este înregistrat, îl puteți apela înapoi prin mânerul său $ , așa cum veți vedea în exemplul de mai jos.

Vă veți înregistra codul astfel: 

wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);

Apoi, ori de câte ori aveți nevoie din nou, îl puteți apela întotdeauna astfel:

wp_enqueue_script( 'jquery' );

În plus, înregistrarea înseamnă că nu trebuie să încărcați un script chiar și atunci când nu este necesar. WPMU are un exemplu extraordinar de creare a shortcode-ului: dacă înregistrați scriptul la un shortcode care utilizează _wp_enqueue__, acesta va fi folosit numai atunci când shortcode-ul este. Cu toate acestea, dacă îl apelați doar prin stingerea acestuia, acesta va fi încărcat chiar și atunci când codul scurt nu este utilizat.

Puteți citi totul despre metodă în Codex.

În plus, autorii plugin-ului sunt obligați să scoată scripturi dacă doresc să fie incluși în repo-ul WordPress.org, așa că dacă acest lucru este pe plăcuța dvs. ... mai bine treceți la coadă.

Punând laolaltă

Implementarea codului este ușoară. Doar introduceți un fragment ca cel de mai jos în funcțiile dvs.php . iar WordPress se ocupă de restul. Adică, acesta este un fragment foarte simplu pentru a apela jQuery, dar puteți vedea cum se joacă lucrurile împreună.

În mod normal, ați folosi ceva care arată astfel: 

<script type="text/javascript" src="jquery.js"></script>

După ce veți afla cum utilizați enqueue_scripts_ , veți vedea ceva mai asemănător: 

add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts(){
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true);
    wp_enqueue_script( 'jquery' ); 
}

Acum, observați în codul de mai sus cum folosește funcția add_scripts () _ care face deja parte din WordPress pentru a contura ordinea următorilor pași. Mai întâi, funcția wp_register_ primește toate detaliile specificate și pune scriptul în subsolul paginii, apoi folosește wp_enqueue pentru a-l apela în final, odată ce totul este configurat.

Încheierea

Asta este cu adevărat tot ce există. Ei bine, asta nu este adevărat - coada este o parte destul de înrădăcinată a WP. Dar acestea sunt elementele de bază care te fac să te înțelegi să faci mai mult cu WordPress decât ai putea avea înainte.

Noțiunile de bază pe care le-am învățat cu toții să introducem scripturi când am început dezvoltarea web încă funcționează, dar nu sunt întotdeauna cel mai bun mod de a face lucruri. O parte din frumusețea WordPress-ului construit pe PHP este că puteți aduce acest tip de logică în munca dvs., păstrând în același timp aceeași structură de bază și flux de lucru pe care oricum le-ați fi avut.

Imagine în miniatură a articolului de la hanss / shutterstock.com