La boucle WordPress expliquée : qu'est-ce que c'est et comment ça marche

La boucle est un élément central de WordPress. Sans cela, vous ne verriez pas de contenu sur aucun site Web WordPress. Il est chargé de s'assurer que les articles apparaissent sur la page du blog et dans les archives ainsi que le contenu statique sur les pages individuelles.

Si vous êtes un concepteur de thème, vous n'apprendrez pas à l'utiliser. Cependant, en tant qu'utilisateur occasionnel de WordPress, vous ne savez peut-être même pas qu'il existe.

Afin d'atténuer cela, dans cet article, nous expliquerons en détail la boucle WordPress. Nous verrons ce que c'est et comment cela fonctionne, et où le trouver dans WordPress. Vous apprendrez également à créer le vôtre et à voir quelques exemples de la boucle WordPress pour consolider votre compréhension de celui-ci.

Qu'est-ce que la boucle WordPress (et où la trouvez-vous) ?

Si vous deviez expliquer brièvement ce qu'est la boucle WordPress, il s'agit simplement du balisage qui récupère et affiche le contenu des pages d'un site Web WordPress. Qu'il s'agisse d'une page statique, d'un article, d'une page de blog ou d'une archive - partout où WordPress extrait le contenu de la base de données et l'affiche sur une page, la boucle est impliquée.

Cependant, pourquoi s'appelle-t-il boucle en premier lieu?

Parce qu'il fonctionnera à plusieurs reprises. De plus, comme vous le verrez ci-dessous, il consiste littéralement en une boucle PHP.

À quelle fréquence la boucle WordPress s'exécute-t-elle ?

Jusqu'à ce qu'il n'y ait plus rien à afficher. Même sur les pages statiques, il parcourt en boucle le contenu disponible. Cependant, dans ce cas, il s'arrête après un passage.

À quoi ressemble la boucle WordPress ?

Pour mieux comprendre ce dont nous parlons, regardons un exemple et passons en revue étape par étape. Voici un exemple de ce à quoi ressemble une simple boucle WordPress :

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

Si vous connaissez déjà PHP ou êtes un développeur WordPress, vous ne devriez avoir aucun problème à le comprendre. Cependant, pour tout le monde, passons en revue les pièces une par une.

• if ( have_posts() ) : — Il s'agit d'une instruction if qui utilise la fonction have_posts(). Si les instructions sont courantes en programmation, elles disent simplement "si la condition suivante s'applique, continuez". Dans ce cas, la condition est have_posts() , qui est simplement une vérification pour savoir s'il existe des messages qui pourraient être affichés.
• while ( have_posts() ) : — Cette ligne est une boucle while et marque le début de la boucle WordPress. Il exécutera le code qu'il contient tant que sa condition est vraie. Encore une fois, la condition est de savoir si WordPress a des publications en magasin. La fréquence à laquelle il retournera true est déterminée par le nombre de messages définis dans les paramètres WordPress de l'interface d'administration.
• the_post(); — C'est le code que la boucle exécute. C'est une fonction WordPress qui appelle toutes les données disponibles pour le prochain article et les enregistre pour les préparer à l'affichage. Pour cela, nous avons beaucoup de balises de modèles dont nous parlerons ci-dessous.
• // Display content here — C'est ici que nous plaçons le balisage qui détermine quelle partie du contenu afficher et de quelle manière. C'est généralement un mélange de PHP et de HTML. Nous ne le montrons pas ici car c'est plus complexe et nous y reviendrons plus tard.
• endwhile; — Le morceau de code qui ferme la boucle while après avoir fait ce dont nous avons besoin.
• endif; — Comme ci-dessus mais pour l'instruction if .

Donc, fondamentalement, la structure est la suivante : vérifiez si des publications existent, puis extrayez les données nécessaires de la base de données et affichez-les de manière prédéterminée, répétez cette opération tant qu'il y a des publications valides à afficher.

Syntaxe alternative

