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.

Vous recherchez un développeur WordPress capable de vous créer un thème sur-mesure ? C'est mon métier depuis plus de 8 ans, prenez contact et discutons de votre projet.

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.

$(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);

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 !

26 commentaires

billboc
Il y a 7 années
salut
merci beaucoup pour ses explications très claires
j’utilise beaucoup jquery et j’adore !!
pourriez vous éclaircir vos propos
« 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 $. »
je ne comprends pas comment le back-end et le front-end peuvent être en conflit puisque pas utilisés au meme moment ?, je n’ai jamais eu ce genre de soucis malgré l’utilisation intensive de $
merci pour vos explications car je ne suis pas un pro
++
1. Cybercraft auteur de l’article
  Il y a 7 années
  Tu pourrais par exemple utiliser jQuery dans le fichier ‘functions.php’ pour ajouter des options à ton thème. Si tu utilise le ‘$’. Tu aura de drôle de surprise.
  En dehors de ça, c’est vraiment par précaution. Ça fait partie des bonnes pratiques
  1. billboc
    Il y a 7 années
    Merci beaucoup
Rahe
Il y a 7 années
Bon tutoriel, par contre pour la portion de code suivante :
jQuery(‘a#clickMe’).click(function() {
jQuery(‘#slideMe’).slideToggle(400);
return false;
});
Il ne vaut mieux pas faire return false; car cette action coupe toute la chaine d’évènement, il vaudrait mieux faire :
jQuery(‘a#clickMe’).click(function(e) {
e.preventDefault();
jQuery(‘#slideMe’).slideToggle(400);
});
Comme ça l’évènement de base est interrompu sans casser la chaîne d’évènements.
Rahe
1. Cybercraft auteur de l’article
  Il y a 7 années
  il y en effet cette solution… Pas pensé sur le moment ^^. Puis dans ce petit snippet ce n’est pas dérangeant…
Cybercraft auteur de l’article
Il y a 7 années
Je signale également que depuis la version 3.3. WordPress incorpore la librairie jQuery UI au complet.
Graphiste Rennes
Il y a 7 années
Très intéressent cela fait un moment que je cherche un truc de ce genre là.
Thomas
Il y a 7 années
Bonjour je voulais savoir une chose.
Ya t’il beaucoup de navigateurs qui seraient d’une manière ou d’une autre incompatibles avec cette technique ?
( désactivation de javascript de base par l’utilisateur, peur du virus je sais pas… ou le logiciel lui meme.)
Et sinon, ya t’il un moyen de faire une solution qui permet de naviguer quand même dans les menues que je veux faire en jquery, si celui ci n’est pas supporté ?
Enfin je pense que vous voyez ce que je voudrais. Si je me casse le « bip » pour faire des sites hyper compatibles tout navigateurs, ca serai con que j’annule tout ces effort en bugant mes navigations
1. Cybercraft
  Il y a 7 années
  Normalement, Lorsque le javascript est désactivé. Les bloc sont affiché de manière conventionnel :
  LIEN
  Contenu Contenu Contenu Contenu
  Contenu Contenu Contenu Contenu
  Après rien n’empêche l’adjonction d’une classe pour la mise en forme CSS hors-javascript.
  Le mieux étant encore de faire le test soi-même afin de vérifier l’affichage.
  Normalement, il n’y aura que la possibilité de rétracter le bloc qui ne sera pas possible.
SOUSSI
Il y a 6 années
Bonjour,
Excellent article !!!
J’utilise donc ce script dans une page qui liste les articles d’une catégorie WordPress.
Ma question est donc la suivante :
Comment utiliser ce script dans un contexte de query ? Car avec le code actuel, seul le premier article bénéficie d’un toggle.
Une histoire d’identifiant apparemment.
Merci pour votre éclairage.
PS : mon code est le suivant :
get_option(‘posts_per_page’),
‘post_type’ => ‘post’,
‘orderby’ => ‘date’,
‘order’ => ‘DESC’,
‘cat’ => 72,
‘paged’ => $paged
));
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
1. Cybercraft auteur de l’article
  Il y a 6 années
  Effectivement, ça ne peut marcher pour tout une liste d’article. Ou alors, ce n’est plus du tout le meme code.
  Le plus simple est d’utiliser le widget « Accordion » de jQuery UI
  => http://jqueryui.com/demos/accordion/
