Dans se tutoriel je vais vous expliquer comment créer une liste d’articles avec miniature, que vous pourrez ajouter sur votre page d’accueil ou dans vos pages template de votre thème WordPress.
Pour la boucle (loop) je me servirais de la fonction Query_posts que vous pourrez personnaliser en lissant l’article : Utiliser la fonction query_posts pour personnaliser l’affichage de vos articles.
Nous utiliserons aussi la fonction post-thumbnails qui va nous servir à afficher les miniatures des articles.
Première étape ajouter la boucle suivante qui affichera les articles avec un titre et un extrait :
<div class="entry">
<?php query_posts('cat=0&showposts=4'); while (have_posts()) : the_post(); // début de la boucle ?>
<h2><?php the_title(); // affichage du titre?></h2>
<?php the_excerpt(); // affichage de l'extrait ?>
<?php endwhile; // fin de la boucle ?>
</div>
Ensuite ajouter le code suivant dans le fichier function.php de votre thème :
// Déclaration de la prise en charge des miniatures dans le thème
add_theme_support( 'post-thumbnails' );
// déclaration de la function pour redimentioner les miniatures
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'homepage-thumb', 220, 180, true ); //(Image recadrée)
}
Le code de la ligne 3 va déclarer la prise en charge des miniatures dans votre thème.
La ligne 7 va déclarer la fonction qui va permettre de redimensionner vos miniatures.
Et la ligne 9 va nous servir à définir la dimension des miniatures qui vont être affiché, homepage-thumb est l’identifiant de nos miniatures, 220 est la largeur et 180 est la hauteur.
Si par exemple vous voulez utiliser la largeur original de votre image indiquer 9999, 180 faite de même pour la hauteur.
Vous pouvez aussi ajouter plusieurs dimensions pour vos miniatures en dupliquant la ligne 9 et en changeant l’identifiant exemple : homepage-thumb-2.
Pour afficher la miniature de vos articles ajouter le code suivant a l’intérieur de la boucle :
ID, 'homepage-thumb');?>
La boucle finale se présente comme ceci :
<?php query_posts('cat=0&showposts=4'); while (have_posts()) : the_post(); // début de la boucle ?>
<h2><?php the_title(); // affichage du titre?></h2>
<?php echo get_the_post_thumbnail($post->ID, 'homepage-thumb'); // affichage de la miniature ?>
<?php the_excerpt(); // affichage de l'extrait ?>
<?php endwhile; // fin de la boucle ?>
Important ! Pour que la miniature s’affiche correctement, lors de l’édition de votre article vous devez définir l’option image à la une.
Maintenant il ne reste plus ajouter les balises html et le code CSS pour la mise forme.
/* Articles avec miniatures */
.entry {
width:380px;
padding:8px;
}
.articles{
clear:both;
}
.title {
font-size:14px;
}
.thumbs {
float:left;
padding:5px;
}
.separateur{ !important
clear:both;
float:left;
width:100%;
height:1px;
border-bottom: dotted 1px #CCCCCC;
}
.read-more {
color:#FFFFFF;
margin-bottom:10px;
margin-top:10px;
}
.read-more a:hover {
color:#0099FF;
}
.read-more{
float:right;
padding:3px;
background-color:#333333;
/* Css 3 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Code de la boucle avec les balises html :
<div class="entry"> <!-- Conteneur -->
<?php query_posts('cat=0&showposts=4'); while (have_posts()) : the_post(); // début de la boucle ?>
<div class="articles"><!-- Articles -->
<div class="thumbs"><?php echo get_the_post_thumbnail($post->ID, 'homepage-thumb'); // affichage de la miniature ?></div>
<h2 class="title"><?php the_title(); // affichage du titre?></h2>
<?php the_excerpt(); // affichage de l'extrait ?>
</div> <!-- Articles fin -->
<div class="separateur"></div><!-- Séparateur -->
<?php endwhile; // fin de la boucle ?>
</div><!-- Conteneur fin -->
Code du fichier function.php, dans le code ci-dessous j’ai rajouté deux fonctions pour personnaliser la longueur des extraits et le lien permanent que vous pourrez modifier. Si vous désirez plus d’information sur se sujet je vous conseil de lire l’article : Personnalisé la longueur de vos extraits.
<?php
// Déclaration de la prise en charge des miniatures dans le thème
add_theme_support( 'post-thumbnails' );
// déclaration de la function pour redimentioner les miniatures
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'homepage-thumb', 220, 180, true ); //(Image recadrée)
}
// Cette fonction change la longueur de l'extrait
function custom_excerpt_length( $length ) {
return 15; // Modifier 15 pour changer la longueur de l'extrait
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
// Cette fonction personalise le lien permanent vers l'article
function new_excerpt_more($more) {
global $post;
return '<a class="read-more" href="'. get_permalink($post->ID) . '">Lire la suite...</a>'; // Ligne a modifier
}
add_filter('excerpt_more', 'new_excerpt_more');
?>
Les fichiers sources sont disponible ici