Aller au contenu
Ideoforge

JavaScript

JavaScript est le langage qui rend les pages Web interactives : menus qui s'ouvrent, carrousels, formulaires qui vérifient vos saisies, bandeaux de consentement aux cookies. Cette page s'adresse aux personnes qui gèrent un site WordPress, avec ou sans Divi : ce qu'il faut savoir de JavaScript, comment ajouter un script sans casser son site, et comment repérer une erreur quand quelque chose ne fonctionne plus.

JavaScript en bref

Une page Web repose sur trois langages complémentaires :

  • HTML décrit la structure : titres, paragraphes, liens, images ;

  • CSS décrit l'apparence : couleurs, polices, espacements (voir la page CSS) ;

  • JavaScript décrit le comportement : ce qui se passe quand on clique, qu'on fait défiler la page ou qu'on remplit un champ.

Le code JavaScript est téléchargé avec la page puis exécuté par le navigateur du visiteur. C'est la grande différence avec PHP, qui s'exécute sur le serveur avant l'envoi de la page. JavaScript peut aussi tourner côté serveur (avec Node.js), mais ce n'est pas le cas sur un site WordPress classique.

Selon W3Techs, 98,9% des sites Web utilisent JavaScript dans le navigateur (statistique d'octobre 2026). Le langage est normalisé sous le nom d'ECMAScript et, malgré son nom, il n'a rien à voir avec Java.

Où se trouve JavaScript dans un site WordPress

Même si vous n'en écrivez jamais une ligne, votre site en contient beaucoup :

  • WordPress lui-même : l'éditeur de blocs est une application JavaScript construite avec React, et WordPress fournit la bibliothèque jQuery, encore utilisée par de nombreux thèmes et extensions ;

  • le thème et le constructeur de pages : le Visual Builder de Divi, les animations, les menus mobiles, les diaporamas ;

  • les extensions : formulaires, boutique, bandeau cookies, galeries ;

  • les services tiers : statistiques, chat en ligne, vidéos intégrées, prise de rendez-vous.

Chaque script ajoute du poids à la page et du travail au navigateur. C'est une cause fréquente de lenteur, surtout sur mobile.

Ajouter un script dans WordPress

Un service vous demande de « coller ce code dans votre site » (pixel de suivi, widget, chat) ? Voici trois méthodes, de la plus simple à la plus propre.

Avec une extension

Une extension comme WPCode ajoute un extrait de code dans l'en-tête ou le pied de page de toutes les pages, sans toucher aux fichiers du thème. Le code survit aux mises à jour du thème et se désactive d'un clic en cas de problème.

Avec Divi

Divi propose deux emplacements :

  • Divi > Options du thème > Intégration : des champs pour ajouter du code dans le <head> ou dans le <body> de toutes les pages ;

  • le module Code : pour un script qui ne concerne qu'une page, placé à l'endroit voulu. Le résultat n'apparaît qu'après avoir enregistré la page et quitté le Visual Builder.

Avec un thème enfant (développeurs)

La méthode prévue par WordPress consiste à déclarer le fichier avec la fonction wp_enqueue_script(), dans le fichier functions.php d'un thème enfant ou dans une extension maison. WordPress gère alors les dépendances (jQuery par exemple) et évite de charger deux fois le même fichier. Depuis WordPress 6.3, un paramètre permet de demander un chargement différé (defer) ou asynchrone (async) :

PHP9 lignes
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'mon-script',
        get_stylesheet_directory_uri() . '/js/mon-script.js',
        array(),
        '1.0',
        array( 'strategy' => 'defer', 'in_footer' => true )
    );
} );

Documentation officielle : wp_enqueue_script() sur developer.wordpress.org.

Lire une erreur JavaScript dans la console

Quand un diaporama ne s'affiche plus, qu'un formulaire ne s'envoie pas ou que le constructeur tourne dans le vide, la cause est souvent une erreur JavaScript. Pour la voir :

  1. Ouvrez la page concernée dans Chrome, Firefox ou Edge.

  2. Ouvrez les outils de développement avec la touche F12 (ou clic droit > Inspecter).

  3. Cliquez sur l'onglet Console, puis rechargez la page.

  4. Repérez les lignes en rouge : le message décrit l'erreur, et le lien à droite indique le fichier en cause.

Le chemin du fichier oriente le diagnostic : /wp-content/plugins/nom-de-l-extension/ désigne une extension, /wp-content/themes/ le thème. Désactivez l'élément suspect, de préférence sur une copie du site, et vérifiez si l'erreur disparaît. D'autres pistes dans Erreurs sur site WordPress : comment résoudre les problèmes.

Un message classique sur WordPress est $ is not a function. La bibliothèque jQuery fournie par WordPress fonctionne en mode « noConflict » : le raccourci $ n'y est pas disponible par défaut. Écrivez jQuery en toutes lettres, ou enveloppez votre code ainsi :

JavaScript3 lignes
jQuery( function ( $ ) {
    // ici, $ fonctionne
} );

JavaScript et vitesse du site

Un script chargé dans l'en-tête de la page bloque l'affichage tant qu'il n'est pas téléchargé et exécuté. Les leviers habituels :

  • différer les scripts qui ne sont pas indispensables à l'affichage, ou retarder leur exécution jusqu'à la première action du visiteur, ce que proposent la plupart des extensions de performance ;

  • supprimer les scripts inutiles : extensions oubliées, services tiers que vous n'utilisez plus ;

  • charger seulement là où il faut : le script d'un formulaire n'a rien à faire sur les autres pages.

Divi a ses propres réglages pour cela (report de jQuery, chargement à la demande des bibliothèques JavaScript) : voir améliorer les performances d'un site Divi. Pour les extensions spécialisées : meilleurs plugins de cache et de performance.

Apprendre JavaScript

  • MDN Web Docs : la documentation de référence, en français, publiée par Mozilla ;

  • Le Tutoriel JavaScript Moderne : un cours complet en français, gratuit en ligne, des bases aux notions avancées ;

  • les ressources générales de la rubrique Dév : freeCodeCamp, Exercism et d'autres.

Auteur : Jean-Noël Mathonnet

Commentaires

Pas encore de commentaire. Soyez le premier !

Laisser un commentaire