Utiliser jQuery dans WordPress

Lorsque vous créez vos propres thèmes sous WordPress, vous pouvez être amené à utiliser du jQuery pour animer vos thèmes, créer des sommaires de blogs, ou automatiser des tâches.

Dans ce tutoriel, je vous guiderai pas à pas sur la façon d’utiliser jQuery dans WordPress, en mettant l’accent sur les bonnes pratiques et les techniques d’intégration efficaces.

Qu’est-ce que jQuery ?

jQuery est une bibliothèque JavaScript populaire qui simplifie le processus de manipulation des éléments HTML, de l’interaction avec le DOM (Document Object Model), de l’animation, du traitement des événements et de la gestion des requêtes AJAX (Asynchronous JavaScript and XML).

Pour parler simplement, jQuery est un outil qui facilite la création de sites web interactifs. Il simplifie la manière dont les éléments d’une page web sont sélectionnés et modifiés, permet de créer des animations, de gérer les clics et les survols, et de communiquer avec un serveur pour récupérer ou envoyer des informations sans recharger toute la page. Ce langage rend le développement web plus facile et plus rapide en fournissant des fonctionnalités prêtes à l’emploi et une syntaxe simplifiée.

JQuery dans WordPress peut être une véritable plus-value.

Importer un fichier javascript ou jQuery sur WordPress.

Pour ajouter un script jQuery ou Javascript dans WordPress, placez ce code dans le fichier function.php de votre thème enfant.

function inumedia_scripts() {
    wp_enqueue_script('jquery'); // normalement jquery est déjà intégré, mais si vous rencontrez "JQuery is not defined" dans la console insérez cette ligne
    wp_enqueue_script('nom-du-script-js', get_template_directory_uri() . '/*nom-de-votre-dossier*/script.js', array( 'jquery' ), false, true );
  
}
add_action('wp_enqueue_scripts', 'inumedia_scripts');

Explications du code :

• On déclare notre fonction inumedia_scripts qui aura pour action d’ajouter des scripts en exécution dans WordPress
• Si votre thème parent n’embarque pas jQuery de base, on va lui demander de prendre en compte, la bibliothèque est déjà fournie dans l’installation de WordPress. Ceci est optionnel
• La deuxième ligne, c’est mon plugin jQuery. Je récupère l’URL de mon thème, le nom du dossier où j’ai placé mon fichier JavaScript et mon fichier JavaScript lui-même.
• « false » correspond à la version du script. En indiquant « false », on indique à WordPress de ne pas ajouter de numéro de version spécifique au fichier JavaScript.
• « true » indique ici de placer notre script dans le footer. Cet élément empêche que votre script bloque le rendu dans les résultats page speed.

N’oubliez pas de remplacer le nom de votre dossier dans le code

La structure du fichier jQuery

$(document).ready(function() {  // Quand la page est chargée
 $("p").css("background-color", "cyan");  // on ajoute une couleur de fond de couleur cyan aux paragraphes
 });  // On ferme la fonction

L’erreur jQuery not defined : la subtilité de jQuery dans WordPress

Vous vous rendez compte que votre code ne marche pas.

Pour vérifier ce qu’il se passe, on va faire un clic droit > Inspecter sur votre page. Google, Firefox ou Edge vont vous ouvrir un onglet.

Cliquez sur console. Si ce n’est pas une erreur due à votre code, vous risquez de voir apparaitre « jQuery not defined »ou « $ not defiened ».

Ajoutez la ligne optionnelle que je vous ai citée plus haut.

Si ça ne résout pas le problème, voici le code adapté à WordPress :

jQuery(document).ready(function(){
  jQuery("p").css("background-color", "cyan");
  });
});

Ou

(function ($) {
$(document).ready(function() {  // Quand la page est chargée
 $("p").css("background-color", "cyan");  // on ajoute une couleur de fond de couleur cyan aux paragraphes
 });  // On ferme la fonction
})(jQuery);