Ajouter un carrousel d’articles pour WordPress avec Twitter Bootstrap

Ajouter un carrousel d'articles pour WordPress avec Twitter Bootstrap

Oui je sais, les carrousels c’est le mal. Mais je sais aussi que vous savez ce que vous faites, et que si vous êtes arrivés ici, c’est que vous voulez en ajouter un sur votre site WordPress.

Alors c’est parti.

Le principe

Le carrousel (aussi appelé slider) que je vous propose ici n’est pas  un carrousel  d’images, mais un carrousel d’articles, c’est-à-dire qu’il fait défiler les articles de votre site WordPress (ou les pages, ou tout autre type de post selon les paramètres fournis) en affichant leur image à la une.

Comme d’habitude, vous n’aurez pas besoin d’extension supplémentaire. Et c’est gratuit.

Préparatifs

Les modifications peuvent être faites dans un thème enfant ou une extension.

Nous utilisons la fonctionnalité carrousel de Twitter Bootstrap dont les fichiers CSS et JavaScript doivent être inclus, comme d’habitude maintenant.

function enqueueStyles() {
wp_enqueue_style("bootstrap", get_stylesheet_directory_uri() . "/css/bootstrap/css/bootstrap.min.css");
 
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrap-js', get_stylesheet_directory_uri() . '/js/bootstrap.min.js', 'jquery' );
}
add_action("wp_enqueue_scripts", "enqueueStyles");

La fonction pour ajouter un carrousel

La fonction est simple : elle reprend le code fourni par Bootstrap pour l’adapter à WordPress, notamment lui permettre d’afficher les articles selon certains critères (ceux d’une catégorie, d’un tag, …).

function bootstrapCarousel($criterias = null, $classes = null, $id = "", $active = 1, $messageIfEmpty = "", $link = "post", $display = true) {
	$result = "";

	$posts = array();
	if (!$criterias) $criterias = array("post_type" => "post");
	$query = new WP_Query($criterias);
	if ($query->have_posts()) {
		while ($query->have_posts()) {
			$query->the_post();
			$posts[] = array(
				"id" => $query->post->ID,
				"permalink" => get_permalink($query->post->ID),
				"title" => $query->post->post_title,
				"excerpt" => $query->post->post_excerpt,
				"thumbnail" => get_the_post_thumbnail($query->post->ID , "full")
			);
		}
	}
	wp_reset_postdata();
	$result = "";

	if (count($posts) === 0) {
		$result = $messageIfEmpty;
	} else {
		if ($id === null) $id = "bsSlider";
		$result = "<div id=\"$id\" class=\"carousel slide $classes\" data-ride=\"carousel\">";
		$result .= "	<ol class=\"carousel-indicators\">";

		foreach ($posts as $k => $post) {
			$result .= "		<li data-target=\"#$id\" data-slide-to=\"$k\"";
			if ($active == $k + 1) $result .= " class=\"active\"";
			$result .= "></li>";
		}
		$result .= "	</ol>";
		$result .= "	<div class=\"carousel-inner\">";

		foreach ($posts as $k => $post) {
			if ($link == "none")
				$url = "";
			elseif ($link == "post")
				$url = $post["permalink"];
			else
				$url = htmlentities($link);

			$result .= "		<div class=\"item";
			if ($active == $k + 1) $result .= " active";
			$result .= "\">";
			if ($url) $result .= "			<a href=\"$url\">";
			$result .= "				" . $post["thumbnail"];
			$result .= "				<div class=\"carousel-caption\">";
			$result .= "					<h3>" . $post["title"] . "</h3>";
			$result .= "					<p>" . $post["excerpt"] . "</p>";
			$result .= "				</div>";
			if ($url) $result .= "			</a>";
			$result .= "		</div>";
		}

		$result .= "	</div>";
		$result .= "	<a class=\"left carousel-control\" href=\"#$id\" data-slide=\"prev\"><span class=\"glyphicon glyphicon-chevron-left\"></span></a>";
		$result .= "	<a class=\"right carousel-control\" href=\"#$id\" data-slide=\"next\"><span class=\"glyphicon glyphicon-chevron-right\"></span></a>";
		$result .= "</div>";
	}
	if ($display)
		echo $result;
	else
		return $result;
}

Elle peut être décomposée en deux parties. D’abord elle récupère les articles avec la fonction WP_Query() de WordPress, ensuite elle construit le carrousel en HTML.

Les paramètres principaux :

  • $criterias est un tableau qui sera passé à WP_Query() pour plus de flexibilité. Par défaut, tous les articles seront affichés.
  • $id permet de donner un identifiant différent à l’élément HTML contenant le carrousel. Ce paramètre est particulièrement utile si vous avez la malchance de devoir insérer plusieurs sliders par page.
  • $active indique le numéro du slide à afficher en premier, entre 1 et le nombre de slides
  • $messageIfEmpty est le texte à afficher si aucun article ne correspond
  • $link permet de définir la page à atteindre au clic sur une image. Par défaut, le visiteur ira sur l’article de l’image, la valeur none supprime le lien. Il est également possible d’indiquer une ancre (#section) ou une URL pour que toutes les images pointent vers le même endroit.

Utilisation directe dans le thème enfant

Maintenant que la fonction est définie, elle peut être utilisée directement dans votre thème enfant, à l’endroit où vous le souhaitez.

Par exemple, si vous avez créé un template pour la page d’accueil qui affiche les articles selon leur tag ‘A la une’ :

bootstrapCarousel(
	array("post_type" => "post", "tag" => "a-la-une")
);
Utilisation dans le thème enfant

Notez que les tags sont définis par leur slug.

Le shortcode

Mettons en place un shortcode qui sera utile si vous voulez être en mesure d’ajouter un carrousel n’importe où dans vos pages ou vos articles, en saisissant simplement [carousel], avec quelques paramètres si c’est nécessaire.

Le code

Le code du shortcode est simple :

function bootstrapCarouselShortcode($attributes, $content) {
	extract(shortcode_atts(array(
			"categories" => null,
			"tags" => null,
			"classes" => null,
			"id" => null,
			"active" => 1,
			"messageIfEmpty" => "",
			"link" => "post"
	), $attributes));
	$criterias = array("post_type" => "post");
	if ($categories) $criterias["category_name"] = $categories;
	if ($tags) $criterias["tag"] = $tags;
	return bootstrapCarousel($criterias, $classes, $id, $active, $messageIfEmpty, $link, false);
}
add_shortcode("carousel", "bootstrapCarouselShortcode");

?>

Il appelle simplement la fonction, en simplifiant le passage de critères à passer, notamment avec les paramètres categories et tags qui acceptent respectivement les slugs des catégories et des tags à afficher. Notez qu’il est possible d’indiquer plusieurs slugs, en les séparant par des virgules.

Si ces deux critères ne suffisent pas, vous pouvez améliorer simplement le shortcode pour ajouter les attributs qui vous intéressent, comme par exemple pour définir l’ordre de tri des articles ou l’affichage des sticky posts seulement.
Pour cela, je vous invite une nouvelle fois à consulter la page de documentation de WP_Query() sur le codex.

Exemples d’utilisation

Une fois le shortcode en place, vous pouvez l’insérer dans les articles et dans les pages de votre site WordPress.

Sans paramètre, il affiche tous les articles.

[carousel categories="my-categorie-slug,my-other-category-slug"]

Ce shortcode affiche un slider qui présente les images à la une des articles des deux catégories passées en paramètre.

[carousel tags="my-tag-slug" active="2" messageIfEmpty="Aucun article ne correspond."]

Celui-là affiche les images à la une du tag défini, en commençant au deuxième slide, et en affichant un message si aucun article ne correspond.

[carousel tags="my-tag-slug" link="/my-tag-page/"]

Enfin, les liens de ce carrousel pointent tous vers la page définie par link.

Le mot de la fin

Le shortcode que je présente ici permet de répondre à la plupart des besoins, mais il peut être étendu facilement.

Cet article vous a été utile ? Partage it !

6 réflexions au sujet de « Ajouter un carrousel d’articles pour WordPress avec Twitter Bootstrap »

  1. Salut,
    Question qui va peut-être paraître idiote : faut-il installer bootstrap avant de mettre en place ce plugin ? J’explique : je voudrais simplement utiliser ce carrousel dans le thème twenty twelve de WorPress
    merci

  2. Hello,

    Je cherche désespérément un tuto de ce genre mais le carousel serait utiliser dans un post, pour les images du post.
    L’idée étant de transformer une galerie en carousel bootstrap.
    J’ai essayé toute la journée avec différentes sources trouver sur le web, sans succès.
    Il y a bien des plugins, mais j’aimerai vraiment faire sans.

    Merci d’avance si vous avez un piste ! 🙂

    1. Bonjour clemence,
      J’ai bien une piste 🙂
      Il faut mixer cet article (sur le carrousel d’articles donc) avec celui concernant la personnalisation de galeries : http://www.partage-it.com/personnaliser-la-galerie-de-wordpress/
      Le truc c’est d’inclure le code du carrousel dans la boucle sur les $attachments, c’est-à-dire celle du chapitre ‘La partie intéressante’.
      Voilà toutes les briques sont là, il n’y a plus qu’à les assembler 🙂
      N’hésitez pas.
      David

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.