Comment créer une liste d’articles avec miniatures

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

0 0 voter
Évaluation de l'article
S’abonner
Notifier de
guest
60 Commentaires
le plus ancien
le plus récent le plus populaire
Inline Feedbacks
View all comments
Cymry
Cymry
9 années il y a

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.

Fred
Fred
9 années il y a

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 :


&lt;?php endwhile; // fin de la boucle ?&gt;
&lt;?php wp_reset_query(); // Réinitialise la boucle ?&gt;

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 😉

yohann
yohann
9 années il y a

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…

Fred
Fred
9 années il y a

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
&lt;div class=&quot;txt&quot;&gt; &lt;?php the_excerpt(); // affichage de l'extrait ?&gt;&lt;/div&gt;

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 .

yourtwinkle
yourtwinkle
9 années il y a

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” ?

Fred
Fred
9 années il y a

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 :

&lt;?php the_excerpt(); // affichage de l'extrait ?&gt;&lt;span class=&quot;read_more&quot;&gt;&lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;Lire la suite&#8230;&lt;/a&gt;&lt;/span&gt;

Cela devrait résoudre le problème.

Bobby
Bobby
9 années il y a

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 ?

Fred
Fred
9 années il y a

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.