Les boucles dans WordPress
Comprendre les boucles dans WordPress

Les boucles dans WordPress

Wordpress et snippets
Niveau intermédiaire
5 1 vote
Évaluation de l'article

Les “loops”, ou boucles dans WordPress sont l’un des processus fondamentaux. Que vous utilisiez n’importe quel thème ou constructeur, vous utiliserez forcément une boucle.

C’est grâce à elles que le contenu est affiché dynamiquement sur votre site. Elles vous permettent de récupérer et d’afficher automatiquement du contenu dynamique. Elles sont utilisées pour parcourir une liste d’éléments tels que les articles de blog, les pages, les catégories ou les archives, et les afficher sur votre site.

Comprendre les fondamentaux des boucles dans WordPress

Pour créer une boucle, il faut lui attribuer une structure et des paramètres pour que WordPress sache quelles données il doit vous retourner.

Les composants d’une boucle WordPress :

  • have_posts() : vérifie s’il y a du contenu à afficher. “Si ma requête a du contenu, alors…”
  • the_post() : stocke le contenu et le prépare à être affiché selon les directives de la boucle.
  • the_title(), the_content(), the_excerpt(), the_thumbnail(), etc : affichent l’élément désiré dans la boucle (titre, contenu, extrait, image mise en avant…)

Les paramètres d’une boucle WordPress :

  • Les paramètres d’auteur : permettent d’afficher les articles d’un certain auteur. (voir la documentation)
  • Les paramètres de catégories : permettent d’afficher les articles de certaines catégories. (voir la documentation)
  • Les paramètres de tags : permettent d’afficher les articles ayant certaines étiquettes. (voir la documentation)
  • Les paramètres de taxonomies : permettent de filtrer les types de publications personnalisés en fonction de leurs catégories ou étiquettes. (voir la documentation)
  • Les paramètres de recherches : permettent d’afficher des articles en fonction du terme de recherche. Ce paramètre est utilisé sur la page de recherche de WordPress. (voir la documentation)
  • Les paramètres de posts et de pages : permettent d’afficher du contenu de pages ou d’articles. (voir la documentation)
  • Les paramètres de mots de passe : permettent d’afficher des articles qui ont ou non des mots de passe. (voir la documentation)
  • Les paramètres de status : affichent les articles en fonction de leurs statuts (publié, brouillon, etc.) (voir la documentation)
  • Les paramètres de Custom Post Types : déterminent le type de contenu que vous souhaitez afficher (articles, pages, types de publications personnalisés). (voir la documentation)
  • Les paramètres de commentaires : affichent les articles en fonction du nombre de commentaires. (voir la documentation)
  • Les paramètres de paginations : déterminent le nombre d’éléments à afficher avant d’afficher le numéro de page suivante. (voir la documentation)
  • Les paramètres d’organisation : déterminent comment organiser vos publications, par exemple par classement alphabétique, aléatoire, du plus ancien au plus récent, etc. (voir la documentation)
  • Les paramètres de dates : permettent d’afficher le contenu basé sur une date ou une période. (voir la documentation)
  • Les paramètres de champs personnalisés : affichent les articles d’un champ personnalisé, comme les champs ACF (voir la documentation)
  • Les paramètres de permissions : affichera les posts dont l’utilisateur aura la permission (voir la documentation)
  • Les paramètres mime type : le type MIME est le format des images dans WordPress. Cela affiche donc les articles ou les pages dont l’image mise en avant a un certain format. (voir la documentation).
  • Les paramètres de cache : filtrent l’ajout des données récupérées au cache. (voir la documentation)

Éléments de contenus des boucles dans WordPress

  • the_title() / get_the_title() : affiche le titre de l’article ou de la page
  • the_content() / get_the_content() : affiche le contenu de l’article ou de la page
  • the_permalink() / get_the_permalink() : affiche le lien de l’article ou de la page
  • the_post_thumbnail() / get_the_post_thumbnail() : affiche l’image mise en avant de la page ou de l’article
  • the_excerpt() / get_the_excerpt() : affiche l’extrait de l’article ou de la page

Construction d’une boucle sur WordPress

