Créer un thème WordPress – 9 – Les commentaires

Dans cette partie, nous allons ajouter un petit peu de vie et d'interactivité à notre thème en y ajoutant des commentaires.

Un petit peu d'histoire tout d'abord... Avant, le code dédié aux commentaires était semblable à celui de l'affichage des articles. Depuis la version 3, WordPress nous propose une fonction toute faite pour afficher la liste des commentaires sur un articles. Il est fortement recommandé de l'utiliser, non seulement parce qu'elle vous simplifie le travail, mais aussi particulièrement si vous souhaitez héberger votre thème sur wordpress.org. De même, il existe une fonction pour l'affichage d'un formulaire de réponse.

Rassurez-vous, ces fonctions sont totalement paramétrables, vous en faîtes ce que vous voulez !

Préparatifs

Tout d'abord, je vais vous présenter la structure générale du fichier, afin que vous sachiez ou placer les différentes parties que nous allons aborder. Un peu de code ?

<?php
     /**
      *   On teste d'abord si le fichier est bien inclus depuis un autre, et pas chargé
      *   directement, pour des raisons de sécurité. Si c'est le cas, on arrête le script.
      */
     if ( 'comments.php' == basename( $_SERVER['SCRIPT_FILENAME'])) {
          die ( 'Ne pas charger cette page directement,  merci !' );
     }
?>

<!--
     Si l'article est protégé par mot de passe, on affiche aucun commentaire
     mais un petit message d'information.
-->
<?php if ( !empty( $post->post_password ) && ( $_COOKIE['wp-postpass_' . COOKIEHASH ] != $post->post_password )): ?>
     <div id="commentaires">
          <h3>Cet article est protégé par mot de passe</h3>
          <p>Entrez le mot de passe pour voir les commentaires</p>
     </div>

<!--
     Dans le cas contraire, on affiche la liste des commentaires.
-->
<?php else: ?>
     <div id="commentaires">
          <h3>Commentaires</h3>

          <div id="statut-commentaires">
               <!--
                    Des informations sur le statut des commentaires et pings (ouverts, fermés)
               -->
          </div>

          <div id="liste-commentaires">
               <!--
                    La liste des commentaires
               -->
          </div>

          <div id="formulaire-commentaire">
               <!--
                    Ici, on trouvera le formulaire d'ajout de commentaires.
               -->
          </div>
     </div>
<?php endif; ?>

Statut des commentaires

Avant d'afficher la liste, nous allons informer l'internaute de ce qu'il peut voir ou faire. Par exemple, l'informer que les commentaires sont clos. Pour cette fois, le code n'est pas commenté car il est très simple à comprendre. Par contre, vous y gagnerez en lisibilité en le copiant dans votre éditeur (à placer dans la div#statut-commentaires).

<?php if ( comments_open( ) && pings_open( )): ?>
     <p>Vous pouvez <a href="#reponse" title="poster un commentaire">poster un commentaire</a> ou laisser un trackback &agrave; <a href="<?php trackback_url( ) ?>" title="URL de trackback pour votre article">cette adresse</a>.</p>
<?php elseif ( !comments_open( ) && pings_open( )): ?>
     <p>Les commentaires sont ferm&eacute;s, mais vous pouvez laisser un trackback &agrave; <a href="<?php trackback_url( ) ?>" title="URL de trackback pour votre article">cette adresse</a>.</p>
<?php elseif ( comments_open( ) && !pings_open( )): ?>
     <p>Les trackbacks sont ferm&eacute;s, mais vous pouvez <a href="#reponse" title="poster un commentaire">poster un commentaire</a>.</p>
<?php else: ?>
     <p>Les commentaires et trackbacks sont ferm&eacute;s.</p>
<?php endif; ?>

Quelques explications tout de même... comments_open( ) nous informe du statut des commentaires sur l'article (ouverts ou fermés). De même, pings_open( ) nous informe sur le statut des trackbacks (ou pings). Pour ce qui est des liens, #reponse est une ancre sur le formulaire de réponse, et trackback_url( ) affiche l'url de trackback pour l'article courant.

Liste des commentaires

Passons aux commentaires eux-mêmes. WordPress fournit une fonction qui nous simplifie grandement la vie : wp_list_comments( ). Encore une fois, elle est assez parlante. Elle affiche la liste des commentaires sur un article en fonction de certains paramètres. Par exemple, on peut demander une certaine profondeur de réponse, une mise en forme particulière, et autres à voir sur la doc.

Pour tester le rendu de cette fonction, vous pouvez insérer ce bout de code dans la div#liste-commentaires :

<ul>
     <?php wp_list_comments( ); ?>
</ul>

Ça marche tout seul ! Vérifiez que vous avez bien ajouté quelques commentaires pour le test... Comme nous souhaitons un peu plus de contrôle sur l'affichage (si, si je vous jure !), nous allons utiliser un paramètre très intéressant de wp_list_comments( ) : 'callback'. Il sert à définir une fonction qui sera appelée pour afficher un commentaire. Nous allons donc légèrement modifier l'appel de la fonction :

<ul>
     <?php wp_list_comments( array( 'callback' => 'commentaire' )); ?>
</ul>

Voilà. À chaque commentaire, wp_list_comments( ) appellera la fonction commentaire( ), qui sera chargée d'afficher ce commentaire. Bien sûr, il nous reste encore à écrire cette fonction !

En toute logique, on va l'ajouter à notre fichier functions.php. Comme toujours, voici un code commenté que vous avez grand intérêt à recopier dans votre éditeur :

<?php
     /**
      *   Notre fonction prends 3 paramètres :
      *   - le commentaire à afficher (un objet qui contient le titre, le contenu etc)
      *   - un tableau d'arguments divers comme la profondeur maximale de réponse, la taille de l'avatar...
      *     vous pouvez utiliser ce tableau pour contrôler plus finement certains aspects de l'affichage.
      *   - la profondeur actuelle de réponse
      */
     function commentaire( $comment, $args, $depth ) {

          /**
           *   Cette affectation permet d'utiliser des fonctions comme comment_text( ),
           *   comment_title( ) etc, qui utilisent la globale 'comment'.
           *   Personnellement, je trouve l'utilisation des globales peu recommandable,
           *   mais c'est comme ça, c'est WordPress !
           */
          $GLOBALS['comment'] = $comment;
?>

     <!--
          L'élément de liste qui contient le commentaire.
          Comme avec les articles, on attribue un id qu'on récupère avec comment_ID( ),
          et on génère des classes avec comment_class( ), même principe que body_class( )
          ou post_class( ) que l'on a déjà rencontrées.
     -->
     <li id="comment-<?php comment_ID( ); ?>" <?php comment_class( ); ?>>

          <!-- Le bloc d'en-tête du commentaire. -->
          <div class="en-tete-commentaire">

               <!-- comment_author_link( ) affiche le nom de l'auteur, avec un lien vers son site. -->
               <span class="auteur"><?php echo comment_author_link( ); ?></span>

               <!--
                    Méta-données sur le commentaire : date et lien d'édition.
                    Je ne m'étends pas dessus, c'est le même principe que pour les articles.
               -->
               <p class="meta-commentaire">
                    <?php comment_time( get_option( 'date_format' )); ?>
                    <?php edit_comment_link( 'Modifier', ' | ' ); ?>
               </p>
          </div>

          <div class="avatar">
               <?php
                    if ( function_exists( 'get_avatar' )) {
                         /**
                          *   Si la fonction get_avatar( ) existe (WordPress 3.x), on l'utilise pour afficher l'avatar.
                          *   Elle accepte deux paramètres :
                          *   - l'email de l'auteur
                          *   - la taille de l'avatar
                          */
                         echo get_avatar( $comment->comment_author_email, $args['avatar_size']);
                    } else {
                         /**
                          *   Pour les anciennes versions, on y va à l'ancienne !
                          *   On construit l'URL de l'avatar avec le md5 de l'email en minuscules, l'image par défaut (d), et la taille (s).
                          *   Ensuite, on affiche une image ayant cette Url pour source.
                          */
                         $gravatar = "http://www.gravatar.com/avatar/" . md5( strtolower( $comment->comment_author_email )) . '?d=mm&s=' . $args['avatar_size'];
                         echo '<img src="' . $gravatar . '" alt="avatar de l\'auteur" />';
                    }
               ?>
          </div>

          <div class="contenu-commentaire">
               <?php
                    /**
                     *   Si le commentaire n'est pas encore approuvé, on affiche un petit message, sinon son contenu.
                     */
                    if ( $comment->comment_approved == '0' ) {
                         echo '<em>Votre commentaire est en attente de mod&eacute;ration.</em>';
                    } else {
                         comment_text( );
                    }
               ?>
          </div>

          <div class="pied-article">
               <!--
                    comment_reply_link( ) affiche un lien de réponse au commentaire.
                    On lui passe en argument un tableau contenant la profondeur de réponse.
               -->
               <?php comment_reply_link( array( 'depth' => $depth )); ?>
          </div >

     <!--
          Les plus attentionnés aurons remarqué qu'il n'y a pas de balise fermante </li>.
          Il ne faut surtout pas l'ajouter, WordPress le fait tout seul.
          Pourquoi ? Au cas où il y aurait des commentaires en réponse à insérer avant de fermer la balise.
     -->

<?php
        }
