Fran6art 13 ans de blogging par Francis Chouquet

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

  • C’est beau, c’est clair.

    Merci Fran6

  • De rien Nico !!

  • Excellent !

    Il me semble que l’attribut title sur les liens sert plus au visiteur qu’au référencement.

  • Merci Cyril,

    Une petite erreur s’est glissée hier dans le texte. J’avais mal refermé la balise h2. j’ai réparé l’erreur mais vérifiez bien que votre balise h2 est bien refermé dans votre fichier index.php

  • C’est confirmé, l’attribut tilte n’est pas pris en compte par Google pour l’indexation d’un site. J’ai fait un billet pour l’occase… http://www.libratoi.net/2007/0.....ns-google/

  • Marc

    Hello Fran6,

    Tout d’abord, merci pour ce tutorial on ne peut plus clair et pertinent. Du magnifique travail, ça fait plaisir de voir enfin un document à la portée de tous.

    Seulement, je n’ai pas bien saisi OU il fallait placer le titre de l’article par rapport à tout le reste du contenu. Si tu pouvais m’éclairer sur ce point-là, merci…

    Et bon courage pour la suite 😉

  • Marc

    Hm, j’ai compris grâce au chapitre suivant qu’il fallait placer ce code avant la fermeture des deux fonctions PHP, logique. Toutefois, ce serait chouette que tu le précises, car j’ai eu peur d’avoir commis une bourde et de continuer dans la mauvaise voie, petit débutant que je suis, et c’est souvent la crainte qu’on a.

  • Salut Marc,

    Désolé pour le retard mais j’ai pris quelques jours de repos ! 😉 Merci pour les compliments, et concernant le titre, je dis dans l’article qu’il faut le placer « sous la ligne de php qui appelle les billets ». Ca ne t’as pas aidé ? Pas assez compréhensible peut-être ? Merci pour ton retour !

  • david

    je trouve que tu devrais indiquer clairement que le content se met dans l’index car moi je l’avais mis a la suite du header et c’est en lisant le tuto sous template que j’ai compris qu’il fallait qu’il soit dans index.php

    tchuss

  • OK David, j’essaierai de faire quelques modifs ! 😉

  • mams

    Merci pour le tuto
    comment je vais faire si je veux afficher à la page d’accueil les articles de la catégorie Accueil seulement car mon problème ma page d’accueil fait apparaître tous les articles mais je veux le filtrer. Pouvez vous me donner le code

  • Bonjour Mams,

    C’est bien plus compliqué qu’un peu de code !! Je te conseille de lire ce tutoriel que j’ai écrit et qui va pouvoir t’aider je pense. Sinon, recontactes-moi ! 😉

  • Bonjour Francis et merci pour ce tuto pas à pas : ) qui montre et explique ce qu’il faut faire 🙂

    Pour cette partie du tuto, tu pourrais :
    – mettre en gras « ouvrir le fichier index.php » (dans le 2nd paragraphe du 1.Présentation du loop, pour qu’on comprenne bien dans quel fichier on va insérer ces lignes de code) ainsi que « sous le tag pour le header »
    – peut-être montrer un exemple du code final et de son emplacement en mettant en gras la partie que l’on vient d’ajouter ?
    Je suggère ceci en tant que bouleto de première, une vraie débutante !

  • Bonjour Francis. Encore merci pour le tuto. J’ai un problème : sur la page d’accueil, je veux afficher à gauche 2 catégories avec les titres de l’article (catégorie REFERENCE et catégorie ACTUALITES), comment je vais faire alors pour le faire puisque sur la page d’accueil il y déja l’article de la catégorie « Accueil »

  • mams > Il faut que tu ajoutes les autres catégories comme tu as fait pour la première avec la query_post() et dans le loop, il faut que tu retires php the_content() pour que le contenu ne s’affiche pas.

  • Merci pour la reponse Francis mais pour la page d’accueil, j’ai mis
    if (is_home()) {

    query_posts(« cat=4 »);// catégorie ACCUEIL=4

    }

    ?>


    et avant ce code se trouve la catégorie « REFERENCE » alors j’ai mis

    //catégorie REFERENCE=13


    ce qui se passe : sur la page à gauche, j’ai tous les articles de la catégorie « REFERENCE » mais la page d’acueil n’affiche pas les articles de la catégorie « ACCUEIL » mais elle affiche aussi les articles de la catégorie « REFERENCE » càd elle prend en compte le 13 mais pas le 4

  • mams > Essaies en mettant query_posts(?cat=4&13″). Je pense qu’il faut que tu regroupes les différentes catégories sinon le loop ne va prendre en compte que ce qu’il y a dans la query_post.

  • merci Francis mais ca n’a pas marché, il prend en compte le 4 même si on fait

    query_posts(?cat=4&13″)
    Autre question, comment je vais faire pour afficher les 3 derniers articles, j’ai essayé
    mais il affiche toujours tous les articles
    Merci d’avance

  • Mams > difficile de te dire ça comme ça, c’est pas quelque chose de très simple à mettre en oeuvre sur WordPress. Je suis passé sur ton blog et l’URL dit que c’est la page pour l’affichage de la catégorie 4… Il faudrait que tu crée une page différente, avec un template différent et que tu recommences les manipulations avec le query_posts. N’oublies pas qu’il est important que tu fasses tout ça sur une nouvelle page, que tu as créé, pas sur une pape qui existe déjà. Mais une fois de plus, c’est pas évident pour moi de voir d’où vient le problème sans avoir le code sous les yeux…

  • Ana

    Merci !!
    Je fais tout pas à pas, gentiment mais sûrement, et c’est génial de clarté et de pédagogie ! Je me sens tout d’un coup drôlement maligne !
    Merci pour tout !
    Next step for me, now….

  • Merci beaucoup pour le tuto. C’est génial!

    Juste vous faire remarquer que dans 2. Affichage du titre de l’article
    il manque un ? avant le >

    insérer le code suivant:

    Bonne journée

  • Désolé France mais je ne trouve pas le problème dont vous parlez… WP n’aime pas le code et donc ça a mangé une partie de votre commentaire ! 😉

  • Bonjour Francis

    Regardez dans 2. Affifchage du titre du site à la 2ième ligne il y a cette phrase et au bout le code

    « Sous la première ligne de php précédente qui appelle les billets, insérer le code suivant: »

    En passant, j’ai passé au travers de toutes vos pages concernant le tuto sauf que j’ai un problème. Lorsque je click sur la bannière, sur les non classés et sur les archives mon menu s’en va en dessous de la partie centrale. Si je click sur ce que moi j’ai mis dans la partie catégorie tout est correct et le menu reste en place.

    J’ai un problème également concernant l’affichage du menu entre le Widget et pas le Widget.
    Je trouve également bizarre la façon de faire le menu dans la sidebar.

    J’ai posté sur le forum wordpress.fr car je ne connais pas la solution à mes problèmes.

    En tout cas un gros merci pour ce tuto!

  • lili

    merci fran6 pour tes tutoriaux, c’est vraiment sympa.
    Mais comme je suis super débutante, je n’ai pas comprois où je devais mettre l’article lui même.
    Est-ce que je fais un dossier que je place aussi dans création theme ? où est-ce que je place l’adresse de l’article dans le code?
    merci!

  • lili > tu veux savoir où placer le code pour insérer ton article ou tu veux savoir comment insérer le contenu de ton article ? Pour ce qui est du code, c’est indiqué plus haut dans l’article et pour ce qui est du contenu, tu écris ton article sur WP et il viendra automatiquement s’intégrer dans ton blog… J’espère que ça pourra t’aider 😉

  • hello,

    paragraphe 2, 2e ligne:
    Il manque un pt d’interrogation pour terminer la commande.
    bonne continuation.

  • Ramon

    Bonjour,

    J’ai besoin d’aide. Quand je veux voir sur mon navigateur (Firefox ou Eplorer) les resultats , par exemple afficher les titres, j’ai toujours l’erreur suivant sur mon navigateur :

    Warning: Unknown: failed to open stream: No such file or directory in Unknown on line 0

    Fatal error: Unknown: Failed opening required ‘C:/Program Files/EasyPHP 2.0b1/www/wordpressfr/wp-content/themes/cr?©ation th?¨me/index.php’ (include_path=’.;C:/Program Files/EasyPHP 2.0b1\php5\pear\’) in Unknown on line 0

    Et franchement, je ne comprends pas qu’est-ce que ça veut dire….

    Je travaille avec Dreamweaver et j’affiche la paga avec F12 et ça ne marche pas…

    Par ailleurs, je suis sous windows et avec easyPHP ,

    Si vous pouvez m’aider, s’il vous plait, ça serait génial !!!!!

    Cordialement,

    Ramon Maita

  • Ramon

    C’est encore moi

    Dans la page de administration du site je n’arrive pas non plus à changer le thème. J’ai le thème qu’on est en train de créer mais quand je veux l’appliquer comme thème il ne se passe rien, pourtant l’admin me dit que le nouveau thème est activé mais c’est l’ancien qui s’affiche toujours.

    Bref, je n’arrive jamis à voir les résultats de mon travail ..

    Encore une fois, si vous pouvez m’aider …..

  • Salut Ramon,

    Pas facile de pouvoir t’aider comme ça… Ce que je ne comprends pas c’est pourquoi tu bosses sous Dreamweaver si tu fais tes templates sous easyphp ? Ensuite l’erreur semble plutôt être une erreur de fichier qu’il n’arrive pas à ouvrir. A-t-il la bonne extension ? A vérifier… Ensuite pour l’histoire du thème, essaies sous un autre navigateur pour voir si ça persiste… Mais s’il n’arrive pas à ouvrir un fichier d’un côté, je crois qu’il n’arrive pas à afficher le thème de l’autre… Tiens moi au courant ! et bon courage ! 😉

  • Salut, tes tutoriaux sont vraiment super, je dois réalisé mon theme WORDPRESS (je démarrais de SANDBOX) mais grace à ton tuto de A à Z je comprendrai totalement ce que je fait 🙂

    Je voulais juste te faire remarqué qu’il manque un ? pour fermer le php à ce niveau ci :

     »
    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: .

     »

    Ce n’est pas si grave que cela mais personelement, je fait toutes les étapes et cela peut stoppé des néophyte.

    merci encore 🙂

  • vymdiesel > C’est vrai que tu n’es pas le premier à me le faire remarquer et j’avais zappé la chose… Merci, l’erreur est corrigée ! 😉

  • C’est vraiment excellent, même pour un programmateur comme moi, un très bon tutorial pour ne pas passer au travers de certaines subtilités.

    Sinon une ch’ti faute de frappe dans ce paragraphe :

    On a aujouté é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à.

    aujouté un « u » en trop 🙂

  • Dul > Merci pour l’info, erreur d’orthographe corrigée ! 😉

  • Franck

    Bonjour Fran6 et merci pour ce tuto, mais je rencontre un problème peu banal : Dans l’index, lorsque je mets ma balise div id= »content » ainsi que /div autour de mon code php, mon header ne s’affiche plus ! par contre si je ne les mets pas, mon header s’affiche sans problème. Commen celà se fait ?

  • Franck

    Bonjour Fran6 et merci pour ce tuto, mais je rencontre un problème peu banal : Dans l’index, lorsque je mets ma balise div id= »content » ainsi que /div autour de mon code php, mon header ne s’affiche plus ! par contre si je ne les mets pas, mon header s’affiche sans problème. Comment celà se fait il ?

  • Franck

    Autant pour moi, il s’agissait d’un  » manquant dans le header (c’est le risque en voulant à tout prix tout taper à la main ^^)
    Encore bravo pour ce tuto !

  • Bonjour Francis,

    Tout d’abord je pense t’avoir déjà remercié au mois d’aout car tes tutoriels m’ont beaucoup aider lors d’un stage internet en entreprise (et si pas je le fait maintenant car c’est un oublis ^^)

    Voila, j’ai commencé la création de mon thème WP et j’ai plusieurs questions au quelle je n’ai pas trouver de réponse.

    Voila tout d’abord je laisse le THÈME pour que tu puisse visiter et voir de quoi il en retourne :

    http://www.vymdiesel.be

    1) Tu m’avais dit qu’il me serait facile de crée une PAGE de NEWS en fessant appel uniquement au sujet de la catégorie NEWS

    -Je crée donc une page news.php et la glisse dans mon dossier de thème mais je n’arrive pas a lier mon bouton News a cette page (je tape pour mon « href » /news.php )

    -De plus lorsque je tape http://www.vymdiesel.be/news.php il ne trouve pas la page non plus.

    -Quel est la commande php pour faire appel a des articles d’un seul type de catégorie ?

    As tu une idée de ce qui cloche ?

    Voici ma deuxième question sans vouloir te surchargé :

    2) J’aimerai incorporé cette galerie Flash dans une de mes pages : http://www.creation3d.org/galerie_dynamique/#fr6

    Ma page est normalement correctement codée, par contre la galerie a besoin d’un fichier  » AC_RunActiveContent.js  » se trouvant dans le même dossier que la page chargeant la galerie.

    Je met le fichier  » AC_RunActiveContent.js « dans le dossier de mon thème (ou se trouve également la page php chargeant la galerie) mais il ne le détecte pas.

    Je pense que WordPress, lorsqu’il crée les pages, celles ci sont placée dans un autre dossier.

    Tu peux voir le code source de la page codée ici : http://www.vymdiesel.be/curiculum-vitae/ (je modifie la page.php de WP pour cette page la)

    Voila 2 grosses question, j’espère que tu pourra m’éclairer car je suis perdu malgré des recherches sur google.

    Amicalement 🙂

  • anais

    mes titres apparaissent mais pas le contenu de mes articles
    à la place à côté de « description » il y a écrit « /div> »
    rhaaa que faire?
    j’ai pourtant bien tout suivi

  • anais

    ah évidemment si je ne passais pas à l’autre page..

  • Salut Fran6,

    Tout d’abord merci pour toutes les raisons évoquées plus haut.
    Je voulais juste te demander quelque chose suite a un petit problème.
    Le titre s’affiche bien comme indiqué, seulement ce n’est pas le titre de mon article rédigé sous WP mais le titre de la page créée (en l’occurrence « à propos »).
    Est-ce normal ?
    Cela veut-il dire que pour créer un article je dois en réalité créer une page et vice versa ?
    En espérant que tu vois mon message je te remercie une nouvelle fois.

    Erwan

Success, your comment is awaiting moderation.