Voici la structure d’une boucle sur WordPress. Les variables « $args » et « $query » peuvent avoir des noms aléatoires, cependant, si vous utilisez les vôtres, n’oubliez pas de les remplacer partout où c’est nécessaire.

<?php
$args = array(
    /* liste des paramètres */
);

$query = new WP_Query( $args );

if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();?>
         /* ce que l'on veut afficher de notre article ou page */
        <?php
    }
    wp_reset_postdata();
} else {
    echo "Aucun article trouvé.";
}
?>

Explications :

  • Je vais placer tous les paramètres de ma requête dont j’ai besoin dans le tableau
    « $args ».
  • Je crée une variable « $query » qui va stocker les paramètres dans la classe WP_Query.
  • Je vais utiliser la condition « have_posts() » de l’objet « $query » pour m’assurer que la boucle n’est pas vide (qu’il y a bien du contenu qui correspond).
  • Je vais entrer dans la boucle avec un « while ($query->have_posts()) ».
  • « the_post() » est utilisé pour préparer l’article qui sera affiché à chaque fois que la requête sera répétée.
  • À l’intérieur de la boucle, on choisira quel élément on veut faire apparaître en front-end.

Exemples de boucles dans WordPress simples

Appliquons à présent la théorie. Aidez-vous des paramètres que je vous ai indiqués plus haut pour les construire.

Exemple 1 : Afficher tous les articles de la catégorie ayant l’ID 5, classons les par titres de manière ascendante.

Ainsi, pour trouver l’ID de la catégorie ou d’un article, repérez cette donnée en faisant une modification de votre publication, page ou article, puis repérez dans l’URL de votre administration :

https://www.votresite.fr/wp-admin/term.php?taxonomy=category&tag_ID=5&post_type=post
$args = array(
    'post_type' => 'post', // les articles
    'category__in' => array(5), // la catégorie dont l'iD est 5
    'orderby' => 'title', // classés par titres
    'order' => 'ASC', // ordre ascendant
    'posts_per_page' => -1, // Afficher tous les articles
);

$query = new WP_Query($args);

if ($query->have_posts()) { ?>
<ul>
    while ($query->have_posts()) {
        $query->the_post();
        ?>
        <li><h2><?php the_title(); ?></h2></li>
        <?php
    }
    wp_reset_postdata(); ?>
</ul>
<?php } else {
    echo "Aucun article trouvé dans cette catégorie.";
}

Exemple 2 : Je veux afficher une liste des 3 derniers articles rédigés sur le blog. Pour ce faire, je place en paramètre un maximum de 3 articles, en les classant par date dans un ordre descendant.

$args = array(
    'post_type' => 'post', // les articles
    'posts_per_page' => 3, // uniquement 3
    'orderby' => 'date', // classés par date
    'order' => 'DESC', // du plus récent au plus ancien
);

$query = new WP_Query($args);

if ($query->have_posts()) { ?>
<article>
   <?php  while ($query->have_posts()) {
        $query->the_post();
        ?>
        <header>
           <?php the_post_thumbnail('medium'); ?> // on affiche l'image mise en avant en taille medium
        </header>
        <main>
        <h2><?php the_title(); ?></h2> // le titre
        <span><?php the_date(); ?></span> // la date de l'article
        <p><?php the_excerpt(); ?></p> // l'extrait
        </main>
        <footer>
           <a href="<?php the_permalink() ?>">En savoir plus</a> // le lien qui mène à la page de l'article
        </footer>
        <?php
    }
    wp_reset_postdata(); ?>
</article>
<?php } else {
    echo "Aucun article trouvé.";
}

Exemples de boucles avec des customs posts types

Certains thèmes embarquent des articles personnalisés tels que des portfolios.
Les custom post types ont une logique légèrement différente lorsqu’ils sont utilisés.

Pour cet exemple, j’ai créé un custom post type « Films » où je vais les catégoriser par
genres : comédie, drame, horreur.

Comment connaitre l’identifiant de notre post type ?

Pour trouver l’identifiant du post type, effectuez une modification de votre post type, puis repérez dans l’URL de votre administration le paramètre « post_type= ».

https://www.votresite.fr/wp-admin/term.php?taxonomy=genre&tag_ID=5&post_type=films

