La boucle WordPress fait partie intégrante de la façon dont votre site WordPress affiche le contenu. Si vous voulez pouvoir personnaliser certaines parties de votre site (ou peut-être vous lancer dans le développement de WordPress), vous devez connaître la boucle WordPress.
Que vous n’ayez jamais entendu parler de la boucle WordPress ou que vous en ayez déjà une certaine connaissance, cet article est là pour vous mettre au courant de tout ce que vous devez savoir sur la boucle WordPress.
Nous vous expliquerons ce que c’est et pourquoi il peut être utile de pouvoir travailler avec la boucle. Ensuite, nous vous montrerons étape par étape comment travailler avec la boucle dans les modèles PHP (pour les thèmes classiques) et avec le bloc Query Loop dans les thèmes plus récents.
Entrons dans le vif du sujet, en commençant par le début….
Qu’est-ce que la boucle WordPress ?
La boucle WordPress est ce que WordPress utilise pour afficher le contenu de votre site. Il s’agit traditionnellement d’un code PHP que vous pouvez personnaliser à l’aide de balises de modèle, bien que les nouveaux thèmes WordPress utilisent le bloc Query Loop au lieu de PHP.
En termes plus techniques, la boucle interroge la base de données de votre site pour récupérer les données de chaque article, puis affiche ces données selon un modèle. Pour contrôler ce modèle, vous pouvez utiliser une variété de balises ou de blocs de modèle, selon que vous utilisiez PHP ou le bloc Query Loop.
Par exemple, disons que vous avez une page qui répertorie les articles les plus récents de votre blog, comme la page principale de votre blog :
- Tout d’abord, la boucle vérifiera s’il existe des articles.
- Si c’est le cas, elle affichera le premier article conformément à votre modèle.
- Ensuite, elle vérifiera si un autre article existe. S’il y a un autre article, le modèle sera à nouveau « bouclé » et le deuxième article sera affiché selon le même modèle.
- Il continuera à « boucler » à travers vos articles jusqu’à ce qu’il n’y ait plus d’articles (ou jusqu’à ce qu’il atteigne une autre limite, comme les règles de pagination).
Voici un exemple frontend de ce à quoi ressemble la boucle sur le blog de Kinsta – chaque case surlignée est une autre itération de la « boucle ». Vous pouvez voir que les six boîtes utilisent le même modèle.
Quand WordPress utilise-t-il la boucle pour afficher du contenu ?
WordPress s’appuie sur la Boucle pour afficher du contenu sur toute page qui répertorie plusieurs éléments de contenu (articles, pages, types de publications personnalisés, etc.)
Voici quelques-unes des principales situations dans lesquelles WordPress utilise la boucle, bien que cette liste ne soit pas exhaustive :
- Page d’accueil du site qui affiche vos articles récents
- Page principale du blog
- Pages de listes de catégories
- Pages de liste d’étiquettes
- Pages de résultats de recherche
- Pages de liste des types de publications personnalisés
Techniquement, WordPress peut aussi utiliser la boucle pour afficher un élément de contenu individuel. Dans ces situations, la « boucle » se termine après avoir interrogé le premier élément.
Cependant, lorsque la plupart des gens pensent à la boucle WordPress, ils pensent qu’elle « boucle » à travers plusieurs éléments pour les afficher dans une sorte de liste.
À quoi peut vous servir la boucle WordPress ?
Apprendre à modifier et à manipuler la boucle WordPress peut vous aider à utiliser WordPress pour créer des sites web plus conviviaux et plus dynamiques.
Voici trois des principales façons dont vous pouvez utiliser la boucle WordPress pour améliorer votre site…
Contrôler l’affichage du contenu de base des articles et des métadonnées
La raison la plus courante pour laquelle vous souhaitez personnaliser la boucle WordPress est de contrôler la mise en page de base du contenu de votre site.
Par exemple, disons que vous voulez contrôler la mise en page de la liste des articles de votre blog. En manipulant la boucle WordPress, vous pourrez contrôler la mise en page d’éléments importants tels que le titre de l’article, son contenu, son auteur, ses métadonnées (par exemple la date de publication), etc.
En utilisant les conditionnelles, vous pouvez aussi créer différentes mises en page pour différents types de contenu. Par exemple, vous pouvez utiliser une mise en page pour lister les articles de la catégorie « Actualités » et une autre mise en page pour lister les articles de la catégorie « Interviews ».
Cela vous permet d’optimiser la conception pour les différents types de contenu sur votre site et de créer une excellente expérience pour vos visiteurs.
Insérer des données de champs personnalisés pour construire des sites plus dynamiques.
Comprendre comment utiliser la boucle WordPress peut aussi vous aider à utiliser WordPress pour construire des types de sites au contenu plus dynamique.
Par exemple, disons que vous voulez créer un site d’annonces immobilières. Dans ce cadre, vous voulez avoir une page qui répertorie des informations sur les maisons qui sont disponibles à la vente via un type de publication personnalisé « Maison » que vous avez créé.
Si vous utilisez simplement le modèle de liste d’articles par défaut fourni avec votre thème, il n’affichera que les informations de base telles que le titre et le contenu – tout comme il affiche vos articles de blog ordinaires.
En modifiant la boucle WordPress pour votre type de publication « Maison » et en ajoutant les balises de modèle appropriées, vous pourriez inclure des informations provenant des champs personnalisés que vous utilisez, comme le nombre de chambres et de salles de bain dans chaque maison, la superficie, etc.
Insérer du contenu autre que des articles dans vos listes d’articles (par exemple des publicités).
Apprendre à utiliser la boucle WordPress peut aussi vous aider à insérer du contenu non dynamique dans les listes de contenu de votre site. Il s’agit de contenu que votre site ne tire pas de la base de données de WordPress.
Par exemple, disons que vous voulez insérer une bannière publicitaire entre chaque article de la liste (ou tout autre type de contenu statique). En modifiant la boucle, vous pourrez facilement injecter vos publicités à n’importe quel endroit de la mise en page.
Deux options pour travailler avec la boucle WordPress
Avec le développement moderne des thèmes WordPress, la façon dont vous interagissez avec la boucle WordPress dépend du type de thème que vous utilisez.
Dans le passé, tous les thèmes WordPress étaient basés sur des modèles PHP, et vous deviez donc travailler avec la boucle en utilisant le PHP dans les fichiers de ces modèles de thèmes. De nos jours, ces types de thèmes sont appelés thèmes WordPress classiques.
La plupart des thèmes WordPress populaires utilisent encore cette approche classique, ce qui signifie que vous utiliserez PHP pour travailler avec la boucle WordPress. Voici quelques exemples de thèmes classiques : Astra, GeneratePress, Kadence, Neve, OceanWP, etc.
Cependant, les nouveaux thèmes de blocs WordPress construits sur l’Éditeur de site n’utilisent plus de fichiers de modèles PHP comme les thèmes classiques, donc vous ne pouvez pas utiliser PHP pour personnaliser la boucle si vous utilisez un thème basé sur des blocs. Au lieu de cela, ces nouveaux thèmes blocs utilisent un bloc spécial « Boucle de requête » pour personnaliser la boucle WordPress.
Vous pouvez peux consulter notre liste des meilleurs thèmes de blocs pour voir quelques exemples de thèmes populaires qui utilisent cette approche.
Ci-dessous, nous vous expliquons comment utiliser les deux approches pour travailler avec la boucle WordPress :
- Si vous utilisez un thème classique, vous utiliserez PHP pour interagir avec la boucle.
- Si vous utilisez un thème de blocs, vous utiliserez la méthode de bloc Query Loop pour interagir avec la boucle.
Si vous n’êtes pas sûr du type de thème que vous utilisez, vous pouvez regarder les options dans le menu Apparence de votre tableau de bord WordPress :
- Si vous voyez d’autres options comme Personnaliser, Widgets et Éditeur de fichiers de thème, c’est que vous utilisez un thème classique.
- Si vous voyez une option Éditeur sans les autres options, cela signifie généralement que vous utilisez un thème de blocs.
Comment utiliser la boucle WordPress avec les thèmes classiques (code)
Si vous utilisez un thème WordPress classique, vous travaillerez avec la boucle WordPress dans les fichiers de modèle PHP de votre thème.
Voici un exemple d’implémentation très basique de la boucle WordPress :
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
endwhile;
else:
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
?>Pour vous aider à comprendre ce que fait ce code, nous allons le diviser en trois sections :
- Ouverture de la boucle
- Utilisation des balises de modèle pour contrôler le contenu à afficher
- Fermeture de la boucle
Ensuite, nous aborderons un sujet un peu plus avancé, à savoir l’utilisation d’instructions conditionnelles pour ajuster la boucle en fonction de différentes situations.
Comment démarrer la boucle WordPress
Pour ouvrir la boucle WordPress, vous disposez de quatre éléments :
<?php– ceci indique à votre serveur web que vous allez utiliser PHP.if ( have_posts() )– ceci indique à votre serveur qu’il doit vérifier si la base de données de votre site contient des articles correspondant à la requête, puis exécuter le code suivant s’il y a des articles. S’il n’y a pas d’articles, vous pouvez utiliser une instruction else pour ajouter un texte de remplacement, dont nous parlerons plus loin.while ( have_posts() )– Ceci indique à votre serveur qu’il doit continuer à tourner en boucle tant qu’il y a des articles à afficher. La limite sera généralement fixée par votre choix dans la zone Réglages → Lecture. Par exemple, si vous configurez votre site pour qu’il affiche jusqu’à 10 articles par page, le serveur continuera à tourner en boucle jusqu’à 10 articles (tant que vous aurez publié au moins 10 articles).the_post();– Ceci indique à votre serveur de récupérer les données de chaque article dans la base de données de votre site. Vous pouvez contrôler l’affichage de ces données à l’aide des balises de modèle, que nous aborderons dans la section suivante.
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();Comment contrôler le contenu de la boucle WordPress
Une fois que vous avez ouvert la boucle WordPress, vous pouvez utiliser les balises de modèle pour contrôler les informations que vous voulez inclure dans chaque article, ainsi que la présentation générale* de ce contenu.
Les balises de modèle que vous utilisez à l’intérieur de la boucle seront répétées pour chaque article affiché.
Voici quelques-unes des balises de modèle les plus courantes que vous pourriez vouloir utiliser :
the_title()the_content()the_excerpt()the_post_thumbnail()the_author()next_post_link()the_ID()the_meta()the_shortlink()the_tags()the_time()previous_post_link()the_category()
Si vous construisez des sites WordPress plus personnalisés, vous pouvez inclure des données provenant de champs personnalisés dans la boucle WordPress. La façon la plus simple de le faire est d’utiliser une extension comme Advanced Custom Fields (ACF), Meta Box ou Pods, qui incluent toutes leur propre fonctionnalité pour les balises de modèle que vous pouvez utiliser dans la boucle WordPress.
Par exemple, examinons la syntaxe d’une boucle simple qui affiche simplement le titre, la miniature de l’image mise en avant et l’extrait de chaque article.
Voici à quoi cela pourrait ressembler :
// first, we need to open the loop as we showed you in the previous section
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// now, we can use template tags to control what information to display for each post
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();Comment fermer la boucle WordPress
Pour fermer la boucle WordPress, vous devez fermer la boucle while, l’instruction if et PHP.
Pour gérer les situations dans lesquelles WordPress n’est pas en mesure de renvoyer des articles, tu peux ajouter une instruction else avant de fermer l’instruction if .
Voici à quoi ressemblerait la fermeture de la boucle pour notre exemple ci-dessus, avec l’ajout de l’instruction else pour couvrir les situations dans lesquelles aucun article ne correspond à la requête.
// first, we need to open the loop as we showed you in the previous section
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// now, we can use template tags to control what information to display for each post
the_title( '<h2>', '</h2>' );
the_post_thumbnail();
the_excerpt();
// once we're finished with the template tags, we can now close the loop
endwhile;
else:
// this tells your site what to do if no posts match the query
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
endif;
?>Utiliser les conditionnelles pour contrôler le comportement dans la boucle WordPress
Une fois que vous avez compris la structure de base de la boucle, vous pouvez commencer à l’utiliser de manière plus avancée.
L’un des meilleurs moyens de commencer est d’utiliser des instructions conditionnelles. Celles-ci vous permettent d’ajuster facilement le comportement de la boucle en fonction des différents types de contenu, comme dans notre exemple précédent où vous pourriez utiliser une mise en page pour lister les articles de la catégorie « Interviews » et une autre pour les articles de la catégorie « Actualités ».
Voici quelques-unes des balises conditionnelles que vous pouvez utiliser :
is_home()is_admin()is_single()is_page()is_page_template()is_category()ouin_category()is_tag()is_author()is_search()is_404()has_excerpt()
Si vous cliquez sur les liens ci-dessus, vous pourrez voir des exemples de code sur la façon dont vous pourriez modifier la boucle WordPress pour différents types de conditionnelles.
Par exemple, voici à quoi cela pourrait ressembler d’appliquer un style différent aux articles de la catégorie dont l’ID est « 3 » en utilisant in_category et en appliquant un <div> différent à ces articles.
<?php
// Start the Loop.
if ( have_posts() ) :
while ( have_posts() ) : the_post();
/* * See if the current post is in category 3.
* If it is, the div is given the CSS class "post-category-three".
* Otherwise, the div is given the CSS class "post".
*/
if ( in_category( 3 ) ) : ?>
<div class="post-category-three">
<?php else : ?>
<div class="post">
<?php endif;
// Display the post's title.
the_title( '<h2>', ';</h2>' );
// Display a link to other posts by this posts author.
printf( __( 'Posted by %s', 'textdomain' ), get_the_author_posts_link() );
// Display the post's content in a div.
?>
<div class="entry">
<?php the_content() ?>
</div>
<?php
// Display a comma separated list of the post's categories.
_e( 'Posted in ', 'textdomain' ); the_category( ', ' );
// closes the first div box with the class of "post" or "post-cat-three"
?>
</div>
<?php
// Stop the Loop, but allow for a "if not posts" situation
endwhile;
else :
/*
* The very first "if" tested to see if there were any posts to
* display. This "else" part tells what do if there weren't any.
*/
_e( 'Sorry, no posts matched your criteria.', 'textdomain' );
// Completely stop the Loop.
endif;
?>Comment utiliser la boucle WordPress dans les thèmes de blocs (Éditeur de site)
Comme nous l’avons mentionné plus haut, les thèmes WordPress basés sur des blocs utilisent l’Éditeur de site pour contrôler les modèles de votre thème plutôt que les fichiers de modèles PHP.
Pour cette raison, vous ne pouvez pas utiliser PHP pour personnaliser la boucle WordPress si vous utilises un thème de blocs. À la place, vous utiliserez le bloc Boucle de requête.
Les principes de base sont cependant les mêmes.
Essentiellement, vous utiliserez le bloc Boucle de requête pour ouvrir la boucle. À l’intérieur du bloc Boucle de requête se trouve un conteneur Modèle d’article et d’autres conteneurs pour la pagination et « Aucun résultat ».
Ensuite, au lieu d’utiliser des balises de modèle comme vous le faîtes en PHP, vous ajouterez des blocs de thème WordPress à l’intérieur du conteneur de modèle d’article pour contrôler la mise en page de chaque élément de la boucle.
Comment ajouter le bloc Boucle de requête
Pour commencer, allez dans l’éditeur de site (Apparence → Éditeur) et créez ou modifiez le modèle correspondant. Vous pouvez aussi ajouter la boucle à un élément de contenu individuel, comme une page unique sur laquelle vous voulez lister des articles.
Dans les deux cas, vous pouvez commencer par ajouter le bloc Boucle de requête. Vous pouvez ensuite choisir d’utiliser l’un des modèles de boucle existants de votre thème en cliquant sur Choisir ou de partir d’un canevas vierge en cliquant sur Commencer à partir d’un canevas vierge.
Pour cet exemple, nous choisirons de commencer à partir d’un canevas vierge.
Vous pouvez ensuite choisir parmi quelques variantes de départ, l’option la plus simple étant d’afficher simplement le titre et le contenu de chaque article.
Une fois que vous avez fait cela, vous pouvez utiliser les réglages dans la colonne latérale du bloc Boucle de requête pour contrôler le contenu que vous voulez inclure dans la boucle (la « requête »).
Par défaut, la boucle énumère les articles ordinaires, mais vous pouvez modifier le type de publication pour énumérer d’autres types de contenu. Vous pouvez également modifier l’ordre et utiliser des filtres pour n’interroger que des éléments de contenu spécifiques, tels que le contenu appartenant à une certaine catégorie, provenant d’un certain auteur, et ainsi de suite.
Comment personnaliser le modèle de la boucle
Maintenant, vous pouvez utiliser les blocs de la section Thème pour personnaliser davantage le modèle de publication à l’intérieur de la boucle de requête. Encore une fois, ces blocs ont la même fonction de base que les balises de modèle dans le code PHP.
Par exemple, si vous souhaitez afficher l’auteur pour chaque contenu, vous pouvez ajouter le bloc Nom de l’auteur à l’endroit où vous voulez que le nom de l’auteur apparaisse.
Vous trouverez également d’autres blocs pour les éléments pertinents, comme l’image mise en avant, la date, les catégories, les étiquettes, etc.
Si vous regardez le schéma, vous pouvez voir que tous ces blocs vont à l’intérieur du groupe Modèle de publication.
Il existe également d’autres groupes pour contrôler la pagination et les situations dans lesquelles la requête ne renvoie aucun résultat.
Conseils pour travailler avec la boucle WordPress
Parce que la boucle fait partie intégrante de WordPress, toute erreur ou faute peut entraîner des problèmes sur ton site. C’est particulièrement vrai si vous travaillez avec des modèles PHP, car les erreurs de syntaxe peuvent déclencher le message « There has been a critical error on your website ».
Pour éviter les problèmes, voici quelques conseils…
Expérimenter et apprendre dans un environnement de développement local
Si c’est la première fois que vous travaillez avec la boucle WordPress, vous voudrez probablement expérimenter et jouer avec différents concepts pour mieux comprendre son fonctionnement.
Pour le faire en toute sécurité, vous pouvez utiliser un environnement de développement WordPress local, qui vous donne un terrain de jeu sûr alimenté par votre ordinateur local.
Pour créer facilement des sites WordPress locaux à des fins de test et d’apprentissage, vous pouvez utiliser l’outil gratuit DevKinsta.
Prenant en charge Windows et Mac, DevKinsta vous permet de créer facilement autant de sites de développement locaux que vous le souhaitez.
Travailler dans un environnement de staging pour les sites en direct
Si vous travaillez sur la boucle WordPress pour un site WordPress en direct, nous vous recommandons vivement de tout faire sur un site de staging avant d’appliquer les changements à votre site WordPress en production.
Si vous hébergez votre site WordPress chez Kinsta, vous pouvez utiliser l’outil de staging intégré à Kinsta pour effectuer toutes votre modifications dans un bac à sable sécurisé.
Une fois que vous avez vérifié que tout fonctionne, vous pouvez facilement transférer les modifications apportées à l’outil de simulation vers la version en ligne de votre site web.
Des plugins pour travailler directement avec la boucle WordPress
Si vous trouvez un peu intimidant de travailler directement avec la Boucle WordPress, il existe plusieurs extensions populaires qui vous donnent d’autres moyens de « boucler » le contenu sans avoir besoin d’utiliser PHP ou le bloc de boucle de requête.
Voici quelques extensions alternatives à la boucle WordPress à prendre en compte, bien que cette liste ne soit en aucun cas exhaustive.
Elementor Pro
Elementor est une extension populaire de construction de pages visuelles par glisser-déposer. Avec Elementor Pro, vous pouvez accéder à des fonctionnalités complètes de construction de thèmes pour concevoir les fichiers de votre modèle de thème à l’aide d’Elementor. En 2022, Elementor a ajouté une fonctionnalité Loop Builder à Elementor Pro, qui vous permet de contrôler et de personnaliser le contenu « bouclé » à l’aide de l’interface visuelle d’Elementor.
Nous avons rédigé un guide complet sur l’utilisation d’Elementor, ainsi que de nombreux autres contenus sur Elementor sur le blog Kinsta.
Bricks
Bricks est un autre constructeur de site visuel populaire pour WordPress. Parmi ses nombreux outils de conception, il comprend son propre constructeur de boucle de requête qui utilise une approche de code simplifiée, ainsi que de nombreuses options supplémentaires dans l’interface graphique.
Nous avons également un guide sur la construction de sites WordPress avec Bricks.
WP Show Posts
WP Show Posts ne vous donne pas autant de flexibilité que les deux extensions précédentes. Cependant, si vous cherchez un moyen facile de lister les articles WordPress dans différents formats, c’est peut-être l’outil le plus simple pour ce travail.
Elle est gratuite et provient du même développeur que le thème populaire GeneratePress. Bien que le développeur n’ajoute plus de nouvelles fonctionnalités à l’extension, il maintient toujours les fonctionnalités existantes de l’extension.
Résumé
Pour améliorer vos compétences en matière de développement WordPress, vous devez comprendre la boucle WordPress. La boucle fait partie intégrante de la façon dont WordPress affiche le contenu ; apprendre à l’utiliser vous permettra de mieux contrôler la façon dont le contenu est affiché sur votre site.
Ceci étant dit, les nouveaux thèmes WordPress ne reposent plus sur des modèles PHP comme les thèmes classiques, donc vous n’aurez peut-être pas besoin d’utiliser PHP pour travailler avec la boucle. Au lieu de cela, si vous adhérez au mouvement des thèmes de blocs, vous utiliserez le bloc Boucle de requête pour obtenir des effets similaires.
Quoi qu’il en soit, apprendre à utiliser la boucle WordPress plus efficacement vous rapportera des bénéfices par la suite.
La boucle WordPress étant un élément fondamental de WordPress, tout problème au niveau de la boucle pourrait endommager votre site. Pour éviter les problèmes, nous vous recommandons d’apprendre sur un site de développement local alimenté par DevKinsta ou d’utiliser les outils de staging offerts par l’hébergement WordPress de Kinsta pour travailler dans un environnement sûr.
Laisser un commentaire