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