jquery-logo

Aujourd’hui nous apprendrons à utiliser jQuery afin de créer un slider. Plusieurs notions de WordPress vous seront utiles, notamment les query_posts et les custom fields ou champs personnalisés. Coté jQuery, tous sera décortiqué dans ce tutoriel.

Pourquoi faire un slider soi-même, alors qu’il en existe une pléiade de plugin comprenant cette fonction ? Vous verrez qu’avec un peu de doigté vous pourrez arriver à un résultat plus proche de vos désidératas qu’avec un plugin car il s’agit d’une combinaison de CSS / JavaScript totalement personnalisable.

Rappel sur les query_posts

Le query_posts est une fonction utilisée juste avant le loop WordPress permettant de trier les résultats de ce dernier. Plus métaphoriquement, si je prend un paquet de bonbons (les articles) et que je dis « affiche-moi tout les bonbons un par un (loop) ». J’aurais alors une série de bonbons de toutes formes et couleurs. Or comme je suis quelqu’un d’exigeant, je ne veux que les bonbons au citron. Et bien, dans ce cas je dois dire « affiche-moi tout les bonbon au citron (query_posts) ».

En code, le précédent exemple donnerai ceci :

<?php
query_posts('tag=citron');

while(have_post()):the_post();
endwhile;

wp_reset_query();
?>

Le wp_reset_query(); » sert à clore la requête pour éviter tout conflit dans le cas d’un template multi-loop.

Pour notre slider nous utiliserons cette requête :

<?php query_posts('cateory=slider'); ?>

Rappel sur les custom fields

Les custom fields sont des champs que vous pouvez ajouter à vos articles pour en préciser le contenu. Je vais également illustrer leurs utilisations par un exemple concret.

Lorsque vous allez sur un site Web de recettes culinaires, des informations d’ordre utiles sont affichées sur chaque recettes (temps de préparation, temps de cuisson, débutant, apprenti, chef, etc.).

Ces champs peuvent faire l’objet de custom fields. Je peux par exemple créer un champ pour la difficulté, un autre pour le temps de cuisson.

Si au début, cela semble farfelu et inutile. Une fois utilisé, vous ne vous pourrez plus vous en passer.

Pour afficher ce module, suivez cette manipulation simple :

  • Cliquez en haut à droite sur Options de l’écran ;
  • Ensuite cochez l’option Champs personnalisés ;

Pour notre slider, nous utiliserons ce champ pour y indiquer le chemin de notre image à voir défiler. Voici le code que nous utiliserons pour extraire cette donnée dans notre thème :

<img class="thumb" src="<?php echo get_post_meta($post->ID, 'thumb', true) ?>" alt="<?php the_title(); ?>" />

Conception du slider jQuery

Étape N°1 – Création de la boucle

Nous voici dans le vif du sujet. Maintenant que nous avons tous les outils à notre disposition, nous allons créez notre loop (boucle) à insérer dans le fichier index.php par exemple :

<div id="slider">
   <div id="prevSlide">
      <img src="previous.jpg" />
   </div>

   <div id="slider-window">
      <ul id="slides">
         <?php query_posts('posts_per_page=5&meta_key=thumb&meta_compare=!=&meta_value= ');
         while ( have_posts() ) : the_post(); ?>
            <li>
               <img src="<?php echo get_post_meta($post->ID, 'thumb', true) ?>" />
               <div>
                  <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
                  <?php the_excerpt(); ?>
               </div>
            </li>
         <?php endwhile;
         wp_reset_query();?>
      </ul>
   </div><!-- #slider-window -->

   <div id="nextSlide">
      <img src="next.jpg" />
   </div>
</div><!-- #slider -->

Un peu de CSS également :

#slider{
    width:980px;
    position:relative;
    margin:0 auto;
    overflow:hidden;
    margin-bottom:10px;
    color: #999;
}

#slider h2 a {
    color:#999;
    font-family:"Courier New", Courier, monospace;
    text-decoration:none;    
}

#slider h2 a:hover {
    color:#fff;
    font-family:"Courier New", Courier, monospace;
    text-decoration:none;    
}

#slider-window{
    position:relative;
    width:980px;
    height:200px;
    overflow:hidden;
    margin:0 auto;
}

