Créer un carrousel d’articles sélectionnés sous WordPress avec jQuery

On retrouve de nombreux tutoriaux décrivant la façon de réaliser un carrousel sous WordPress avec jQuery. Ce qui m’embête dans ces articles est le fait qu’à chaque fois l’utilisation d’une catégorie réservée aux articles sélectionnés est nécessaire. Dans ce tutoriel la méthode utilisée diffère quelque peu : l’image affichée correspond à la miniature de l’article, gérée par WordPress. Si un article dispose d’une image, celui-ci apparaîtra dans le carrousel.

Pour ceux qui ne savent pas ce qu’est un carrousel, c’est dans notre cas des images qui défilent. Vous pouvez en voir un exemple sur le blog Aptonia.

Activer les miniatures des articles

Par défaut, la fonction d’ajout d’une miniature pour un article n’est pas activée. Dans le fichier fonctions.php de votre thème ajouter les lignes suivante :

/**
 * Adding the thumbnails support for the theme.
 */
if (function_exists('add_theme_support') ) {
	add_theme_support('post-thumbnails');
}

Vous pouvez constater sur la page d’ajout d’un article la présence d’une nouvelle boite en bas à droite :

La query WordPress

Penchons-nous maintenant sur la query (« requête » en français) WordPress qui permet d’afficher les miniatures des articles. Insérez le code suivant à l’endroit où vous souhaitez faire apparaître le carrousel (typiquement dans le header.php) :

<div id="highlights">
<?php
$highlights = new WP_Query(array('showposts' => 5, 'meta_key' => '_thumbnail_id'));
								 
while ($highlights->have_posts()): 
	$highlights->the_post();						 
?>
	<div>
		<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> 
	</div>
<?php endwhile; ?>
</div>

La première ligne correspond à la requête permettant de récupérer les articles ayant une miniature. Deux paramètres lui sont passés :

  • showpost : le nombre d’articles à afficher
  • meta_key : les articles avec miniature contiennent une information supplémentaire en base, information stockée dans la table « postmeta ».

La suite est une boucle classique qui permet d’afficher le titre de l’article ainsi que sa miniature, tous deux associés au lien pointant dessus.
Si vous rafraîchissez votre thème à cette étape vous verrez les titres ainsi que leur image associée les uns en dessous des autres.

Le carrousel jQuery

Une fois les articles récupérés il ne reste plus qu’à modifier l’affichage pour avoir notre carrousel. Pour cela nous allons utiliser un plugin jQuery.
Si vous n’avez pas déjà inclus jQuery dans votre thème ajoutez la ligne suivante dans le footer.php, juste avant le tag « </body> » :

<script src="//code.jquery.com/jquery.min.js"></script>

Le plugin jQuery Cycle est utilisé pour le carrousel. Téléchargez la dernière version et copiez le fichier dans le répertoire js du thème. Ajoutez en dessous de jQuery :

<script src="<?php bloginfo('template_url'); ?>/js/jquery.cycle.all.js"></script>

Si vous utilisez plusieurs plugins jQuery une bonne pratique consiste à tous les rassembler dans un même fichier afin de limiter les requêtes http, principal facteur de ralentissement du temps de chargement des pages.

Pour terminer on configure le plugin avec son pager :

<script>
$('document').ready(function() {
	$('#highlights div').after('<ul>').cycle({ 
		fx: 'scrollHorz',
		manualTrump: true,
		pager: '#highlight ul',
		pagerAnchorBuilder: function(idx, slide) {
			return '<li><a href="#">' + parseInt(idx + 1) + '</a></li>';
		}
	});
});
</script>

On indique au plugin qu’il doit appliquer le carrousel sur les div contenues dans l’id « highlights » (dans cet exemple, une autre div). Avant d’appeler le plugin on ajoute une liste sous le carrousel, liste servant de pager pour passer rapidement d’une image à l’autre.
En paramètre est précisé le type de défilement, ici horizontal, ainsi que les différentes informations liées au pager, notamment son emplacement (dans #highlight ul) et sa construction html.

C’est fini, le carrousel est fonctionnel.

Commentaires

  1. Jeff

    Bonjour, Merci pour ce tuto tres intéressant. cependant j’ai fais exactement comme vous et je me retrouve avec les erreurs suivantes :

    – pour chaque article, un slide à part…ils s’affichent tous un au dessus de l’autre.
    – les infos slide separement , c’est a dire j’ai les titres des articles qui se slident, ensuite viennent les images…bizzard

Ajouter un commentaire