Fran6art 13 ans de blogging par Francis Chouquet

Création Thème WordPress | Tutorial #16: Insertion des commentaires

0

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

Si vous avez bien tout suivi, vous avez dû vous rendre compte qu’il manque quelque chose d’important à notre thème: les commentaires ! Aujourd’hui, nous allons les ajouter à nos articles. Sans commentaires, un billet et son blog ne sont plus les mêmes ! 😉

Création du template comments.php

Nous allons devoir créer un nouveau template, comments.php et y insérer le contenu de ce document. Ici, et pour la première fois dans cette série de tutoriels, je ne vais pas trop vous expliquer le contenu de ce template. Ce serait trop long et trop compliqué. Ce qu’il faut savoir c’est que c’est le template par défaut pour les commentaires et celui utilisé le plus souvent sur les différents thèmes. Dans un prochain billet, je ferai une description détaillée du fichier mais ici, on n’en a pas vraiment besoin. Dès lors que l’on changera quelque chose, ce sera au niveau des feuilles de style, des CSS.

Donc, une fois votre template créé et le contenu du fichier copié, enregistrez le document et fermez-le.

Mise à jour du template single.php

Dans le tutoriel précédent on a créé le template single.php qui nous permet d’afficher les articles un par un, et surtout qui nous permettra de paramétrer différemment ces pages des autres pages du blog. Dans ce template, on va insérer une ligne de code qui va nous permettre d’aller chercher dans le template comments.php l’info dont a besoin pour afficher les commentaires. Cette ligne, on va l’insérer avant le « php endwhile », et après le « php the_content » pour que les commentaires s’affichent directement sous le contenu des articles:

1 2 3 
<div class="comments-template"> <?php comments_template(); ?> </div>

Ici, on a ajouté une classe « comments-template » pour pouvoir modifier le style des commentaires par la suite.

Une fois le code inséré, enregistrez votre template et allez voir sur votre navigateur ce que ça donne. Si tout s’est bien passé, l’espace dédié aux commentaires devrait apparaître sous l’article. Laissez donc un commentaire pour voir ce que ça donne !

La suite avant la fin de la semaine ! Promis !

Tutoriel n°17: « navigation, page non trouvée et validation xhtml du theme »

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