Charles Demers
Il y a 6 années
Bonjour,
J’ai utilisé la fonction Jquery pour faire un effet Slide Toggle. Et il semble que celle-ci ne supporte pas d’être dans la même page que mon code PHP pour afficher les extraits de mes posts.
//************** Script Jquery situé dans un champ personnalisé
Wordpress
//*******************************************************************
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(« #displayBloc »).click(function () {
jQuery(« #monBloc »).slideToggle(« fast »);
});
});
//*********************************************************
//*** Voici ma div que je cache en appelant le code dans un champs
personnalisé de WordPress que j’affiche au tout début grâce au plugin Easy Embed
//**************************************************************
Lorem Ipsum
Contenu masqué
//**************************************************************
//**** Or mon script en Jquery semble entrer en conflit avec ce script en PHP situé dans la même page
//*****************************************************************
4, ‘offset’=> 0, ‘category’ => 140 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>
<a href=" » target=’_blank’ >
//********************************************************************
Comment puis-je résoudre ce problème?
Guillaume
Il y a 5 années
Bonjour et merci pour ce tuto qui m’a fait gagner un temps incroyable.
J’avais une question, comment faire si on souhaite mettre en place cet effet sur plusieurs éléments dans la page?
D’avance merci !!
1. Christopher Hennuyez auteur de l’article
  Il y a 5 années
  Tu peux utilisé une classe pour tout tes éléments :
  <a class="clickMe" href="#" rel="nofollow">Un lien</a> <div class="slideMe">Elément 1</div>
  <a class="clickMe" href="#" rel="nofollow">Un lien</a> <div class="slideMe">Elément 2</div>
  <a class="clickMe" href="#" rel="nofollow">Un lien</a> <div class="slideMe">Elément 3</div>
  <a class="clickMe" href="#" rel="nofollow">Un lien</a> <div class="slideMe">Elément 4</div>
  <a class="clickMe" href="#" rel="nofollow">Un lien</a> <div class="slideMe">Elément 5</div>
  —– jQuery —–
  jQuery(document).ready(function() {
  jQuery(‘.slideMe’).hide();
  jQuery(‘a.clickMe’).click(function() {
  jQuery(‘.slideMe’).slideToggle(400);
  return false;
  });
  });
  Tout tes éléments auront le même comportement
  1. maxdesp
    Il y a 5 années
    Bonjour, merci pour l’astuce vraiment très utile, surtout en si peu de code. Dire que j’étais sur le point de chercher un plugin… Très facile à mettre en place, mais là où les choses se compliquent pour moi c’est pour gérer plusieurs éléments aux comportements distincts. Je ne suis pas un as de javascript mais je devine qu’il ne serait pas très compliqué d’intégrer une gestion de la classe et de l’ID pour que chaque lien « clicme » soit associé à un div « slideme » par leurs ID.
    Si quelqu’un a une piste, je suis preneur !
    Merci encore.
joel
Il y a 5 années
salut les gars
je vis a montreal je suis web developpeur et web designer ,j ai un projet que je travaillle la dessus j aimerais utiliser une librairie jquery pour avoir un effet de » tabbed slide content pour une page nommée « services « donc j ai le code tout ca mais j ai implemente le code dans wordpress surprise j ai mon contenu mais pas l effet slide comment vous pouvez m aider
MAIL SUPPRIME PAR LE MODERATEUR
Gaillot
Il y a 4 années
Bonjour,
Je souhaite intégrer un fichier javascript dans mon wordpress, mais j’ai beau essayer tout les tutos dispo je n’y arrive pas.
Je souhaite intégrer un fichier pour donner cet effet
http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/
1. Aurélien Denis
  Il y a 4 années
  Il faut utiliser les fonctions de WordPress pour charger le script et rajouter des conditions si l’on ne souhaite le charger que sur certaines parties du site.
  Plus d’infos avec des exemples ici : http://codex.wordpress.org/Function_Reference/wp_enqueue_script
CreaZo
Il y a 4 années
Aurélien, MERCI !
1. Aurélien Denis
  Il y a 4 années
  Remercions Christopher, l’auteur de l’article !
Poupette
Il y a 4 années
Coucou! J’aurais une petite question: j’ai utilisé cette méthode pour créer un widget déroulant dans lequel serait « caché » un encart pour la newsletter. Tout marchait super bien jusqu’à ce matin, où je pense avoir fait une fausse manip’ pour régler un problème d’ajout d’images. Les images s’ajoutent bien maintenant mais impossible de cacher le widget. Pourtant les codes n’ont pas bougés… des idées?
smailassia
Il y a 4 années
Bonjour, je suis débutante dans le CMS (wordpress) et JQuery je n’arrive pas à utiliser le jquery dans wordpress, il ya des codes à l’intégrer dans un des fichier de wordpress. quelqu’un de vous pourra m’aider
Cordialement
1. Aurélien Denis
  Il y a 4 années
  WordPress charge sa propre version de jQuery depuis ses fichiers sources. Il n’est pas nécessaire d’aller charger la bibliothèque à nouveau. Par contre, on utilise du jQuery pour certaines animations comme celle décrite ici.
Greg
Il y a 3 années
Bonjour à tous, je détére un peu le topic (de 6 mois seulement), et tout d’abord merci pour cet article qui m’a (presque) aidé à comprendre !
Je ne suis pas dev, ni graphiste, je touche à tout et là je fais un site pour mon mariage. Je connais pas mal les fonctions WP et maitrise le CSS, mais jquery je suis un peu perdu Sorry !
J’ai récupérer un script sur internet (un countdown), j’ai donc 3 fichiers js a ajouter sur une partie du site.
Dans l’article, tu expliques qu’on peut mettre le script dans un .js, OK c’est ce que je fait. Mais comment on l’appelle ? Où ? Avec la methode wp_enqeue_script ?
Je suis un peu perdu sur cette étape…
Merci par avance de votre aide.
Greg
romaintt
Il y a 3 années
Une piste ? Je suis en pleines recherches mais je n’arrive pas à trouver de solution en 2015. Merci
paul smith
Il y a 1 année
petite question,
comment intègre-t-on du html5 sur WordPress ?
merci d’avance