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.
I want to display the link to next and previous post on single post page . Also the anchor text for the link should be the respective post name.
Please tell me how can I do it?
I tried to embed in single.php but not showing post name.
Great, I’m learning to hack the loop, even at RSS-Atom levels and this basics are good for me. Keep rocking guys.
Thank you, thank you, thank you.
I can’t thank you enough. Everyone, including wordpress.org is saying ‘put that code in the Loop’ but NO ONE was saying what the hell is Loop! Except YOU. Great help.
[…] Link do tutorial […]
I’m an IT project manager who, at one time in his life, was a hands-on “techie.” I guess this sort of puts me somewhere in the middle of the spectrum between computer-literate-but-clueless-about-computer-programming and total-geek-who-thinks-and-speaks-in-Cplusplus.
The great thing about WordPress is that it’s simple enough to use that the most clueless computer illiterate can get some sophisitcated features going with ease while someone with even a small amount of techie skills can do a lot of tweaking.
While I’m not a PHP or Java programmer, I DO have training in the C#/VB.NET language and understand loops and programming structures. This small bit of knowledge along with tutorials, such as yours, gives me the ability to tweak with the best computer “geeks.” Your tutorial was very easy to understand (probably because I do have an IT background). I think that even if I didn’t have the IT background, your explanation made it possible (with a little effort) to understand how to use the “loop” and a bit more about the internal plumbing of the WordPress application.
Thanks !!
Jerry Bucknoff, PMP
My WordPress blog is blogs.pmbestpractices.com, another site proudly powered by WordPress.
[…] The Ultimate Guide to the WordPress Loop […]
[…] The ultimate guide to the wordpress loop […]
[…] The Ultimate Guide to the WordPress Loop […]
[…] The Ultimate Guide to the WordPress Loop […]
Very helpful. Thanks!
[…] Read More… […]
Thanks for the post, it really helped. My only suggestion would be to edit your template tags so that they all have the closing semicolon.
I was trying to get it so that I only displayed one category on the main page and I was succussful after reading this post with the exact syntax I need to modify the loop
http://www.nietoperzka.com/wptraining/custom-order-of-posts-on-main-page/
But then I had errors with my other categories and areas of the site but once I read your post and it explained more the page heirarchy I made a seperate home.php for my landing page loop and left everything else the same as original
thanks for this post.
[…] you are having trouble understanding anything we just did, I recommend visiting this tutorial for a better understanding of the […]
Can I modify wordpress loop using a plugin fnction?
you know what, u r simply awesome, i m wondering why didnt I find your site before and why didnt I switch over to wordpress before.
I have also started promoting your website through positive word of mouth here in India.
Recently, I went to a Toastmasters club meeting and told people about how wonderful your site is.
Thanks for your wonderful tips.
[…] The Ultimate Guide to the WordPress Loop | Theme Lab because after all this time, I’m STILL confused […]
One thing I found particularly useful is the category hierarchy:
1. category-6.php
2. category.php
3. archive.php
4. index.php
The first page allows you to have a page for each category. WordPress will use ‘category-6.php’ as the default page for category 6. You can find out the category number in the backend by going to Manage > Categories and then clicking on a category. After clicking on the category look up in the address bar and near the end you will see: &cat_ID=6. That 6 is the category number. ‘category.php’ will be the default template for all categories if there are no individual category templates (like category-6.php) found. Just place these PHP files in the root of your theme folder.
Really useful guide, thanks for sharing!
Thank you! Finally the Loop explanation I’ve been searching all over the web for! Now I get it. Thanks, again 😀
[…] The Ultimate Guide to the WordPress Loop […]
[…] you may not want your search results to be limited by the confines of the standard WordPress Loop. This is a quick code hack to allow a search to return unlimited results, altering the standard […]
[…] 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. […]
[…] The Ultimate Guide to the WordPress Loop | Theme Lab […]
[…] The Ultimate Guide to the WordPress Loop | Theme Lab […]