Meilleures pratiques pour utiliser des extraits de code JavaScript externes avec Divi

WordPress et Divi font beaucoup de choses merveilleuses prêtes à l'emploi pour nous permettre de créer facilement un site Web. Mais parfois, nous avons besoin de fonctionnalités plus avancées qui ne peuvent être réalisées qu'avec JavaScript.

Avec Divi, vous pouvez facilement ajouter des extraits JavaScript ou jQuery (des morceaux de code) à votre thème ou page Web sans plugin, même si vous n'avez pas de thème enfant configuré. Dans ce tutoriel, nous allons passer en revue quelques bonnes pratiques pour utiliser des extraits de code JavaScript externes avec Divi.

Un petit mot sur JavaScript et jQuery

JavaScript est la magie derrière la fonctionnalité dynamique que vous voyez sur un site Web. Il s'agit d'un langage de codage côté client conçu pour le Web qui peut accéder à tous vos fichiers de thème et exécuter tous les types de fonctions via le navigateur qui ne seraient pas possibles avec HTML ou CSS seul.

JQuery (l'une des bibliothèques JavaScript les plus populaires) a rendu très facile l'ajout d'extraits de code JavaScript à vos sites Web qui fonctionneront sur différents types de navigateurs. C'est pourquoi beaucoup de jQuery sont utilisés sur les sites Web aujourd'hui. JQuery est également intégré à WordPress, de sorte que tout code jQuery que vous ajoutez à Divi fonctionnera s'il est correctement formaté.

Formatage correct de l'extrait de code JQuery dans Divi/WordPress

Utilisation de la fonction Document prêt

Dans la plupart des cas, je suggérerais d'utiliser $(document).ready() dans vos extraits jQuery. Tout JavaScript ajouté dans $(document).ready() s'assurera que le document (ou DOM) est chargé et prêt avant d'exécuter le JavaScript. Cela évite certaines situations où JavaScript peut s'exécuter lorsque la page n'est pas prête à être manipulée en toute sécurité.

Dans Divi, la fonction devrait ressembler à ceci…

jQuery( document ).ready(function() {

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

});

Utilisation de « jQuery » au lieu de « $ » lors de l'utilisation de jQuery dans WordPress

Étant donné que WordPress est déjà livré avec une version de jQuery en mode de compatibilité, le $ standard pour jQuery ne fonctionne pas. C'est pour l'empêcher d'entrer en conflit avec d'autres bibliothèques JavaScript que vous pouvez ou non utiliser dans WordPress. Au lieu de cela, vous devrez utiliser jQuery à la place du raccourci $ .

Donc ça…

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

Devrait être transformé en ceci…

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

Cependant, si vous souhaitez garder le code moins volumineux et conserver ces raccourcis $ , vous pouvez utiliser $ au lieu de jQuery si vous ajoutez $ comme argument passé à la fonction document ready. Cela vous permettra de conserver le $ dans l'extrait jQuery contenu dans cette fonction.

Voici à quoi cela ressemblerait…

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

Ou vous pouvez passer le $ pour jQuery avec une fonction simple comme celle-ci avec la fonction de document prêt…

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

      $( "div" ).hide();

    });
    
})( jQuery );

Maintenant que nous comprenons quelques bonnes pratiques sur la façon de formater des extraits de code JavaScript, explorons comment les ajouter correctement à votre site Divi.

Ajout d'extraits de code JavaScript à une seule page à l'aide du module de code

Si vous cherchez à ajouter un extrait javascript (ou jquery) à une seule page dans Divi, vous pouvez utiliser le module de code. Cela garantira que le JS ne sera pas chargé inutilement sur chaque page, ce qui entraînera une légère augmentation du temps de chargement des pages sur les pages qui n'en ont même pas besoin.

Voici comment procéder. Tout d'abord, activez le constructeur Divi lors de l'édition de la page qui a besoin de l'extrait JS. Ensuite, ajoutez un module de code à votre page.

Le code fonctionnera n'importe où sur la page, c'est donc à vous de décider où vous voulez le mettre.

Après avoir ajouté le module de code, collez l'extrait de code JavaScript. Assurez-vous d'envelopper le code dans une <script> afin que le code soit reconnu en tant que JavaScript.

N'oubliez pas de vous assurer que votre extrait de code est correctement formaté en l'enveloppant avec la <script> afin que le code soit reconnu comme JavaScript. Et si vous utilisez jQuery, incluez la fonction document ready afin qu'elle se charge chaque fois que le document est prêt. De plus, vous devrez utiliser jQuery dans votre extrait au lieu du raccourci $ .

C'est ça! Votre extrait devrait s'exécuter sur la page comme prévu.

Remarque : La <script> nécessite généralement que vous spécifiiez le type de média du script comme suit…

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

Cependant, étant donné que le type "text/javascript" est le type par défaut, vous pouvez le laisser de côté lorsque vous l'utilisez pour des extraits de code JavaScript.

Ajout d'extraits de code JavaScript à toutes les pages/articles à l'aide des options de thème Divi (aucun thème enfant n'est nécessaire)

Des extraits de code JavaScript peuvent également être ajoutés à Divi à l'aide de l'onglet d'intégration de code de Divi sous Options du thème. Cette méthode fonctionne bien pour les extraits JS que vous souhaitez charger sur toutes les pages/articles de votre site Web. C'est également une bonne option si vous n'avez pas de thème enfant ou si vous n'avez que quelques extraits de JS à ajouter à votre site Divi et que vous ne souhaitez pas les inclure dans un fichier JS externe.

Pour trouver la section d'intégration de code, accédez à Divi > Options du thème et cliquez sur l'onglet Intégration.

Déterminer où placer votre extrait de code JavaScript

Vous y verrez quatre zones dans lesquelles vous pouvez ajouter du code personnalisé à votre site Divi. Dans la plupart des cas, il serait préférable d'ajouter des extraits JS au corps. Cela placera en fait votre extrait de code au bas de votre page afin qu'il se charge après tout le reste, ce qui est excellent pour la vitesse de chargement de la page. Dans certains cas, vous souhaiterez peut-être ajouter le code à l'en-tête afin que le code puisse se charger plus tôt (ou si votre document dépend de l'exécution de JavaScript plus tôt). Vous devrez donc tester et décider de la meilleure option qui vous offre le meilleur équilibre entre performances, synchronisation et fonctionnalité.

Par exemple, vous pouvez avoir un extrait jQuery qui ajoute un style à votre en-tête. Dans ce cas, vous ne voudriez pas le charger dans le corps (à la fin de la page) car l'en-tête se chargerait initialement sans ce style jusqu'à ce que l'extrait soit lu. Cela laisserait votre au-dessus de la ligne de flottaison moche pour les visiteurs pendant un bref instant. Cependant, si vous le chargez dans la tête, vous n'aurez pas ce retard dans le style.

Vous pouvez également choisir d'ajouter l'extrait JS au bas de vos articles si vous avez un code qui ne s'applique qu'aux articles de blog. Cela empêchera le code de se charger inutilement sur d'autres pages.

Les zones d'intégration du code ajouteront le code directement à votre page, vous devrez donc envelopper vos extraits de code avec la <script> .

Ajout d'extraits JS à Divi à partir d'un fichier JS distinct (à l'aide d'un thème enfant)

Il est toujours recommandé d'utiliser un thème enfant pour votre site Divi. Et une fois que vous avez correctement configuré le thème enfant, vous pouvez également incorporer un fichier JS qui peut être utilisé pour contenir vos extraits JS personnalisés.
C'est certainement le moyen préféré pour gérer le javascript dans les sites WordPress et cela fonctionne aussi bien avec Divi.

Création du fichier JS dans votre thème enfant

C'est toujours une bonne idée de configurer un thème enfant Divi, surtout si vous prévoyez d'apporter des modifications aux fichiers de thème. Une fois que vous avez créé un thème enfant Divi, vous pouvez facilement créer un fichier JavaScript dans lequel vous pouvez placer tous vos extraits JS au même endroit.

Voici comment procéder.

Créez un fichier JavaScript et ajoutez-le à votre dossier de thème enfant

À l'aide d'un éditeur de code, créez un nouveau fichier et enregistrez-le en tant que fichier JavaScript. Par exemple, si vous avez enregistré le fichier en tant que type « js » avec le nom « scripts », le nom complet du fichier serait « scripts.js ». C’est là que vous ajouteriez tous les extraits js que vous souhaitez ajouter à Divi. Vous n'avez pas besoin d'envelopper les extraits dans une <script> puisque le fichier est enregistré en tant que fichier js.

Une fois le fichier créé, vous devez l'ajouter à votre dossier de thème enfant. J'aime créer un dossier js pour contenir mes fichiers js personnalisés pour une meilleure organisation. Pour ce faire, créez simplement un nouveau dossier nommé "js" à la racine de votre dossier de thème enfant et ajoutez le fichier "scripts.js" à ce dossier.

Mise en file d'attente des scripts dans le fichier Functions.php de votre thème enfant

Il faut maintenant mettre en file d'attente le fichier js pour qu'il soit chargé dans Divi. Si vous avez déjà créé un thème enfant, vous devriez avoir un fichier functions.php déjà créé où vous avez déjà mis en file d'attente le fichier style.css pour le thème enfant qui devrait ressembler à ceci…

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

Vous devrez maintenant faire la même chose pour votre nouveau fichier js. Pour ce faire, vous devrez ajouter l'extrait suivant à la fonction.

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

Le code final nécessaire pour mettre en file d'attente le fichier style.css et le fichier scripts.js ressemblerait à ceci…

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

Dernières pensées

Si vous débutez dans la conception Web ou que vous débutez avec Divi, vous ne connaissez peut-être pas JavaScript ou comment l'ajouter à votre site Web. Espérons que cet article a été utile pour vous orienter dans la bonne direction et vous fournir quelques bonnes pratiques que même les développeurs Web chevronnés peuvent apprécier.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!