Comment afficher vos publications WordPress dans une mise en page en grille

Vous souhaitez afficher les publications WordPress sous forme de grille ?

Une mise en page en grille vous donne plus de flexibilité dans l’affichage de vos publications dans WordPress. Cela peut s’avérer utile lorsque vous créez des pages personnalisées.

Dans cet article, nous allons vous montrer comment afficher facilement vos publications WordPress dans une disposition en grille n’importe où sur votre site.

Quand avez-vous besoin d’une Mise en page en grille pour WordPress ?

Tous les thèmes WordPress supportent la traditionnelle mise en page verticale des publications de blog, et cela fonctionne bien pour la plupart des types de sites. Cependant, cette mise en page peut prendre beaucoup d’espace, surtout si vous avez beaucoup de publications.

Si vous créez une page d’accueil personnalisée pour votre site, vous pouvez utiliser la disposition en grille pour afficher vos publications récentes.

Vous aurez ainsi plus de place pour ajouter d’autres éléments à votre page d’accueil.

De plus, votre grille de publication mettra en évidence vos images vedettes, ce qui la rendra visuellement attrayante et cliquable. Vous pouvez également utiliser la grille de publication pour afficher votre portfolio créatif et d’autres types de contenu personnalisé.

De nombreux thèmes de magazine et de photographie utilisent déjà la mise en page basée sur une grille pour afficher les publications. Cependant, si votre thème ne supporte pas cette fonctionnalité, vous devrez l’ajouter.

Ceci étant dit, nous allons vous afficher comment afficher vos publications WordPress dans une disposition en grille. Utilisez simplement les liens rapides ci-dessous pour passer directement à la méthode que vous souhaitez utiliser.

• Mise en page d’une grille avec l’éditeur de blocs de WordPress
• Créer une grille avec l’extension Post Grid
• Créer une grille avec le constructeur de page SeedProd
• Créer une grille en ajoutant du code à WordPress

Tutoriel vidéo

Si vous préférez des instructions écrites, continuez à lire.

Méthode 1. Créer une mise en page de grille de publication WordPress avec l’éditeur/éditrices de blocs

Cette méthode vous permet d’afficher simplement vos publications et vos miniatures dans une disposition de grille de publication à l’aide de l’éditeur de blocs de WordPress. Il existe un bloc de grille de publication intégré qui vous permet de créer votre propre grille.

Pour ce faire, ouvrez la page que vous souhaitez modifier, cliquez sur le bouton d’ajout de bloc « Plus » et recherchez « Boucle de requête », puis cliquez sur le bloc pour l’ajouter.

Ce bloc ajoute votre boucle de publication à votre page.

Cliquez ensuite sur l’option « Commencer à blanc » en haut du bloc pour créer une grille de publication.

Vous avez ainsi le choix entre plusieurs options en fonction du type d’informations que vous souhaitez afficher dans votre grille de publication.

Nous allons sélectionner l’option « Image, date et titre », mais vous pouvez choisir ce que vous voulez.

Survolez ensuite l’image et sélectionnez l’option « Vue en grille ».

Cela transforme votre liste en une grille de publication.

Ensuite, vous pouvez personnaliser les informations que vous souhaitez afficher.

Tout d’abord, nous allons supprimer la pagination au bas du bloc. Pour ce faire, il suffit de cliquer dessus, puis de cliquer sur le menu d’options  » Trois points « .

Cliquez ensuite sur « Retirer la pagination ».

Cette opération retire automatiquement l’élément du bloc.

Vous pouvez supprimer les dates des publications de la même manière ou laisser plus d’informations sur les publications pour vos internautes.

Nous allons ensuite ajouter des liens vers la miniature et le titre de la publication.

Il vous suffit de cliquer sur la miniature de votre publication et d’activer le permutateur « Link to Post » dans le panneau d’options de droite.

Ensuite, faites la même chose pour le titre de votre publication.

Une fois que vous avez terminé, cliquez sur le bouton « Mettre à jour » ou « Publier » pour mettre votre grille de publication en direct.

Maintenant, vous pouvez visiter votre site WordPress pour voir votre nouvelle grille de publication WordPress.

Vous pouvez ajouter ce bloc à n’importe quelle page ou publication. Si vous souhaitez l’utiliser comme page d’archive de votre blog, vous pouvez consulter notre guide sur la création d’une page séparée pour les publications de blog dans WordPress.

Méthode 2. Créer une Mise en Page WordPress avec le Plugin Post Grid

Cette méthode offre un moyen simple d’ajouter une grille de publication personnalisable que vous pouvez ajouter n’importe où sur votre site.

La première chose à faire est d’installer et d’activer l’extension Post Grid. Pour plus de détails, consultez notre guide sur l’installation d’une extension WordPress.

