Dans l’article précédent, on a mis en place notre menu de navigation principal. Aujourd’hui on va s’occuper de notre zone de contenu et on va mettre en place la boucle de WordPress, qui est responsable de l’affichage du dit contenu.

Sur notre site actuel, le contenu est codé en dur. Quelle que soit la page sur laquelle on va via notre navigation principale, on tombe sur les même trois articles.

Si on revient dans notre template index.php, on peut voir comment est balisé chaque article.

<main id="primary" class="content-area" role="main">

        <article class="post hentry">
            
            <header class="entry-header">
                <h2 class="entry-title"><a title="Basic text elements" href="" rel="bookmark">Basic Text elements</a></h2>
                <p class="entry-meta">
                    <span class="byline">Posted in <a href="">WordPress</a>, on <a href="">August 9th, 2017</a></span>
                    <a title="Edit this post" href="" class="post-edit-link">
                        <span>Edit this post</span>
                        <span data-icon="ei-pencil"></span>
                    </a>
                </p><!-- .entry-meta -->
            </header><!-- .entry-header -->

            <div class="entry-content">

                <p>This is a standard paragraph created using the* WordPress TinyMCE text editor. It has* a <strong>strong tag</strong>, an <em>em tag</em> and a <del>strikethrough</del> which is actually just the del element. There are a few more inline elements which are not in the WordPress admin but we should check for incase your users get busy with the copy and paste. These include <cite>citations</cite>, <abbr title="abbreviation">abbr</abbr>, bits of <code>code</code> and <var>variables</var>, <q>inline quotations</q>, <ins datetime="2011-12-08T20:19:53+00:00">inserted text</ins>, text that is <s>no longer accurate</s> or something <mark>so important</mark> you might want to mark it. We can also style subscript and superscript characters like C0<sub>2</sub>, here is our 2<sup>nd</sup> example. If they are feeling non-semantic they might even use <b>bold</b>, <i>italic</i>, <big>big</big> or <small>small</small> elements too. Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this 
                <a title="HTML5 Semantics" href="http://csswizardry.com/2011/01/html5-and-text-level-semantics">article by Harry Roberts</a> which gives a nice excuse to test a link.  It is also worth noting in the "kitchen sink" view you can also add <span style="text-decoration: underline;">underline</span> styling and set <span style="color: #ff0000;">text color</span> with pesky inline CSS.</p>
                <p style="text-align: left;">Additionally, WordPress also sets text alignment with inline styles, like this left aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
                <p style="text-align: right;">This is a right aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
                <p style="text-align: justify;">This is a justified paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p>
                <p style="padding-left: 30px;">Finally, you also have the option of an indented paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.</p> <p>And last, and by no means least, users can also apply the <code>Address</code> tag to text like this:</p> <address>123 Example Street,
                Testville,
                West Madeupsburg,
                CSSland,
                1234</address> <p>...so there you have it, all our text elements</p>

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

            <footer class="entry-footer">  
                <span class="tags-links">
                    <span class="screen-reader-text">Tags</span>
                    <span data-icon="ei-tag"></span>
                    <a title="Basic Text Tag archive link" href="">Basic Text</a>, 
                    <a title="Basic Text Tag archive link" href="">Test</a>, 
                    <a title="Basic Text Tag archive link" href="">WordPress</a>
                </span>
            
                <span class="comments-link">
                    <a href="" title="Go to comments">3 Comments</a>
                    <span data-icon="ei-comment"></span>
                </span>
            </footer><!-- .entry-footer -->

        </article>

        
        
        <nav class="navigation posts-navigation" role="navigation">
            <h2 class="screen-reader-text">Posts navigation</h2>
            <div class="nav-links">
                    <div class="nav-previous">
                    <a href="index-older.html" class="next-posts-link button" rel="prev">
                        <span data-icon="ei-arrow-left"></span>
                        <span>Older post</span>
                    </a>
                </div> 
                <!-- <div class="nav-next">
                    <a href="#" class="previous-posts-link button" rel="next">
                        <span>Newer post</span>
                        <span data-icon="ei-arrow-right"></span>
                    </a>
                </div> -->
            </div>  
        </nav>

    </main><!-- #main -->
