Cele mai bune practici pentru utilizarea fragmentelor JavaScript externe cu Divi

WordPress și Divi fac o mulțime de lucruri minunate pentru a ne facilita construirea unui site web. Dar uneori avem nevoie de funcționalități mai avansate care pot fi realizate numai cu JavaScript.

Cu Divi, puteți adăuga cu ușurință fragmente JavaScript sau jQuery (bucăți de cod) la tema sau pagina dvs. web fără un plugin, chiar dacă nu aveți o temă copil configurată. În acest tutorial, vom trece în revistă câteva dintre cele mai bune practici pentru utilizarea fragmentelor JavaScript externe cu Divi.

Un cuvânt rapid pe JavaScript și jQuery

JavaScript este magia din spatele funcționalității dinamice pe care o vedeți pe un site web. Este un limbaj de codare pentru client, construit pentru web, care poate accesa toate fișierele tematice și poate efectua toate tipurile de funcții prin browser, care nu ar fi posibil doar cu HTML sau CSS.

JQuery (una dintre cele mai populare biblioteci JavaScript) a făcut foarte ușor să adăugați fragmente JavaScript pe site-urile dvs. web, care vor funcționa în diferite tipuri de browser. De aceea, vedem astăzi o mulțime de jQuery pe site-uri web. JQuery este, de asemenea, încorporat în WordPress, astfel încât orice cod jQuery pe care îl adăugați la Divi va funcționa dacă este formatat corect.

Formatarea corectă a fragmentului JQuery în Divi / WordPress

Utilizarea funcției Document Ready

În majoritatea cazurilor, aș sugera utilizarea $(document).ready() în fragmentele dvs. jQuery. Orice JavaScript adăugat în $(document).ready() va asigura că documentul (sau DOM) este încărcat și gata înainte de a executa JavaScript. Astfel se evită anumite situații în care JavaScript se poate executa atunci când pagina nu este pregătită pentru a fi manipulată în siguranță.

În Divi, funcția ar trebui să arate astfel ...

jQuery( document ).ready(function() {

    // Add jQuery code here to be loaded once the DOM is ready

});

Folosirea „jQuery” în loc de „$” când se utilizează jQuery în WordPress

Deoarece WordPress vine deja cu o versiune de jQuery în modul de compatibilitate, standardul $ pentru jQuery nu funcționează. Aceasta este pentru a împiedica conflictul cu alte biblioteci JavaScript pe care le puteți utiliza sau nu în WordPress. În schimb, va trebui să utilizați jQuery în locul comenzii rapide $ .

Deci asta…

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

Ar trebui să fie transformat în asta ...

jQuery(document).ready(function(){
  jQuery("p").click(function(){
    jQuery(this).hide();
  });
});

Cu toate acestea, dacă doriți să păstrați codul mai puțin umflat și să păstrați acele comenzi rapide $ , puteți utiliza $ în loc de jQuery dacă adăugați $ ca argument transmis funcției de pregătire a documentului. Acest lucru vă va permite să păstrați $ în fragmentul jQuery conținut în acea funcție.

Iată cum ar arăta asta ...

jQuery( document ).ready(function( $ ) {
    // Add jQuery code here, using $ to refer to jQuery.
    $( "div" ).hide();
});

Sau puteți trece $ in pentru jQuery cu o funcție simplă ca aceasta împreună cu funcția de pregătire a documentului ...

(function($) {
    
    // Add jQuery code here, using $ to refer to jQuery.
    $(document).ready(function(){

      $( "div" ).hide();

    });
    
})( jQuery );

Acum, că înțelegem câteva dintre cele mai bune practici privind modul de formatare a fragmentelor JavaScript, să explorăm cum să le adăugăm în mod corespunzător pe site-ul dvs. Divi.

Adăugarea fragmentelor JavaScript într-o singură pagină utilizând modulul de cod

Dacă doriți să adăugați un fragment javascript (sau jquery) la o singură pagină din Divi, puteți utiliza modulul de cod. Acest lucru se va asigura că JS nu se încarcă inutil pe fiecare pagină, provocând o creștere minoră a timpului de încărcare a paginii pe paginile care nici măcar nu au nevoie de ea.

Iată cum să o faci. Mai întâi, activați generatorul de divii când editați pagina care are nevoie de fragmentul JS. Apoi, adăugați un modul de cod pe pagina dvs.

Codul va funcționa oriunde pe pagină, deci depinde de dvs. unde doriți să-l puneți.

După ce adăugați modulul de cod, lipiți în fragmentul JavaScript. Asigurați-vă că înfășurați codul într-o etichetă <script> astfel încât codul să fie recunoscut ca JavaScript.

Nu uitați să vă asigurați că fragmentul dvs. este codat corect formatat înfășurându-l cu eticheta <script> astfel încât codul să fie recunoscut ca JavaScript. Și dacă utilizați jQuery, includeți funcția de pregătire a documentului, astfel încât să se încarce ori de câte ori documentul este pregătit pentru acesta. De asemenea, va trebui să utilizați jQuery în fragmentul dvs. în loc de abrevierea $ .

Asta e! Fragmentul dvs. ar trebui să ruleze pe pagină conform așteptărilor.

Notă: Eticheta <script> necesită de obicei să specificați tipul de suport al scriptului după cum urmează ...

<script type="text/javascript">
</script>

