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 des commentaires par défaut est également assez compliqué à personnaliser. Si vous êtes un développeur de thèmes et que vous êtes resté coincé en essayant de personnaliser vos commentaires pour les rendre comme vous le souhaitez, 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 votre structure de commentaires afin que vous puissiez avoir un contrôle complet 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 ou pour la redistribution sur tout autre marché, il est préférable de laisser la conception de commentaire par défaut pour vous assurer qu’il n’y a pas de conflit possible avec les plugins tiers. Ce tutoriel s’adresse principalement à ceux qui recherchent une solution personnalisée sur leur site actif (en effectuant la modification via un thème enfant) ou à ceux qui développent un design personnalisé pour leur client.

Passons maintenant au tutoriel 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 voudrez pour vos commentaires avec quelques div 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).

Remarque: L’extrait de code ci-dessous contient 2 exemples dont vous voudrez utiliser la ligne de code correcte selon que 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 un meilleur rappel de commentaires à wp_list_comments

Il ne nous reste plus qu’à dire à WordPress d’utiliser notre modèle de sortie personnalisé pour les commentaires. Et il existe 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 (c’est-à-dire 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 d’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 du commentaire, 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. Voici quelques exemples de choses géniales que vous pouvez faire:

Afficher différemment les pingbacks et les commentaires réguliers

Si vous regardez le code, vous pouvez voir qu’il a une instruction switch qui est utilisée pour afficher les pingbacks / trackbacks différemment des commentaires standard. Bien que nous vous 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 type.

Afficher un “badge” d’utilisateur de commentaire

Si vous dirigez 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 changer la taille de l’avatar, nous 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 la modifier manuellement, cela signifie que vous pourriez même utilisez des tailles différentes en fonction du commentaire (peut-être voulez-vous que l’avatar de l’auteur soit plus grand, cela pourrait 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 se charger un peu lentement et gonfler le site).

<?php echo get_avatar( $comment, $avatar_size, 'URL TO CUSTOM DEFAULT AVATAR' ); ?>

Bonus: mettre en évidence 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 du message, le commentaire inclura le nom de classe bypostauthor et cela vous permet de styliser les commentaires de l’auteur de votre article différemment des autres commentaires afin de les faire ressortir.

.bypostauthor {background: #ffff99;}

Share: