Comment ajouter du code jQuery dans Divi - Divi Community

Comment ajouter du code jQuery dans Divi

par | 25 juillet 2018 | Tutoriels Divi | 14 commentaires

Comment ajouter du code jQuery dans Divi

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.

Partager la publication "Comment ajouter du code jQuery dans Divi"

  • Facebook
  • X

Comment ?! 
Vous n'utilisez pas encore Divi ?

Et bien, si vous prévoyez de l'acheter, nous avons des réductions pour vous…

10% sur la licence à vie
20% sur la licence annuelle

14 Commentaires

  1. Frédéric Momméja
    Frédéric Momméja sur 26 juillet 2018 à 11h37 am

    Intéressant article, merci. 🙂

    Attention au petit bug dans votre générateur de fonctions jQuery qui ne ferme pas correctement la balise dans le cas d’une intégration dans le fichier functions.php…

  2. Pierre
    Pierre sur 26 juillet 2018 à 11h48 am

    De quelle balise parles-tu car je pense qu’elle a été supprimée automatiquement du commentaire ?
    Pour récapituler : on est dans un fichier PHP donc la balise à la fin du fichier functions.php.

  4. Pierre
    Pierre sur 26 juillet 2018 à 11h52 am

    Ah oui, bien vu. J’ai envoyé un mail à Divi.Space… qui a fait la correction dans la foulée ! 😉

  5. Pierre
    Pierre sur 21 août 2018 à 12h37 pm

    Bonjour Pierre, tout d’abord merci pour votre site qui nous aide tous beaucoup ! 🙂
    En l’occurence je cherche à installer la bibliothèque “ScrollReveal” sur mon thème enfant, je débute en .js et ne vois pas très bien comment adapter vos méthodes.. J’ai inséré mon script https://unpkg.com/scrollreveal dans le head via les options du thème, puis passe simplement par un module code sur ma page, mais j’ai l’impression que le script n’est pas au bon endroit, en tout cas rien n’y fait.. auriez-vous une idée du problème svp ? Merci par avance

  6. Pierre
    Pierre sur 21 août 2018 à 14h35 pm

    Bonjour Pierre. 🙂
    Il te suffit d’ajouter <@script@ src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"><@/@script@> dans les “options du thème -> intégration -> ajouter du code dans le head”.
    Ensuite, sur ta page, tu créés un module code avec <@script@>jQuery(document).ready(function($){ScrollReveal().reveal(‘.mon-element’);});<@/@script@> (remplace .mon-element par la classe qui sert à cibler l’élément que tu veux afficher avec Scrollreveal.
    Si tu veux voir un aperçu rapide du résultat.
    !!! Supprime bien les @ que j’ai ajoutés dans le code pour que celui-ci s’affiche bien dans le commentaire !

  7. Pierre
    Pierre sur 21 août 2018 à 17h51 pm

    Ca marche, Formidable ! merci beaucoup..

  8. Jean-Michel
    Jean-Michel sur 31 décembre 2018 à 17h16 pm

    Bonjour,
    est-ce que la bibliodtheque JavaScript est chargee par defaut avec le theme Divi svp ?

  9. Pierre
    Pierre sur 31 décembre 2018 à 17h34 pm

    jQuery est chargé par défaut avec WordPress. ????

  10. Jean-Michel
    Jean-Michel sur 3 janvier 2019 à 15h29 pm

    Merci Pierre et tous mes voeux pour cette nouvelle annee 2019.
    Je me posais la questions car il y a quelques jours que j’essaie de faire fonctionner un JavaScript sans succes.

  11. Jean-Michel
    Jean-Michel sur 5 janvier 2019 à 11h17 am

    Rebonjour Pierre,
    Decidemment mon javaScript ne veut pas demarrer et j’obtiens un message d’erreur dans la console mais je suis incapable de l’interpreter, pouvez-vous me mettre sur la voie svp ?

    JQMIGRATE: Migrate is installed, version 1.4.1 jquery-migrate.min.js:2:542
    Échec du chargement pour l’élément dont la source est « https://localhost/Judogokyo/js/mon_script_carousel.js?ver=5.0.2 ». fr:430:1
    Une chaîne vide a été transmise à « getElementById() ». jquery.js:2:24932

    ​

  12. Pierre
    Pierre sur 5 janvier 2019 à 11h34 am

    A priori, l’élément ciblé n’a pas été trouvé par ton script.

  13. Jean-Michel
    Jean-Michel sur 5 janvier 2019 à 11h42 am

    Oui en effet, c’est bien la raison que je recherche.
    En fin du functions.php de mon Divi-child j’ai ceci :

    function carousel_scripts() {

    wp_enqueue_script(‘carousel_script’, ‘/js/mon_script_carousel.js’, array(), ”, true );

    } // fin de la fonction carousel_scripts

    add_action(‘wp_enqueue_scripts’, ‘carousel_scripts’);

    Et mon fichier se trouve bien a Divi-child/js/mon_script_carousel

    Dans ce fichier se trouve le script teste sur codepen.
    Pouvez-vous m’aider ?

  14. Marc
    Marc sur 25 août 2019 à 09h59 am

    Merci super tuto et super ressource

    brava

Poster le commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.