Francis Chouquet Graphiste Lettering

Création Thème WordPress | Tutorial #9: le Loop WordPress, 3ème et dernière partie

0

Ce tutoriel est le neuviè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.

Après avoir inséré le contenu des articles hier, aujourd’hui, on va s’occuper des postmetadata. Les postmetadata sont ces informations que l’on donne souvent sous le titre de l’article, comme ici, ou à la fin de ceux-ci et qui nous en disent plus sur qui a écrit l’article, quand, dans quelles catégories, s’il y a des commentaires, et j’en passe.

L’insertion de ces informations est très simple. Maintenant, reste à savoir où les placer: sous le titre ou après le contenu ? Personnellement, mon choix est vite fait: ce sera sous le titre. Quand on lit un article, on aime bien savoir quand il a été rédigé, par qui (si le blog a plusieurs auteurs) et puis on peut savoir si ce billet a déjà du succès par le nombre de commentaires. On va donc insérer plusieurs lignes de code entre le titre et le contenu pour pouvoir intégrer ces informations:

1 2 3 4 5 6 7 
<p class="postmetadata">   <?php the_time('j F Y') ?> par <?php the_author() ?> | Cat&eacute;gorie: <?php the_category(', ') ?> | <?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?> <?php edit_post_link('Editer', ' &#124; ', ''); ?>   </p>

Attention à bien garder la ligne des commentaires en une seule ligne. Elle est ici sur 2 lignes mais dans votre éditeur, il ne doit y en avoir qu’une seule. Vous avez bien inséré le code entre le titre et le contenu ? Plus précisément entre le titre et la DIV « post_content » ? Maintenant, on va prendre un peu le temps d’expliquer tout ça…

Tout d’abord, on a créé une enveloppe pour ces informations. On l’a appelé « postmetadata ». On utilise ici le tag P et non plus DIV pour bien séparer le contenu des postmetadata.

Ensuite, la commande « php the_time » va permettre l’affichage de la date. Pour le moment, on va rester simple. On voit souvent des customisations de la date, pour en faire des jolis petites boîtes très design. Pour le moment, on ne s’en occupe pas mais on en parlera sûrement plus tard, dans la customisation du thème. Donc, ensuite, on a php_the author qui va appeler l’auteur du billet, idem pour la ou les catégories. Ensuite, on arrive à la commande qui va appeler les commentaires si ceux-ci sont activés. Les 3 options afficheront des messages différents selon que vous avez 1, plusieurs ou que vous n’avez pas de commentaires.

Enfin, la commande edit_post_link va vous permettre d’aller éditer directement l’article de votre page web. Elle possède 3 paramètres. le premier va insérer un mot si vous ne souhaitez pas celui par défaut qui est « Edit this ». Le deuxième va insérer ce que vous voulez AVANT le lien d’édition. Ici, on mets une barre verticale qui a pour valeur &#124. Enfin, le troisième paramètre correspond à ce que vous souhaitez mettre APRES le lien d’édition, ici rien.

Vous pouvez très bien ajouté d’autres informations si vous le souhaitez. Vous pouvez aussi en mettre au début et à la fin de l’article. Mais le but ici était de vous montrer simplement ce que sont les postmetadata et comment on les intègre.

Voilà ! On en a fini avec le loop pour le moment. Ce qu’on a vu ici, ce sont les bases. Dans le prochain article, on va « attaquer » la sidebar, et puis il nous restera le footer, avant d’aborder la feuille de style !

Bon week-end

Tutoriel n°10: « La sidebar et son formulaire de contact »

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

