Francis Chouquet Graphiste Lettering

Création Thème WordPress | Tutorial #7: Introduction au Loop WordPress

0

Ce tutoriel est le septième d’une série articles sur la création d’un thème pour WordPress de A à Z. Si vous prenez le train en cours, je vous conseille fortement de commencer par le premier tutoriel de la série.

La dernière fois, nous avons commencé à voir quelque chose sur le navigateur. On a bossé sur le titre du blog et sa description. Maintenant, on va « attaquer » le contenu de notre blog, c’est-à-dire le titre de l’article, son contenu et aussi les informations « postmetadata » que sont la date, le nombre de commentaires, les catégories ou encore l’auteur de l’article. Aujourd’hui, on commence avec les titres et si tout va bien, demain, on fera le contenu et vendredi les postmetadata. Ce n’est pas que je ne veuille pas tout vous coller d’un seul coup, mais vous allez voir que rien que la présentation du loop et l’insertion des titres des articles, ça fait long et déjà pas mal pour certains ! 😉

Avant toute chose, il serait intéressant que vous ayez quelques articles en stock, histoire de pouvoir afficher quelque chose ! 😀 Deuxième point, plus tôt, j’ai fait une petite erreur en vous demandant de créer un fichier theloop.php. Pour le moment, on ne va pas l’utiliser. On va garder les informations du loop dans le fichier index.php. Il y a les thèmes qui gardent un minimum de templates et d’autres qui préfèrent tout séparer. Ici, on sépare chaque « espace » du thème, mis à part le loop qui reste dans l’index. Mais gardez le fichier theloop.php, on l’utilisera peut-être plus tard.

1. Présentation du Loop WordPress:

Le contenu d’un blog sous WordPress est conditionné par les règles définies dans ce que l’on appelle le Loop WordPress. Ce loop est ce qui va « appeler » vos billets sur la page. C’est lui qui va afficher ce qu’il faut en fonction de ce que vous avez demandé. Ce sont des commandes PHP qui vont permettre l’apparition du bon billet au bon endroit. Le terme de condition est ici important, car c’est autour de ce concept que tout va se jouer. On dicte des conditions pour l’affichage ou non de tel ou tel article, et tout est géré dans le loop. Si cela vous semble encore flou, vous allez vite comprendre en rentrant dans le vif du sujet.

Si vous travaillez en local, pensez à redémarrer vos serveurs puis ouvrez le fichier index.php. Pour le moment, celui-ci ne contient que peu de choses, entre autres, le tag qui appelle le header et les balises pour fermer la div, le body et la balise html. On va maintenant lui ajouter les informations de base du loop. Sous le tag pour le header, ajouter les quelques lignes de code suivantes:

1 2 3 
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <?php endwhile; ?> <?php endif; ?>

Tout d’abord, expliquons ce que c’est que ça !

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

est la commande qui va vérifier s’il y a des articles à afficher: « if have posts ». S’il n’y en a pas, il n’affiche rien. S’il y en a, on va plus loin dans sur la ligne de code.

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

va aller chercher PARMI les articles (commande « while ») celui qu’il faut (« the post »).

Les commandes « endwhile » et « endif » sont là pour fermer cette requête. OK ? Ce qu’on vient d’ajouter est le coeur du contenu, la base du loop. On va donc en profiter pour créer un « encadrement » CSS pour entourer ce contenu. Pour cela, on va ajouter une div avant la première ligne de php citée ci-dessus. On va lui donner le nom de « content », contenu en anglais. On va refermer cette DIV après la dernière ligne de PHP. L’ensemble que vous devez avoir doit ressembler à ça:

1 2 3 4 5 
<div id="content"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <?php endwhile; ?> <?php endif; ?> </div>

2: Affichage du titre de l’article:

Maintenant qu’on a trouvé le ou les articles que l’on veut voir s’afficher, on va appeler le titre de l’article ou des articles. Sous la première ligne de php précédente qui appelle les billets, insérer le code suivant:

1 
<?php the_title(); ?>

. C’est le même style que ce que l’on a vu jusque là. Ici, on appelle le titre de l’article. Enregistrez votre fichier, rafraîchissez votre navigateur. Maintenant le ou les titres d’articles apparaissent. Ce n’est pas très joli mais ils sont là !

Ce titre, on va le convertir en lien, comme on l’a fait avec le titre du blog, et amener le lien vers la page de l’article, son permalien, c’est-à-dire son adresse permanente:

1 
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>

On a ajouté une balise html « a » pour le lien et la « référence » du lien, on va aller la chercher dans la base de données grâce à « php the_permalink() ».

On a ajouté également une petite commande qui va permettre au titre de s’afficher quand vous survolez son lien. Il me semble que c’est également utile pour le référencement, mais je ne suis pas sûr sur ce coup-là.

Enfin, on va entourer cette ligne de code par les balises h2 pour donner plus de visibilité au titre de l’article. Donc, au final, vous obtenez ça:

1 
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

Sauvegardez le tout, rafraîchissez votre navigateur et maintenant les titres des articles (ou de l’article) apparaissent en surligné, dans une taille plus grande et aussi les uns au dessous des autres. Si vous vous amusez à cliquer dessus, vous verrez que vous allez être redirigés vers les permaliens des articles. Si vous voulez revenir sur la homepage du blog, cliquez sur le titre !

Voilà, c’est tout pour aujourd’hui. Demain, on insère le contenu ! A demain alors ? Et surtout, n’hésitez pas à poser des questions, faire des commentaires, voire corriger des erreurs qui auraient pu se glisser !

Tutoriel n°8: « Le loop WordPress, 2ème partie »

Et si ça vous intéresse, avec des amis, on a créé notre boutique de ventes de thèmes WordPress, Peaxl. Venez jetez un oeil ! 😉

Fran6

