jQuery_logo_color_onwhite

Utiliser jQuery avec WordPress pour un effet Slide Toggle

Aujourd’hui nous allons introduire une nouvelle dimension à vos projets WordPress car je vais vous montrer comment importer la librairie jQuery et vous apprendre comment utiliser l’effet déroulant slide.

Qu’est-ce que jQuery ?

Tout d’abord il convient de savoir ce qu’est jQuery.

Si vous êtes coutumier du JavaScript, vous connaissez sûrement jQuery. Pour les autres, jQuery est une librairie de fonctions d’animation (en général) codé en JavaScript.

La où il vous faudrait des heures de codage pour gérer une animation style fade ou autre… jQuery vous en propose prêtes-à-l’emploi.

Exemple fade() :

$(document).ready(function() {
   $('#id_element_soumis_fading').fadeIn(400);
});

Le signe $ est l’identificateur de jQuery, s’en suit l’élément à modifier, et la fonction à utiliser. Les accès à ce qu’on appelle le DOM sont simplifiés grâce à cette méthode.

D’ailleurs ce n’est pas pour rien que le slogan de jQuery est :

« Write less, do more » (Écrivez moins, faites plus)…

jQuery et WordPress

WordPress fournit jQuery dans ses scripts importables, il est quelque peu modifié mais il conviendra à n’importe quel utilisateur.

Activation de jQuery

Pour l’activer, une simple commande PHP suffit :

<?php wp_enqueue_script('jquery'); ?>

Cette ligne se place avant wp_head entre les balises <head> de votre projet.

WordPress utilise cette bibliothèque de fonctions pour tout le back-office. C’est pourquoi quand vous l’utiliserez et afin de ne pas entrer en conflit avec WordPress, nous utiliserons l’identificateur jQuery au lieu de $.

Création de l’effet déroulant (slide)

Voici donc le code tant attendu. Je vais vous montrer ma méthode pour effectuer un effet déroulant – de type afficher / masquer, sur un élément de votre page. En cliquant sur un lien prédéfini, un élément de votre page se déroulera ou se repliera à la manière d’un store électrique.

Ce qu’il vous faut :

  • Un lien pour activer l’effet déroulant ;
  • Une section <div> ;

Voici le code HTML de votre partie à rétracter :

<a href="#" id="clickMe">Un lien</a>
<div id="slideMe">Blablabla... Vachement inspiré comme gars</div>

Et voici l’équivalent du code jQuery à insérer soit dans un fichier JavaScript, soit dans le thème directement après wp_head avec bien sûr une balise de type <script>LE CODE</script> :

jQuery(document).ready(function() {
	jQuery('#slideMe').hide();
   	jQuery('a#clickMe').click(function() {
   		jQuery('#slideMe').slideToggle(400);
   		return false;
   	});
});

Petite explication sur la méthode utilisée :

jQuery('#slideMe').hide(); : permet de cacher votre div lorsque votre page est chargée. Remplacer .hide() par .show() si vous ne voulez pas faire disparaitre votre div.

jQuery('#slideMe').slideToggle(400); : permet l’effet visuel slide. Je lui est attribué 400 millisecondes d’animation.

Ajouter un effet de fondu

Libre à vous d’ajouter un petit Cliquez pour voir l’article et d’ajouter un fondu grâce à :

jQuery('#spanMe:visible').fadeOut(400);
jQuery('#spanMe:hidden').fadeIn(400);

Exemple d’application

Capture d'écran - Effet slide toggle sur Le Touriste.fr

Un lien permet d'afficher / masquer la carte

Les effets proposés par jQuery sont monnaie courante sur le Web et comme toute technologie Web de pointe qui se respecte, WordPress en fait bon usage !

A propos de l'auteur

Christopher, 26 ans. Je suis développeur et intégrateur Web ayant pour spécialisation les CMS (Content Management System) dont WordPress. J'ai commencé à utiliser WordPress, il y a plus de 6 ans, pour un projet personnel. Le système m'a tellement séduit que j'en ai fait mon passe-temps. Sur WordPress Channel, je partage mes connaissances sur ce système. Ayant pour but d'en faire découvrir toutes les possibilités. Voir tous les tutoriels de Christopher Hennuyez →