WordPress et Divi font beaucoup de choses merveilleuses 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 (morceaux de code) à votre thème ou à votre page Web sans plugin, même si vous n’avez pas configuré de thème enfant. Dans ce tutoriel, nous allons passer en revue les meilleures pratiques pour l’utilisation de snippets JavaScript externes avec Divi.
Un mot rapide sur JavaScript et jQuery
JavaScript est la magie qui se cache derrière les fonctionnalités dynamiques 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 les fichiers de votre thème et exécuter tous les types de fonctions via le navigateur, ce qui ne serait pas possible avec le HTML ou le CSS seuls.
JQuery (l’une des bibliothèques JavaScript les plus populaires) a rendu très facile l’ajout de snippets JavaScript à vos sites Web qui fonctionneront sur différents types de navigateurs. C’est pourquoi on voit beaucoup de JQuery sur les sites Web aujourd’hui. JQuery est également intégré à WordPress, donc tout code jQuery que vous ajoutez à Divi fonctionnera s’il est correctement formaté.
Formatage correct des extraits JQuery dans Divi/WordPress
Utilisation de la fonction Document Ready
Dans la plupart des cas, je vous suggère 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 permet d’éviter certaines situations où JavaScript pourrait s’exécuter alors que 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() {
// Ajoutez ici du code jQuery qui sera chargé une fois que le DOM sera prêt
}) ;
Utilisation de « jQuery » au lieu de « $ » lors de l’utilisation de jQuery dans WordPress
Puisque WordPress est déjà livré avec une version de jQuery en mode de compatibilité, le $ standard pour jQuery ne fonctionne pas. Cela permet d’éviter tout conflit avec d’autres bibliothèques JavaScript que vous pouvez ou non utiliser dans WordPress. Vous devrez donc utiliser jQuery à la place du raccourci $.
Donc, ceci..
$(document).ready(function(){
$("p").click(function(){
$(this).hide() ;
}) ;
}) ;
Il faudrait le transformer en ceci..
jQuery(document).ready(function(){
jQuery("p").click(function(){
jQuery(this).hide() ;
}) ;
}) ;
Toutefois, si vous souhaitez que le code soit moins volumineux et conserver ces raccourcis $, vous pouvez utiliser $ au lieu de jQuery si vous ajoutez $ comme argument transmis à la fonction document ready. Cela vous permettra de conserver le $ dans le snippet jQuery contenu dans cette fonction.
Voici à quoi cela ressemblerait..
jQuery( document ).ready(function( $ ) {
// Ajoutez le code jQuery ici, en utilisant $ pour faire référence à jQuery.
$( "div" ).hide() ;
}) ;
Ou vous pouvez passer le $ à jQuery avec une simple fonction comme celle-ci avec la fonction ready du document..
(function($) {
// Ajoutez le code jQuery ici, en utilisant $ pour faire référence à jQuery.
$(document).ready(function(){
$( "div" ).hide() ;
}) ;
})( jQuery ) ;
Maintenant que nous connaissons les meilleures pratiques en matière de formatage des extraits JavaScript, voyons comment les ajouter correctement à votre site Divi.
Ajouter des extraits JavaScript à une seule page à l’aide du module de code
Si vous souhaitez ajouter un extrait de JavaScript (ou de Jquery) à une seule page de Divi, vous pouvez utiliser le module de code. Cela permettra de s’assurer que le JS n’est pas chargé inutilement sur chaque page, entraînant une légère augmentation du temps de chargement des pages qui n’en ont pas besoin.
Voici comment procéder. Tout d’abord, activez le constructeur de divi lorsque vous modifiez 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 placer.
Après avoir ajouté le module de code, collez l’extrait de JavaScript. Veillez à entourer le code d’une balise
Cependant, comme "text/javascript" est le type par défaut, il est possible de ne pas le préciser lorsque vous l'utilisez pour des extraits de code JavaScript.
Ajout de bribes de code JavaScript à toutes les pages/points à l'aide des options du thème Divi (aucun thème enfant nécessaire)
Les extraits de code JavaScript peuvent également être ajoutés à Divi à l'aide de l'onglet d'intégration de code de Divi, dans les options de thème. Cette méthode fonctionne bien pour les extraits JS que vous souhaitez charger sur toutes les pages/postes 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 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 est préférable d'ajouter les extraits JS dans le corps du texte. Cela placera votre extrait au bas de la page, de sorte 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 voudrez peut-être ajouter le code dans l'en-tête pour qu'il se charge plus rapidement (ou si votre document dépend du fait que le JavaScript s'exécute plus rapidement). Vous devrez donc tester et décider de la meilleure option qui vous permettra d'obtenir le meilleur équilibre entre performances, rapidité et fonctionnalité.
Par exemple, vous pouvez avoir un extrait de jQuery qui ajoute du style à votre en-tête. Dans ce cas, vous ne voudriez pas le charger dans le corps de la page (à la fin de la page) car l'en-tête se chargerait initialement sans ce style jusqu'à ce que le snippet soit lu. L'en-tête serait alors chargé initialement sans le style jusqu'à ce que l'extrait soit lu, ce qui donnerait aux visiteurs un aspect moche pendant un bref instant. En revanche, si vous le chargez dans l'en-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 évitera que le code ne soit chargé inutilement sur d'autres pages.