#prevSlide,#nextSlide{
    z-index:2;
    width:30px;
    height:200px;
    position:absolute;
    top:0;
    cursor:pointer;
}
#prevSlide{left:0;background:url(images/previous.png)}
#nextSlide{right:0;background:url(images/next.png)}

.slide{
    float:left;
    position:relative;
    list-style-type:none;
    width:980px;
    height:200px;
}

.slide-content{
    z-index:1;
    position:absolute;
    left:30px;
    top:0;
    background:rgba(0,0,0,0.5);
    height:180px;
    width:300px;
    padding:10px;
}

#slides{ display:inline-block;margin:0;padding:0;z-index:3; }

Je vous laisse l’adapter à vos besoins.

Étape n°2 – Le JavaScript

C’est ici que la magie s’opère !

La première partie du code sert à faire tourner le slider à l’infini. Comme l’animation ressemble à une tapisserie défilante de droite à gauche à l’infini. Il faut définir que le premier objet doit être cloné à la fin des autres. Une fois le tour effectué nous repositionnons toute les slides.

Voici donc cette première partie :

var timer = new Object;

$(function(){
    var $Slides = $("#slides");
    var _step = 980;
    $Slides
        .data("currentSlide",1)
        .data("nbSlides",$Slides.find("li").size());
    $Slides
        .find("li:last")
            .clone()
            .prependTo("#slides");

    $Slides
        .find("li:first")
            .next()
            .clone()
            .appendTo("#slides");

    $Slides        
        .find("li:first")
            .addClass("clone")
        .end()
        .find("li:last")
            .addClass("clone")
        .end()
        .css({marginLeft:-_step});

    $Slides.width($Slides.find("li").length*_step);

    $("#nextSlide").bind("click",nextSlide);
    $("#prevSlide").bind("click",prevSlide);
    timer = window.setTimeout(slider,5000);

})

Ensuite, nous allons créez 2 fonctions pour les boutons précédents et suivants :

function nextSlide(){
    var $Slides = $("#slides");
    $("#nextSlide").unbind("click",nextSlide);
    $Slides.animate(
        {marginLeft:"-=980px"},
        1000,
        function(){
                $Slides.data("currentSlide",$Slides.data("currentSlide")+1);
                if($Slides.data("currentSlide") > $Slides.data("nbSlides")){
                    $Slides
                        .data("currentSlide",1)
                        .css({marginLeft:"-980px"});
                }
                window.clearTimeout(timer);
                timer = window.setTimeout(slider,5000);
                $("#nextSlide").bind("click",nextSlide);
            }
    );
}

function prevSlide(){
    var $Slides = $("#slides");
    $("#prevSlide").unbind("click",prevSlide);
    $Slides.animate(
        {marginLeft:"+=980px"},
        1000,
        function(){
                $Slides.data("currentSlide",$Slides.data("currentSlide")-1);
                if($Slides.data("currentSlide") == 0){
                    $Slides
                        .data("currentSlide",$Slides.data("nbSlides"))
                        .css({marginLeft:-(980*$Slides.data("currentSlide"))});
                }
                window.clearTimeout(timer);
                timer = window.setTimeout(slider,5000);
                $("#prevSlide").bind("click",prevSlide);
            }
    );
}

Et enfin, pour l’animation automatique. Nous allons rappeler la fonction nextSlide toute les 5 sec :

function slider(){
    nextSlide();
    timer = window.setTimeout(slider,5000);
}

Étape n°3 – Utilisation

Pour alimenter votre slider, il suffit de créer le champ personnalisé thumb et de choisir la catégorie slider. Votre article devrait apparaitre dans le slider.

Capture d'écran - WordPress custom field "thumb"
Création d'un champ personnalisé pour indiquer l'URL de l'image

Fichiers de démonstration à télécharger

Démonstration du slider jQuery pour WordPress
Démonstration du slider jQuery pour WordPress

Vous pouvez télécharger l’archive suivante contenant le slider seul à intégrer directement dans votre thème.

Slider jQuery pour WordPress

Le slider jQuery intégré sous WordPress à copier dans votre thème.

Taille : 2,6 MiB  •  Date : 29 mars 2012 •  Hits : 2 424