?>

Avec tout ça, vous avez déjà une liste de commentaires solide ! Voici les nouvelles fonctions utilisées ici : comment_ID( ), comment_class( ), comment_author_link( ), comment_time( ), edit_comment_link( ), get_avatar( ), comment_text( ) et comment_reply_link( ).

Ouf ! Après tous ça, il nous reste quand même une chose à rajouter, et pas des moindres... Un formulaire de réponse ! Eh oui, c'est bien beau d'afficher plein de jolis commentaires, mais encore faut-il pouvoir les écrire !

Formulaire de réponse

Encore et toujours, WordPress nous propose une fonction fatale qui fait tout ce qu'on lui demande. Dans ce cas, c'est comment_form( ). De la même manière que wp_list_comments( ), elle fonctionne sans arguments, mais on peut la personnaliser. Testez-la en plaçant ce code dans la div#formulaire-commentaire :

<?php comment_form( ); ?>

Efficace, non ? Personnellement, je trouve que cette fonction fais bien son travail. Je ne vais pas détailler la configuration de ce qu'elle affiche autant que pour les commentaires, mais voici tout de même 2 ou 3 lignes pour l'exemple :

<?php
     comment_form(
          array(
               /**
                *   Ici, je change le texte affiché après le formulaire.
                */
               'comment_notes_after'  => '<p>Vous pouvez utiliser ces balises : <code>' . allowed_tags( ) . '</code></p>',

               /**
                *   Puis je change la valeur de l'attribut id du formulaire. 
                */
               'id_form' => 'formulaire',
          )
     );
?>

En procédant ainsi, vous pouvez changer à peu près n'importe quoi dans le formulaire. Faîtes un tour sur la doc pour en savoir un peu plus !

Finalement, nous y sommes ! On peut maintenant afficher un article complet, avec ses commentaires et la possibilité d'y répondre. On se retrouve à l'étape suivante ?

Sommaire du tutoriel

  1. Introduction
  2. Installation
  3. L'architecture des fichiers
  4. Informations sur le thème
  5. La mise en page générale
  6. L'en-tête de page
  7. Les articles
  8. Articles et pages seuls
  9. Les commentaires (on y est !)
  10. La barre latérale
  11. Le pied de page