index.php

D’abord la zone de contenu principale est dans une balise <main>, et chaque article est dans une balise… <article>. Logique et sémantique.

Les classes post et hentry sont des classes utilisées par WordPress, donc je ne me gêne pas et je les utilise dans ma feuille de styles. Puis dans chaque article on a un header, un div avec le contenu et un footer.

Le header contient un titre et un paragraphe avec les métas, le contenu juste des paragraphes de texte, mais il aurait pu contenir des images ou autres, et le footer contient simplement deux <span> avec les étiquettes et le nombre de commentaires.

Le balisage est donc ultra-simple. On va mettre ces articles de côté en commentant le code temporairement, et on va parler de la boucle de WordPress.

La boucle de WordPress, qu’est-ce que c’est ?

La boucle de WordPress est … une boucle responsable de l’affichage les articles / éléments de contenus demandés.

Pour schématiser grossièrement, quand vous cliquez sur un lien, ou entrez l’url de votre site dans la barre d’adresse, WordPress va analyser l’url pour déterminer quel contenu il doit aller chercher, et va fouiller dans notre thème pour trouver le bon template à utiliser pour afficher ce contenu.

On parlera plus en détails des différents templates (ou gabarits ou encore modèles) plus tard. Pour l’instant, on n’a qu’un seul template principal, qui est index.php. Donc WordPress n’a pas trop le choix pour le moment, et utilisera toujours celui-ci, quel que soit le type de contenu demandé.

Mettre en place la boucle

WordPress a le contenu demandé, et sait qu’il doit utiliser index.php. C’est donc index.php qui va dire quoi faire de ce contenu.

Dans notre template, on va donc commencer par vérifier qu’il a bien du contenu à afficher.

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

<?php else : ?>

<?php endif; ?>
index.php

Utiliser la notation avec deux points « : » et un endif; pour clore le bloc plutôt qu’avec des accolades est beaucoup plus simple quand il faut insérer du code HTML entre les lignes de PHP, je trouve. Pour voir si tout fonctionne, on va simplement afficher un message tout simple.

<?php if ( have_posts() ) : ?>
    <p>There is content !!</p>
<?php else : ?>
    <p>Nothing to display</p>
<?php endif; ?>
index.php

Si on visite une page connue, on a le bon message. Si on va sur une page inexistante, on a le message d’erreur.

Créer un thème Repo Ready - La boucle fonctionne
Notre boucle WordPress fonctionne correctement !

Par contre, on ne veut pas juste afficher un message, mais notre contenu. Il faut donc boucler sur tous les contenus demandés pour cette adresse, et les afficher un par un.

<?php if ( have_posts() ) : while ( have_posts() : the_post() ) ?>
    <h2><?php the_title() ?></h2>
<?php endwhile: else : ?>
    <p>Nothing to display</p>
<?php endif; ?>
index.php

La boucle while nous dit : tant qu’il y a des posts (contenus) à afficher ( while( have_posts() ) ), prépare-les ( the_post() ) et affiche le titre de l’article ( the_title() ).

Si on rafraîchit la page et qu’on retourne sur l’accueil pour voir la liste des derniers articles, on peut voir notre article Hello World. On peut aller dans l’admin ajouter un autre article pour tester.

Le blog affiche bien tous les articles, et on peut même aussi visiter une page simple et une page d’article. Tout fonctionne.

Créer un thème Repo Ready - La boucle WordPress
Notre boucle affiche bien les titres des articles.

Personnaliser l’affichage des articles

La boucle est mise en place correctement. Maintenant on peut personnaliser l’affichage de chaque article à proprement parler.

La bonne pratique est de ne pas mettre tout le balisage dans index.php, mais de créer un fichier qui sera responsable de l’affichage de l’article. Ce sera plus facile à maintenir et le fichier pourra être réutilisé plus tard dans d’autres templates. On va donc utiliser une fonction qui s’appelle get_template_part().

<?php if ( have_posts() ) : while ( have_posts() : the_post() ) ?>
   <?php get_template_part( 'template-parts/content' ); ?>
<?php endwhile: else : ?>
    <p>Nothing to display</p>
<?php endif; ?>
index.php

Avec cette fonction, on va chercher un fichier qui s’appelle « content.php » dans le dossier « template-parts/« . La fonction permet d’aller chercher d’abord dans le thème enfant, puis dans le parent, ce qui permet à un thème enfant de surcharger facilement l’affichage de l’article.

On va donc créer ce dossier et ce fichier et on va y copier le balisage utilisé pour un article. Puis on va commencer à remplacer le contenu codé en dur par les template tags de WordPress. Les template tags sont simplement des fonctions permettant d’afficher certains éléments de contenu. On parlera plus en détails des template tags plus tard, ne vous inquiétez pas.

Pour l’instant, on va simplement se contenter de remplir le titre et le contenu en utilisant les fonctions the_title() et the_content().

La fonction the_title prends deux paramètres before et after. Ce sont en fait les balises que l’on veut voir avant et après le titre. Ce qui veut dire qu’au lieu d’écrire <h2><?php the_title(); ?></h2> dans notre template, on peut écrire : the_title('<h2>','</h2>');

On veut que le titre soit cliquable, donc on va lui ajouter une balise <a> et on va chercher le permalien de l’article en utilisant la fonction WordPress get_permalink().

Cela donne : <?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '' ); ?>

Pour ceux qui ont regardé la vidéo, j’ai d’ailleurs oublié dans celle-ci d’utiliser la fonction esc_url(); qui va s’assurer que l’url est propre avant de l’utiliser dans l’attribut href.

Et on va remplacer tout le contenu de la balise <div class="entry-content"> par la fonction the_content(); qui va chercher le contenu dont il est question.

Notre fichier content.php devient donc :

<article class="post hentry">

    <header class="entry-header">
        <?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>
        <p class="entry-meta">
            <span class="byline">Posted in <a href="">WordPress</a>, on <a href="">August 9th, 2017</a></span>
            <a title="Edit this post" href="" class="post-edit-link">
                <span>Edit this post</span>
                <span data-icon="ei-pencil"></span>
            </a>
        </p><!-- .entry-meta -->
    </header><!-- .entry-header -->

    <div class="entry-content">
        <?php the content(); ?>
    </div><!-- .entry-content -->

    <footer class="entry-footer">  
        <span class="tags-links">
           <span class="screen-reader-text">Tags</span>
           <span data-icon="ei-tag"></span>
           <a title="Basic Text Tag archive link" href="">Basic Text</a>, 
           <a title="Basic Text Tag archive link" href="">Test</a>, 
           <a title="Basic Text Tag archive link" href="">WordPress</a>
       </span>
            
       <span class="comments-link">
           <a href="" title="Go to comments">3 Comments</a>
           <span data-icon="ei-comment"></span>
           </span>
       </footer><!-- .entry-footer -->

</article>
template-parts/content.php

 

Quand on retourne sur le site, on peut voir que le site affiche les articles , avec les titres cliquables et le bon contenu.

Créer un thème Repo Ready - Articles cliquables
Les titres des articles sont bien cliquables maintenant.

Notre boucle est en place, donc dans le prochain article, on va affiner notre template part, en y ajoutant tous les templates tags nécessaires pour afficher notre article comme il faut.

@ + !

 

Un commentaire sur “Créer un thème Repo Ready – La boucle de WordPress

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


tempus ut massa fringilla suscipit consequat. leo. libero libero.
%d blogueurs aiment cette page :