Skip to content

Améliorer la gestion des commentaires

7 bouts de code en partage pour améliorer les commentaires d'un site WordPress avec ActivityPub

VincentBreton.fr
Oct 23, 20266 min read

Mode d’emploi et précautions à prendre

ous êtes libre d’utiliser ces « bouts de code » sur votre site WordPress, de les adapter, de les transformer, de les partager. Certains éléments peuvent avoir été inspirés par des ressources découvertes sur des forums ou par l’intelligence artificielle ou des conseils. Leur insertion peut s’effectuer en utilisant une extension comme WP Code ou selon vos compétences et selon le type de code via l’éditeur de styles du site ou votre base.php.

Le site ne peut être tenu pour responsable de l’utilisation de ces « bouts de code » qui selon votre configuration ou les interactions avec d’autres éléments de code présents sur votre site pourraient engendrer des dysfonctionnements. Cette importation par copier-coller s’effectue sous votre responsabilité. Pour information le thème de ce site est basé sur Twenty Twenty-Five. Le CMS WordPress est à jour avec la dernière version disponible.

Ces bouts de code ont été créés pour enrichir les fonctionnalités du site sans devoir faire appel à une extension dédiée.

Pourquoi ces « bouts de code » ?

J’ai réuni ici un ensemble de bouts de code destinés à améliorer la lisibilité des commentaires notamment en liaison avec l’utilisation de l’extension ActivityPub qui fait remonter les interactions depuis le Fédiverse.

Sur ce site, je n’ai pas voulu faire remonter les « j’aime » (like), les « partages » (reposts). PageSpeed Insights qui permet d’évaluer un site a montré que la lisibilité des liens et des zones à cliquer devait être améliorée. Avec ce dispositif on retrouve le 100% sur ordinateur et le 97% sur mobile en termes d’accessibilité. Cela peut varier en fonction du nombre de commentaires et si par exemple des réponses incluent plusieurs destinataires. On pourra certainement progresser encore.

J’ai choisi de réunir ces « bouts de code » avec chacun un objectif différent :

Des explications complémentaires le cas échéant aux pages :

Améliorer l’accessibilité des commentaires

Notifier l’auteur d’un commentaire qu’il a reçu une réponse

Les codes

Type de Codes

Copier-coller le code, le modifier si besoin (notamment si présence de liens)

1 CSS améliorer l’accessibilité (espaces entre liens et zones cliquables)

.wp-block-comment-author-name a, .wp-block-comment-reply-link a, a.comment-reply-link, a.activitypub-remote-reply__link { display: inline-block !important; min-height: 24px !important; min-width: 24px !important; padding-block: 6px !important; line-height: 1.5 !important; } .wp-block-comment-reply-link { margin-block-start: 0.75rem !important; }

2 CSS Masquer le compteur

/* Masquer la ligne automatique "X réponses à ·." */ .comments-title, h2.comments-title, .wp-block-comments-title, .comment-count, .comments-header .comments-number { display: none !important; }

3 PHP éviter les icônes Gravatar, les remplacer par des initiales

add_filter( 'get_avatar', function( $avatar, $id_or_email, $size, $default, $alt ) { // Si l'avatar ne contient pas d'appel Gravatar, on le laisse tel quel if ( strpos( $avatar, 'gravatar.com' ) === false ) return $avatar; $name = ''; if ( is_string( $id_or_email ) && is_email( $id_or_email ) ) { $name = strstr( $id_or_email, '@', true ); } elseif ( $id_or_email instanceof WP_Comment ) { $name = $id_or_email->comment_author; } elseif ( is_object( $id_or_email ) && isset( $id_or_email->display_name ) ) { $name = $id_or_email->display_name; } $words = preg_split( '/\s+/', trim( $name ) ); $initials = mb_strtoupper( mb_substr( $words[0], 0, 1 ) ); if ( count( $words ) > 1 ) { $initials .= mb_strtoupper( mb_substr( end( $words ), 0, 1 ) ); } if ( ! $initials ) $initials = '?'; $svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' . $size . '" height="' . $size . '" viewBox="0 0 40 40">' . '<rect width="40" height="40" rx="20" fill="#888"/>' . '<text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" ' . 'font-family="sans-serif" font-size="16" fill="#fff">' . esc_html( $initials ) . '</text>' . '</svg>'; $data_uri = 'data:image/svg+xml;base64,' . base64_encode( $svg ); return '<img src="' . $data_uri . '" width="' . $size . '" height="' . $size . '" alt="' . esc_attr( $alt ) . '" class="avatar avatar-' . $size . ' photo" />'; }, 10, 5 );

4 PHP Ajustement des commentaires pour la lisibilité

add_filter( 'render_block_core/comment-date', function( $block_content ) { $block_content = preg_replace( '/<a\s[^>]*>([^<]*)<\/a>/', '<span>$1</span>', $block_content ); return $block_content; }, 10, 1 );

5 Modification du texte affiché

add_filter('comment_form_defaults', function ($defaults) { $defaults['title_reply'] = 'Un mot en retour ?'; $defaults['comment_notes_before'] = ''; $defaults['label_submit'] = 'Envoyer votre réponse'; $defaults['comment_field'] = ' <p class="comment-form-comment"> <label for="comment">Votre réaction</label> <textarea id="comment" name="comment" required></textarea> </p> '; $defaults['fields'] = array( 'author' => ' <p class="comment-form-author"> <label for="author">Nom</label> <input id="author" name="author" type="text" autocomplete="name" required> </p>', 'email' => ' <p class="comment-form-email"> <label for="email">Email (non publié)</label> <input id="email" name="email" type="email" autocomplete="email" required> </p>', 'url' => ' <p class="comment-form-url"> <label for="url">Site web (facultatif)</label> <input id="url" name="url" type="url" autocomplete="url"> </p>', ); return $defaults; });

Nota : suite aux remarques du vigilant Matoo j’ai rajouté la possibilité d’inscrire son site Web et d’utiliser via son navigateur un « autocomplete » qui n’oblige pas les personnes à saisir de nouveau leur adresse si elles commentent une autre page. Il faut juste que le navigateur l’autorise.

6 PHP Interdire les cookies

add_filter( 'comment_form_default_fields', function( $fields ) { unset( $fields['cookies'] ); return $fields; });

7 Notifier par mail l’auteur d’un commentaire qu’il a reçu une réponse

/** * Notification de réponse aux commentaires * Version corrigée (admin auto-approuvé + modération) */ // 1. Case à cocher unique add_filter('comment_form_submit_field', 'ajouter_checkbox_subscription_comment'); function ajouter_checkbox_subscription_comment($submit_field) { $html = '<p class="comment-form-subscribe">'; $html .= '<input type="checkbox" name="cren_subscribe_to_comment" id="cren_subscribe_to_comment" value="on" /> '; $html .= '<label for="cren_subscribe_to_comment">Me notifier par email des réponses à mon commentaire (mon email sera conservé pour cet usage uniquement → politique de confidentialité)</label>'; $html .= '</p>'; return $html . $submit_field; } // 2. Enregistrer l’abonnement add_action('comment_post', 'enregistrer_abonnement_comment'); function enregistrer_abonnement_comment($comment_id) { $value = (isset($_POST['cren_subscribe_to_comment']) && $_POST['cren_subscribe_to_comment'] === 'on') ? 'on' : 'off'; add_comment_meta($comment_id, 'cren_subscribe_to_comment', $value); } // 3. Fonction d’envoi unique (utilisée dans les deux cas) function envoyer_notification_reponse_comment($comment) { if (!$comment || (int) $comment->comment_parent === 0) { return; } $parent = get_comment($comment->comment_parent); if (!$parent) { return; } $subscribe = get_comment_meta($parent->comment_ID, 'cren_subscribe_to_comment', true); if ($subscribe !== 'on') { return; } // Ne pas se notifier soi-même if (strtolower($parent->comment_author_email) === strtolower($comment->comment_author_email)) { return; } $subject = '[' . get_bloginfo('name') . '] Nouvelle réponse à votre commentaire'; $message = "Bonjour,\n\n"; $message .= "Une nouvelle réponse a été postée à votre commentaire sur :\n"; $message .= get_permalink($comment->comment_post_ID) . "\n\n"; $message .= "Auteur de la réponse : " . $comment->comment_author . "\n\n"; $message .= "Contenu :\n" . $comment->comment_content . "\n\n"; $message .= "Lien direct : " . get_comment_link($comment) . "\n\n"; $message .= "Pour ne plus recevoir de notifications :\n"; $message .= add_query_arg( [ 'cren_unsubscribe' => $parent->comment_ID, 'key' => wp_create_nonce('cren_unsub_' . $parent->comment_ID), ], home_url('/') ); wp_mail($parent->comment_author_email, $subject, $message); } // 3a. Réponses créées déjà approuvées (admin / auteur) add_action('comment_post', 'notifier_si_approuve_a_la_creation', 20, 3); function notifier_si_approuve_a_la_creation($comment_id, $comment_approved, $commentdata) { if ((int) $comment_approved !== 1) { return; } $comment = get_comment($comment_id); envoyer_notification_reponse_comment($comment); } // 3b. Commentaires qui passent en "approuvé" (modération) add_action('transition_comment_status', 'notifier_apres_moderation', 10, 3); function notifier_apres_moderation($new_status, $old_status, $comment) { if ($new_status !== 'approved' || $old_status === 'approved') { return; } envoyer_notification_reponse_comment($comment); } // 4. Désabonnement add_action('init', 'gestion_desabonnement_comment'); function gestion_desabonnement_comment() { if (!isset($_GET['cren_unsubscribe'])) { return; } $comment_id = intval($_GET['cren_unsubscribe']); $key = $_GET['key'] ?? ''; if (wp_verify_nonce($key, 'cren_unsub_' . $comment_id)) { update_comment_meta($comment_id, 'cren_subscribe_to_comment', 'off'); wp_die('Vous avez été désabonné des notifications pour ce commentaire. Merci !'); } }

Did you enjoy this article?

Recommend it — Standard Reader surfaces well-loved writing to more readers across the network.

Across the AtmosphereDiscussions