85 Commentaires

  • Jean-Baptiste

    Jusque là, tout va super bien, trop cool !!
    Par contre, j’ai une erreur 404 quand je clique sur le titre de mes articles… Tout a l’air pourtant nickel :-S Une idée ?

  • cedric

    Bonjour,

    Pour revenir sur le « title », il s’agit essentiellement d’un problème d’accessibiliité web. Conformément aux recommandation des wcag et du rgaa, il n’est pas nécessaire d’indiquer le « title » si le contenu du lien est explicite.
    Dans notre cas, title et contenu sont identiques. Ill n’est donc pas nécessaire de l’indiquer.
    (le pb étant qu’un lecteur d’écran comme jaws va lire deux fois le titre de niveau 2.)

    Néanmoins, je débute sur wordpress et mes connaissances en programmation sont assez réduites. J’aimerai pouvoir indiquer un « title » spécifique si nécessaire.
    Soit le contenu nécessite un title car insuffisement explicite et j’aimerai pouvoir l’indiquer
    Soit le contenu n’en nécessite pas et j’aimerai qu’il n’y en ai pas.

    Connaissez vous une solution?

    Merci

    Cédric

  • Bonjour,

    Merci de tout ces conseils fort précieux!!!
    Tres bonne explication même pour les novices

    Merci encore

  • Pe

    Bonjour
    Pourquoi il y a une if avant une while??
    ça sert à rien, mise apart ça tres bon tutorial.

  • Mignon

    Merci Fran6,
    Cela m’a été d’un grand secours.
    Je debute en WordPress.
    Encore merci.

  • Tout d’abord merci pour le tutoriel fran6art mais j’ai pas compris pourquoi faut-il mettre deux points devant if(have_posts()) : et de meme pour while

  • Ou faut il placer le code

    Car je n’ai qu’un titre qui apparait et j’ai qu’un article. Au fait quel est la différence entre un post et une page ?

    voila mon code

    <a href=" » title= » »>

  • j’ai peut etre trouvé mon problème. En local mon loop ne fonctionne pas. Quand je télécharge mon thème en réelle tout marche. Peut etre un paramétrage !!! style url que je n’ai pas changé quelque part. Bon domage je vais devoir travailler en réel.

  • PatDoc

    Merci ! J’ai hâte de lire la suite 🙂

  • xzena

    Bonjour,
    Merci pour le tuto,
    et beh j’ai un problème je sais pas sa source,
    en dernier affichage de ma page,je trouve cette phrase multiplié en des centaines:
    Hallo word!
    Alors selon cet affichage,c’est la phrase »Hallo word » qui présente les titres de l’article,d’autre part j’ai pas de contenue d’articles moi!
    si quelqu’un peut m’aider sera trop gentil,merci.

  • Bonjour Fran6,

    Merci pour cette série de tuto qui m’aide à entrer dans le monde « wordpress ».
    J’ai passé mon Noël à apprendre le CSS, et là je suis ton tuto et le PHP à côté.

    Pour améliorer la compréhension, je modifierai la phrase : « Sous la première ligne de php précédente qui appelle les billets, insérer le code suivant: »
    par
    « Entre la ligne « php if(have_posts())… » et la ligne « php endwhile; », insérer le code suivant: »
    avec une petite fenêtre résumant le code.

    J’ai en effet eu de la peine à situer à quelle ligne on faisait référence. Ce n’est qu’en lisant le tuto suivant que j’ai compris.

    Ma modeste contribution
    Bonne Année 2011

  • Bon… J’ai beau tester, et re tester, je ne vois pas pourquoi mes articles ne veulent pas s’afficher….
    Le code de l’index.php est bien ça ??
     »

    <a href=" » title= » »>

     »

    Merci beaucoup !

  • Bonjour, j’éspère que quelqu’un me répondra…bouuuh, ça fait 2 heures que j’essaie d’afficher 2 titres + 2 articles…impossible. sur ma page il n’y a qu’un titre qui s’affiche sans son contenu ?

    voici ce que j’ai tapé dans index.php :

    <a href=" » title= » »>

    Où est ce que je me suis trompée ???? merci beaucoup pour votre aide

  • chad

    pareil !!!!!!!! les titres des articles s’affiche mais pas leur contenu, je soupconne peut être un changement de variable (celle qui contient le contenu des article) avec quelle wordress press est fait ce tuto? pour ma part c’est le 3.1.2

  • Merci beaucoup pour ces tutos,

    Je viens de créer ma première maquette html + css de A à Z et je suis en train de l’adapter à WP, notamment grâce à vos tutos.

    fran6art : « On a ajouté également une petite commande qui va permettre au titre de s’afficher quand vous survolez son lien. Il me semble que c’est également utile pour le référencement, mais je ne suis pas sûr sur ce coup-là. »

    Pour les liens de titre, pour ma part je met plutôt la commande « alt » plutôt que « title » : cette balise qui est prise en compte par Google et cela évite une bulle info en répétition sur le titre (pas très joli).

  • Bonjour à tous!

    Petite question ….

    Comment modifier le loop d’un blog wordpress directement crée sur wordpress et hébergé par wordpress?

    Merci à vous!

    Cordialement

    Cyril

  • Pascalou

    Ben je suis très déçu !

    A quoi bon mettre des tutos en ligne si ils ne sont pas maintenus ?

    Je confirme que ce tuto ne fonctionne pas sur mon wordpress 3.2.1 en local.
    Je n’ai pas essayé en ligne, mais comme je débute je pensais pouvoir progresser et faire des expérimentations en local sans avoir besoin d’être connecté.

    J’espère que quelqu’un pourra nous donner la solution pour pouvoir continuer le tuto, je ne suis pas le seul à avoir signalé un pb…
    Me voilà bloqué à cette étape sans savoir quoi faire.

    Je creuse le sujet et si je trouve la solution je la posterai ici même.

  • Pascalou > Aux dernières nouvelles, le tuto fonctionne toujours et pas mal de monde arrive au bout ces derniers temps. Quel est ton souci exactement ?

  • Pascalou

    Je n’ai pas encore trouvé ce qui cloche.
    Peut être un problème de cache car le lendemain tout fonctionnait.
    Je ne sais pas si quelquechose est à modifier sur le serveur apache ou autre mais apparemment certaines modifications ne sont pas prises en compte immédiatement.
    Un vrai casse tête…

  • Lexa

    Bonjour, J’ai moi aussi un soucis.
    J’ai gardé l’article créé par défaut par WordPress à l’ouverture d’un blog. Seulement, celui-ci n’apparaît plus sur ma page depuis que je crée le code avec ce tuto. Il n’apparaît même pas en prévisualisation de l’article.
    Je ne sais pas quoi faire…

  • Lexa > Est-ce que tu as bien mis toutes les informations de la boucle (loop) WordPress ?

  • Seby

    Bonjour,
    Je suis ce tutoriel de A à Z et je tiens à vous remercier. Je fais partie de ces rares personnes qui aiment comprendre ce qu’elles font et là j’avoue êtres comblée.

    Les explications sont simples, bien formulées, sans termes barbares. Juste ce qu’il faut pour comprendre ce que l’on fait. Vraiment merci, c’est un super boulot ce que vous faites !

  • Bonjour,

    Tout d’abord un grand merci ! Je ne suis qu’au début du tutoriel, mais c’est actuellement clair et j’en redemande ! J’aurais juste une petite question. Les tags qui sont mit dans les balises php comme: The_title, The_permalink, The_post,… C’est des noms qui sont déjà prédéfini dans php? Ou c’est propre à wordpress? Je cherche à comprendre d’où ils sortent en faite 😀

    Encore merci !

  • lowess

    jusque là tout roule à merveille j’ai hâte de lire la suite, pour ceux d’entre vous qui ont des souci il serait convenable de reprendre la lecture depuis le début car pour moi jusque là tout fonctionne à merveille, et vérifier souvent si votre navigateur est sur la page d’accueil donc cliqué sur le titre du site qui vous enverra à l’accueil jusqu’ici on ne doit qu’avoir les titres et non le contenu sauf si je me trompe donc pas de souci à vous faire si vous avez les titres et pas de contenu certainement au chapitre suivant vous verrez d’avantage clair, de la porter vous bien 😉

  • Je viens de découvrir ton tuto. Il est juste GENIAL !
    Merci beaucoup !

  • Pier2

    Je suis impressionné par la simplicité de l’explication et sur la richesse de ce qu’on apprend ! Vraiment chapeau ! Tu devrais te lancer dans un tuto sur prestashop ! Je pense que tu ferais énormément de nouveaux disciples maître yoda ;D ! ( moi en particulier )

    en tous cas moi j’adhère !

    encore merci

  • noixdecoco

    Super! je continue

  • mercure

    bonjour fran6

    tout d’abord merci beaucoup pour ton tutoriel il est très complet et m’a bien d’aidé jusque ici

    par contre j’ai un petit problème

    quand je met mon permalien dans la balise:
    <a href=" » title= » »>

    dans les parenthèses prévus

    j’ai ce message d’erreur qui s’affiche quand je vais sur ma page web :

    Parse error: syntax error, unexpected ‘;’, expecting ‘)’ in /homez.541/mathildet/www/wp-content/themes/0Mathilde/index.php on line 4

    j’ai regardé partout ou il pouvais y avoir un pb mais je ne trouve rien !

    si vous pourriez m’aider a y voir clair ..

  • Merci pour le tuto, c’est super claire A++

  • mel

    Bonjour,
    de mon coté je bloque au niveau de la visualisation
    de ma template sur wordpress.
    En effet elle s’affiche bien dans mes thèmes,
    mais lorsque je veux la prévisualiser,
    la page reste blanche,
    le contenu ne s’affiche pas.
    Il en est de même si je glisse simplement
    une image png à la racine de mon thème.
    C’est comme s’ il manquait un fichier pour faire le lien.
    Je me suis amusée à retirer des fichiers des templates déjà installées
    mais je n’arrive pas à comprendre ce qui est indispensable.
    Peut-être faut il simplement activé des préférences dans wordpress?
    Si vous avez la solution..Merci!!!

  • lisa

    Tout d’abord merci pour le bon tuto mais j’ai un petit probléme .
    enfaite j’ai 2 articles mais lors de l’affichage il m’affiche qu’un seul article .

  • Ariane

    Je suis fan merci

  • Gauvain

    Salut !
    D’abord merci pour le tuto, c’est génial !
    J’ai cependant un petit problème, d’abord, lors de l’étape 2. affichage du titre,
    Je tape bien la même ligne mais aucun titre ne s’affiche sur ma page qui reste blanche.
    J’ai quand même continué au cas ou et puis lorsqu’il faut mettre les balises de titre h2, j’ai les titres des articles qui s’affichent ! très bien !
    Seulement un autre problème survient ! J’ai au total trois articles, le titre des deux premiers articles s’affiche bien comme voulu, en revanche, le titre du dernier article écrit s’affiche comme la description du site ! que se passe-t-il ?

    Je précise que je suis en local sous easyphp
    Merci !

  • Alexandre J.

    Bonjour,

    Juste en passant ce serait pas mal de remanier toutes les parties en php du genre
    celles qui enchainent des ouvertures/fermetures de zone php alors qu’elles pourraient tenir en un seul bloc plus lisible et surtout moins effrayant.

    code de base :
    code remanié version un :

    code remanié version deux :
    if(have_posts())
    {
    while(have_posts())
    {
    the_post();
    }
    }

    PS : Oui, il existe deux écritures majeures de PHP et l’indentation est la uniquement pour la lisibilité.

Success, your comment is awaiting moderation.