Une fois activé, vous devez vous rendre sur Grille d’affichage  » Ajouter nouvelle pour créer votre première grille d’affichage.

Ensuite, donnez un titre à votre grille de publication. Celui-ci n’apparaîtra nulle part sur votre page, c’est juste pour vous aider à vous en souvenir.

En dessous, vous trouverez les Réglages de la grille de publication divisés en différentes sections avec plusieurs onglets.

Tout d’abord, vous devez cliquer sur l’onglet « Requête de publication ». C’est ici que vous définirez les types de publication que vous souhaitez afficher dans le champ « Types de publication ».

Par défaut, il affiche uniquement les publications, mais vous pouvez ajouter des pages et même des types de publications personnalisés.

Ensuite, vous devez cliquer sur l’onglet « Mises en page ».

Cliquez ensuite sur le bouton « Créer une mise en page ». Une nouvelle fenêtre s’ouvrira.

Vous devez donner un nom à votre mise en page. Ensuite, cliquez sur l’option  » Général « , et une liste d’identifiants s’ouvrira.

Ces identifiants sont les informations qui s’afficheront dans la grille de votre publication.

Nous allons sélectionner l’option « miniature avec lien » et l’option « titre de la publication avec lien ».

Cliquez ensuite sur « Publier » ou « Mettre à jour » pour enregistrer votre mise en page.

Revenez maintenant à l’éditeur de grille de publication original dans l’onglet précédent, et il y aura une nouvelle option de mise en page disponible que vous pouvez sélectionner.

Il suffit de cliquer sur la nouvelle mise en page dans la section « Mises en page des articles » au bas de l’écran.

Cliquez ensuite sur l’onglet « Style d’article ». Ici, vous pouvez définir la taille de votre grille.

Les réglages par défaut devraient fonctionner pour la plupart des sites, mais si ce n’est pas le cas, vous pouvez les modifier ici.

Une fois que vous avez terminé, cliquez sur le bouton « Publier » en haut de la page, et votre grille sera prête à être ajoutée à votre blog WordPress.

Vous devez maintenant cliquer sur l’onglet  » Shortcode « , puis copier le code court dans le champ  » Post Grid Shortcode « .

Ensuite, ouvrez la page où vous souhaitez afficher votre liste de publications et cliquez sur le bouton d’ajout de bloc « Plus ».

Ensuite, recherchez « Shortcode » et sélectionnez le bloc « Shortcode ».

Ensuite, collez le code court que vous avez copié plus tôt dans la boîte.

Cliquez ensuite sur le bouton « Mettre à jour » ou « Publier ».

Maintenant, vous pouvez voir votre page pour voir la mise en page de votre grille de publication WordPress en direct.

Méthode 3. Créer une Mise en Page de la Grille des Articles de WordPress avec le Constructeur de Page SeedProd Plugin

Une autre façon de créer une mise en page de grille de post est d’utiliser l’extension de constructeur de page SeedProd. C’est le meilleur constructeur de page WordPress drag and drop du marché utilisé par plus d’un million de sites.

SeedProd vous aide à créer facilement des pages personnalisées et même des thèmes WordPress complètement personnalisés sans écrire le moindre code. Vous pouvez utiliser l’extension pour créer n’importe quel type de page que vous voulez, comme les pages 404, les pages coming soon, les pages d’atterrissage, et plus encore.

Pour en savoir plus, consultez notre guide sur la façon de créer une page personnalisée dans WordPress.

Dans le constructeur de SeedProd, lorsque vous personnalisez votre page, cliquez simplement sur le bouton plus « Ajouter une section » n’importe où sur la page.

Une option permettant d’ajouter un nouveau bloc apparaît.

Ensuite, faites glisser le bloc « Posts » sur votre page, et il ajoutera automatiquement une liste de publications à votre page.

Vous pouvez maintenant personnaliser ce bloc à l’aide du panneau d’options situé à gauche.

Tout d’abord, défilez vers le bas jusqu’à la section « Mise en page ». Vous pouvez y définir le nombre de colonnes de votre grille de publication en avant du blog et permuter les options  » Afficher l’image de mise en avant  » et  » Afficher le titre « .

Ensuite, défilez vers le bas jusqu’aux permutations « Afficher l’extrait » et « Afficher la suite » et inactivez-les pour créer une grille de publication de blog simple.

Si vous souhaitez personnaliser le jeu de couleurs, le texte, etc., cliquez sur l’onglet « Avancé » en haut de la colonne de gauche.

Cliquez ensuite sur le menu déroulant « Texte » et apportez vos modifications.

Vous pouvez continuer à personnaliser la disposition de la grille de vos pages et de vos publications de blog autant que vous le souhaitez.

Une fois que vous avez terminé, cliquez sur le bouton « Enregistrer » et sélectionnez le menu déroulant « Publier » en haut de la page pour mettre en œuvre vos modifications.

Vous pouvez maintenant voir votre nouvelle grille de publication sur votre site.

Méthode 4. Créer une Mise en page de Grille d’Articles WordPress en Ajoutant du Code à WordPress

Cette méthode nécessite quelques connaissances de base sur l’ajout de code dans WordPress. Si vous n’avez jamais fait cela auparavant, consultez notre guide sur la façon de copier et coller du code dans WordPress.

Avant d’ajouter du code, vous devez créer une nouvelle taille d’image que vous utiliserez pour votre grille de publication. Pour en savoir plus, consultez notre guide sur la création de tailles d’images supplémentaires dans WordPress.

Ajouté à cela, vous devrez trouver le bon fichier de thème WordPress où vous ajouterez l’extrait de code. Par exemple, vous pouvez l’ajouter à votre single.php, afin qu’il apparaisse au bas de toutes vos publications.

Vous pouvez également créer un modèle de page personnalisé et l’utiliser pour afficher la disposition en grille de vos publications de blog avec des miniatures.

Pour en savoir plus, consultez notre aide-mémoire sur la hiérarchie des fichiers modèles WordPress pour vous aider à trouver le bon fichier de modèle de thème.

Une fois que vous avez fait cela, vous pouvez commencer à ajouter du code à WordPress. Comme l’extrait de code est assez long, nous allons le décomposer section par section.

Tout d’abord, ajoutez l’extrait de code suivant au fichier du modèle de votre thème.

<?php
$counter = 1; //start counter
 
$grids = 2; //Grids per row
 
global $query_string; //Need this to make pagination work
 
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');
 
if(have_posts()) :  while(have_posts()) :  the_post();
?>

Cet extrait de code configure la requête de la boucle de publication. Vous pouvez modifier la variable ‘posts_per_page’ pour afficher plus de publications par page si vous le souhaitez.

Ensuite, ajoutez l’extrait de code suivant au fichier du modèle de votre thème.

<?php
//Show the left hand side column
if($counter == 1) :
?>
            <div class="griditemleft">
                <div class="postimage">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                </div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
            </div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
                <div class="postimage">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                </div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
            </div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>

Cet extrait de code crée deux colonnes pour nos publications et affiche le titre et l’image de la publication. Il crée également une classe CSS que nous afficherons ultérieurement.

Il fait également référence à « postimage », vous devrez donc modifier ce nom pour qu’il corresponde à la taille de l’image que vous avez créée précédemment.

Ensuite, ajoutez l’extrait de code suivant à la fin.

<?php
$counter++;
endwhile;
//Post Navigation code goes here
endif;
?>

Cet extrait de code permet simplement de fermer la boucle. Il donne également l’option d’ajouter la navigation dans les publications, mais la plupart des propriétaires de sites utilisent une extension différente pour cela, nous ne l’avons donc pas incluse pour éviter les conflits de code.

Voici à quoi ressemble l’extrait de code final.

<div id="gridcontainer">
<?php
$counter = 1; //start counter
 
$grids = 2; //Grids per row
 
global $query_string; //Need this to make pagination work
 
 
/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');
 
 
if(have_posts()) :  while(have_posts()) :  the_post(); 
?>
<?php
//Show the left hand side column
if($counter == 1) :
?>
            <div class="griditemleft">
                <div class="postimage">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                </div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
            </div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
                <div class="postimage">
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
                </div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
            </div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>
</div>

Vous devez maintenant ajouter le CSS suivant à votre site pour vous assurer que votre grille de publication s’affiche correctement.

Si vous ne l’avez pas encore fait, consultez notre guide sur la façon d’ajouter facilement des CSS personnalisés à votre site WordPress.

#gridcontainer{
     margin: 20px 0; 
     width: 100%; 
}
#gridcontainer h2 a{
     color: #77787a; 
     font-size: 13px;
}
#gridcontainer .griditemleft{
     float: left; 
     width: 278px; 
     margin: 0 40px 40px 0;
}
#gridcontainer .griditemright{
     float: left; 
     width: 278px;
}
#gridcontainer .postimage{
     margin: 0 0 10px 0;
}

Vous pouvez modifier les différents sélecteurs CSS pour voir comment ils modifient les différents éléments de votre boucle de publication.

Nous espérons que cet article vous a aidé à apprendre comment afficher vos publications WordPress dans une disposition en grille. Vous pouvez également consulter notre guide sur la façon de choisir le meilleur logiciel de conception Web et nos choix d’experts du meilleur logiciel de discussion en direct pour les petites entreprises.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.