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.
[pastacode lang=”php” manual=”%3Cmain%20id%3D%22primary%22%20class%3D%22content-area%22%20role%3D%22main%22%3E%0A%0A%20%20%20%20%20%20%20%20%3Carticle%20class%3D%22post%20hentry%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cheader%20class%3D%22entry-header%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22entry-title%22%3E%3Ca%20title%3D%22Basic%20text%20elements%22%20href%3D%22%22%20rel%3D%22bookmark%22%3EBasic%20Text%20elements%3C%2Fa%3E%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20class%3D%22entry-meta%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22byline%22%3EPosted%20in%20%3Ca%20href%3D%22%22%3EWordPress%3C%2Fa%3E%2C%20on%20%3Ca%20href%3D%22%22%3EAugust%209th%2C%202017%3C%2Fa%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Edit%20this%20post%22%20href%3D%22%22%20class%3D%22post-edit-link%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3EEdit%20this%20post%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-pencil%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fp%3E%3C!–%20.entry-meta%20–%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fheader%3E%3C!–%20.entry-header%20–%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22entry-content%22%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3EThis%20is%20a%20standard%20paragraph%20created%20using%20the*%20WordPress%20TinyMCE%20text%20editor.%20It%20has*%20a%20%3Cstrong%3Estrong%20tag%3C%2Fstrong%3E%2C%20an%20%3Cem%3Eem%20tag%3C%2Fem%3E%20and%20a%20%3Cdel%3Estrikethrough%3C%2Fdel%3E%20which%20is%20actually%20just%20the%20del%20element.%20There%20are%20a%20few%20more%20inline%20elements%20which%20are%20not%20in%20the%20WordPress%20admin%20but%20we%20should%20check%20for%20incase%20your%20users%20get%20busy%20with%20the%20copy%20and%20paste.%20These%20include%20%3Ccite%3Ecitations%3C%2Fcite%3E%2C%20%3Cabbr%20title%3D%22abbreviation%22%3Eabbr%3C%2Fabbr%3E%2C%20bits%20of%20%3Ccode%3Ecode%3C%2Fcode%3E%20and%20%3Cvar%3Evariables%3C%2Fvar%3E%2C%20%3Cq%3Einline%20quotations%3C%2Fq%3E%2C%20%3Cins%20datetime%3D%222011-12-08T20%3A19%3A53%2B00%3A00%22%3Einserted%20text%3C%2Fins%3E%2C%20text%20that%20is%20%3Cs%3Eno%20longer%20accurate%3C%2Fs%3E%20or%20something%20%3Cmark%3Eso%20important%3C%2Fmark%3E%20you%20might%20want%20to%20mark%20it.%20We%20can%20also%20style%20subscript%20and%20superscript%20characters%20like%20C0%3Csub%3E2%3C%2Fsub%3E%2C%20here%20is%20our%202%3Csup%3End%3C%2Fsup%3E%20example.%20If%20they%20are%20feeling%20non-semantic%20they%20might%20even%20use%20%3Cb%3Ebold%3C%2Fb%3E%2C%20%3Ci%3Eitalic%3C%2Fi%3E%2C%20%3Cbig%3Ebig%3C%2Fbig%3E%20or%20%3Csmall%3Esmall%3C%2Fsmall%3E%20elements%20too.%26nbsp%3BIncidentally%2C%20these%20HTML4.01%20tags%20have%20been%20given%20new%20life%20and%20semantic%20meaning%20in%20HTML5%2C%20you%20may%20be%20interested%20in%20reading%20this%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22HTML5%20Semantics%22%20href%3D%22http%3A%2F%2Fcsswizardry.com%2F2011%2F01%2Fhtml5-and-text-level-semantics%22%3Earticle%20by%20Harry%20Roberts%3C%2Fa%3E%20which%20gives%20a%20nice%20excuse%20to%20test%20a%20link.%26nbsp%3B%26nbsp%3BIt%20is%20also%20worth%20noting%20in%20the%20%22kitchen%20sink%22%20view%20you%20can%20also%20add%20%3Cspan%20style%3D%22text-decoration%3A%20underline%3B%22%3Eunderline%3C%2Fspan%3E%26nbsp%3Bstyling%20and%20set%20%3Cspan%20style%3D%22color%3A%20%23ff0000%3B%22%3Etext%20color%3C%2Fspan%3E%20with%20pesky%20inline%20CSS.%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20style%3D%22text-align%3A%20left%3B%22%3EAdditionally%2C%20WordPress%20also%20sets%20text%20alignment%20with%20inline%20styles%2C%20like%20this%20left%20aligned%20paragraph.%26nbsp%3BAenean%20eu%20leo%20quam.%20Pellentesque%20ornare%20sem%20lacinia%20quam%20venenatis%20vestibulum.%20Cras%20mattis%20consectetur%20purus%20sit%20amet%20fermentum.%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20style%3D%22text-align%3A%20right%3B%22%3EThis%20is%20a%20right%20aligned%20paragraph.%26nbsp%3BAenean%20eu%20leo%20quam.%20Pellentesque%20ornare%20sem%20lacinia%20quam%20venenatis%20vestibulum.%20Cras%20mattis%20consectetur%20purus%20sit%20amet%20fermentum.%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20style%3D%22text-align%3A%20justify%3B%22%3EThis%20is%20a%20justified%20paragraph.%26nbsp%3BAenean%20eu%20leo%20quam.%20Pellentesque%20ornare%20sem%20lacinia%20quam%20venenatis%20vestibulum.%20Cras%20mattis%20consectetur%20purus%20sit%20amet%20fermentum.%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%20style%3D%22padding-left%3A%2030px%3B%22%3EFinally%2C%20you%20also%20have%20the%20option%20of%20an%20indented%20paragraph.%26nbsp%3BAenean%20eu%20leo%20quam.%20Pellentesque%20ornare%20sem%20lacinia%20quam%20venenatis%20vestibulum.%20Cras%20mattis%20consectetur%20purus%20sit%20amet%20fermentum.%3C%2Fp%3E%20%3Cp%3EAnd%20last%2C%20and%20by%20no%20means%20least%2C%20users%20can%20also%20apply%20the%20%3Ccode%3EAddress%3C%2Fcode%3E%20tag%20to%20text%20like%20this%3A%3C%2Fp%3E%20%3Caddress%3E123%20Example%20Street%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Testville%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20West%20Madeupsburg%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20CSSland%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%201234%3C%2Faddress%3E%20%3Cp%3E…so%20there%20you%20have%20it%2C%20all%20our%20text%20elements%3C%2Fp%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%3C!–%20.entry-content%20–%3E%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cfooter%20class%3D%22entry-footer%22%3E%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22tags-links%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22screen-reader-text%22%3ETags%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-tag%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Basic%20Text%20Tag%20archive%20link%22%20href%3D%22%22%3EBasic%20Text%3C%2Fa%3E%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Basic%20Text%20Tag%20archive%20link%22%20href%3D%22%22%3ETest%3C%2Fa%3E%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Basic%20Text%20Tag%20archive%20link%22%20href%3D%22%22%3EWordPress%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22comments-link%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%22%20title%3D%22Go%20to%20comments%22%3E3%20Comments%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-comment%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ffooter%3E%3C!–%20.entry-footer%20–%3E%0A%0A%20%20%20%20%20%20%20%20%3C%2Farticle%3E%0A%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3Cnav%20class%3D%22navigation%20posts-navigation%22%20role%3D%22navigation%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ch2%20class%3D%22screen-reader-text%22%3EPosts%20navigation%3C%2Fh2%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22nav-links%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22nav-previous%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22index-older.html%22%20class%3D%22next-posts-link%20button%22%20rel%3D%22prev%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-arrow-left%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3EOlder%20post%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!–%20%3Cdiv%20class%3D%22nav-next%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%20class%3D%22previous-posts-link%20button%22%20rel%3D%22next%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3ENewer%20post%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-arrow-right%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%20–%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%20%20%0A%20%20%20%20%20%20%20%20%3C%2Fnav%3E%0A%0A%20%20%20%20%3C%2Fmain%3E%3C!–%20%23main%20–%3E” message=”index.php” highlight=”” provider=”manual”/]
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.
[pastacode lang=”php” manual=”%3C%3Fphp%20if%20(%20have_posts()%20)%20%3A%20%3F%3E%0A%0A%3C%3Fphp%20else%20%3A%20%3F%3E%0A%0A%3C%3Fphp%20endif%3B%20%3F%3E” message=”index.php” highlight=”” provider=”manual”/]
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.
[pastacode lang=”php” manual=”%3C%3Fphp%20if%20(%20have_posts()%20)%20%3A%20%3F%3E%0A%20%20%20%20%3Cp%3EThere%20is%20content%20!!%3C%2Fp%3E%0A%3C%3Fphp%20else%20%3A%20%3F%3E%0A%20%20%20%20%3Cp%3ENothing%20to%20display%3C%2Fp%3E%0A%3C%3Fphp%20endif%3B%20%3F%3E” message=”index.php” highlight=”” provider=”manual”/]
Si on visite une page connue, on a le bon message. Si on va sur une page inexistante, on a le message d’erreur.
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.
[pastacode lang=”php” manual=”%3C%3Fphp%20if%20(%20have_posts()%20)%20%3A%20while%20(%20have_posts()%20%3A%20the_post()%20)%20%3F%3E%0A%20%20%20%20%3Ch2%3E%3C%3Fphp%20the_title()%20%3F%3E%3C%2Fh2%3E%0A%3C%3Fphp%20endwhile%3A%20else%20%3A%20%3F%3E%0A%20%20%20%20%3Cp%3ENothing%20to%20display%3C%2Fp%3E%0A%3C%3Fphp%20endif%3B%20%3F%3E” message=”index.php” highlight=”1,2,3″ provider=”manual”/]
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.
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().
[pastacode lang=”php” manual=”%3C%3Fphp%20if%20(%20have_posts()%20)%20%3A%20while%20(%20have_posts()%20%3A%20the_post()%20)%20%3F%3E%0A%20%20%20%3C%3Fphp%20get_template_part(%20’template-parts%2Fcontent’%20)%3B%20%3F%3E%0A%3C%3Fphp%20endwhile%3A%20else%20%3A%20%3F%3E%0A%20%20%20%20%3Cp%3ENothing%20to%20display%3C%2Fp%3E%0A%3C%3Fphp%20endif%3B%20%3F%3E” message=”index.php” highlight=”2″ provider=”manual”/]
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 :
[pastacode lang=”php” manual=”%3Carticle%20class%3D%22post%20hentry%22%3E%0A%0A%20%20%20%20%3Cheader%20class%3D%22entry-header%22%3E%0A%20%20%20%20%20%20%20%20%3C%3Fphp%20the_title(%20’%3Ch2%20class%3D%22entry-title%22%3E%3Ca%20href%3D%22’%20.%20esc_url(%20get_permalink()%20)%20.%20’%22%20rel%3D%22bookmark%22%3E’%2C%20’%3C%2Fa%3E%3C%2Fh2%3E’%20)%3B%20%3F%3E%0A%20%20%20%20%20%20%20%20%3Cp%20class%3D%22entry-meta%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22byline%22%3EPosted%20in%20%3Ca%20href%3D%22%22%3EWordPress%3C%2Fa%3E%2C%20on%20%3Ca%20href%3D%22%22%3EAugust%209th%2C%202017%3C%2Fa%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Edit%20this%20post%22%20href%3D%22%22%20class%3D%22post-edit-link%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3EEdit%20this%20post%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-pencil%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%3C%2Fp%3E%3C!–%20.entry-meta%20–%3E%0A%20%20%20%20%3C%2Fheader%3E%3C!–%20.entry-header%20–%3E%0A%0A%20%20%20%20%3Cdiv%20class%3D%22entry-content%22%3E%0A%20%20%20%20%20%20%20%20%3C%3Fphp%20the%20content()%3B%20%3F%3E%0A%20%20%20%20%3C%2Fdiv%3E%3C!–%20.entry-content%20–%3E%0A%0A%20%20%20%20%3Cfooter%20class%3D%22entry-footer%22%3E%20%20%0A%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22tags-links%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20class%3D%22screen-reader-text%22%3ETags%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-tag%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Basic%20Text%20Tag%20archive%20link%22%20href%3D%22%22%3EBasic%20Text%3C%2Fa%3E%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Basic%20Text%20Tag%20archive%20link%22%20href%3D%22%22%3ETest%3C%2Fa%3E%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%3Ca%20title%3D%22Basic%20Text%20Tag%20archive%20link%22%20href%3D%22%22%3EWordPress%3C%2Fa%3E%0A%20%20%20%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%3Cspan%20class%3D%22comments-link%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%3Ca%20href%3D%22%22%20title%3D%22Go%20to%20comments%22%3E3%20Comments%3C%2Fa%3E%0A%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20data-icon%3D%22ei-comment%22%3E%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%3C%2Ffooter%3E%3C!–%20.entry-footer%20–%3E%0A%0A%3C%2Farticle%3E” message=”template-parts/content.php” highlight=”4,15″ provider=”manual”/]
Quand on retourne sur le site, on peut voir que le site affiche les articles , avec les titres cliquables et le bon contenu.
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.
@ + !
PS: Si vous avez aimé ce article et êtes intéressé pour apprendre à développer pour WordPress en utilisant les meilleures pratiques, jetez-un oeil à WPCookBook ! C’est un vrai livre de recettes WordPress pour apprendre à développer pour WordPress proprement et exploiter au maximum tous les outils et APIs mis à notre disposition. Inscrivez-vous pour être notifié de sa publication !