Comment connaitre l’identifiant de notre taxonomie de post type ?

Une taxonomie correspond à des catégories ou étiquettes d’un post type.

Pour trouver l’identifiant du post type, il vous suffit d’effectuer une modification de votre post type. Ensuite, repérez dans l’URL de votre administration le paramètre « taxonomy= ».

https://www.votresite.fr/wp-admin/term.php?taxonomy=genre&tag_ID=5&post_type=films

Comment créer une boucle d’un post type ?

Inspirons-nous de notre exemple 1 vu dans le chapitre précédent et adaptons-le pour les custom post types. Je veux lister tous les films ayant pour genre « comédie ».

$args = array(
    'post_type' => 'film', // Remplacez 'films' par le slug de votre Custom Post Type
    'tax_query' => array(
        array(
            'taxonomy' => 'genre', // Remplacez 'genre' par le slug de votre taxonomie
            'field' => 'slug', // c'est l'identifiant de la taxonomie
            'terms' => 'comedie', // Remplacez 'comedie' par le terme de taxonomie souhaité
        ),
    ),
    'posts_per_page' => -1, // Afficher tous les films correspondants
);

$query = new WP_Query($args);

if ($query->have_posts()) {
    echo '<ul>';
    while ($query->have_posts()) {
        $query->the_post();
        ?>
        <li><?php the_title(); ?></li>
        <?php
    }
    echo '</ul>';
    wp_reset_postdata();
} else {
    echo "Aucun film trouvé dans cette catégorie.";
}

Explications :

  • Dans les arguments, on va venir indiquer que l’on veut nos films.
  • Contrairement à une boucle simple, pour les custom post types, on place les catégories dans un tableau « tax_query ».
  • On y indique vers quelle taxonomie il doit se tourner.
  • S’il doit rechercher un slug (identifiant de page) ou un ID.
  • On indique le terme (si on a paramétré un slug) ou l’ID (si on a paramétré un ID).
  • Le reste des éléments est commun à une boucle normale.

Si vous souhaitez retourner plusieurs genres, vous devrez utiliser un tableau.
Voici les arguments modifiés : 

$args = array(
    'post_type' => 'film', 
    'tax_query' => array(
        array(
            'taxonomy' => 'genre', 
            'field' => 'slug', 
            'terms' => array('comedie', 'horreur'), // on retourne 2 types de films
        ),
    ),
    'posts_per_page' => -1,
);

Utiliser les boucles dans WordPress de manière plus poussées :

Les relations OR / AND :

Dans cet exemple, j’ai créé un custom post type « Tutoriels » dans lequel j’ai des tutoriels CSS, HTML et différents niveaux : Débutants, Avancés. Je veux ressortir les articles qui sont pour les débutants ET qui sont des tutoriels CSS et HTML.

$args = array(
    'post_type' => 'tutoriels', 
    'tax_query' => array(
        'relation' => 'AND',// On place la relation ET
        array( // On fait notre filtre pour la taxonomie "niveaux"
            'taxonomy' => 'nivaux', 
            'field' => 'slug',
            'terms' => 'debutants',
        ),
        array( // On fait notre filtre pour la taxonomie "types"
            'taxonomy' => 'types',
            'field' => 'slug',
            'terms' => array('css', 'html'),
        ),
    ),
    'posts_per_page' => -1,
);

$query = new WP_Query($args);

if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        ?>
        <h2><?php the_title(); ?></h2>
        <p><?php the_content(); ?></p>
        <?php
    }
    wp_reset_postdata();
} else {
    echo "Aucun CPT trouvé.";
}

Explications :

  • On retrouve les bases d’une boucle pour custom post type.
  • On place « AND » afin de déterminer que l’on souhaite que notre requête prenne en compte les deux taxonomies qui suivent.
  • On crée la requête pour chaque taxonomie (niveaux et types).

Si on avait utilisé OR, WordPress m’aurait affiché les articles qui appartiennent soit à CSS ou HTML avec différents niveaux, soit des articles débutants comprenant d’autres types que HTML ou CSS.

Les comparaisons

