Un carousel bootstrap dans wordpress

Dans cet article nous allons voir comment créer dans wordpress un slider avec le carousel bootstrap.

Je vous renvoie à cet article pour  créer un type de contenu particulier et vous en servir comme slider dans wordpress.Bien sur, il faut au préalable télécharger bootstrap et l’intégrer à son thème.

Dans un système de carousel, la classe dite « active » de bootstrap doit concerner uniquement le slide en cours, or on s’aperçoit qu’avec une boucle classique cette classe va s’appliquer à tous les articles, ce qui risque de poser problème.En fait l’astuce consiste à placer un compteur qui permet de contourner le problème et de faire fonctionner le slider correctement

<div class="home_bottom_image">
<?php  global $post;                           
$args = array( 'post_type' =>'home_bottom_slider', 'numberposts' => -1, 'orderby' => 'ASC' ); 
$slider = get_posts($args);  
if($slider) { ?> 
                  
<div class="carousel slide" data-ride="carousel" data-interval="3000" id="myCarousel">
<div class="carousel-inner">
<?php 
$i = 1;
foreach($slider as $post) :   
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'slider'); ?> 
           								    <div class="item <?php if ($i == 1) echo 'active'; ?>">
 <img src="<?php echo $thumbnail[0]; ?>" width="688" height="140" alt="" title="<?php the_title();?>"/>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>		          		
<?php  $i++;
	endforeach; ?> 
<?php wp_reset_postdata(); ?> 
   </div>
 </div>
<?php } ?>
</div>

Pour chaque custom post (un foreach sur les post que j’appelle ici « home_bottom_slider ») on va chercher l’image à la une (avec la fonction wp_get_attachment_image_src() ), ensuite en plus de la classe item par défaut de bootstrap on place notre condition avec le compteur (<?php if ($i == 1) echo ‘active’; ?>) pour que la classe « active » s’affiche en fonction de sa position, on place ensuite les flèches gauche et droite, puis on ferme le compteur et la boucle.

Et vola, le carousel bootstrap devrait fonctionner dans votre thème wordpress