Le modèle de commentaires WordPress (rappel) n’est pas seulement l’une des étapes les plus compliquées lors de la création d’un thème WordPress personnalisé, mais le code de commentaires par défaut est également assez compliqué à personnaliser. Si vous êtes un développeur de thème et que vous êtes coincé à essayer de personnaliser vos commentaires pour les faire ressembler à ce que vous voulez, mais que vous ne pouvez pas parce que vous devez ajouter des classes div supplémentaires ou en supprimer, alors vous devez consulter cet article . Je vais vous montrer comment créer facilement un modèle de rappel personnalisé que WordPress utilisera pour la structure de vos commentaires afin que vous puissiez avoir un contrôle total sur la conception de vos commentaires.
Une note aux développeurs.. Lors de la création d’un thème WordPress pour le WordPress.org répertoire ou pour la redistribution sur tout autre marché, il est préférable de laisser la conception de commentaire par défaut pour s’assurer qu’il n’y a pas de conflits possibles avec des plugins tiers. Ce tutoriel s’adresse principalement à ceux qui recherchent une solution personnalisée sur leur site actif (en faisant la modification via un thème enfant) ou à ceux qui développent un design personnalisé pour leur client.
Passons maintenant au didacticiel proprement dit et si vous avez des questions ou des suggestions sur la façon dont nous pouvons améliorer le guide, veuillez me le faire savoir dans la section commentaires sous le guide.
Étape 1 : Créez better-comments.php
Créez un nouveau fichier php sur votre thème parent ou enfant (vous pouvez l’appeler n’importe quoi, mais j’aime l’appeler better-comments.php) et collez le code ci-dessous.
<?php
// My custom comments output html
function better_comments( $comment, $args, $depth ) {
// Get correct tag used for the comments
if ( 'div' === $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
} ?>
<<?php echo $tag; ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment-<?php comment_ID() ?>">
<?php
// Switch between different comment types
switch ( $comment->comment_type ) :
case 'pingback' :
case 'trackback' : ?>
<div class="pingback-entry"><span class="pingback-heading"><?php esc_html_e( 'Pingback:', 'textdomain' ); ?></span> <?php comment_author_link(); ?></div>
<?php
break;
default :
if ( 'div' != $args['style'] ) { ?>
<div id="div-comment-<?php comment_ID() ?>" class="comment-body">
<?php } ?>
<div class="comment-author vcard">
<?php
// Display avatar unless size is set to 0
if ( $args['avatar_size'] != 0 ) {
$avatar_size = ! empty( $args['avatar_size'] ) ? $args['avatar_size'] : 70; // set default avatar size
echo get_avatar( $comment, $avatar_size );
}
// Display author name
printf( __( '<cite class="fn">%s</cite> <span class="says">says:</span>', 'textdomain' ), get_comment_author_link() ); ?>
</div><!-- .comment-author -->
<div class="comment-details">
<div class="comment-meta commentmetadata">
<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>"><?php
/* translators: 1: date, 2: time */
printf(
__( '%1$s at %2$s', 'textdomain' ),
get_comment_date(),
get_comment_time()
); ?>
</a><?php
edit_comment_link( __( '(Edit)', 'textdomain' ), ' ', '' ); ?>
</div><!-- .comment-meta -->
<div class="comment-text"><?php comment_text(); ?></div><!-- .comment-text -->
<?php
// Display comment moderation text
if ( $comment->comment_approved == '0' ) { ?>
<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'textdomain' ); ?></em><br/><?php
} ?>
<div class="reply"><?php
// Display comment reply link
comment_reply_link( array_merge( $args, array(
'add_below' => $add_below,
'depth' => $depth,
'max_depth' => $args['max_depth']
) ) ); ?>
</div>
</div><!-- .comment-details -->
<?php
if ( 'div' != $args['style'] ) { ?>
</div>
<?php }
// IMPORTANT: Note that we do NOT close the opening tag, WordPress does this for us
break;
endswitch; // End comment_type check.
}
Il s’agit d’un modèle de démarrage avec lequel vous pouvez travailler, qui comprend la sortie de base que vous souhaitez pour vos commentaires avec quelques divs supplémentaires inclus pour un style plus facile.
Étape 2 : Incluez votre nouveau modèle better-comments.php
Placez le fichier nouvellement créé dans votre thème parent ou enfant, puis accédez à votre fichier functions.php et utilisez la fonction require_once pour charger votre fichier. Voir l’exemple ci-dessous (assurez-vous de changer l’emplacement si vous avez ajouté le fichier better-comments.php dans un sous-dossier différent de votre thème – je place généralement mes fonctions personnalisées dans un dossier functions ou inc pour le garder séparé du noyau fichiers modèles).
Noter: L’extrait ci-dessous a 2 exemples que vous voudrez utiliser la bonne ligne de code selon si vous ajoutez le modèle dans un thème parent ou enfant.
// Include better comments file from a Parent theme
require_once get_parent_theme_file_path( '/functions/better-comments.php' );
// Or include via a child theme
require_once get_stylesheet_directory() . '/functions/better-comments.php';
Vous pouvez ajouter le code où vous voulez dans votre fichier functions.php, assurez-vous simplement de l’ajouter dans les balises .
Étape 3 : ajouter de meilleurs commentaires de rappel à wp_list_comments
Il nous suffit maintenant de dire à WordPress d’utiliser notre modèle de sortie personnalisé pour les commentaires. Et il y a deux façons de le faire selon que vous travaillez avec un parent ou que vous modifiez la fonction de thème parent par défaut (alias un thème enfant ou un plugin).
Thème parent: Si vous travaillez avec un thème parent, vous voudrez localiser le fichier comments.php et vous voudrez éditer la fonction wp_list_comments pour inclure le rappel dans le tableau des arguments comme ceci :
<?php
// Display comments
wp_list_comments( array(
'callback' => 'better_comments'
) ); ?>
Thème enfant ou plugin: Si vous travaillez avec un thème enfant ou un plugin et que vous souhaitez filtrer la sortie html des commentaires, vous souhaitez utiliser le wp_list_comments_args filtrez et transmettez votre nouvel argument de rappel comme tel :
// Filter the comment list arguments
add_filter( 'wp_list_comments_args', function( $args ) {
$args[ 'callback' ] = 'better_comments';
return $args;
} );
Et bien sûr, dans les deux cas, nous référençons le nom de la fonction que nous avons utilisé à l’étape 1 (better_comments).
Étape 4 : peaufiner la sortie HTML personnalisée
Si vous avez tout fait correctement, WordPress utilisera désormais votre fonction better_comments pour la sortie html des commentaires dans votre thème. Au lieu d’utiliser simplement le wp_list_comments fonction, vous pouvez maintenant modifier tout le code qui apparaîtra avec chaque commentaire. Maintenant, le « ciel est la limite ». Modifiez votre fonction pour que les commentaires WordPress ressemblent à VOUS le souhaitez. Vous trouverez ci-dessous quelques exemples de choses formidables que vous pouvez faire :
Afficher différemment les pingbacks et les commentaires réguliers
Si vous regardez le code, vous pouvez voir qu’il contient une instruction switch qui est utilisée pour afficher les pingbacks/trackbacks différemment des commentaires standard. Bien que nous recommandons normalement de désactiver les pingbacks/trackbacks si vous les utilisez sur votre site ou si vous voulez qu’ils aient l’air bien pour votre produit final (si vous êtes un développeur de thème), vous pouvez utiliser cette méthode pour modifier complètement la sortie en fonction du commentaire taper.
Afficher un commentaire utilisateur « badge »
Si vous gérez un blog de style communautaire où vos lecteurs sont connectés, vous pouvez insérer un « badge » pour chaque commentaire indiquant le « rôle » de la personne qui a laissé le commentaire. Ainsi, vous pouvez afficher un badge pour abonné, contributeur, auteur, administrateur…etc.
global $wp_roles;
if ( $wp_roles ) {
$user_id = $comment->user_id;
if ( $user_id && $user = new WP_User( $user_id ) ) {
if ( isset( $user->roles[0] ) ) { ?>
<div class="comment-user-badge <?php echo esc_attr( $user->roles[0] ); ?>"><?php esc_html( translate_user_role( $wp_roles->roles[ $user->roles[0] ]['name'] ) ); ?></div>'
<?php }
} else { ?>
<div class="comment-user-badge guest"><?php esc_html_e( 'Guest', 'textdomain' ); ?></div>
<?php }
}
Changer la taille du gravatar
Une autre chose intéressante que vous pouvez faire avec les meilleurs commentaires est de modifier la taille de l’avatar, nous en sommes sûrs, vous auriez pu la modifier manuellement via le tableau wp_list_comments ou en utilisant le filtre wp_list_comments_args mais maintenant vous pouvez également le modifier manuellement, cela signifie que vous pourriez même utilisez des tailles différentes en fonction du commentaire (peut-être que vous voulez que l’avatar de l’auteur soit plus grand, cela pourrait être cool).
Changer le Gravatar par défaut ou le supprimer complètement
Vous pouvez modifier la fonction get_avatar pour ajouter un 3ème paramètre pour un gravatar par défaut si vous souhaitez définir manuellement l’URL de votre icône d’avatar par défaut. Cela signifie que vous pouvez ajouter un avatar par défaut amusant qui correspond à votre site Web. Alternativement, vous pouvez supprimer complètement le code de l’avatar si vous préférez ne pas les utiliser (cela peut être une bonne idée pour les sites avec des tonnes de commentaires car les gravatars peuvent charger un peu lent et aussi gonfler le site).
<?php echo get_avatar( $comment, $avatar_size, 'URL TO CUSTOM DEFAULT AVATAR' ); ?>
Bonus : surligner les commentaires de l’auteur
Techniquement, cela n’a rien à voir avec la sortie de vos commentaires personnalisés, mais cela vaut la peine d’être mentionné car de nombreux thèmes ne l’intègrent pas par défaut. Dans la sortie comment_class, si le commentaire a été fait par l’auteur de la publication, le commentaire inclura le nom de classe bypostauthor et cela vous permet de styliser les commentaires de l’auteur de votre publication différemment des autres commentaires afin que vous puissiez les faire ressortir.
.bypostauthor {background: #ffff99;}