Bon code à tous et à bientôt pour de nouvelles aventures avec jQuery & WordPress !

36 commentaires

  1. +1 pour la demo !!
    merci beaucoup pour ces présentations de code bien expliquées ça m’aide énormément !!
    continuez c’est génial !!
    ++

  2. Personnellement, je trouve que créer une catégorie pour gérer un slider n’est pas une bonne idée. Tu te retrouves avec une catégorie dans ton site, dans tes menus, etc… qui n’a aucune raison d’être et ne rentre pas dans la logique de tes autres catégories.
    Je te conseille de tester simplement si ton champ « thumb » est rempli
    ça te donnera
    query_posts(‘posts_per_page=5&meta_key=thumb&meta_compare=!=&meta_value= ‘);
    Ici tu utiliseras les 5 derniers articles dont le champ « thumb » est rempli.

    Par ailleurs, à défaut de coder toi-même une jolie metabox, il y a de chouette plugin qui te permette d’avoir un petit uploader (utilisant le media uploader de wp dans le meilleur des cas) au lieu d’un champ personnalisé assez rustique. L’avantage étant que tu n’as pas à chercher l’url de ton image, et qu’en plus tu as un preview.

    Et la démo, bien sûr…

    1. L’idée du test sur la meta-key « thumb » me plait beaucoup. Je n’y avais pas pensé.

      Pour la metabox, c’est volontaire le fait de ne pas utiliser de plug-in. Je suis un rustique du custom field

      1. moi je préfère utiliser une catégorie spéciale pour le slider car je ne veux pas forcément mettre les 5 derniers articles dedans.

        1. dans ce cas je pense que tu ne comprends pas le fonction de query_post
          Le nombre de posts est independant du systeme « catégorie ».
          Par exemple si tu utilises
          query_posts(‘posts_per_page=-1&meta_key=thumb&meta_compare=!=&meta_value= ‘);
          tu utiliseras TOUS les articles et non les 5 derniers

          1. Tu peux aussi utiliser

            query_posts(‘post_per_page=5&category=’slider’&meta_key=thumb&meta_compare=!=&meta_value= ‘);

            Dans ce cas, tu aura les 5 derniers articles de la catégories slider qui contiennent le meta_key « thumb »

            Tu peux iainsi te fabriquer des requêtes sur mesure. Et d’ailleurs Query_posts est fait pour ça

        2. et par ailleurs avec le query post
          query_posts(‘posts_per_page=5&meta_key=thumb&meta_compare=!=&meta_value= ‘);
          tu ne mettras pas dans ton slider les 5derniers articles mais les 5 derniers articles dont le champ « thumb » est rempli.

          1. En effet, avec cette méthode il y a vraiment moyen de faire ce que tu veux… Tu peux même afficher les articles qui ont un certains tags par exemples. tu peux aussi au contraire exclure certaines category

  3. Serait-il possible d’avoir une démo ? Car chez moi le ul slides se retrouve complètement vide, aucun li n’est chargé…

    Il m’aurait été utile de pouvoir implémenter ce slider aujourd’hui…

  4. Avis au amateurs J’ai ajouter une archive en bas de l’article à installer comme un nouveau thème WP. Il contient le code source du slider. Pour la démo je vous laisse installer l’archive.

    J’ai également ajouter un screenshot du slider en action.

  5. Bonsoir,
    ça aurait été bien d’intégrer un système de « crop » pour redimensionner les images.
    Actuellement il faut redimensionner les images manuellement avant de les mettre dans le champ thumb.

    Cordialement

      1. Bonjour,
        auriez-vous quelques pistes pour utiliser l’image à la une ? Je ne sais pas vraiment comment m’y prendre à partir de rien mais avec quelques idées je pense savoir me débrouiller…

        Merci d’avance

  6. Bonjour et merci pour ton tuto. Cependant les consignes ne sont pas assez precises pour des novices comme moi. Je ne comprend pas exactement et precisement quoi mettre où, quel dossier mettre et où … si tu pouvais éclaircir ma lanterne …

  7. Bonjour,
    J’ai fait plusieurs tentatives d’installations de plugins pour avoir un showslider sur l’accueil de mon blog (vignettes d’images avec extraits d’articles défilants), aucun ne m’a satisfait sauf Smooth slider Mais j’ai eu un message d’erreur qui s’est rajouté (missing php ligne 121) et ce ne fut pas résolu malgré l’intervention d’un ami qui bosse dans l’informatique. Et j’ai vu sur leur forum d’aide quelqu’un avoir le même problème mais sans réponse : j’ai désinstallé cette extension du coup.
    Alors je me suis dit que ce serait plus simple de l’installer moi-même mais…

    …pareil que Keiz, c’est sympa de transmettre cette doc merci.
    Mais serait-il possible d’avoir des indications pour savoir où placer ces bouts de code ?
    Pour le 1er j’ai cru comprendre que l’exemple que j’ai téléchargé indiquait plutôt que le bout de code se plaçait dans « header.php », et après la fermeture « head » et la séquence « body » mais où exactement ? Si on préfère le mettre dans le fichier index.php on le place juste après la ligne « get header » ?
    Et le bout de code css on peut le placer dans le « style.css » du thème enfant ?
    Et les deux parties java script, on les colle dans quel fichier et à quel endroit exactement ?

    Merci d’avance pour les réponses

  8. Bon ben finalement, les deux parties java script, j’avais tenté de les coller en fin de page « function.php » et ça m’a donné un message d’erreur (avec « var » etc) : j’ai tout enlevé, j’essaierai une autre fois si j’obtiens plus d’infos pour appliquer ce tuto ou si je parviens à progresser…
    En attendant j’ai réinstallé le plugin smoothslider qui me convenait et j’ai trouvé d’où venait l’incompatibilité.

    1. Ma technique est de créer un fichier dédier aux scripts et de le mettre dans un dossier JS… Normalement la où est situé la librairie jQuery. Ensuite je l’importe dans le header.php. Pour ce faire, juste avant wp_head(); Je met cette line de code
      PASTEBIN => http://pastebin.com/bWaEj0Na

      La section HTML/PHP est à mettre à l’endroit du slider.

      1. En fait ce serai top que tu fasses un tuto video… Je sais bien que c’est du travail mais pour les internautes débutants ca aiderai à fond ;).

  9. Merci à vous deux pour ces réponses rapides

    Avec ces précisions je ré-essaierai un de ces week-end la tête bien reposée (peut-être que je solliciterai l’aide du copain informaticien si je ne m’en sors pas seule, ou peut-être que je vous reposerai des questions), mais en tous les cas déjà, MERCI beaucoup \°/

  10. Bonjour à tous !
    Bon je débarque un peu dans le monde de WordPress et j’ai une question toute simple :
    « Comment fait on pour charger plusieurs photos ? »

    Merci.

  11. Bonjour à tous !! Ceci pour vous dire merci, car je recherche cette info depuis un long moment ! Mais malheureusement, le lien n’est plus actif ! Pourriez-vous l’actualiser s’il vous plait ?
    merci encore

  12. Je n’ai pas pu voir un demo mais j’espère pouvoir l’appliquer dans moi nouvelle web, au moins avec ton explication j’apprendrai quelque chose.
    Des saluts et des grâces pour aider.

  13. Bonjour,
    bonnes explications mais moi je novice en wordpress. Alors j’ai pas très bien compris où faut-il que je copie ces parties de codes pour avoir le slider sur ma page d’accueil ?

    Merciii

  14. bonjour je ne comprend rien j’ai tout essayé
    – je ne vois pas class= »slide » et class= »slide-content »
    – #slides display:inline-block … ya’ qu’un ul resultat je comprend pas mes images de toute façon n’ont rien à voir elle s’aligne donc de haut en bas
    – j’ai beau cliqué ça change rien
    – et enfin le prevslide est dessus la premiere vignette

    bref je vois pas de slider là

  15. bonjour j’ai réussi à faire fonctionner mais il fallait le savoir qu’il fallait jquery-1.7.1.min sinon ça marchait pas par contre j’arrive pas à stopper l’animation automatique j’ai mis tous les timeout tout ce qui parle de temps en vert et ça tourne encore. alors evidement le timer est aussi dans jquery-1.7.1.min mais j’ose pas bidouiller là c’est du chinois

Laisser un commentaire