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 !```

<?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 bloginfo('template_directory'); ?>/img/noimg.png)
        <?php endif; ?>
		

<?php the\_title();?>
---------------------

        <?php the\_excerpt(); ?>
        [Lire la suite...](<?php the_permalink();?>)
		
<?php endwhile; ?>

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;}