La page de blog par défaut affiche tous les articles de votre site en utilisant la conception standard du thème. Parfois, nous voulons afficher un ensemble d’articles sélectionnés dans une page sous forme de grille avec un design personnalisé pour les promouvoir. Nous pouvons utiliser un shortcode dans une page ou créer un modèle de page pour fournir cette fonctionnalité.
Dans cet article, nous allons créer un modèle de page qui affichera une liste de publications dans une conception basée sur une grille.
Ouvrez l’éditeur de code et assurez-vous d’avoir accès aux fichiers de thème dans votre installation WordPress locale ou externe. En outre, vous devez ajouter des images en vedette à quelques-uns des articles existants afin de voir la conception complète de Post Grid en action.
Suivez ces étapes pour créer un modèle de page personnalisé qui affichera une liste de publications sous forme de grille:
- Ouvrez le dossier wp-content / themes / twentytwentychild à l’aide d’un gestionnaire de fichiers.
- Créez un nouveau modèle appelé post-grid.php.
- Ajoutez le code suivant au fichier post-grid.php, définissez-le comme modèle et enregistrez les modifications:
<?php /* Template Name: Article Grid */ ?>- Ajoutez le code suivant après la définition du nom du modèle pour charger l’en-tête et récupérer les publications:
<?php
get_header();
$post_list = new WP_Query(array('post_type'=>'post',
'post_status'=>'publish', 'posts_per_page'=>-1));
?>- Maintenant, nous pouvons ajouter le code de modèle suivant après le code de l’étape 4. Ce code sera utilisé pour afficher la liste des articles:
<?php if ( $post_list->have_posts() ) : ?>
<div id="list-post-panel">
<ul>
<?php while ( $post_list->have_posts() ) :
$post_list->the_post();
$image = get_the_post_thumbnail_url( get_the_ID()); ?>
<li>
<div class="post-list-featured-image"><img src="<?php
echo $image; ?>" /></div>
<div class="post-list-title"><a href="<?php
the_permalink(); ?>"><?php the_title(); ?></a></div>
</li>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php else : ?>
<p><?php _e( 'There no posts to display.' ); ?></p>
<?php endif; ?>
</div>
<?php get_footer(); ?>- Ajoutez les styles suivants au fichier style.css du thème enfant Twenty Twenty pour afficher la liste des publications sous forme de grille:
#list-post-panel ul { width : 100%; list-style:none; }
#list-post-panel li{
width: 31%;
margin: 1%;
padding: 1%;
float: left;
background: #eee;
list-style: none;
text-align: center;
border: 1px solid #cfcfcf;
}
.post-list-featured-image img{
width: 100%;
height: 200px;
}Connectez-vous au site en tant qu’administrateur.
- Cliquez sur le menu articles.
- Cliquez sur le bouton Ajouter
- Définissez le titre et téléchargez une image sélectionnée à l’aide du bouton Définir l’image sélectionnée dans la section Image mise en avant:
- Cliquez sur le bouton Publier pour créer la publication.
- Suivez les étapes 8 à 11 et créez deux autres articles
- Cliquez sur le menu Pages.
- Cliquez sur le bouton Ajouter nouveau pour créer une nouvelle page.
- Ajoutez un titre pour la page et sélectionnez Post Grid comme modèle sous Attributs de page | Paramètres du modèle.
- Cliquez sur le bouton Publier pour créer la page.
Maintenant, vous pouvez afficher cette page sur le frontend. Ici, vous verrez une liste de publications basée sur une grille, comme indiqué dans la capture d’écran suivante:
