Comment créer une page de blog avec Gutenberg (basé sur le thème Gutenberry)

A partir de ce tutoriel, vous trouverez tout ce dont vous avez besoin pour créer une page de blog avec l'éditeur Gutenberg et le thème GutenBerry.

Créer une page de blog avec Gutenberg

Une page Blog est une page où vos visiteurs voient toutes les publications existantes sur votre site web. C'est une page dynamique, c'est-à-dire qu'elle affiche les publications ajoutées sur votre site des plus récentes aux premières, en les triant par date.

Il est important de savoir que pour le moment vous pouvez concevoir la façon dont les publications sont affichées, cependant, l'extrait de la publication, l'image en vedette, la méta et le titre de la publication seront extraits de la publication.

Vous devez vous assurer qu'il y a des publications sur votre site et que vous avez défini au préalable l'image vedette et toutes les informations que vous souhaitez présenter sur la page Blog dans la liste des articles.

Pour créer une page Blog sur votre site Web, vous devez aller dans Pages > Ajouter de nouvelles, et c'est parti !
Tout d'abord, vous devez choisir le nom de votre page. Nous l'appellerons « Ma première page de blog », mais le nom de votre page doit être une petite introduction.

Vous pouvez remplir la page avec le bloc Gutenberg Posts classique. Cependant, si vous souhaitez gagner du temps et obtenir plus de paramètres supplémentaires pour personnaliser votre page de blog, vous pouvez utiliser le plugin ZeGuten. Il dispose de 5 mises en page de publications réactives pour rendre votre page plus attrayante et engageante.

Création d'une page de blog basée sur Gutenberry

Une fois que vous avez créé une page de blog, vous pouvez accéder à Tableau de bord > Paramètres > Lecture et localiser ici la liste déroulante de la page Articles. Spécifiez la page que vous venez de créer et cliquez sur le bouton Enregistrer les modifications.

Félicitations! Vous avez maintenant affecté la page nouvellement créée en tant que page de blog. Cependant, il existe encore de nombreuses façons de le personnaliser et de le rendre unique.

Ouvrez la page Blog nouvellement créée dans Customizer et accédez à l'onglet Paramètres du blog, puis accédez à l'onglet Blog pour voir ce que vous pouvez faire.

Par défaut, très probablement, vous verrez toutes les publications de votre site affichées sous forme de liste. Pour changer la façon dont les publications sont affichées, utilisez :

Type de blog de mise en page - ici, vous pouvez choisir une mise en page dans la liste déroulante pour que vos publications soient affichées sous forme de grille.

Colonnes - lorsque vous avez défini une disposition de grille pour votre blog, vous verrez la liste déroulante pour choisir le nombre de colonnes dans lesquelles les articles seront affichés.

Il existe également des paramètres qui vous aideront à décider quelles métadonnées pour les publications que vous souhaitez présenter : auteur de la publication, date de publication, catégories, balises, nombre de commentaires, etc.

La dernière case à cocher vous permet d'activer l'affichage de l'extrait des articles.

Activez le bouton Afficher la suite pour permettre aux visiteurs de cliquer dessus et d'accéder à la page de publication unique.

Vous devrez également définir le type d'étiquette Collant pour marquer vos messages comme collants s'il y en a.

Activer la navigation pour la page du blog

Lorsque vous avez beaucoup de messages sur votre site (oui, vous êtes un blogueur, bien sûr que vous les avez), vous savez à quel point le visiteur peut se sentir mal à l'aise lorsqu'il doit faire défiler la page vers le bas tout en recherchant un message particulier que vous avez publié il y a quelque temps.

Pour faciliter le processus, vous pouvez ajouter un type de navigation à la page Blog. Il peut s'agir d'une option permettant de passer de page en page, ou de flèches de navigation.

Pendant que vous êtes dans Customizer, vous pouvez modifier le type de navigation à utiliser pour la page Blog dans la liste déroulante Type de navigation.

Ici, vous pouvez choisir la pagination ou la navigation.

Si vous ne voyez aucun élément de pagination, cela signifie que vous devez toujours définir le nombre de publications à afficher par page.

Allez dans Tableau de bord > Paramètres > Lecture et définissez la valeur maximale des pages de blog (elle doit être inférieure au nombre de publications que vous avez pour que vous puissiez voir l'option de pagination).

Dans la plupart des cas, cela suffira pour créer une page de blog. Cependant, si vous souhaitez créer une page statique avec une liste de publications dynamique, vous pouvez le faire dans Gutenberg. Continuez à lire pour savoir comment.

Création d'une page de blog statique avec du contenu dynamique à l'aide de Gutenberg

Encore une fois, vous devez créer une nouvelle page. Et maintenant, nous commençons.

Ajoutons le bloc Publications au canevas de la page ! Cliquez simplement sur l'icône « + » visible à gauche du texte « Commencer à écrire ou taper / pour choisir un bloc ». Choisissez le bloc appelé « Messages » - vous pouvez le localiser dans la catégorie des blocs ZeGuten.

Vous pouvez maintenant voir que le bloc Publications affiche les publications que vous avez sur votre site en utilisant les paramètres par défaut. Ajustons-les un peu pour de meilleurs résultats.

Soit dit en passant, vous pouvez facilement utiliser les raccourcis pour Gutenberg pour accélérer votre travail. Si vous ne savez pas comment utiliser les raccourcis clavier, n'hésitez pas à lire ce guide.

Paramètres de blocage des publications. Paramétrer la mise en page des posts dans Gutenberg

Établissons tous les paramètres nécessaires pour travailler avec la conception de la mise en page des articles et le contenu que vous souhaitez extraire de vos articles pour l'afficher dans le blog. Heureusement, dans l'éditeur Gutenberg, vous pouvez faire tout ce dont vous avez besoin en utilisant le bloc Posts. Cela ne prendra pas plus de quelques minutes.

Bloc de messages : options de mise en page

Localisez la barre des paramètres de blocage à droite du canevas de la page. Si vous ne le voyez pas, cela signifie que vous l'avez déjà fermé. Pour le récupérer, cliquez sur l'icône en forme de roue dentée dans le coin supérieur droit. Cliquez ensuite sur le bloc Publications sur le canevas pour le rendre actif et accéder à ses paramètres.

Le bloc Messages permet de choisir parmi 3 options de mise en page différentes :

• Liste des messages – c'est une mise en page claire où les messages sont organisés un par un dans une colonne ;
• Grille des publications – une mise en page où vous pouvez afficher les publications sur plusieurs colonnes et lignes, définissant la grille pour présenter les publications ;
• Liste des messages inégaux - utilisez cette disposition pour organiser les messages dans l'ordre des échecs. Ici, vous aurez une colonne et les messages sont affichés un par un sous forme de liste avec les lignes paires montrant l'image en vedette sur la gauche et inégale l'affichant sur la droite.

Ouvrez les paramètres de publication ci-dessous pour choisir les publications que vous souhaitez extraire à l'aide de ce bloc.

Ici, vous pouvez définir :

• Catégorie – la catégorie à partir de laquelle vous souhaitez afficher les publications.
• Nombre d'articles – limitez les publications à un certain nombre et n'en affichez pas plus qu'un certain nombre. Le maximum est de 100 publications, mais vous pouvez certainement utiliser les paramètres Lire la suite pour raccourcir le bloc.
• Colonnes - utilisez cette bascule pour définir le nombre de colonnes pour votre disposition de grille. Le nombre maximum de colonnes est de 6.
• Sélectionnez la balise de titre - ici, vous pouvez définir la balise html à utiliser pour le titre (H1 - H6). Assurez-vous que votre titre est correctement défini afin de figurer plus haut dans les résultats de recherche.
• Trier par – cette option permet de classer les publications de la plus ancienne à la plus récente, de la plus récente à la plus ancienne, et d'utiliser l'ordre alphabétique pour définir un ordre.

Il existe également des options pour :

• afficher l'image en vedette - vous devez vous assurer que vous avez défini des images en vedette dans vos publications afin de les voir;
• afficher la date de publication – une option pour afficher la date à laquelle la publication a été publiée ;
• afficher la catégorie de publication - cela permettra au visiteur de voir à quelle catégorie la publication est liée ;
• afficher l'extrait du message - activez cette option pour présenter un extrait de votre message (il peut s'agir d'un extrait personnalisé ou d'un extrait généré à partir de votre contenu), vous pourrez également définir la longueur du contenu de l'extrait en réduisant le nombre de mots ;
• afficher l'auteur de la publication - activez cette option pour afficher qui a écrit cette publication.

Lire plus de paramètres

Tant que vous souhaitez que les visiteurs ouvrent vos publications et passent à la lecture, vous pourrez afficher un lien Lire la suite et personnaliser son affichage, remplacer le texte par défaut par le vôtre, etc.

Vous pourrez également décider si vous souhaitez afficher l'option Lire la suite pour chaque publication sous forme de texte ou de bouton.

Le bloc de messages est bon pour travailler avec des publications dynamiques, mais il ne permet pas encore de profiter de toute la puissance de la requête personnalisée. Pourtant, ce sera un atout inégalé lorsque vous travaillerez avec les pages statiques de votre site de blogs.

Veuillez noter qu'il n'y a pas encore d'options de pagination, donc si vous souhaitez afficher tous vos messages, vous devez définir le nombre de messages au maximum. Vous pouvez également affecter la page nouvellement créée en tant que page de blog principale dans les paramètres, ou vous pouvez conserver les éléments tels qu'ils sont et l'afficher en tant que blog uniquement dans le menu (où vous devez le lier), tout en conservant le blog. page comme archive de vos articles.

L'autre façon d'aborder cette tâche est d'ajouter un lien vers la page d'archive des articles (un vrai Blog que vous avez créé dans la première partie de ce tutoriel) en bas de la liste des articles pour permettre aux visiteurs d'accéder à toutes les publications.

Félicitations! Vous avez créé et conçu votre première page de blog ! Veuillez vous inscrire à notre newsletter pour obtenir encore plus de conseils sur la façon de travailler avec Gutenberg et Gutenberry !