jQuery & WordPress – Créer votre slider personnalisé

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 662

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