Dans ce tutoriel, je vais étudier la boucle et la façon dont WordPress l’utilise pour afficher vos articles et vos pages. Gardez à l’esprit que ce tutoriel est un peu plus avancé que les précédents. J’espère que vous trouverez ce guide ultime plus facile à comprendre que ce qui est disponible dans la documentation de WordPress. Voici ce que nous allons voir :
- Une définition de la boucle.
- Le flux de base de la Boucle.
- Les modèles de balises utilisés dans la Boucle
- Que faire après la boucle?
- Hiérarchie des fichiers modèles
Si vous voulez mieux comprendre le fonctionnement d’un thème WordPress, lisez la suite.
Note : Ce tutoriel suppose que vous utilisez un thème WordPress standard, comme le thème par défaut Kubrick. Il n’y a pas de boucles multiples avancées… pour l’instant.
Qu’est-ce que la boucle ?
Vous vous demandez probablement encore ce qu’est la Boucle. En gros, c’est ce qui affiche le contenu que vous voyez sur votre page d’accueil, vos articles individuels, vos pages, vos archives, vos résultats de recherche et bien plus encore.
Si un utilisateur accède à votre page d’accueil, à vos archives ou à vos résultats de recherche, la boucle affichera par défaut un certain nombre d’articles, défini dans vos options de lecture.
Actuellement, ma page d’accueil affiche 10 articles par page, ce qui correspond à ce que j’ai défini Afficher au plus * articles. Pour les articles et les pages uniques, le même code de base de la boucle n’affichera que la page en question.
Flux de base de la boucle
Décomposons la boucle en 3 parties.
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post() ; ?>
1. Ce que vous voulez afficher dans la boucle
<?php endwhile ; ?>
2. Ce qui est affiché à la fin de la boucle
<?php else : ?>
3. S’il n’y a rien à afficher
<?php endif ; ?>
S’il y a des articles disponibles dans la requête, il commencera à les afficher dans une boucle while, ce qui est défini dans la partie 1. A la fin du while, il affichera ce qui est défini dans la partie 2. Si aucun message n’est trouvé, ou s’il y a une erreur 404, la partie 3 est affichée.
Balises de modèle utilisées dans la boucle
À moins que vous ne souhaitiez que 1. Ce que vous voulez afficher dans la boucle est répété 10 fois sur la page d’accueil de votre blog WordPress, vous devriez probablement apprendre quelques unes des balises de gabarit de base. Jetons un coup d’œil au code de index.php dans le modèle WordPress par défaut.
Comme vous pouvez le voir, il y a un certain nombre de balises de modèle dans la boucle qui produiront des éléments tels que le titre de l’article, le permalien, le contenu, etc. Je vais détailler chacune des balises de modèle dans le thème par défaut de WordPress.
- <?php the_permalink() ?> – Ceci affichera le permalien de l’article, c’est-à-dire http://www.themelab.com/?p=1
- <?php the_title() ; ?> – Ceci renvoie le titre de l’article, par exemple Hello World !
- <?php the_time(‘F jS, Y’) ?> – Ceci affichera la date, c’est-à-dire le 4 avril 2008. Une liste complète des façons de formater la date peut être trouvée sur php.net.
- <?php the_author() ?> – Ceci affichera le nom de l’auteur, c’est-à-dire Leland. Ceci est commenté dans le thème par défaut.
- <?php the_tags(‘Tags : ‘, ‘, ‘, ‘<br />’) ; ?> – Ceci affichera les tags assignés à l’article, séparés par des virgules et suivis d’un saut de ligne.
- <?php the_category(‘, ‘) ?> – Ceci affichera les catégories de la même manière que les balises ci-dessus.
- <?php edit_post_link(‘Edit’, ”, ‘ | ‘) ; ?> – Le lien d’édition de l’article ne sera visible que par les personnes autorisées.
- <?php comments_popup_link(‘No Comments “‘, ‘1 Comment “‘, ‘% Comments “‘) ; ?> – Affiche le lien vers les commentaires. Ce lien ne sera pas affiché sur les articles ou les pages uniques.
Il y en a beaucoup d’autres listées sur la page Template Tags sur WordPress.org. Certaines d’entre elles peuvent fonctionner dans la boucle, d’autres non.
Après la boucle
Jetons un coup d’œil au code après la fin de la boucle dans le thème par défaut.
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« ; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries »') ?></div>
</div>
Comme vous l’avez deviné, ceci affichera la pagination que vous voyez sur la page d’accueil, les archives et les résultats de recherche. Elle ne sera pas affichée sur les articles et les pages. Bien sûr, vous pouvez remplacer cela par quelque chose comme PageNavi, mais c’est à vous de voir.
S’il n’y a pas d’articles à afficher (peut-être à cause d’une erreur 404), ce qui suit sera affiché après le else
<h2 class="center">Non trouvé</h2>
<p class="center">Désolé, mais vous cherchez quelque chose qui n'est pas ici.</p>
<?php include (TEMPLATEPATH . "/searchform.php") ; ?>
Cela affichera le message ” Not Found ” en même temps que le formulaire de recherche. Dans ce cas, le code du formulaire de recherche doit se trouver dans un fichier appelé searchform.php dans le répertoire des modèles, ce qui est le cas dans le thème par défaut.
Hiérarchie des modèles
Certains fichiers de modèle auront la priorité sur le fichier index.php pour certains types de pages s’ils sont présents dans le répertoire des modèles. Voici quelques exemples de hiérarchie des modèles, classés par ordre de priorité.
Page d’accueil
- home.php
- index.php
Message unique
- simple.php
- index.php
Résultats de la recherche
- search.php
- index.php
Page 404
- 404.php
- index.php
Il y a quelques techniques plus avancées listées sur la page Template Hierarchy sur WordPress.org.
Quel est donc l’intérêt de la hiérarchie des modèles ? Fondamentalement, vous pouvez l’utiliser pour créer de nouvelles mises en page pour différents types de pages WordPress sans trop modifier votre fichier index.php.
Conclusion
Nous espérons que vous avez maintenant une meilleure idée de ce qu’est la boucle WordPress. N’hésitez pas à laisser un commentaire si vous avez aimé, détesté, n’avez pas compris, ou quoi que ce soit d’autre – tous les retours sont les bienvenus. Abonnez-vous au flux pour obtenir toutes les dernières mises à jour sur les sorties de thèmes et les nouveaux tutoriels de Theme Lab. Merci pour votre lecture.
[…] subscribe to our feed! You can also receive updates from this blog via email.We all know what the WordPress Loop is right? If not, there are many great tutorials around the web that explain the WordPress […]
Really useful guide, I will try at once.
@Fernando: Thanks for letting me know…
It’s a very nice guide and I’ve translate it to spanish here in order to share it with no english spoken folks 🙂
Thank you 😉
[…] The Ultimate Guide to the WordPress Loop: The Loop happens to be very challenging. This link will help you through it. […]
[…] One great area to start is learning how the WordPress loop works. This is a basic function of blogging used to display the most recent X number of posts on your blog’s homepage (for traditional blogs). Rather than go into to much detail here, I’d like to point you towards a new post by Themelab which is designed to be the Utlimate Guide to the WordPress loop. […]
[…] two recent articles, I have have found helpful are: The Ultimate Guide to the WordPress Loop and another called Global Variables and the WordPress […]
@RSS Filter: That’s possible…but I’ll save that for a future tutorial.
[…] teach you everything you need to know about the WordPress Loop. What it is, how to use it, and more.read more | digg story Share and Enjoy: These icons link to social bookmarking sites where readers can […]
So how would you tell the loop to display only the last post in a static home page or index file?
Awesome guide about an important aspect of WordPress theme development. Thanks!
[…] The Ultimate Guide to the WordPress Loop […]
[…] The Ultimate Guide to the WordPress Loop (tags: wordpress) […]
[…] propaganda press on April 6th, 2008 ok much like combolombo we just discovered a new site with an awesome article on the wordpress loopy. you definitely want to read and bookmark this one. Tagged with: wordpress « African […]
[…] Ultimate guide to the WordPress Loop… Get the skinny on all the globals and what […]
[…] The Ultimate Guide to the WordPress Loop | Theme Lab (tags: wordpress howto php guide programming theme blog) […]
[…] Guide to the WordPress loop […]
[…] The Ultimate Guide to the WordPress Loop – Theme Lab […]
[…] The Ultimate Guide to the WordPress Loop (tags: loop wordpress) […]
Oh man this is a keeper. I could have seriously used this when trying to figure out some plugin tweaks.
They kept saying, “place this code outside the loop”
And now I know what the !#$%^% a loops is 🙂
[…] is a guide to the WordPress Loop. Especially useful for beginning WordPress theme creators and wordpress developers. Share and […]
Hey Leland, OT, but congrats on your subscriber boost !
– Sean Pollock
very helpful guide.. thanks!
[…] The Ultimate Guide to the WordPress Loop – This site really breaks down the Loop for you to understand. […]
[…] WordPress. Go ahead, subscribe to our feed! You can also receive updates from this blog via email.The Ultimate Guide to the WordPress Loop: Ah, the famed WordPress loop that runs it all. Ronald has done a very nice job of identifying […]