Je ne me souviens plus de la dernière fois où j’ai pu voir un site web sans slider d’articles . Le fait est que cette fonctionnalité est devenue, au fil des ans, un ingrédient indispensable pour tout site web, en grande partie à cause du fait qu’elle permet de présenter de façon conviviale les informations les plus importantes (ou les articles les plus récents) d’un site web.
Du fait même, les sliders d’article sont , à mon humble avis, les extensions les plus téléchargées illégalement – avec tous les risques de sécurité inhérents à cette pratique – par les webmasters et développeurs web des bords de la lagune ébrié . C’est quand même un peu dommage, d’autant plus que créer un slider d’articles est à la portée de toute personne ayant des connaissances basiques en php et jQuery.
Je me propose donc aujourd’hui de vous montrer la marche à suivre pour créer un slider d’article pour WordPress .
Pour les fins de la démonstration, j’utiliserais le theme twenty fifteen de wordpress 4.1 : les fichiers modifiés sont disponibles au téléchargement en fin d’article.
1. Créer une catégorie “slider” et récuperer l’ID correspondant
La catégorie “slider” servira à indiquer à WordPress les articles qui devront être inclus dans le slider de la page d’accueil. Afin de la créer, veuillez suivre les étapes suivantes :
- Allez dans le menu “articles”, puis dans le sous menu ”catégories”
- Créez une catégorie “slider” et cliquez sur le bouton ajouter une nouvelle catégorie
Une fois la catégorie créée, il faudra récupérer l’id correspondant à cette dernière. Pour ce faire, je vous recommande d’installer et d’activer Wp Show IDs , une extension pour WordPress qui permet d’afficher les ID des articles, des pages et des catégories dans le backend du CMS.
Une fois l’extension installée (et activée), allez dans la liste des catégories et copiez l’id correspondant à la catégorie “slider”
Enfin, n’oubliez de créer au moins deux articles, chacun des 2 articles devant avoir une image à la une. Les deux articles serviront à alimenter le slider d’articles.
2. Implanter jQuery Cycle 2 dans le template
jQuery Cycle est un plugin gratuit qui, comme son nom l’indique, permet de faire défiler des éléments du DOM de façon cyclique. Dans un premier temps, rendez vous à l’adresse suivante afin de le récupérer.
http://jquery.malsup.com/cycle2/download/
NB : choisissez la version dénommée “Production version” .
Une fois le fichier téléchargé, copiez le dans le dossier “js” situé à la base de votre thème wordpress, puis faites y référence dans le fichier header.php du thème , de la manière suivante.
<script src= »<?php echo get_template_directory_uri(); ?>/js/jquery.cycle2.min.js » type= »text/javascript » ></script>
NB : insérez ce code après l’instruction <?php wp_head(); ?>
3. Ecrire la boucle du slider
Enfin, la partie la plus intéressante 
. Dans un premier temps, ouvrez le fichier index.php et saisissez y le code suivant (juste après la ligne <div id= »primary » class= »content-area »> )
<!–slider–>
<?php
if ( is_home() ) {
?>
<?php } else { ?>
<?php } ?>
Ce bout de code indique à wordpress qu’on souhaite afficher le slider seulement sur la page d’accueil.
Saisissez ensuite le code suivant (entre <?php if (is_home(){?>) et <?php }else{?> ), qui permet de créer une boucle pour les articles appartenant à la catégorie “slider” et d’en faire une userlist animée par jQuery Cycle2 (grâce à la classe “cycle-slideshow”)
?>
<ul id= »tre » class= »cycle-slideshow »
data-cycle-slides= »li »>
<?php
wp_reset_postdata();
$query = new WP_Query(array(
‘posts_per_page’ => 5,
‘cat’=>2));
while($query->have_posts()) : $query->the_post();
?>
<li id= »post-<?php the_ID(); ?> » class= »ym-grid »>
<?php
//miniature
if ( has_post_thumbnail()) {
the_post_thumbnail(‘large’, array(‘class’ => ‘flexible’));
}
?>
<!–lien vers l’article–>
<a href= »<?php the_permalink(); ?> » class= »overlay »>
<?php the_excerpt();?>
</a>
</li>
<?php
endwhile;
wp_reset_postdata();
?>
</ul>
Vous obtiendrez alors un résultat similaire à celui ci dessous . 
Je sais, c’est loin d’être impressionnant. Voyons comment améliorer un peu tout ceci, en ajoutant un compteur de slides, une navigation et en centrant les images.
Pour ce faire, rajoutez les éléments suivants à votre code
<!–slider–>
<?php
//debut de la boucle
if ( is_home() ) {
?>
<ul id= »tre » class= »cycle-slideshow »
data-cycle-slides= »li »
data-cycle-pager= »#socialclub »
data-cycle-prev= »#prev »
data-cycle-next= »#next »>
<?php
wp_reset_postdata();
$query = new WP_Query(array(
‘posts_per_page’ => 5,
‘cat’=>2));
while($query->have_posts()) : $query->the_post();
?>
<li id= »post-<?php the_ID(); ?> » class= »ym-grid »>
<div id= »sswrapper »> <?php
//miniature
if ( has_post_thumbnail()) {
the_post_thumbnail(‘large’, array(‘class’ => ‘flexible’));
}
?>
<!–lien vers l’article–>
<a href= »<?php the_permalink(); ?> » class= »overlay »>
<?php the_excerpt();?>
</a>
</div>
</li>
<?php
endwhile;
wp_reset_postdata();
?>
</ul>
<div id= »zenav »>
<a id= »prev » href= »#re »><</a>
<a id= »next » href= »#re »>></a>
</div>
<div id= »socialclub »>
</div>
<?php } else { ?>
<?php } ?>
ainsi que les instructions suivantes dans votre feuille de style
/*slider styles*/
ul#tre {
width: 100%;
position: relative;
text-align: center;
}
#tre li{
width: 100%;
height:auto;
position: relative;
margin: 0 auto;
text-align:center}
#tre li img{
position: relative;
margin: 0 auto}
.overlay{
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#00000000′, endColorstr=’#a6000000′,GradientType=0 ); /* IE6-9 */
color:white !important;
text-shadow: 1px 1px 0px #000;
width:100%;
display: block;
padding:5px;
text-align: center;
position: absolute;
bottom:0}
#zenav{
top: 123px;
position: absolute;
z-index:100000;
}
#zenav a{
position: absolute;
z-index: 100000;
height: 30px;
width: 24px;
box-shadow: 1px 1px 0px rgba(51, 51, 51, .1);
background: white;}
#prev {
position: absolute;
left:0;
top: 123px;
}
#next {
position: absolute;
left:0;
top: 176px;
}
#socialclub{
width: 990px;
bottom: 49px;
position: absolute;
z-index: 100000;
text-align: center;}
#socialclub > span{
color:#333333;
font-size:40px}
.cycle-pager-active{
color:#CECECE
}
Ce qui donnera le résultat ci dessous .
Le thème final est disponible au téléchargement ici .
Jean Luc Houedanou
Jean-Luc Houédanou est un blogueur spécialisé dans l’innovation et la transformation numérique, avec une expérience en développement web front-end. Après avoir obtenu un Master en gestion du commerce électronique de l’Université de Sherbrooke, il a travaillé sur des projets d’envergure mondiale pour diverses entreprises, startups et organisations internationales. Il est également impliqué dans des projets communautaires et technologiques en Afrique.
Il aide, par le biais de ce blog, les lecteurs à s’adapter aux évolutions rapides de la technologie et des tendances du marché.
En plus de ses articles sur l’innovation et la transformation numérique, Jean-Luc Houédanou écrit également des colonnes d’opinion et donne des conseils sur le bien-être mental. Son objectif est d’aider les lecteurs à se développer personnellement et professionnellement, en leur fournissant des conseils pratiques pour gérer le stress et améliorer leur qualité de vie.
