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
Bonjour,
Merci pour ce tutoriel très intéressant. Je voulais savoir s’il fonctionnait aussi avec l’affichage des articles présentés en liste dans les catégories (thème twenty ten) ? Débutante en WP, je m’arrache un peu les cheveux.
Bonjour Cymry,
Vous pouvez utiliser le code ci-dessus dans le thème twentyten, tous les codes et les tutoriels de mon site sont tester sur les thèmes de base de WordPress.
Une chose que je n’ai pas précisé si vous ajouter plusieurs listes d’articles il faut que chaque boucles se termine après le endwhile (ou endif pour certaine boucle) comme ceci :
<?php endwhile; // fin de la boucle ?>
<?php wp_reset_query(); // Réinitialise la boucle ?>
Cela évite les bugs pour les autres boucles.
Pour infos je vais ouvrir prochainement un forum d’aide sur WordPress les débutantes et débutant seront le bienvenu 😉
Merci beaucoup pour cet excellent tuto, mais je rencontre 2 pbs de mise en forme:
1- Le contenu de mes articles se positionne en dessous l’image à la une et non à côté comme dans votre exemple.
2- J’aimerais afficher 2 articles côte à côte dans la div .entry.
J’ai essayé tout un tas de modifs dans la feuille de style, en vain…
Merci de m’éclairer…
Bonjour yohann, essayé d’ajouter une largeur au texte de l’article comme ceci :
// css
.txt{ float:left; width:180px;} /* indiquez la largeur désirer */
//loop
<div class="txt"> <?php the_excerpt(); // affichage de l'extrait ?></div>
Pour ajouter une autre colonne dupliquer le code en changant l’ID entry exemple entry-2 puis ajouter le code css :
#global{ width: 760px; margin:0; } /* largeur total des deux colonne */
.entry { width:380px; padding:8px; float: left; } /* première colonne */
.entry-2 { width:380px; padding:8px; float: left; } /* deuxième colonne */
Adapter vos dimensions bien sur .
Merci, c’est ce que je cherchais depuis longtemps!
Par contre j’aimerais choisir moi-même l’extrait, en renseignant le champ extrait à la rédaction d’un article, mais quand je fais ça je ne vois plus le lien “lire la suite” ?
Bonjour yourtwinkle,
Si le lien lire la suite ne s’affiche pas supprimer le code de la ligne 23 a la ligne 35 inclus. Puis ajouté le code suivant dans la boucle :
<?php the_excerpt(); // affichage de l'extrait ?><span class="read_more"><a href="<?php the_permalink(); ?>">Lire la suite…</a></span>
Cela devrait résoudre le problème.
Bonjour Fred,
Je me prends la tête depuis un moment pour arriver à afficher ma liste horizontalement.
A chaque fois que je crée une div pour englober l’ensemble de mes articles un seul apparait dans l’emplacement prévu et les autres apparaissent en dessous à chaque fois.
Aurais-tu une solution stp ?
Bonsoir Bobby,
Si j’ai bien compris tu as un problème d’alignement horizontal de plusieurs blocs (div) ?
Pour aligner par exemple deux blocs horizontalement tu dois indiquer un float pour chaque div,
Je prends l’exemple de mon code :
Le code CSS
/* Premier bloc */
.entry {
width:380px;
Float:left; /*ici je dit a la balise de s’aligner a gauche */
padding:8px;
}
/* Deuxième bloc */
.entry-2 {
width:380px;
Float:left; /*ici je dis a la deuxième balise de s’aligner a gauche aussi */
padding:8px;
}
Le code HTML
<div class="entry">
<!—- Conteneur de ma première colonne d’articles -->
</div>
<div class="entry-2">
<!—- Conteneur de ma deuxième colonne d’articles -->
</div>
Attention ! la largeur des deux colonnes plus les marges(margin) dois correspondre a la largeur totale de ta page dans l’exemple j’ai 380px+380px=760px et aucune marge donc la page qui dois contenir mes colonnes fera minimum 760px de large.
Et entre chaque ligne horizontale (qui contient tes colonnes) tu ajoute le code suivant :
<div style="clear:both;"></div>
Pour éviter des décalages 😉
Le positionnement CSS n’est pas simple quant tu réalise une page avec plusieurs blocs par d’un thème vierge que tu installe en locale et après adapte la page final a ton thème, ca permet de mieux analyser les erreurs des class ou des ID qui rentre en conflit par exemple.