La boucle WordPress

WordPress utilise une boucle pour afficher le contenu d'une page Web, que ce soit une liste d'articles ou encore un article spécifique. Cette boucle devra absolument être présente dans le fichier index.php du thème utilisé ou de son parent. Elle pourra également être présente dans différents fichiers modèles spécialisés pour afficher par exemple les articles d'une catégorie ou les articles archivés.

Dans cet article, je vous présente le fonctionnement de la boucle WordPress et je vous explique comment vous pouvez la modifier dans votre thème enfant.

▼Publicité

La boucle WordPress prendra la forme suivante :

WordPress (PHP)

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

    ...

<?php endwhile; ?>

Dans la boucle, on écrira ce qui doit être affiché pour le ou les articles demandés. On affichera généralement le titre et le contenu de l'article grâce aux fonctions the_title() et the_content(). Certains thèmes préfèrent aficher un extrait de l'article à l'aide de the_exerpt(). On pourra également ajouter d'autres informations comme la date de publication (the_date() ou get_the_date()), les mots-clés (the_tags()), la catégorie (the_catogory()), l'URL de l'article (the_permalink()), etc. Différentes balises HTML pourront entourer les informations affichées par ces fonctions.

Plutôt que d'utiliser ces fonctions directement dans la boucle WordPress, il est possible de faire appel à un fichier modèle partiel (en anglais : template part) pour spécifier les informations à afficher. L'appel au fichier modèle partiel sera réalisé à l'aide de la fonction get_template_part().

Vous avez dit the_post() ?

Si l'instruction « while (have_posts() ) » peut se passer d'explications, il en va autrement de l'appel à la fonction the_post(). En fait, cette fonction n'afficher rien. Elle s'occupe plutôt d'initialiser des variables qui contiendront de l'information sur le prochain article à traiter. 

Autrement dit, l'instruction « while ( have_posts() ) : the_post(); » chargera en mémoire soit les informations du seul article à charger, soit les informations sur le prochain article lorsqu'une liste d'articles doit être affichée.

Les informations ainsi chargées en mémoire seront utilisées par les différentes fonctions qui affichent de l'information sur l'article en cours comme the_ID(), the_title(), the_content(), the_exerpt(), the_date(), get_the_date(), the_tags(), the_category(), the_permalink(), etc.

Notez que dans la documentation WordPress, l'article en cours est souvent désigné comme « current loop post » ou « current post ».

Pour connaître quel est l'article en cours, the_post() analysera l'URL ainsi que de ses pointeurs internes. Ainsi, avec l'URL « http://mondomaine.com/category/PHP/ », WordPress saura qu'il doit afficher la liste des articles de la catégorie PHP. Ses pointeurs internes lui indiqueront quel article il est rendu à traiter. Et avec l'URL « http://mondomaine.com/un-article/ », WordPress saura qu'il faut afficher seulement l'article nommé « Un article ».

get_template_part()

Le fonctionnement de get_template_part() n'est pas très intuitif non plus. Son but est de retrouver un fichier modèle partiel contenant le code PHP et les balises HTML qui afficheront les informations souhaitées.

Ses paramètres permettent de déterminer le nom du fichier modèle partiel à utiliser.

Prenons par exemple, l'instruction suivante :

PHP

get_template_part( 'template-parts/content', get_post_format() );

Commençons par le dernier paramètre : get_post_format(). Cette fonction donne de l'information sur le format de l'article en cours.

Par défaut, get_post_format() retournera false et sera ignoré par get_template_part().

Par contre, si un format a été attribué à un article, get_post_format() retournera une chaîne représentant ce format. Par exemple, dans l'écran d'édition d'un article, on peut choisir le format « En passant ». Il s'agit de la traduction pour « aside ». La chaîne retournée par get_post_format() sera alors « aside ».

Ainsi, pour un article dont le format est « aside », l'instruction de l'exemple précédent recherchera un fichier modèle partiel nommé template-parts/content-aside.php. Si ce fichier n'existe pas, il recherchera alors un modèle nommé template-parts/content.php.

La boucle WordPress : un exemple vaut mille mots

Pour bien comprendre les possibilités qu'offre la boucle WordPress, voici différentes formes qu'elle peut prendre.

Nous allons étudier la boucle WordPress présente dans le fichier index.php du thème Twenty Sixteen, livré avec WordPress. 

WordPress (PHP)

<?php if ( have_posts() ) : ?>

 

    ...

 

    <?php

    // Start the loop.

    while ( have_posts() ) : the_post();

 

        /*

         * Include the Post-Format-specific template for the content.

         * If you want to override this in a child theme, then include a file

         * called content-___.php (where ___ is the Post Format name) and that will be used instead.

         */

        get_template_part( 'template-parts/content', get_post_format() );

 

    // End the loop.

    endwhile;

 

    ...

 

// If no content, include the "No posts found" template.

else :

    get_template_part( 'template-parts/content', 'none' );

 

endif;

?>

Le code du fichier modèle partiel template-parts/content.php est le suivant :

WordPress (PHP)

<?php

/**

 * The template part for displaying content

 *

 * @package WordPress

 * @subpackage Twenty_Sixteen

 * @since Twenty Sixteen 1.0

 */

?>

 

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <header class="entry-header">

        <?php if ( is_sticky() && is_home() && ! is_paged() ) : ?>

            <span class="sticky-post"><?php _e( 'Featured', 'twentysixteen' ); ?></span>

        <?php endif; ?>

 

        <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>

    </header><!-- .entry-header -->

 

    ...

 

    <div class="entry-content">

        <?php

            /* translators: %s: Name of current post */

            the_content( sprintf(

                __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),

                get_the_title()

            ) );

 

            ...

 

        ?>

    </div><!-- .entry-content -->

 

    ...

 

</article><!-- #post-## -->

Sur la page d'accueil qui liste les derniers articles, le contenu de la boucle ressemblera à ceci :

Boucle WordPress sur la page d'accueil de Twenty Sixteen

Par défaut, Twenty Sixteen contient un fichier modèle spécialisé pour afficher un seul article. Si ce fichier est supprimé, c'est le fichier index.php, avec sa boucle WordPress, qui se chargera d'afficher un seul article.

Le résultat ressemblera à ceci :

Boucle WordPress affichant un seul article de Twenty Sixteen

On voit que malgré le fait que la même boucle WordPress ait été exécutée, le résultat est différent. Il y a bien sûr le nombre d'articles affichés qui diffère, mais également la présence ou non de l'avatar de l'auteur, le lien vers les commentaires ainsi que l'arrêt ou non de l'affichage à la balise <!--more-->. Certaines différences sont gérées automatiquement par les fonctions telles the_content(). Pour d'autres, ce sont les instructions placées à l'intérieur de la boucle WordPress (ici, dans le fichier modèle partiel) qui gèrent ces différences.

Personnaliser la boucle WordPress

Si vous souhaitez modifier les informations et les balises affichées par la boucle WordPress, la technique utilisée dépendra de la façon dont la boucle est remplie dans le fichier modèle du thème parent.

Dans le meilleur des cas, la boucle fera appel à get_template_part() pour définir le code PHP et les balises HTML à utiliser. À ce moment, vous devrez retrouver le chemin et le nom du fichier modèle appelé par get_gemplate_part() et en créer une copie dans votre thème enfant. Par exemple, si get_template_part() fait appel au fichier modèle wp-content/themes/twentysixteen/template-parts/content.php, vous devrez créer dans votre thème enfant le sous-dossier wp-content/themes/monthemeenfant/template-parts ainsi qu'un fichier content.php dans ce sous-dossier.

Dans le cas où la boucle ne fait pas appel à get_template_part(), il faudra plutôt créer une copie de ce fichier dans le thème enfant. Par exemple, pour personnaliser la boucle WordPress contenue dans le fichier wp-content/themes/monthemeparent/index.php, vous devrez créer une copie de ce fichier dans le dossier wp-content/themes/monthemeenfant.

Peu importe l'approche utilisée, voici un exemple tout simple de personnalisation de la boucle WordPress :

WordPress (PHP)

<?php

// Dans le cas d'un fichier modèle partiel, on aura directement le code ici. 

// S'il s'agit plutôt d'un fichier contenant la boucle, on aura le while ( have_posts() ) : the_post();

// et possiblement d'autres instructions.

?>

<article class="post">

    <h1 class="post_title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php _e('Permanent Link to', 'mon-domaine-de-localisation'); the_title_attribute(); ?>"><?php the_title(); ?></a></h1> 

    <div class="post_author"><?php _e('Author', 'mon-domaine-de-localisation'); ?><?php the_author_posts_link(); ?></div>

    <div class="post_date"><?php echo get_the_date(); ?></div>

    <div class="post_category"><?php _e('Category', 'mon-domaine-de-localisation'); ?><?php the_category(); ?></div>

    <?php // on aurait aussi pu afficher d'autres informations ici, par exemple la première image de l'article. ?>

    <div class="post_content"><?php the_content(); ?></div>

</article>

<?php // S'il s'agit d'un fichier contenant la boucle, on aura le endwhile; ici. ?>

Pour plus d'information

« fr:La Boucle ». Codex WordPres. https://codex.wordpress.org/fr:La_Boucle

« A Comprehensive Beginners Guide to the WordPress Loop ». treehouse blog. http://blog.teamtreehouse.com/wordpress-loop-beginners-guide

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories