La boucle est l’un des piliers qui constituent le CMS WordPress puisque le contenu d’un site sous WordPress dépend de la construction de celle-ci. Appelée également « the loop », elle est utilisée pour afficher le contenu des pages et articles du site.
La boucle WordPress est présente dans la plupart des templates qui constituent notre thème, puisque c’est grâce à elle qu’il est possible d’afficher dynamiquement le contenu récupéré dans la base de données. Elle est personnalisable, ce qui nous permet d’afficher ce que l’on souhaite à des endroits bien précis dans notre thème.
Nous allons observer la construction sur différents templates afin de comprendre plus facilement le fonctionnement de la boucle.
La structure de la boucle
Une boucle WordPress est composée en trois parties :
Partie 1 : <?php if (have_posts()) : ?> Partie 2 : <?php while (have_posts()) : the_post(); ?> Partie 3 : <?php endwhile; else : ?> <?php endif; ?>
Ces lignes de code vont vérifier s’il y a des articles à afficher. Si des articles sont disponibles, la boucle WordPress va passer à la deuxième partie qui la compose. Si il n’y a pas d’article, la boucle WordPress va passer à la troisième partie. La partie 2 est la plus importante puisque c’est ici que nous allons récupérer les informations de notre site dynamiquement. J’entends par là les articles ou les pages. Nous allons voir dans la suite de l’article différents types de boucles afin d’illustrer l’importance et la nécessité de les utiliser.
Une boucle WordPress classique
Dans ce template, le but est d’afficher une liste d’articles avec plus ou moins d’informations. Ici, nous allons en récupérer trois : le titre, le permalien et l’extrait de l’article.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- Partie 2 -->
<article id="post-<?php the_ID();?>">
<h2 class="title">
<a href="<?php echo get_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<div class="extrait">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; else : ?>
<article class="post">
<p>Sorry, no post were found in this category.</p>
<p><a href="<?php bloginfo('url'); ?>">Return in the homepage</a></p>
</article>
<?php endif; ?>
Nous aurions pu compléter notre boucle pour récupérer l’image à la une de l’article avec la ligne suivante :
<?php the_post_thumbnail(); ?>
Dans un second temps, nous aurions pu récupérer la date et les catégories de nos articles :
<div class="meta">
<p>Publié le : <?php echo get_the_date(); ?> dans <?php the_category(', '); ?></p>
</div>
La structure de notre boucle provient du fichier category.php et va permettre d’exécuter la boucle autant de fois qu’il y a d’article à afficher. Dans ce cas, nous remarquons l’importance de la partie 2 de notre boucle, puisque c’est grâce à elle que les informations sont récupérées dynamiquement. La partie 2 constitue le noyau de la boucle et permet d’effectuer plusieurs actions avec un code minimal.
Une boucle WordPress personnalisée
Une boucle WordPress personnalisée fonctionne sur le même principe que la boucle WordPress classique, cependant nous allons renseigner des éléments supplémentaires afin d’influencer les résultats de notre requête.
Pour cet exemple, nous récupèrerons grâce à une boucle WordPress des informations sur une page précise.
Il existe beaucoup de paramètres pour les boucles WordPress . Nous utilisons la plupart du temps ceux-ci :
- ‘post_parent’ => ID
- ‘post_type’ => ‘page’
- ‘post__in’ => array(ID)
- ‘showposts’ => XX
- ‘orderby’ => ‘menu_order’
- ‘order’ => ‘ASC’ (ou DESC)
Il faut utiliser les bons paramètres en fonction de ce que vous voulez obtenir. Dans notre cas, nous utiliserons une simple boucle avec deux paramètres.
<?php
$custom_query = new WP_Query(array(
'post__in'=>array(29),
'post_type'=>'page',
));
?>
Ensuite, vous devez modifier votre structure de base. Retrouvez cette ligne :
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
Et remplacez-la par :
<?php if ($custom_query->have_posts()) : while ($custom_query->have_posts()) : $custom_query->the_post();?>
Ce qui au final, permet d’obtenir une boucle un peu plus complexe dans son écriture. Mais le principe et le fonctionnement restent les mêmes.
<?php if ($custom_query->have_posts()) : while ($custom_query->have_posts()) : $custom_query->the_post();?>
<a href="<?php echo get_permalink($custom_query->post->ID); ?>" id="post-<?php the_ID();?>">
<figure class="thumb">
<?php if(has_post_thumbnail($custom_query->post->ID)) {
echo get_the_post_thumbnail($custom_query->post->ID,'');
} ?>
</figure>
<span class="informations">
<h2><?php echo get_the_title($custom_query->post->ID); ?></h2>
<span class="excerpt"><?php echo get_the_excerpt(); ?></span>
</span>
</a>
<?php
endwhile; endif;
wp_reset_postdata();
?>
Il est très important après une boucle personnalisée d’ajouter la ligne suivante :
wp_reset_postdata();
Utilisez cette fonction pour restaurer le post-id de la boucle principale lorsque l’on utilise une seconde boucle dans un même template. Il ne faut surtout pas oublier de le faire !
Grâce aux boucles WordPress, vous pouvez personnaliser votre site en récupérant dynamiquement les informations dans la base de données et les afficher où vous voulez. Il est vraiment facile de personnaliser votre boucle, il suffit de modifier l’exemple indiqué précédemment en changeant les paramètres afin d’obtenir ce que vous voulez pour votre projet. Je vous conseille de lire la documentation officielle de WordPress sur les wp_query (les boucles), elle est vraiment complète et très bien construite.