Commentaires

  • Bonjour,
    je viens de lire l’intégralité de votre série
    d’article « Créer un thème WordPress »
    Je me pose simplement la question suivante:
    Pourquoi n’avez vous pas activé la fonction « commentaire » pour les pages?
    Cordialement.

    note: je trouve ce thème très bien réalisé et extrêmement bien commenté.
    Encore merci pour votre travail.

    • Bonjour,
      tout d’abord merci du commentaire !
      Je ne l’ai pas activé car pour ma part, je n’en vois pas l’intérêt. En tout cas pour les pages que je propose en général.
      Ceci dit, ce n’est que l’affaire d’une ligne pour les remettre, si besoin est 😉

  • Je teste votre bouton « Laisser un commentaire » car le mien en reprenant cet article m’envoie sur « wp-comments-post.php ». Il n’y a rien sur cette page.

    J’aimerai rester sur la page en cours. Avez vous une idée?

    Je vous remercie vos tutos sont vraiment clairs et utile pour moi.

  • Vous avez utilisé comment_form( ) ? A priori cette fonction fait le travail correctement, j’avoue que cette erreur m’étonne…
    Avez-vous utilisé des options pour modifier le comportement de la fonction ?

    PS: Merci d’avoir lu ces tutos, content qu’ils vous soient utiles 😉

  • Bravo et merci.
    Mais quand j’utilise la fonction montheme.php (grace au « callback), je n’ai plus le bouton « répondre » pour chaque commentaire.
    J’ai l’impression que comment_reply_link ne fonctionne pas !
    Une idée SVP ?

    • Trouvé sur un wordpress.org :

      $depth, ‘max_depth’ => $args[‘max_depth’])); ?>

      Ca fonctionne pour moi

  • Un grand merci..votre article m’a évité de longues recherches dans le codex de WordPress. Il ne me reste plus que la mise en page…c’est du bonus :o)

    Bonne continuation !

    • Ravi que ça puisse vous servir 😉
      Il faut toujours que je rajoute une version pour Html5 puis un chapitre pour la mise en page quand j’en aurais le courage (…)

  • Joli travail de rédaction et de pédagogie, c’est didactique et pas trop technique. Juste comme ça, il me semble que la balise L86 du code du callback est superflue (comme le cité dans le commentaire).

    Si tu cherches une idée d’articles, il y a de quoi faire du côté de l’utilisation de jquery, avec des fonctions « inutiles donc indispensables » comme le scrollTo et j’en passe. Car, pour un novice, il y a de quoi s’arracher les cheveux avec le mode noConflict.

    Bonne continuation. 🙂

    • J’ai posté trop vite, je faisais référence à ligne 86 et à cité en commentaire.

    • Hum, il semblerai bien que les blases ne soient pas autorisées…

  • Un dernier mot et j’arrête de jouer les boulets qui tapent avec des moufles… La fonction callback affiche les commentaires en li, mais où est le ul ? =)

  • @Seb : Merci pour les corrections !
    Donc en effet, la balise ne sert à rien, et il faut entourer la fonction wp_list_comments de balises ul ou ol.

    Pour ce qui est de jQuery, j’avoue que je ne m’en sert pas énormément, donc je n’ai pas encore senti le besoin de faire un tuto la-dessus, mais je garde l’idée en tête 😉

  • très bon article, ça fait du bien de voir un tuto de création de thème d’actualité.

  • Bonjour, merci pour ce super tuto, mais j’ai un problème. Tous ce que je met dans function.php n’est pas pris en compte. Les commentaires sont afficher suivant le fichier de base de wordpress. Je ne peux pas personnaliser l’affichage des commentaire ;(
    Auriez vous une solution ?

  • Bonjour, j’ai suivi votre tuto et je l’ai très bien compris et ça fonctionne presque.
    J’utilise :
    – WordPress 3.8.1
    – html 5/CSS3 (je pense)
    – je suis en local avec mamp (sur mac) donc site pas encore hébergé

    J’ai deux petits problèmes :

    – concernant le fichier functions.php : vous dites de copier l’intégralité du code dans le fichier functions (précisé plus haut), lorsque je le fais, tout le contenu de mon site n’apparait plus (page blanche). Je n’ai que ça de présent dans mon fichier function :

    – Sur mon site apparait cette phrase =

    Vous pouvez utiliser ces balises et attributs HTML :

    Je ne sais pas d'où elle sort et je vois que sur votre site juste au dessus du bouton laisser un commentaire, elle apparait. Cependant j'aimerai qu'elle n'apparaisse pas.

    Vous remerciant d'avance pour ces précieux conseils.

  • je vous remercie pour cet article instrucif , bien detailer. et j’aimerai savoi comment Changer l’atribut nofollow en dofollow dans les commentaire. est ce qu’on peux le faire sans l’aide d’un plugin? Merci

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *