Best practice per l'utilizzo di snippet JavaScript esterni con Divi

WordPress e Divi fanno molte cose meravigliose fuori dagli schemi per semplificarci la creazione di un sito web. Ma a volte abbiamo bisogno di funzionalità più avanzate che possono essere realizzate solo con JavaScript.

Con Divi, puoi facilmente aggiungere frammenti JavaScript o jQuery (pezzi di codice) al tuo tema o pagina web senza un plug-in, anche se non hai impostato un tema figlio. In questo tutorial, esamineremo alcune best practice per l'utilizzo di frammenti JavaScript esterni con Divi.

Una breve parola su JavaScript e jQuery

JavaScript è la magia dietro la funzionalità dinamica che vedi su un sito web. È un linguaggio di codifica lato client creato per il Web che può accedere a tutti i tuoi file di temi ed eseguire tutti i tipi di funzioni tramite il browser che non sarebbero possibili con solo HTML o CSS.

JQuery (una delle librerie JavaScript più popolari) ha reso davvero facile aggiungere frammenti di JavaScript ai tuoi siti Web che funzioneranno su diversi tipi di browser. Ecco perché oggi vediamo molti jQuery utilizzati sui siti Web. JQuery è anche integrato in WordPress, quindi qualsiasi codice jQuery che aggiungi a Divi funzionerà se è formattato correttamente.

Formattazione corretta dello snippet JQuery in Divi/WordPress

Utilizzo della funzione Documento pronto

Nella maggior parte dei casi, suggerirei di utilizzare $(document).ready() nei frammenti di jQuery. Qualsiasi JavaScript aggiunto in $(document).ready() assicurerà che il documento (o DOM) sia caricato e pronto prima di eseguire JavaScript. Ciò evita determinate situazioni in cui JavaScript può essere eseguito quando la pagina non è pronta per essere manipolata in sicurezza.

In Divi, la funzione dovrebbe assomigliare a questa...

jQuery( document ).ready(function() {

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

});

Utilizzo di "jQuery" invece di "$" quando si utilizza jQuery in WordPress

Poiché WordPress viene già fornito con una versione di jQuery in modalità compatibilità, lo standard $ per jQuery non funziona. Questo per evitare che entri in conflitto con altre librerie JavaScript che potresti o meno utilizzare in WordPress. Invece, dovrai usare jQuery al posto della scorciatoia $ .

Così questo…

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

Bisognerebbe trasformarlo in questo...

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

Tuttavia, se vuoi mantenere il codice meno gonfio e mantenere quelle scorciatoie $ , puoi usare $ invece di jQuery se aggiungi $ come argomento passato alla funzione di pronto del documento. Ciò ti consentirà di mantenere il $ nello snippet jQuery contenuto in quella funzione.

Ecco come sarebbe...

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

Oppure puoi passare $ in per jQuery con una semplice funzione come questa insieme alla funzione documento pronto ...

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

      $( "div" ).hide();

    });
    
})( jQuery );

Ora che abbiamo compreso alcune best practice su come formattare gli snippet JavaScript, esploriamo come aggiungerli correttamente al tuo sito Divi.

Aggiunta di frammenti JavaScript a una singola pagina utilizzando il modulo di codice

Se stai cercando di aggiungere uno snippet javascript (o jquery) a una singola pagina in Divi, puoi utilizzare il modulo codice. Ciò assicurerà che JS non venga caricato inutilmente su ogni pagina, causando un lieve aumento del tempo di caricamento della pagina su pagine che non ne hanno nemmeno bisogno.

Ecco come farlo. Innanzitutto, attiva il generatore di divi quando modifichi la pagina che richiede lo snippet JS. Quindi, aggiungi un modulo di codice alla tua pagina.

Il codice funzionerà in qualsiasi punto della pagina, quindi sta a te decidere dove inserirlo.

Dopo aver aggiunto il modulo di codice, incolla lo snippet JavaScript. Assicurati di racchiudere il codice in un tag <script> modo che il codice venga riconosciuto come JavaScript.

Non dimenticare di assicurarti che il tuo frammento di codice sia formattato correttamente avvolgendolo con il tag <script> modo che il codice venga riconosciuto come JavaScript. E se stai usando jQuery, includi la funzione documento pronto in modo che venga caricato ogni volta che il documento è pronto per questo. Inoltre, dovrai usare jQuery nel tuo frammento invece della scorciatoia $ .

Questo è tutto! Lo snippet dovrebbe essere eseguito sulla pagina come previsto.

Nota: il tag <script> solito richiede di specificare il tipo di supporto dello script come segue...

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

Tuttavia, poiché "text/javascript" è il tipo predefinito, va bene ometterlo quando lo si utilizza per frammenti di codice JavaScript.

Aggiunta di frammenti JavaScript a tutte le pagine/post utilizzando le opzioni del tema Divi (non è necessario alcun tema figlio)

Gli snippet JavaScript possono anche essere aggiunti a Divi utilizzando la scheda di integrazione del codice di Divi in ​​Opzioni tema. Questo metodo funziona bene per gli snippet JS che desideri caricare su tutte le pagine/post del tuo sito web. Questa è anche una buona opzione se non hai un tema figlio o se hai solo pochi frammenti di JS che devono essere aggiunti al tuo sito Divi e non vuoi includerli in un file JS esterno.

Per trovare la sezione di integrazione del codice, vai a Divi > Opzioni del tema e fai clic sulla scheda Integrazione.

Capire dove mettere il tuo frammento JavaScript

Lì vedrai quattro aree in cui puoi aggiungere codice personalizzato al tuo sito Divi. Nella maggior parte dei casi, sarebbe meglio aggiungere frammenti JS al corpo. Questo posizionerà effettivamente il tuo frammento nella parte inferiore della pagina in modo che venga caricato dopo tutto il resto, il che è ottimo per la velocità di caricamento della pagina. In alcuni casi, potresti voler aggiungere il codice all'intestazione in modo che il codice possa essere caricato prima (o se il tuo documento dipende da JavaScript in esecuzione prima). Quindi dovrai testare e decidere l'opzione migliore che ti offre il miglior equilibrio tra prestazioni, tempistiche e funzionalità.

Ad esempio, potresti avere uno snippet jQuery che aggiunge uno stile all'intestazione. In tal caso, non vorrai caricarlo nel corpo (alla fine della pagina) perché l'intestazione si caricherebbe inizialmente senza quello stile fino a quando non viene letto lo snippet. Ciò lascerebbe il tuo above the fold brutto per i visitatori per un breve momento. Tuttavia, se lo caricassi nella testa, non avresti quel ritardo nello styling.

Puoi anche scegliere di aggiungere lo snippet JS alla fine dei tuoi post se disponi di codice che si applica solo ai post del blog. Ciò eviterà che il codice venga caricato inutilmente su altre pagine.

Le aree di integrazione del codice aggiungeranno il codice direttamente alla tua pagina, quindi dovrai racchiudere i frammenti di codice con il tag <script> .

Aggiunta di frammenti JS a Divi da un file JS separato (usando un tema figlio)

Si consiglia sempre di utilizzare un tema figlio per il proprio sito Divi. E una volta che hai impostato correttamente il tema figlio, potresti anche incorporare un file JS che può essere utilizzato per contenere i tuoi frammenti JS personalizzati.
Questo è sicuramente il modo preferito per gestire javascript nei siti WordPress e funziona bene anche con Divi.

Creare il file JS nel tuo tema figlio

È sempre una buona idea impostare un tema figlio Divi, soprattutto se prevedi di apportare modifiche ai file del tema. Dopo aver creato un tema figlio Divi, puoi facilmente creare un file JavaScript in cui puoi posizionare tutti i tuoi frammenti JS in un unico posto.

Ecco come farlo.

Crea un file JavaScript e aggiungilo alla tua cartella dei temi figlio

Utilizzando un editor di codice, crea un nuovo file e salvalo come file JavaScript. Ad esempio, se hai salvato il file come tipo "js" con il nome "scripts", il nome completo del file sarebbe "scripts.js". Qui è dove aggiungeresti tutti i frammenti js che desideri aggiungere a Divi. Non è necessario racchiudere i frammenti in un tag <script> poiché il file viene salvato come file js.

Una volta che il file è stato creato, devi aggiungerlo alla cartella del tema figlio. Mi piace creare una cartella js per contenere i miei file js personalizzati per una migliore organizzazione. Per fare ciò, crea semplicemente una nuova cartella denominata "js" nella radice della cartella del tema figlio e aggiungi il file "scripts.js" a quella cartella.

Accodamento di script nel file Functions.php del tema figlio

Ora dobbiamo accodare il file js in modo che venga caricato in Divi. Se hai già creato un tema figlio, dovresti avere già creato un file functions.php in cui hai già accodato il file style.css per il tema figlio che dovrebbe assomigliare a questo ...

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

Ora dovrai fare lo stesso per il tuo nuovo file js. Per fare ciò, dovrai aggiungere il seguente frammento alla funzione.

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

Il codice finale necessario per accodare il file style.css e scripts.js sarebbe simile a questo...

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' );

Pensieri finali

Se sei nuovo nel web design o hai appena iniziato con Divi, potresti non avere familiarità con JavaScript o come aggiungerlo al tuo sito web. Si spera che questo post sia stato utile per indicarti la giusta direzione e fornire alcune best practice che anche gli sviluppatori web esperti possono apprezzare.

Non vedo l'ora di sentirti nei commenti.

Saluti!