74 Commentaires

  • Formidable, enfin réussi.
    En fait je mettais pas ça exactement ou il fallait.

    C’est formidable tes tutos !

  • A ton service Quiche !! J’étais persuadé que ce serait tout de suite plus simple si tu venais directement par ici !! 😉 A bientôt !

  • Franchement il est génial ce tuto! Je suis en plein dedans, je voulais juste poster en vitesse pour extérioriser ma joie 😉
    Ca fait aussi du bien de voir que tu ne fais pas de fautes d’orthographe ou de grammaire. J’en ai juste vue une pour l’instant, 2ème paragraphe: « après avoir insérer » roooh je suis sûr que c’est une faute d’inattention.
    Je suis content de le découvrir maintenant seulement car je n’ai pas à attendre le prochain post à chaque fois hehe. Bonne continuation

  • JeFF > Je n’aime pas non plus les fautes d’orthographe, mais on ne fait toujours attention à tout !! 😉 Je vais modifier la faute de ce pas !! Merci !! 😉

  • Tu veux dire « je vais modifieR » 😉 (tu peux deleter ce commentaire lol, il ne sert à rien, c’est juste à titre informatif)

  • Laurent

    Bonjour francis,
    je suis en train de m’atteler a creer mon theme et donc a me plonger dans tes tutos, qui sont tres bien expliqués.
    Une chose m’echappe dans celui ci, je ne sait pas a quelle moment on a ajouté une balise php qui affiche les commentaires. car dans mon billet commentaire il y a, ainsi que le nombre mais il n’est pas affiché…
    Ais je fait une erreur quelque part ?

    Pour info j’ai scindé en 2 les post metadata pour une mise en forme perso des infos. je t’ai envoyé le fichier index.php, si tu pouvait vite fait y jeter un coup d’oeil… merci

  • Laurent

    Bon francis oublie, j’avais la tete en l’air, car je ne pensait pas qu’on y viendrait dans un des tutoriels….
    Je pensait vraiment avoir fait une erreur, mais apparement ce n’est pas le cas…

  • Je me lance dans wordpress après avoir bien fait le tour entre Dotclear, spip,… et c’est comme toute nouvelle expérience avec un CMS. C’est dur de comprendre, et je te remercie Franck pour ses explications qui m’ont grandement fait avancer.

    Bonne continuation et continue de nous alimenter avec tes trouvailles 😉

  • littlemonster

    Bonjour,
    Tout d’abord, je tiens à dire que c’est tes tutos sur la création de théme qui n’ont convaincu d’intégrer la communauté WP.
    Bien que trop simple pour moi à certain moment (étant avant tout développeur).
    Je suis donc entrain d’établir mon théme.
    La fonction « comments_popup_link » me pose probleme.
    Concretement , je souhaite intégrer les petite bulles de commentaires que l’ont peut observer dans le théme: CorporateSandbox
    http://rubiqube.com/testzone/w.....ateSandbox

    ma première démarche étant donc de regarder le code source.
    Le code qui m’intéresse et donc le suivant

    ce qui m’amène à deux questions
    =>que signifie les les deux underscore avant les paramètres et pourquoi passé 2 informations dans un dans le parametre un seul n’aurai pas suffit ? pour avoir quelque chose de ce genre :
    comments_popup_link(‘0′,’1′,’%’).

    => sauf erreur de ma part , ne risque t-il pas d’avoir des bugs d’affichage si les commentaire sont verrouillé (tu n’as pas évoquer cette possibilité dans ton tuto) pourtant cela fait bien parti de la fonction comments_popup_link …

    Je te remercie d’avance pour ton éclairage à ce sujet , quelqu’il soit.
    J’ai conscience de ne cadrer qu’à moitié avec ton tuto.
    Mais j’ai penser, que (tu/vous) serai le plus à même à repondre à ce probleme qui doit être un probleme de débutant WP… 😉
    Merci d’avance

  • Valentin

    Bonjour,
    Je suis moi-même en train de créer mon thème wordpress grâce à vos tutos, et je vous remercie de les avoir faits, ils sont géniaux !
    Par contre, une erreur m’est apparue, dans le code que vous nous donnez dans cette page il manque des « ; » (points virgules) à la fin de certaines fonctions, comme j’avais scrupuleusement recopier à la main le code, il ne fonctionnait pas et en utilisant mon cerveau j’ai pensé à les rajouter et maintenant ça marche, alors erreur de votre part ou bizarrerie de ma machine ?

    Cordialement,

    Valentin.

  • Bon grâce à ce tuto, je me suis lancé.
    Mais sur les postmetadata, il y a un truc qui cloche…
    je clique sur le 1 commentaire que j’ai,(je viens d’installer wordpress, et j’ai 1 commentaire de Monsieur WordPress.. 🙂 ) ben il s’affiche pas. Devrait-il s’afficher oui ou non ?
    Sinon j’ai supprimé la fonction « editer », sinon c’est la porte ouverte….

  • dd

    Bonjour, merci pour tous ces superbes tutos !
    Il y a une chose que je n’arrive pas à trouver et à réaliser dans wordpress, ce serait d’afficher les derniers articles comme ceci en définissant le nombre maximum d’artciles à insérer :
    lundi 5 mars
    10h00 – titre news 1
    11h00 – titre news 2
    12h00 – titre news 3
    mardi 6 mars
    10h00 – titre news 1
    11h00 – titre news 2
    12h00 – titre news 3
    mercredi 7 mars
    10h00 – titre news 1
    11h00 – titre news 2
    12h00 – titre news 3

    La solution que tu donnes ne permet pas d’insérer le jour et la date, comment faire pour avoir ce script et est-il possible d’ajouter des icônes de catégories avant l’heure de chaque titre de news ?
    Merci 😉

  • Merci énormément!
    Tes tuto sont vraiment géniaux!

  • pierre

    Bonjour Fran6,

    existe-t-il un code à mettre dans l’index pour que les postmetadata (date, auteur, tags…) ne s’affichent pas sur certaines pages ? (uniquement sur la page des posts, mais pas sur les pages statiques). En tout cas merci pour tous les tutos, c’est très clair !

    Pierre

  • e_d

    Bonjour et tout d’abord, merci pour ce tuto pas a pas fort intéressant.

    J’ai cependant une question. Vous nous avez fait crée une page « content.php » mais au moment de mettre du contenu, on ne passe pas sur celle ci…

    J’ai essayer de faire un mais ça ne fonctionne pas…

    Je l’ai fais avec un include, ce qui marche très bien… cependant je me demande si je n’ai pas loupé quelque chose, ou si je ne prend pas un peu d’avance sur le contenu (qui n’est peut être pas ce que je pense…)

    En tout les cas, merci beaucoup pour ce tuto qui permet de se familiariser avec les petites subtilité de wordpress tout gentiment. 😀

  • noixdecoco

    Je continue!
    Super tuto

  • noaneo

    il manque le code pour afficher les mots-clés.

  • So

    Merci beaucoup pour ce tuto qui m’a vraiment beaucoup aidé !

    J’ai cependant une petite question, j’ai créé un menu déroulant en css et souhaite maintenant appeler les pages, je m’explique: quand on clique sur accueil, une certaine page/texte est censé apparaitre, de même pour « qui sommes nous » ect ect…Je n’arrive pas à trouver quel loop je dois utiliser pour appeler ce contenu et surtout ou je dois le placer , je pensais dans la header mais aprés pas mal d’essais je ne trouve toujours rien , as tu une idée?

    Merci beaucoup!

  • recense mais

    le prix suggéré pour mon blog est passé à 300 euros !! hihi :mrgreen: Du coup, je vais dorénavant vous inonder Nike Free 5.0 de spam histoire d’arrondir mes fins de mois !! 😉

Success, your comment is awaiting moderation.