[WordPress] Un slider avec le top billets sans plugin !

[WordPress] Un slider avec le top billets sans plugin !

Vous avez du constater que le blog Ă  un petit peu changer de look 🙂 En effet j’ai mis Ă  jour mon thème hier en le synchronisant avec ma version de dev. C’est bel et bien le mĂŞme thème qu’avant mais avec d’autres options vu que l’on peut pas mal le customiser maintenant !

Une autre nouveautĂ© est l’apparition d’un petit slider avec le Top Billets ! En fait ce Top Billets va chercher les 5 billets les plus commentĂ©s, ceux qui ont donc suscitĂ©s le plus de commentaires ou retweet.

Mais alors comment qu’on fait ???

Tout d’abord les ingrĂ©dients de la recette :

  • Une requĂŞte WordPress.
  • Un poil de jQuery.
  • Une pincĂ©e de CSS.

La requĂŞte WordPress :

En gros on va chercher les 5 billets les plus commentĂ©s, puis on boucle dans une liste en affichant l’imagette si elle existe, sinon on remplace par une image par dĂ©faut, on affiche aussi l’extrait du billet et un lien pour lire la suite.

On met le tout dans une liste car cela va servir pour le slider !

<div id="slider">

Top billets !

<?php $popular = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
    <?php while ($popular->have_posts()) : $popular->the_post(); ?>
  • <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail('thumb160'); ?> <?php else : ?> Pas d'illustration pour ce billet <?php endif; ?>

    <?php the_title();?>

    <?php the_excerpt(); ?> Lire la suite...
  • <?php endwhile; ?>
</div>


Le poil de jQuery :

On aura besoin de l’excellent script easySlider.

Ensuite on inclus dans header.php sous le <?php wp_head(); ?>



Dans notre fichier js/script.js nous allons mettre ceci :

jQuery(document).ready(function($) {	
	$("#slider").easySlider({
		numeric: true,
	});
});

Et enfin la pincée de CSS :

#slider {margin-left: auto ; margin-right: auto ; opacity:1;}
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
}
#slider h1 {padding:2px;background:#000;color:#fff;ont-family: 'Lobster', arial, serif; font-weight:bold; line-height:38px; font-size:36px;text-shadow: 0px 2px 2px #999;}
#slider li h2 {text-shadow: 0px 1px 1px #000;font-family:Arial, sans-serif; font-weight:normal; line-height:25px; font-size:25px;}
#slider li {width:600px;height:250px;overflow:hidden;background:#555;color:#fff;}
#slider li img {float:left; margin:5px;}
#slide li p {margin:5px;}
/* numeric controls */	

ol#controls{
	margin:1em auto;
	padding:0;
	height:28px;	
	}
ol#controls li{
	margin:0 10px 0 0; 
	padding:0;
	float:left;
	list-style:none;
	height:28px;
	line-height:28px;
	}
ol#controls li a{
	float:left;
	height:28px;
	line-height:28px;
	border:1px solid #ccc;
	background:#DAF3F8;
	color:#555;
	padding:0 10px;
	text-decoration:none;
	}
ol#controls li.current a{
	background:#5DC9E1;
	color:#fff;
	}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
0 Partages

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.