Les comparaisons WordPress utilisent les champs personnalisés. Je vous renvoie à la documentation sur les paramètres des champs personnalisés

« LIKE / NOT LIKE » :

On ressort les champs qui ont une valeur commune. Par exemple, si ma valeur est « Pain », il me ressortira « Pain aux céréales », « Pain complet », mais ne me ressortira pas « Couronnes » ou « Baguettes ». « NOT LIKE » va exclure les valeurs qui ont une valeur commune.

$args = array(
    'post_type'      => 'boulangerie',
    'post_status'    => 'publish',
    'posts_per_page' => -1,
    'meta_query'     => array(
        array(
            'key'     => 'types_produits',
            'value'   => 'Pain',
            'compare' => 'LIKE',
        ),
    ),
);

« IN » / « NOT IN » :

Cette requête ressortira les produits qui auront le champ personnalisé « robes courtes » et « robes longues ». « NOT IN » les exclura.

<?php
$args = array(
    'post_type'      => 'product',
    'post_status'    => 'publish',
    'posts_per_page' => -1,
    'meta_query' => array(
        array(
			    'key' => 'robes',
			    'value' => array('courtes','longues'),
			    'compare' => 'IN'
		    )
    ),
); ?>

« BETWEEN » / « NOT BETWEEN » :

On va ressortir des articles qui ont une valeur comprise entre deux autres.
Par exemple, on peut afficher des produits WooCommerce compris entre 10 et 30 €.

<?php
$args = array(
    'post_type'      => 'product',
    'post_status'    => 'publish',
    'posts_per_page' => -1,
    'meta_query'     => array(
        'relation' => 'AND',
        array(
            'key'     => '_price', // le champs ersonnalisé prix
            'value'   => array(10, 30), // valeur 10 à 30
            'type'    => 'numeric', // type de valeur : chiffres / numérique
            'compare' => 'BETWEEN', // comparaison
        ),
    ),
); ?>

Utiliser des données dynamiques dans nos boucles dans WordPress

Nous pouvons encore aller plus loin dans nos boucles en utilisant des données dynamiques.
Par exemple, dans mon article, je veux afficher 3 articles aléatoires qui appartiennent à la même catégorie que l’article affiché.

<?php
$current_post_id = get_the_ID();
$taxonomy = get_post_taxonomies( $current_post_id );
$term_list = wp_get_post_terms( $current_post_id, $taxonomy[0], array( 'fields' => 'ids' ) );

$args = array(
    'post_type' => get_post_type( $current_post_id ),
    'posts_per_page' => 3,
    'tax_query' => array(
        array(
            'taxonomy' => $taxonomy[0],
            'field' => 'term_id',
            'terms' => $term_list
        )
    ),
    'post__not_in' => array( $current_post_id ) // Exclure le post actuel
);

$related_posts = new WP_Query( $args );

if ( $related_posts->have_posts() ) {
    while ( $related_posts->have_posts() ) {
        $related_posts->the_post();
        ?>
        <h2><?php the_title(); ?></h2>
        <?php
    }
    wp_reset_postdata();
} else {
    echo 'Aucun résultat trouvé.';
}
?>

Explications

  • Je récupère l’ID de mon article avec « $current_post_id ».
  • À partir de l’ID, je récupère le nom de la taxonomie de l’article en cours dans ma variable « $taxonomy ».
  • Je récupère la liste des termes de mon article en prenant en compte leurs IDs dans ma variable « $term_list ».
  • Je récupère le type de posts de mon article à partir de son ID.
  • Il me suffit de placer ces valeurs génériques dans la boucle que nous avons déjà utilisée.

En utilisant des variables basées sur les caractéristiques de votre article affiché, vous automatisez vos valeurs dans votre boucle.

Conclusion

J’espère que ce tutoriel sur les boucles de WordPress vous a permis de comprendre leur fonctionnement. Comprendre le fonctionnement des boucles, c’est comprendre une grande partie du fonctionnement de WordPress. Vous pourrez facilement personnaliser vos thèmes.

Vous souhaitez un site internet sur mesure ?

Créez un site internet sur mesure, conforme RGPD, sécurisé, optimisé pour votre référencement

Demander un site internet sur mesure