Comment ajouter du code jQuery dans Divi - Divi Community

Le JavaScript, et notamment le framework jQuery, est devenu indispensable au bon fonctionnement d’un site Internet.
Celui-ci permet de dynamiser les pages web en animant ou en manipulant les éléments de son choix.
Sur Divi Community, nous vous avons déjà présenté de nombreux tutoriaux requérant jQuery, comme par exemple pour créer une modale avec le Divi Builder, ou encore modifier des éléments au scroll

Voyons désormais les différentes manières d’ajouter du code jQuery à un site Divi.

Avant-propos

Avant de rentrer dans le vif du sujet, je vais vous présenter le petit bout de code jQuery que je vais utiliser dans cet article.

jQuery(document).ready(function($){
$('#monDeclencheur').click(function(){
$('#monElementCible').hide();
});
});

Détaillons ce code

Rien de bien compliqué ici, il s’agit d’un simple snippet permettant de masquer un élément en cliquant sur un autre.

  • Ligne 1 :
    • on annonce que le code se lancera une fois que le document est chargé
    • on déclare notre fonction $ (c’est en quelques sortes un raccourci qui signifie “jQuery“)
  • Ligne 2 :
    • on précise l’identifiant CSS de l’élément déclencheur
    • on annonce que l’action se fera au clic
  • Ligne 3 :
    • on précise l’identifiant CSS de l’élément cible
    • on définit l’action de masquage

Dans le module Code

Ajouter du code jQuery dans le module code de Divi

La première méthode qui vient tout de suite à l’esprit est d’utiliser un module Code.
Pour ceci, rien de plus facile : activez le Divi Builder sur une page de votre site, insérez un module Code dans votre page et collez votre code jQuery dans Contenu -> Texte -> Contenu.

Notez que ce code sera ainsi inséré à l’endroit exact de la page où le module Code a été ajouté, donc “en plein milieu” du code HTML, et bien sûr uniquement sur la page concernée.
Pour cette raison, il nous faut donc imbriquer notre snippet entre une balise <script> et une balise </script> (voir le résultat sur la capture d’écran ci-dessus).

Dans les options du thème Divi

Ajouter du code jQuery dans les options du thème Divi

Rendez-vous dans l’administration de WordPress, menu de gauche, Divi -> Options du thème -> Intégration -> Ajouter ligne de code à la < head > de votre blog et collez votre snippet.

Là encore, prenez soin d’imbriquer votre code entre les balises <script> et </script>.
Notez que cette méthode insérera votre code sur toutes les pages de votre site car il sera présent dans le <head> de chaque page.
À vous de juger s’il est utile que votre code jQuery apparaisse ou non sur l’ensemble de votre site.

Dans un fichier JavaScript

Si la longueur de votre code jQuery est assez conséquente et qu’il doit apparaitre sur plusieurs pages de votre site, il est généralement préférable de charger un fichier JavaScript externe.
De la même manière qu’on le fait pour les feuilles de styles CSS par exemple.

Avec votre éditeur de code (ou un simple éditeur de texte), créez un fichier dans lequel vous insérez votre code jQuery puis enregistrez-le avec une extension en .js : par exemple mon-fichier-javascript.js

Pas besoin d’imbriquer le code entre des balises <script> et </script> dans un fichier JavaScript.

Connectez-vous à votre compte FTP et uploadez ce fichier sur le serveur de votre site. Vous pouvez choisir de le déposer par exemple dans le dossier uploads de WordPress.

Ensuite pour appeler ce fichier sur les pages de votre site, il existe 2 solutions.

Appeler un fichier JavaScript externe depuis les options du thème Divi

Appeler un fichier JavaScript externe dans les options du thème Divi

Rendez-vous dans l’administration de WordPress, menu de gauche, Divi -> Options du thème -> Intégration -> Ajouter ligne de code à la < head > de votre blog et ajoutez le code suivant en prenant soin de modifier le chemin d’accès et le nom de votre fichier JavaScript.

<script src="http://mon-chemin-d-acces/mon-fichier-javascript.js"></script>

Appeler un fichier JavaScript externe depuis son thème enfant

Si vous utilisez un thème enfant, vous pouvez appeler votre fichier JavaScript externe directement depuis le fichier functions.php,  à peu près de la même manière que le fichier style.css y est déjà appelé.

<?php

function appel_styles_et_scripts() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_script( 'mon-fichier-javascript', get_stylesheet_directory_uri() . '/mon-fichier-javascript.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'appel_styles_et_scripts' );

Détaillons ce code

Il s’agit ici du code de base du fichier functions.php d’un thème enfant auquel j’ai ajouté la ligne 5 pour appeler mon fichier JavaScript.

  • Ligne 3 : votre nom de fonction est certainement différent car libre de choix
  • Ligne 4 : appel du fichier style.css du thème enfant
  • Ligne 5 : appel du fichier JavaScript externe
    • au début de la parenthèse, ‘mon-fichier-javascript’ permet d’identifier son fichier dans le code HTML de la page (mettez ce que bon vous semble)
    • plus loin dans la parenthèse, ‘/mon-fichier-javascript.js’ correspond au chemin d’accès au fichier JavaScript (ici il se situe juste à côté du fichier functions.php dans le thème enfant)

Dans le fichier functions.php du thème enfant

Cette dernière possibilité est certainement la moins utilisée par l’utilisateur lambda mais il est bon de savoir que c’est possible.
Il s’agit d’une fonction qui va ajouter le code jQuery sur toutes les pages du site en l’injectant, selon notre choix, dans le header ou dans le footer.

function ajout_jquery() {?>
<script>
jQuery(document).ready(function($){
$('#monDeclencheur').click(function(){
$('#monElementCible').hide();
});
});
</script>
<?php
}
add_action( 'wp_head', 'ajout_jquery');

Détaillons ce code

  • Ligne 1 : le nom de la fonction est libre de choix
  • Lignes 2 à 8 : on retrouve notre snippet jQuery, imbriqué entre les balises <script> et </script>
  • Ligne 11 :
    • si on utilise l’action wp_head, notre code jQuery sera injecté dans le header de chaque page
    • si on utilise l’action wp_footer, notre code jQuery sera injecté dans le footer de chaque page

Bonus : un générateur de fonctions jQuery

Le générateur de fonctions jQuery par Divi Space

Pour aller un peu plus loin dans l’utilisation de jQuery au sein d’un environnement Divi, je vous annonce que Divi.Space a récemment publié un outil extrêmement pratique pour qui souhaite écrire rapidement du code jQuery.

En effet, il vous suffit tout d’abord de sélectionner l’action que vous souhaitez réaliser, parmi les 13 options proposées. Que ce soit pour afficher ou masquer un élément, ajouter ou retirer une classe ou un élément…
Ensuite, choisissez à quel moment cette action doit intervenir : au clic, au survol, au scroll…
Et enfin, précisez où vous insérerez votre code jQuery : dans un module Code, dans les options du thème Divi, dans un fichier JavaScript externe ou dans le fichier functions.php du thème enfant.

En conclusion

Bien que jQuery soit, comme je l’annonçais en introduction de ce tutoriel, un outil incontournable pour réaliser des sites modernes, les utilisateurs novices de Divi peinent bien souvent à l’utiliser.
Par le biais de cet article, vous avez désormais les bases vous permettant d’insérer correctement et facilement du code jQuery dans votre site Divi.
Que ce soit des snippets ou tutoriels que nous vous proposons ici sur Divi Community, d’autres morceaux de code que vous trouverez un peu partout sur le web, ou encore des fonctions que vous aurez vous-même générées avec l’outil de Divi.Space.