Une chose rapide, vous verrez aussi parfois la boucle écrite comme ceci :

 if ( have_posts() ) { while ( have_posts() ) { the_post(); // Display content here } // end while } // end if

C'est exactement la même chose que l'exemple ci-dessus, juste dans une syntaxe PHP alternative. Lequel vous utilisez dépend vraiment de vous. Par souci de cohérence, nous continuerons avec la première variante.

Où trouver la boucle WordPress ?

Le fait que la boucle soit toujours active chaque fois que du contenu apparaît sur une page indique déjà où trouver la boucle WordPress. Les réponses se trouvent dans chaque fichier de modèle de votre thème qui affiche du contenu.

Alternativement, selon l'architecture de votre thème, il peut également se trouver dans une partie de modèle. Ce sont des fichiers modèles qui contiennent des morceaux de code fréquemment utilisés (comme la boucle). Ils peuvent être extraits dans d'autres fichiers au lieu de réutiliser le même extrait de code à chaque fois.

Par exemple, si vous ouvrez le fichier page.php du thème Twenty Twenty-One, vous pouvez voir qu'ici, la boucle est découpée en parties. Bien qu'il commence à l'intérieur du fichier lui-même, la section qui détermine comment générer les données réside dans une partie de modèle appelée content-page.php .

 /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop.

La hiérarchie des modèles WordPress détermine quel fichier le système utilise pour afficher quel type de page et chaque fichier doit contenir soit une boucle, soit une référence à l'endroit où vous pouvez le trouver.

Cela signifie également que la boucle peut sembler différente dans des fichiers individuels, c'est-à-dire sur différentes pages. Par exemple, dans une archive, vous ne souhaiterez peut-être afficher que des extraits d'articles, tandis que sur la page principale du blog, vous souhaiterez peut-être afficher des articles entiers (jusqu'au lien "en savoir plus"). Pour cela, vous avez besoin de différents types de balisage, c'est pourquoi la boucle n'aurait pas la même apparence dans home.php et archive.php .

Comment créer une boucle

Afin de créer une boucle, vous pouvez essentiellement commencer par le code simple que nous avons disséqué ci-dessus. C'est vraiment la boucle standard. La voici à nouveau :

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

La partie délicate est ce que nous avons laissé de côté : la partie qui détermine l'affichage du contenu. Pour cela, comme mentionné, vous utilisez généralement un mélange de HTML et de PHP. Par exemple, voici comment vous diriez à WordPress de cracher le message enveloppé dans une <article> avec une classe et un identifiant personnalisés, le titre comme en-tête h1 , ainsi que l'image et le contenu présentés.

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <?php the_content(); ?> </article> <?php endwhile; endif; ?>

Une chose qui ressort ci-dessus est qu'il y a beaucoup de balises écrites avec des traits de soulignement. Ce sont des balises de modèle WordPress, qui offrent des raccourcis pour appeler des parties communes de contenu. Ici, nous utilisons the_title() pour afficher le titre du message, the_post_thumbnail() pour l'image sélectionnée et the_content() pour le contenu principal. Il y en a beaucoup plus, comme the_excerpt() ou the_category() . Vous pouvez trouver une liste d'options ici.

Une autre chose importante pour la boucle WordPress sont les balises conditionnelles. Vous les voyez beaucoup utilisés dans le balisage lié aux boucles pour afficher quelque chose uniquement sous certaines conditions. Par exemple, il est très courant d'envelopper the_post_thumbnail() dans une instruction conditionnelle pour empêcher WordPress d'essayer de l'afficher sur la page lorsqu'aucune image en vedette n'existe.

 <?php if ( has_post_thumbnail() ): the_post_thumbnail(); endif; ?>

Nous avons plus d'exemples ci-dessous. Pour en savoir plus sur les balises conditionnelles, consultez le WordPress Codex.

Exemples de boucle WordPress

Dans la dernière partie de ce didacticiel, nous passerons en revue quelques exemples d'utilisation de la boucle WordPress.

Le thème vingt vingt et un

Lorsque l'on regarde le thème Twenty Twenty-One, la première chose qui ressort est son utilisation intensive de pièces de modèle. Tous les fichiers de modèle standard comme page.php , single.php et même index.php démarrent la boucle à l'intérieur du fichier mais utilisent ensuite get_template_part pour décharger l'affichage du contenu vers d'autres fichiers. Dans ce cas, il s'agit respectivement de content-page.php , content-single.php et content.php . Voici une version abrégée de single.php à titre d'exemple :

 <?php get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-single' ); // additional code for comments and post navigation endwhile; // End of the loop. get_footer();

Ceci est également visible dans d'autres fichiers. Par exemple, l'en-tête et le pied de page ont également leurs propres parties de modèle. Vous pouvez voir des références à ceux à l'intérieur de la boucle à d'autres endroits. Par exemple, si vous regardez content-single.php , vous pouvez voir un appel à la partie de modèle author-bio.php à la fin.

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> <?php if ( ! is_singular( 'attachment' ) ) : ?> <?php get_template_part( 'template-parts/post/author-bio' ); ?> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> -->

En dehors de cela, c'est relativement standard:

1. Ouvrir un élément HTML <article> avec un identifiant et une classe personnalisés
2. Créez l'élément d'en-tête d'article qui génère le titre enveloppé dans un en-tête h1 et affiche l'image sélectionnée avec une fonction personnalisée pour Twenty Twenty-One
3. Suivez cela avec un élément entry-content contenant la balise de modèle the_content() pour générer un contenu à publication unique
4. Inclure le balisage pour la pagination et le pied de page d'entrée avec une autre fonction Twenty Twenty-One pour afficher les méta-informations de publication
5. Enfin, il y a l'appel susmentionné à la biographie de l'auteur dans sa propre partie de modèle

Le thème par défaut WordPress Twenty Ten

Si vous revenez au tout premier thème par défaut de WordPress, Twenty Ten, et utilisez le référentiel subversion pour consulter les fichiers de la version 1.0, vous pouvez voir comment la gestion des fichiers de boucle et de modèle a évolué au fil du temps. À l'époque, de nombreux fichiers de modèle contenaient leurs propres boucles WordPress complètes au lieu de les sous-traiter à des éléments de modèle réutilisables. Vous pouvez le voir clairement dans le page.php du thème.

 <?php get_header(); ?> <div> <div role="main"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <?php if ( is_front_page() ) { ?> <h2 class="entry-title"><?php the_title(); ?></h2> <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php comments_template( '', true ); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>

La même chose est également visible dans onecolumn-page.php , qui est un fichier qui contrôle un modèle de page personnalisé proposé par le thème. Ce qui est également remarquable, c'est qu'il utilise l'ancien appel à la boucle qui était écrit sur une seule ligne à l'époque.

 <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

Dans les thèmes modernes, vous le voyez le plus souvent étalé sur plusieurs lignes comme vu précédemment pour augmenter la lisibilité du code.

Le thème Twenty Ten a également un fichier loop.php autonome qui est beaucoup trop long pour être inclus ici sans dépasser ma limite de mots. Il est divisé en trois parties qui contrôlent l'affichage de plusieurs types de posts (galerie d'images, posts de la catégorie À part, tous les autres posts). Chacun d'entre eux est ensuite décomposé par des instructions if et else pour tenir compte de différents cas tels que les pages d'archives et de recherche.

 <?php while ( have_posts() ) : the_post(); ?> <?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?> // Lots of code here <?php else : ?> // Lots of code here as well <?php endif; ?> <?php /* How to display posts of the Aside format. The asides category is the old way. */ ?> // Even more code <?php /* How to display all other posts. */ ?> <?php else : ?> // Still more code <?php else : ?> // A bit more markup <?php endif; ?> // And a bit more code <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> <?php endwhile; // End of the loop. Whew. ?>

Le tout contient une logique assez alambiquée c'est pourquoi il ressort plutôt long et compliqué. Je suis heureux que nous ayons d'autres moyens de les gérer aujourd'hui et je vous recommande d'y jeter un coup d'œil pour voir un exemple de boucle WordPress que vous ne souhaitez pas imiter.

Soit dit en passant, si vous pensez que je suis trop dur avec les développeurs de l'époque, rassurez-vous, ils sont d'accord avec mon évaluation. Regardez simplement le commentaire du développeur où loop.php ferme la boucle.

 <?php endwhile; // End the loop. Whew. ?>

Le bloc de boucle de requête WordPress

Vous ne le savez peut-être pas car il s'agit d'une fonctionnalité relativement nouvelle de Gutenberg, mais l'éditeur de blocs (et par extension, l'édition complète du site) dispose désormais également d'un bloc contenant une boucle WordPress. C'est ce qu'on appelle le bloc de boucle de requête et vous pouvez l'ajouter à votre site comme n'importe quel autre bloc. Le moyen le plus simple consiste à ajouter une barre oblique et à taper son nom comme /queryloop . Appuyez sur Entrée et il apparaîtra sur la page.

Le bloc permet de créer une boucle PHP sans avoir à écrire de code. Il affichera automatiquement les derniers messages sur votre site. En plus de cela, il dispose de plusieurs options de personnalisation. Tout d'abord, le bloc est livré avec un certain nombre de dispositions prédéfinies. Vous pouvez soit les parcourir via les flèches, soit cliquer sur l'option Grille pour les voir tous en même temps.

Choisissez celui que vous préférez ou cliquez sur Choisir si vous êtes arrivé à votre option préférée pour finaliser le choix. Il est important de noter que les mises en page consistent en des motifs de blocs, donc des groupes pré-arrangés de blocs simples. Cela signifie également que vous pouvez les organiser différemment selon vos besoins, ce sont toujours des blocs normaux. Utilisez les flèches ou cliquez et maintenez l'option Glisser pour les déplacer où vous le souhaitez.

De plus, chaque bloc (et souvent chaque groupe de blocs) est également livré avec ses options habituelles dans l'écran principal de l'éditeur et dans la barre latérale. Ici, vous pouvez modifier leurs couleurs, tailles de police, formats, etc.

Une fois satisfait, si vous publiez ou prévisualisez la page, vous verrez votre boucle de requête WordPress personnalisée apparaître dessus. Ainsi, même si vous n'êtes pas un développeur WordPress et que vous ne comprenez pas PHP, vous pouvez toujours profiter de ce que la boucle a à offrir.

La boucle WordPress expliquée en quelques mots

La boucle est quelque chose que tout professionnel de WordPress doit connaître. Cependant, même si vous êtes un utilisateur plus occasionnel, ce n'est toujours pas une mauvaise idée de comprendre comment cela fonctionne. Cela peut faciliter la résolution des problèmes ou la création de modèles de page personnalisés si vous le souhaitez.

Dans cet article, nous avons expliqué ce qu'est la boucle, où elle réside et l'avons décomposée en détail. Nous avons également examiné comment vous pouvez créer votre propre boucle et des exemples à partir de thèmes par défaut et du nouveau bloc de requête. À présent, vous savez tout ce dont vous avez besoin pour créer et personnaliser la boucle WordPress.

Quelle est votre utilisation préférée de la boucle WordPress ? S'il vous plaît partagez vos pensées dans les commentaires ci-dessous!

Images : Jonny Gios/Unsplash, Tine Ivanic/Unsplash