Cu toate acestea, întrucât „text / javascript” este tipul implicit, este bine să îl lăsați în afara când îl utilizați pentru fragmente de cod JavaScript.

Adăugarea de fragmente JavaScript la toate paginile / postările folosind opțiunile temei Divi (nu este necesară o temă pentru copii)

Fragmente JavaScript pot fi, de asemenea, adăugate la Divi folosind fila de integrare a codului Divi din Opțiuni temă. Această metodă funcționează bine pentru fragmentele JS pe care doriți să le încărcați pe toate paginile / postările site-ului dvs. web. Aceasta este, de asemenea, o opțiune bună dacă nu aveți o temă pentru copii sau dacă aveți doar câteva fragmente de JS care trebuie adăugate pe site-ul dvs. Divi și nu doriți să le includeți într-un fișier JS extern.

Pentru a găsi secțiunea de integrare a codului, navigați la Divi> Opțiuni temă și faceți clic pe fila Integrare.

Aflând unde să vă puneți fragmentul JavaScript

Acolo veți vedea patru zone în care puteți adăuga cod personalizat pe site-ul dvs. Divi. Pentru majoritatea cazurilor, cel mai bine ar fi să adăugați fragmente JS în corp. Acest lucru va plasa de fapt fragmentul dvs. în partea de jos a paginii, astfel încât să se încarce după toate celelalte, ceea ce este excelent pentru viteza de încărcare a paginii. În unele cazuri, poate doriți să adăugați codul în cap, astfel încât codul să se poată încărca mai repede (sau dacă documentul dvs. depinde de JavaScript care rulează mai repede). Așadar, va trebui să testați și să decideți cea mai bună opțiune care vă oferă cel mai bun echilibru de performanță, sincronizare și funcționalitate.

De exemplu, este posibil să aveți un fragment jQuery care adaugă stil la antetul dvs. În acest caz, nu ați dori să îl încărcați în corp (la sfârșitul paginii), deoarece antetul s-ar încărca inițial fără acel stil până când citirea fragmentului. Acest lucru ar lăsa vizitatorii să arate urât pentru un moment scurt. Cu toate acestea, dacă l-ați încărca în cap, nu ați avea acea întârziere în stil.

De asemenea, puteți alege să adăugați fragmentul JS în partea de jos a postărilor dvs. dacă aveți cod care se aplică numai postărilor de blog. Acest lucru va împiedica încărcarea codului pe alte pagini inutil.

Zonele de integrare a codului vor adăuga codul direct la pagina dvs., deci va trebui să înfășurați fragmentele de cod cu eticheta <script> .

Adăugarea de fragmente JS la Divi dintr-un fișier JS separat (folosind o temă copil)

Este întotdeauna recomandat să utilizați o temă pentru copii pentru site-ul dvs. Divi. Și odată ce ați configurat corect tema copilului, este posibil să încorporați un fișier JS care poate fi utilizat pentru a păstra fragmentele JS personalizate.
Acesta este cu siguranță modul preferat de a gestiona javascript pe site-urile WordPress și funcționează bine și cu Divi.

Crearea fișierului JS în tema copilului dvs.

Este întotdeauna o idee minunată să configurați o temă pentru copii Divi, mai ales dacă intenționați să modificați fișierele temei. După ce ați creat o temă pentru copii Divi, puteți crea cu ușurință un fișier JavaScript în care puteți plasa toate fragmentele JS într-un singur loc.

Iată cum să o faci.

Creați un fișier JavaScript și adăugați-l în folderul tematic pentru copii

Folosind un editor de coduri, creați un fișier nou și salvați-l ca fișier JavaScript. De exemplu, dacă ați salvat fișierul ca tip „js” cu numele „scripturi”, numele complet al fișierului ar fi „scripts.js”. Aici ați adăuga toate fragmentele js pe care doriți să le adăugați la Divi. Nu trebuie să înfășurați fragmentele într-o etichetă <script> , deoarece fișierul este salvat ca fișier js.

Odată ce fișierul a fost creat, trebuie să îl adăugați în dosarul temei copilului. Îmi place să creez un folder js pentru a păstra fișierele js personalizate pentru o mai bună organizare. Pentru a face acest lucru, pur și simplu creați un folder nou numit „js” la rădăcina folderului tematic copil și adăugați fișierul „scripts.js” în acel folder.

Adăugarea de scripturi în fișierul Functions.php al temei pentru copii

Acum trebuie să scoatem fișierul js astfel încât să fie încărcat în Divi. Dacă aveți deja creată o temă copil, ar trebui să aveți deja un fișier functions.php creat în care ați pus deja fișierul style.css pentru tema copil care ar trebui să arate cam așa ...

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Acum va trebui să faceți același lucru pentru noul fișier js. Pentru a face acest lucru, va trebui să adăugați următorul fragment la funcție.

    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );

Codul final necesar pentru coacerea stilului.css și a fișierului scripts.js ar arăta astfel ...

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0.0' , true );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Gânduri finale

Dacă sunteți nou în designul web sau abia începeți cu Divi, este posibil să nu fiți familiarizați cu JavaScript sau cum să îl adăugați pe site-ul dvs. web. Sperăm că această postare a fost utilă pentru a vă orienta în direcția corectă și pentru a oferi câteva bune practici pe care chiar dezvoltatorii web experimentați le pot aprecia.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!