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

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 !

25 commentaires

  1. billboc

    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

      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

  2. Rahe

    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

  3. Thomas

    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

      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.

  4. SOUSSI

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

  5. Charles Demers

    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?

  6. Guillaume

    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

      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

        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.

  7. joel

    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

  8. Poupette

    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?

  9. smailassia

    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

      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.

  10. Greg

    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

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX