Comment utiliser le bloc de boucle de requête WordPress

L'éditeur WordPress est en train de devenir un constructeur de site à part entière. Grâce à l'édition complète du site et aux nouveaux blocs thématiques comme le bloc Query Loop, vous pouvez facilement afficher des listes de contenu dynamique pour n'importe quel type de publication n'importe où dans WordPress.

Dans cet article, nous approfondirons le bloc de boucle de requête WordPress afin que vous puissiez mieux comprendre ce que c'est et comment l'utiliser.

Qu'est-ce que le bloc de boucle de requête WordPress ?

Le bloc de boucle de requête est l'un des blocs de thème WordPress les plus avancés disponibles dans le nouvel éditeur de site. Il a été ajouté à WordPress Core dans la version 5.8 et est une version plus complexe du Latest Posts Block. Il permet à quiconque de créer visuellement un bloc qui extrait et affiche dynamiquement le contenu de la publication sur une page ou un modèle. Le bloc de boucle de requête ne se limite pas non plus à afficher des articles de blog. Vous pouvez l'utiliser pour extraire le contenu de n'importe quel type de publication personnalisé que vous pourriez avoir. Vous pouvez même l'utiliser avec WooCommerce Blocks pour afficher des produits.

Que sont les "requêtes" et les "boucles" ?

Dans la terminologie WordPress, une « boucle » est un moyen d'afficher des informations similaires à répétition. Une boucle d'articles de blog est donc une série d'articles de blog avec des attributs communs tels que le titre du blog, l'image en vedette, le nom de l'auteur, la date de publication et une courte description. La boucle extrait ces données des publications (ou de tout type de publication) et les place dans une boucle. La boucle affiche ensuite les messages aux visiteurs du site.

L'aspect requête d'une « boucle de requête » signifie qu'un utilisateur peut interroger ou commander certaines informations à extraire dans la boucle. Ainsi, un bloc de boucle de requête peut extraire et afficher tous les messages ou messages de catégories spécifiques, pour ne citer que quelques options. Cela permet à quelqu'un d'afficher des messages dans la "Catégorie A" et aucun message de la catégorie B ou C.

Les blocs de boucle de requête peuvent afficher :

• Billets de blog
• Pages du site Web
• Produits WooCommerce
• Autres types de messages personnalisés

Tous les types de publication sont un jeu équitable pour l'affichage dans une boucle dynamique.

Blocs imbriqués de boucle de requête

Il existe deux « blocs imbriqués » immédiats qui appartiennent au bloc de boucle de requête :

• Bloc de modèle de publication - Contient d'autres blocs imbriqués qui affichent les métadonnées de publication (titre, image en vedette, auteur, etc.)
• Bloc de pagination - Permet aux messages de déborder dans les pages pour en afficher davantage

Nous ne couvrirons pas ces blocs imbriqués dans cet article, mais vous pouvez cliquer sur l'un de leurs hyperliens ci-dessus pour obtenir toutes les informations sur le fonctionnement de chacun dans un bloc de boucle de requête.

Comment ajouter le bloc de boucle de requête à un modèle WordPress d'index

Dans cet exemple, nous utilisons le thème WordPress par défaut « Twenty Twenty-two ». Il s'agissait du premier thème par défaut à inclure l'édition via l'éditeur de site (anciennement appelé « éditeur de site complet »).

Nous verrons comment ajouter un bloc de boucle de requête WordPress à un modèle dans l'éditeur de site. Pour y arriver, passez d'abord la souris sur « Apparences », puis cliquez sur « Éditeur ».

Ensuite, cliquez sur l'icône en haut à gauche pour dérouler le menu déroulant. Dans ce menu, cliquez sur "Modèles".

Maintenant, dans la liste des modèles présentés, recherchez le modèle que vous souhaitez modifier. L'un des modèles les plus naturels pour ce bloc est le modèle "Index", car c'est le modèle qui indexe ou affiche les publications du site Web.

Vous êtes maintenant sur le modèle d'index de Twenty Twenty-two. Vous remarquerez qu'il est déjà livré avec un bloc de boucle de requête configuré. Mais, si vous utilisez un thème de bloc différent, il se peut qu'il ne soit pas fourni avec.

Pour ajouter un nouveau bloc de boucle de requête, cliquez sur l'icône « (+) ». Faites défiler jusqu'aux blocs "Thème" ou tapez "Query Loop" dans la barre de recherche. Faites glisser le bloc Query Loop dans l'éditeur de site.

WordPress a des « modèles » prédéfinis qui peuvent vous donner une longueur d'avance dans la conception de votre boucle de requête. Vous pouvez choisir un modèle spécifique si vous savez qu'il y en a un qui correspond à vos besoins, ou vous pouvez commencer en blanc. Nous allons cliquer sur « Start blank ».

Il existe quatre variantes par défaut à appliquer à une boucle de requête. Pour cet exemple, cliquez sur la variante "Titre et date".

Cela créera la boucle de requête avec la variante "Titre et date".

Remarquez que les blocs imbriqués apparaissent dans le bloc de boucle de requête de WordPress. En effet, ces blocs fournissent les fonctionnalités nécessaires pour la boucle de requête. Puisque nous avons choisi la variante "Titre et date", ces blocs imbriqués doivent être inclus pour afficher les informations "Titre" et "Date". Une variation différente aurait chargé un arrangement différent de blocs imbriqués.

Maintenant qu'un bloc de boucle de requête est sur un modèle, nous allons explorer la barre d'outils et les paramètres de ce bloc de thème avancé.

Barre d'outils et paramètres du bloc de boucle de requête

Chaque bloc de l'éditeur de site et de l'éditeur de blocs possède ses propres options de barre d'outils et une barre latérale de paramètres supplémentaires.

Barre d'outils de bloc de boucle de requête

Pour trouver la barre d'outils du bloc de boucle de requête, il est plus facile d'aller dans la vue de liste et de sélectionner le bloc en s'assurant qu'un bloc imbriqué n'est pas sélectionné.

La première option unique de la barre d'outils pour le bloc de boucle de requête est les "Paramètres d'affichage". En cliquant dessus, trois options s'afficheront :

• Éléments par page – Contrôlez le nombre de messages affichés à la fois dans la boucle
• Décalage - Ignore le point de départ des messages d'un montant défini
• Max Page to Show – Limite le nombre de pages affichées, même si la requête a plus de résultats

Ensuite sur la barre d'outils se trouve le bouton "Remplacer". Cela donne la possibilité de supprimer le modèle du bloc de boucle de requête et de le remplacer par un modèle différent.

La dernière option unique de la barre d'outils pour le bloc de boucle de requête est le basculement entre l'affichage en liste et l'affichage en grille. La vue en liste affiche la boucle de publication "sous forme de liste" avec des publications empilées. La vue grille affiche la boucle de publication sous forme de grille avec davantage une disposition de tableau pour les publications à remplir.

Barre latérale des paramètres du bloc de boucle de requête

Le bloc de boucle de requête a des configurations supplémentaires dans la barre latérale "Plus de paramètres". Pour afficher la barre latérale, cliquez sur l'option "Afficher plus de paramètres" imbriquée dans la barre d'outils ou en cliquant sur l'icône "Engrenage" en haut à droite lorsque le bloc de boucle de requête est sélectionné.

Le premier paramètre de barre latérale visible donne aux propriétaires de sites la possibilité de créer un nouveau message pour la boucle de requête à partir de cette page d'édition. Après cela, il y a le basculement de mise en page qui affecte la façon dont les blocs imbriqués utilisent la largeur de mise en page par rapport au bloc de boucle de requête - plus à ce sujet plus tard. La bascule des paramètres permet de sélectionner une requête personnalisée ou héritée pour le bloc - plus d'informations à ce sujet également ci-dessous.

Options de mise en page

Les paramètres "Mise en page" pour les blocs imbriqués permettent à un concepteur d'activer des paramètres supplémentaires (bleu). Ces paramètres permettent de choisir si ces blocs utilisent des pourcentages de contenu et de largeur. Il révèle également une option pour la justification du contenu à gauche, au centre ou à droite. Lorsqu'il n'est pas activé (gris), les éléments imbriqués sont définis sur toute la largeur par défaut.

Paramètres de requête

Lorsque la requête "Paramètres" est désactivée (gris), vous pouvez sélectionner exactement ce qu'il faut interroger. La première option est "Messages", qui peuvent être des pages, des messages ou des types de messages personnalisés. Ensuite, les utilisateurs peuvent choisir entre l'ordre croissant ou décroissant pour la date de publication ou par ordre alphabétique. Enfin, il existe une option pour inclure ou exclure les publications persistantes dans la requête.

Basculer "Paramètres" (bleu) définit le bloc de boucle de requête pour hériter de la requête du modèle utilisé.

Filtres de requête

Ensuite, avec la requête "Filtres", les utilisateurs ont la possibilité de personnaliser davantage la requête en filtrant les publications par :

• Catégories de publication – Liste de catégories séparées par des virgules
• Balise de publication – liste de balises séparées par des virgules
• Auteur du message – Liste déroulante des auteurs
• Post Keyword - Entrez une liste de mots-clés pour filtrer par

Options de couleur et paramètres avancés

Enfin, nous avons les paramètres de couleur et les paramètres avancés. Les options de couleur permettent aux concepteurs de choisir des couleurs pour :

• Couleur du texte
• Couleur de l'arrière plan
• Couleur du lien

Les paramètres avancés incluent la possibilité d'ajouter une classe CSS au bloc de boucle de requête WordPress et/ou d'attribuer un élément HTML au bloc.

Chaque bloc imbriqué dans le bloc de boucle de requête a ses propres options de barre d'outils et paramètres de barre latérale. Visitez la liste des blocs imbriqués ci-dessus pour en savoir plus sur chacun et les paramètres dont ils disposent.

Conseils et meilleures pratiques pour utiliser le bloc de boucle de requête dans WordPress

Les boucles de requête sont des blocs puissants. Suivez ces conseils et bonnes pratiques pour en tirer le meilleur parti.

Définir des styles globaux pour les boucles de requête et les blocs imbriqués

Les styles globaux peuvent être définis sur une base de type de bloc par type de bloc. Cela permet aux concepteurs de créer des styles globaux par défaut qui s'appliquent à toutes les instances d'un bloc sur l'ensemble du site Web. Cela permet un immense gain de temps.

Actuellement, sur le thème 2022, le bloc de boucle de requête vous permet d'ajouter des styles globaux pour la couleur du texte, l'arrière-plan et les couleurs des liens. Pour accéder à l'éditeur de styles globaux, cliquez sur l'icône "Global Styles" (cercle à moitié rempli), sélectionnez "Blocks" et recherchez le Query Loop Block.

Vous pouvez également attribuer des styles globaux distincts à chacun des blocs de thème imbriqués (comme le modèle de message, le titre du message, etc.) dans une boucle de requête.

Utilisez plusieurs blocs de boucle de requête sur une seule page pour créer une section de blog en vedette

Lors de la création d'un modèle de page de blog, vous souhaiterez peut-être créer une publication en vedette qui se démarque car il s'agit de la publication la plus récente publiée sur votre site. Vous trouverez ci-dessous une version simplifiée du concept.

Il devra y avoir deux blocs de boucle de requête sur notre modèle "Index". Le bloc de boucle de requête supérieur aura un affichage "List View" et n'affichera qu'un seul message. Assurez-vous qu'il n'y a pas de bloc de pagination imbriqué dans cette première boucle de requête.

Avec le deuxième bloc de boucle de requête/en bas, réglez-le sur "Grid View". Il doit afficher plusieurs messages dans des colonnes et définir le "Décalage" sur 1. Un décalage de 1 ignorera le premier message de la requête. Ceci est souhaité puisque la boucle de requête ci-dessus contient la publication en vedette.

Utiliser une conception cohérente pour les boucles de requête affichant les mêmes types de publication

Les boucles de requête utilisées pour les "articles de blog" doivent se ressembler. Si vous utilisez des blocs de boucle de requête pour d'autres types de messages, envisagez un style légèrement différent pour ceux-ci afin que les visiteurs de votre site puissent différencier ce que sont les "messages de blog" et quels sont les autres types de contenu. Cela donnera un site Web clair UX.

Utilisation du module de blog de Divi : une alternative au bloc de boucle de requête avec plus d'options de conception

Si vous utilisez Divi, le module de blog fonctionne un peu comme le bloc de boucle de requête WordPress natif. Et l'ajout du module Blog de Divi à une page ou à un modèle est simple, vous offrant toutes les options dont vous avez besoin pour personnaliser les paramètres, la mise en page et la conception du contenu de la publication dynamique.

Le contenu affiché dans le module Blog est également totalement flexible, vous permettant de sélectionner un certain type de publication, des catégories de type de publication et le nombre de publications à inclure. Des éléments de module individuels peuvent être ajoutés ou supprimés, tels que les images en vedette, les titres, le méta-texte, le corps du texte, lire plus de liens, la pagination, etc.

Chacun de ces éléments de module peut être entièrement stylisé à l'aide des nombreuses options de conception de Divi. En savoir plus sur l'utilisation du module Blog de Divi sur les modèles.

Foire aux questions sur la boucle de requête

Répondre à certaines des questions les plus posées sur le bloc de boucle de requête de WordPress.

Quelle est la différence entre le bloc Query Loop et le bloc Latest Posts ?

Le bloc Query Loop est similaire au bloc Latest Posts en ce sens qu'il a la capacité d'afficher dynamiquement une liste des derniers messages sur votre blog. Cependant, le bloc Query Loop est beaucoup plus avancé, vous permettant de créer votre "liste" de publications, de pages ou d'autres types de publications à partir de zéro en intégrant d'autres blocs imbriqués. Par exemple, si vous avez un type de publication personnalisé pour les recettes, vous pouvez utiliser le bloc de boucle de requête pour créer une page entière de recettes personnalisées à votre goût.

Le bloc de boucle de requête nécessite-t-il des connaissances en codage ?

Non, le bloc WordPress Query Loop ne nécessite pas de connaissances en codage car la fonctionnalité est déjà intégrée. Ce bloc vous permet d'afficher une boucle de messages sur votre site WordPress en utilisant des paramètres de bloc personnalisables sur le front-end.

Où puis-je utiliser le bloc de boucle de requête ?

Le bloc de boucle de requête WordPress parcourt les publications et les pages publiées pour les afficher. Il sera automatiquement mis à jour au fur et à mesure que les nouvelles pages/articles répondent aux paramètres de la requête. Cela rend ce bloc utile dans de nombreux endroits tels que les modèles de publication ou d'archive, ou sur les pages statiques où vous souhaitez afficher dynamiquement des éléments tels que les publications récentes.

Avez-vous utilisé le bloc Query Loop sur votre site WordPress ? Quelles découvertes avez-vous faites ? Faites-le nous savoir dans les commentaires ci-dessous.

Image sélectionnée par Dmitry Kostrov / shutterstock.com