WordPress de A à Z — D comme Discussion (les commentaires dans ♥ Basics)

Après la partie « C comme CSS & Composé HTML5 » consacrée à l’organisation des CSS dans le thème WordPress ♥ Basics, voici venu le temps d’aborder ce qui fait le sel des blogs et des sites web participatifs : les discussions. Dans cet article, nous verrons quels sont les éléments impliqués dans l’affichage des commentaires : 1) marquage HTML du formulaire permettant de publier un commentaire, et 2) affichage des commentaires déjà publiés. Le tout avec le maximum d’éléments issus de HTML5 et une pincée de microformats. Voici le sommaire complet des 26 articles de WordPress de A à Z.

WordPress de A à Z

1. Logo « WordPress je thème »
2. WordPress de A à Z… avec le Codex
3. A comme Allons-y !
4. B comme Basics
5. C comme CSS & Composé HTML5
6. Vous lisez D comme Discussion (les commentaires)
7. Prochain article : E comme …Heu… (selon arrivage !)

→ ♥ Basics en bref et lien de téléchargement.

comments_template()

L’affichage des commentaires s’effectue avec la fonction comments_template(). S’il existe, cette fonction va chercher le fichier comments.php de votre thème. Par défaut, le fichier comment-template.php situé dans le dossier /wp-includes de votre installation WordPress sera utilisé.

Dans la plupart des thèmes, la fonction comments_template() est généralement appelée depuis le fichier single.php. Dans ♥ Basics, elle est appelée depuis le fichier index.php lorsque la condition is_singular() est vérifiée :

<?php if( is_singular() ) : ?>
    <section role="complementary">
        <?php comments_template(); ?>
    </section>
<?php endif; ?>

comments.php

Dans ♥ Basics, la liste des commentaires publiés par les lecteurs est gérée par comments.php. Ce fichier vérifie que les commentaires ne sont pas associés à un billet protégé par un mot de passe et affiche les commentaires le cas échéant, ainsi que la navigation entre les différents commentaires, si besoin.

La liste des commentaires est amorcée dans comments.php de la manière suivante :

<ol class="commentlist">
    <?php wp_list_comments( array( 'callback' => 'basics_comments' ) ); ?>
</ol>

HTML 5

Les éléments HTML5 présents dans comments.php sont principalement les balises header, hgroup et nav.

basics_comments()

La fonction basics_comments() située dans functions.php sert ici de fonction de rappel à wp_list_comments(). Elle contient essentiellement le contenu de l’éléments de liste li contenant les l’ensemble des éléments associés à un commentaire :

• Avatar du commentateur : get_avatar(),
• Pseudo avec lien associé : get_comment_author_link(),
• Date de publication du commentaire dans la balise HTML5 <time> : <?php /* translators: 1: date, 2: time */ printf( __( '%1$s at %2$s', 'basics' ), get_comment_date(),  get_comment_time() ); ?>
• Lien pour modifier le commentaire : edit_comment_link(),
• Texte du commentaire proprement dit : comment_text(),
• Lien pour répondre à un commentaire précis selon le niveau de profondeur spécifié dans les réglages de l’administration de WordPress : <?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply!', 'basics' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>

La suite est composé de l’affichage des pingback et trackback.

HTML 5

Les éléments HTML5 présents dans basics_comments() sont principalement les balises :

• article qui enveloppe l’ensemble du commentaire,
• footer pour les information associées au commentateur,
• time pour la date de publication du commentaire.

Microformats

hCard : vcard, fn.

basics_respond()

Le formulaire pour laisser un commentaire est construit dans la fonction basics_respond() située dans functions.php. Elle est appelée depuis comments.php via comment_form( $new_defaults ).

Il s’agit d’un array() contenant les éléments de formulaire permettant aux visiteurs de publier un commentaire ou de répondre à un commentaire déjà publié. J’ai choisi d’utiliser une liste pour regrouper le champ text et le label pour le nom ou le pseudo de l’auteur du commentaire, l’adresse e-mail et le site web.

Le textarea permettant qui de saisir le commentaire proprement dit est géré à partir du deuxième paramètre du tableau $defaults = array(...) :

'comment_field' =>
'<div>
    <p><label for="comment">' . _x( 'Comment', 'noun','basics' ) . '</label></p>
    <p><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>
</div>'

Le premier paramètre regroupe l’ensemble des champs vus plus haut $fields = array(...), tandis que les paramètres suivants s’occupent de l’ensemble des éléments présents avant, pendant ou après les commentaires.

HTML 5

Les éléments HTML5 présents dans basics_respond() sont principalement :

• L’attribut placeholder qui permet d’afficher un texte par défaut dans les champs de formulaire et du textarea,
• le type de champs : type="email" ou type="url" associés aux champs input . Peu utilisés pour l’instant par les navigateurs de bureau, ils sont néanmoins pris en charge par certains périphériques mobiles qui affichent un clavier adapté au type de saisie.

Vous lisiez ? Et bien, commentez maintenant 😉

J’ai essayé de faire en sorte que cette partie sur les commentaires soit la plus synthétique possible, car il est facile de se perdre dans les méandres des différents fichiers et fonctions que WordPress met à notre disposition. N’hésitez pas à me signaler les oublis éventuels ou les raccourcis trop elliptiques qui nuiraient à la compréhension du billet.