Utiliser jQuery avec WordPress pour un effet Slide Toggle
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.
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 :
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 :
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> :
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 à :
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 !
Bonjour,
Merci tout d’abord pour le tutos.
Je voudrais ajouter une croix qui permettrais de fermer la Div ouverte par l’effet.
Sauriez-vous comment faire?
Je vous remercie d’avance.
petite question,
comment intègre-t-on du html5 sur WordPress ?
merci d’avance
Une piste ? Je suis en pleines recherches mais je n’arrive pas à trouver de solution en 2015. Merci
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
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
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.
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?
Aurélien, MERCI !
Remercions Christopher, l’auteur de l’article ! 😉
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/
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
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
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 !!
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
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.
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?
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(); ?>
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/
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 🙂
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.
Très intéressent cela fait un moment que je cherche un truc de ce genre là.
Je signale également que depuis la version 3.3. WordPress incorpore la librairie jQuery UI au complet.
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
il y en effet cette solution… Pas pensé sur le moment ^^. Puis dans ce petit snippet ce n’est pas dérangeant…
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 😉
++
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 🙂
Merci beaucoup 😉