105 Commentaires

  • david

    merci et vivement la mise en forme css car j’ai mijoté une jolie interface sous photoshop !!!

  • J’espère que tu nous en fera profiter !!! 😉

  • Manu

    [i]Laissez donc un article pour voir ce que ça donne ![/i]

    Ce ne serait pas plutôt : Laissez donc un commentaire pour voir ce que ça donne !

  • Effectivement… Heureusement qu’y en a qui suivent !!! 😀 Merci !

  • Je voulais juste préciser, à ceux qui le souhaitent, qu’on peut mettre l’heure et la date au format jj/mm/aaaa ev remplaçant F jS, Y par j/m/Y ou tout simplement j m Y pour avoir 20 06 2007. On deviendra le, at : à et pour l’heure, dans la balise php comment_time() on mettra H:i entre parenthèses (donc php comment_time(H:i) qui donnera 20:42).

    Personnellement j’ai francisé la totalité de mon thème utilisé, c’est pas très compliqué.

  • delman

    hummm une petite demande de plus
    j’ai remaquer que ta costomisie avec un javascript les messages d’errere de ton formulaire et comme je le trouve super sympa je me demande si ce possible de me permetre de l’utilise 😉 plus directement de me dire comme et quoi ajoute a la place de la mouchte de wp me sort 🙂

  • delran > désolé mais je n’ai pas très bien compris ta demande…;-) Bien sûr tu peux utiliser le Javascript !

  • Flavien

    Bonjour,
    tout d’abord, merci Fran6 pour cette série de tutos sans laquel je ne me serai jamais lancé dans la création d’un thème.
    J’aimerais savoir comment faire pour afficher les trackbacks (pas le lien trackback, mais bien les trackback) en dessous des commentaires.
    Merci pour ton aide !
    Flavien

  • Salut Flavien,

    Normalement, les trackbacks viennent se mettre automatiquement après les commentaires et sont considérés comme des commentaires. Je vais regarder ça de plus près et pondre un article. En tout cas, merci d’avoir relever l’info…

    PS: en fait, je crois que c’est plus les « pingbacks » que les « trackbacks »…;-)

  • Flavien

    OK, donc les pingbacks viennent se coller dans les commentaires mais les trackbacks ne sont pas visible.
    En effet, si tu fais un billet là dessus, cela m’intéresserais bien, car j’aimerais ne plus voir les pingbacks (je crois qu’ils suffit de les désactiver) par contre avoir un champ exprès pour les trackbacks.
    Merci de ton aide
    Flavien

  • bonjour,

    je possède des blogs http://www.babotesto.com et autres hhtp://babotesto.wordpress.com
    ce tuto est trop bien fait… j’ai decide de me lancer à l’eau pour créer le mien propre…
    et jusque la je dirais que ca va…
    ( because le prof est bon pédagogue)
    mais petite truc qui m’embete, une phrase apparait en haut de mon site

    Warning: array_merge() [function.array-merge]: Argument #2 is not an array in C:\xampp\htdocs\wordpress\wp-includes\widgets.php on line 53

    ca veut dire quoi ? je le change comment ??

    merci d’avance !!

  • Bonjour, petit problème le fichier est down http://www.fran6art.com/documents/comments.txt !! :s

  • ha bah non c’est bon, petit problème de DNS désolé !

  • TooGz

    Salut Fran6,
    tout dabord merci pour le travail que tu fournis. Il m’est très utile 😉
    Je poste ici car les commentaires de la partie 16 sont fermés.
    j’était en train de créer mon fichier archive.php et je me suis rendu compte qu’une seul ligne changeais.je me suis donc dit qu’une boucle pourrait surement s’imposé d’elle meme.
    j’ai pensé a ca:

    qu’en penses tu?
    y’a t-il une raison de le mettre dans un fichier séparé?

  • TooGz

    Oups! WordPress a mangé mon code (sûrement les balises php)

    if(is_category() || is_archive()) {
    the_excerpt();
    } else {
    the_content();
    }

  • TooGz > Disons que c’est plus « sémantique », même si c’est pas le terme exact !! :mrgreen:

  • TooGz

    après mûres réflexions (si si ça m’arrive…)
    je vais garder le fichier séparé qui me permettras d’avoir plus de contrôle sur la page.

    Merci pour ta rapidité dans la réponse.

    @ Bientôt

  • 🙁 je t’écris ici car on ne pouvait plus poster de commentaires sur la leçon d’avant.

    Voilà mon problème :
    J’ai bien copié collé le contenu de index.php dans archive.php en changeant content en excerpt… Seulement mes articles ne sont pas écourtés! Au debut je pensais que c’etait dans ma session admin de wordpress, je suis allé éditer mes articles mais il n’y avait pas de Visual, j’ai du insérer à la main le . Dans ce cas ça marche, mais même si j’enlève archive.php… Ca veut dire qu’il ne le prend pas en compte? Qu’est-ce qui se passe?

  • JeFF > Sûrement un problème de syntaxe dans ton fichier. Normalement, tu n’as pas à utiliser la balise more avec le the_excerpt… Vérifies une nouvelle fois le contenu de ton fichier archive.php…

    … ou alors, mets l’excerpt dans ton index.php pour voir ce que ça donne… 😉

  • Effectivement, quand je met l’exerpt dans index.php, ca écourte mes posts. Par contre il n’y a pas le lien « more » apres le texte, seulement […].
    Dois-je appeler archive dans l’index à l’aide d’un template tag, ou le parcours dans la hiérarchie se fait toute seule?

  • JeFF > Donc le problème provient bien de ton fichier d’archives… revérifie tout ça. Laisses l’index de côté et recopie le code comme il faut, normalement ça devrait passer… Si tu n’y arrives toujours pas, va voir au tuto 23, je propose un lien pour récupérer les fichiers du thème !! 😉

  • Arf, je n’avais pas fermé la div « page » dans archive.php. Je vois par contre que tu l’as aussi fermée dans page.php mais ça a l’air de marcher quand même sans. Je n’ai pas encore terminé le tuto, peut-être qu’on le rajoute après… Merci en tout cas! A bientôt pour les futurs bugs 😛

  • hypnotiz

    Bonsoir,
    Très bon tuto je t’on félicite, mais j’ai un sousi il y a des nombres dans avec le commantairs ( 1. 2. 3. ex.. ) j’ai pas pu les supprimer puvez vous m’eder SVP 🙂

  • Bonjour,
    Je suis en train de me créer un nouveau site, un peu plus pro que le mien actuel ! J’utiise donc wordpress et lit vos tutaux qui sont plutôt bien fait ! Bravo donc !
    Par contre je suis arrivée à la personnalisation de mes commentaires et là j’ai un soucis, impossible de trouver comment placer automatiquement la réponse au commentaire sous le commentaire concerné. Mes réponses viennent se mettre à la fin de la liste des commentaires… Pas terrible donc !
    Merci d’avance du conseil !

  • J’oubliais : j’ai aussi activé l’option pour afficher l’avatar dans les commentaires cependant rien ne s’affiche… (j’utilise le thème mimbo)

  • Bonjour Francis,
    Bravo pour le boulot remarquable ! J’avoue que je commence enfin à comprendre la logique des thèmes pour WordPress. Et c’est un bonheur de sortir du brouillard grâce à toi !
    Petit problème, néanmois… Jusqu’au tutoriel #15 inclus, aucun souci. Mais 2 problèmes sont apparus à partir du #16.
    – Tout d’abord, impossible de faire afficher les commentaires sous le contenu des articles. Où que je place les trois lignes de code avec comments_template(), ça ne marche pas.
    – Tout aussi embêtant : quand je clique sur le titre d’un article, il se créé une sorte de boucle dans la page qui apparait, avec des centaines d’exemplaires du même article, séparés par le « Oops » de la recherche infructueuse…
    – Pas moyen non plus, tant que j’y suis, de faire apparaitre les liens vers les pages précédentes et suivantes du #17. Où que j’insère le code dans la page, ça ne marche pas.

    Après avoir élaboré le code de chacune des pages PHP à la main (je me suis appliqué !), j’ai fini par copier-coller le code de tes pages (téléchargées avec le #23) dans les miennes… mais ça n’a pas résolu le problème. Et quand je passe le code source au validateur W3C, j’obtiens 9 erreurs que je n’arrive pas à localiser dans le code.

    Que faire ? Je suis bien embêté ! Si près du but… et encore si loin !

    A très vite, et encore merci.

    Benjamin

  • Salut j’avais eu le même problème pour les articles en boucle, je ne sais pas ce qui cause cela, mais ça s’est résolu en remettant la page single.php de mon thème sur le serveur.

  • babotesto… que veux-tu dire par « la page single.php de mon thème »… Tu parles d’une autre page single.php que celle du tutoriel de Francis ? Merci !

  • oui moi j’ai un thème open book mais je pense que le problème est le même pour cette histoire de boucle, donc si tu remets sur ton serveur la page single.php , ça devrait aller, non ? Tiens nous au courant 🙂

  • babotesto : j’apprends avec le tuto de Francis sur un wordpress installé en local, sur mon Mac. Les seuls fichiers de thème que j’ai sont les siens. J’utilise bien un autre thème (gear), sur mon blog, mais il n’a rien à voir avec ce que j’essaie de faire avec le tuto de Francis. Je ne vais pas mélanger le fichier single.php du thème que j’utilise, pour de vrai, online, avec les fichiers du thème pour lequel on est parti de zéro avec Francis. Si ? Je ne vois pas bien, en fait, quel autre fichier single.php je peux aller piocher et « remettre sur mon serveur »… Au risque de paraitre limite neu-neu, peux-tu m’expliquer ? 😉

  • en comparant avec la single.php fournit dans wordpress, dans le thème par défaut, peux tu trouver s’il y a une erreur de syntaxe ou autre ??? …c juste une piste…;-)

  • Benjamin > Tu as dû te planter dans le code à un moment où un autre, et personnellement, je ne pense pas que de prendre les fichiers d’un autre thème, même le thème « default » te permettra de comprendre pourquoi le tien ne fonctionne pas. Par contre, au tuto 23, j’ai mis un lien vers les fichiers du thème que tu conçois ici, donc prends ces fichiers et compare par rapport à ce que tu as fait et vérifie où tu t’es planté. Mais dis toi qu’il suffit de pas grand chose pour que ça foire, rien qu’un espace en trop peut être de trop…

    Normalement, avec ça, tout devrait rentrer dans l’ordre ! 😉

  • Merci Francis. J’ai laissé tomber mes fichiers, je suis reparti des tiens. Ca a résolu tous les problèmes « visibles » : la case de saisie des commentaires apparait bien sous les articles. Et je ne débouche plus sur 1.000 exemplaires du même post quand je clique sur le titre de l’un d’entre eux.
    En revanche, j’ai passé le code source au validateur du W3C… et j’obtiens 10 erreurs et 1 avertissement.
    Est-ce normal ?
    Ces erreurs ont-elles été identifiées et corrigées ? Si oui, y a-t-il moyen de récupérer les fichiers à jour du tutoriel, et donc totalement valides ?
    Mille mercis !

  • Benjamin > Normalement, les fichiers sont valides, je les ai encore testé. As-tu des articles sur ton blog ? Ca peut venir de là…

  • Petite question : j’ai le même problème que Flavien. Mon blog affiche bien les pingbacks, mais rarement les trackbacks (en tout cas pas tous…)

    Est-ce lié à mon blog, ou à la manière dont les billest citant les miens sont publiés ?

  • le comments.txt est à jour ?

    j’ai comparer avec le comments.php de Default_Theme et ils sont totalement différent

  • Anthony > Le comments.php de la dernière version du thème Défault prend en compte la hiérarchisation des commentaires, pas celui fournit ici…

  • Euh honte à moi, la hiérarchisation des commentaires ? C’est-à-dire ?

  • Re, par contre
    « on va l’insérer avant le “php endwhile”, et après le “php the_content” »

    et après avoir suivi vos précèdents tutoriels, j’ai :

    Donc où ? il a trois possibilités

  • Merci pour cette source intéressante.

  • aoudjane

    je travail en local et tout allé bien grace a vos tu taux jusa maintenant mais jarive pas a trouvé ou je me suis trompé .j’arive pas a afficher les commentaires

  • aoudjane

    sé bon en faite javais plusieur ereur d’inatention en suivant les tutos précedent.mais sé bon mes comentaire s’affiche.merci bocoups pour ses tres bon tuto.

  • renorcht

    Bonjour,
    je viens d’insérer à l’endroit indique cette balise ci-dessous dans mon fichier single.php.

     »

     »

    Le problème c’est que maintenant j’ai l’espace de commentaires dessus et dessous l’article alors qu’avant je ne l’avais que dessus.

    Comment faire pour qu’il ne soit que dessous ?

    Merci d’avance à vous.

  • Merci pour ce tutoriel qui jusque là fonctionnait à la perfection…

    Après avoir créé le template comments.php à partir du fichier rien ne passe. Dès que je veux envoyer un commentaire voilà la page qui apparaît:

    Warning: Cannot modify header information – headers already sent by (output started at /Applications/MAMP/htdocs/www/wordpress/wp-content/themes/Creation Theme/functions.php:15) in /Applications/MAMP/htdocs/www/wordpress/wp-comments-post.php on line 82

    Warning: Cannot modify header information – headers already sent by (output started at /Applications/MAMP/htdocs/www/wordpress/wp-content/themes/Creation Theme/functions.php:15) in /Applications/MAMP/htdocs/www/wordpress/wp-comments-post.php on line 83

    Warning: Cannot modify header information – headers already sent by (output started at /Applications/MAMP/htdocs/www/wordpress/wp-content/themes/Creation Theme/functions.php:15) in /Applications/MAMP/htdocs/www/wordpress/wp-comments-post.php on line 84

    Warning: Cannot modify header information – headers already sent by (output started at /Applications/MAMP/htdocs/www/wordpress/wp-content/themes/Creation Theme/functions.php:15) in /Applications/MAMP/htdocs/www/wordpress/wp-includes/pluggable.php on line 865

    Merci de m’aider car suis perdu !!!

    Bien à vous

Success, your comment is awaiting moderation.