Comment ajouter facilement une fonctionnalité de vote sur les commentaires WordPress en utilisant du code personnalisé

23 mai 2025/Personnalisation et Intégration de Fonctions

Favoriser l’engagement sur un site WordPress passe aussi par l’optimisation des commentaires. Un système de vote permet aux visiteurs de réagir aux contributions des autres, en les évaluant positivement ou négativement. Plutôt que d’utiliser un plugin lourd, ce guide montre comment implémenter une solution légère, basée sur du code natif, en respectant les bonnes pratiques de performance et de sécurité.

Sommaire

1. Architecture générale du système

Le système de vote se compose de plusieurs éléments interconnectés :

Stockage des votes : via des métadonnées comment_meta.
Sécurité : protection des requêtes par nonce, limitation par IP.
Interface utilisateur : boutons de vote avec affichage dynamique du score.
Traitement des requêtes : AJAX pour éviter le rechargement de page.

2. Implémentation backend

Enregistrement des métadonnées

add_action('init', function() {
    register_meta('comment', 'like_count', [
        'type' => 'integer',
        'single' => true,
        'default' => 0,
        'show_in_rest' => true
    ]);

    register_meta('comment', 'dislike_count', [
        'type' => 'integer',
        'single' => true,
        'default' => 0,
        'show_in_rest' => true
    ]);

    register_meta('comment', 'voter_ips', [
        'type' => 'array',
        'single' => true,
        'default' => [],
        'show_in_rest' => false
    ]);
});

Traitement des votes

add_action('wp_ajax_process_comment_vote', 'handle_comment_vote');
add_action('wp_ajax_nopriv_process_comment_vote', 'handle_comment_vote');

function handle_comment_vote() {
    $comment_id = absint($_POST['comment_id']);
    $vote_type = sanitize_key($_POST['vote_type']);
    $user_ip = $_SERVER['REMOTE_ADDR'];

    if (!wp_verify_nonce($_POST['security'], 'comment_vote_nonce')) {
        wp_send_json_error('Nonce invalide');
    }

    $voter_ips = get_comment_meta($comment_id, 'voter_ips', true) ?: [];

    if (in_array($user_ip, $voter_ips)) {
        wp_send_json_error('Vous avez déjà voté');
    }

    $meta_key = ($vote_type === 'like') ? 'like_count' : 'dislike_count';
    $current_count = get_comment_meta($comment_id, $meta_key, true) ?: 0;
    $new_count = $current_count + 1;

    update_comment_meta($comment_id, $meta_key, $new_count);
    $voter_ips[] = $user_ip;
    update_comment_meta($comment_id, 'voter_ips', $voter_ips);

    wp_send_json_success([
        'new_count' => $new_count,
        'total' => get_comment_meta($comment_id, 'like_count', true) - get_comment_meta($comment_id, 'dislike_count', true)
    ]);
}

3. Intégration frontend

Ajout des boutons de vote

add_filter('comment_text', function($comment_content, $comment) {
    if (!is_admin()) {
        $nonce = wp_create_nonce('comment_vote_nonce');
        $likes = get_comment_meta($comment->comment_ID, 'like_count', true) ?: 0;
        $dislikes = get_comment_meta($comment->comment_ID, 'dislike_count', true) ?: 0;

        $buttons = '<div class="comment-voting" data-comment-id="'.$comment->comment_ID.'">';
        $buttons .= '<button class="vote-btn" data-vote-type="like" data-nonce="'.$nonce.'">▲</button>';
        $buttons .= '<span class="vote-count">'.($likes - $dislikes).'</span>';
        $buttons .= '<button class="vote-btn" data-vote-type="dislike" data-nonce="'.$nonce.'">▼</button>';
        $buttons .= '</div>';

        return $comment_content . $buttons;
    }
    return $comment_content;
}, 10, 2);

Gestion AJAX

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.vote-btn').forEach(button => {
        button.addEventListener('click', (e) => {
            const parent = e.target.closest('.comment-voting');
            const commentId = parent.dataset.commentId;
            const voteType = e.target.dataset.voteType;
            const nonce = e.target.dataset.nonce;

            jQuery.ajax({
                url: ajaxurl,
                type: 'POST',
                data: {
                    action: 'process_comment_vote',
                    comment_id: commentId,
                    vote_type: voteType,
                    security: nonce
                },
                success: (response) => {
                    if (response.success) {
                        const counter = parent.querySelector('.vote-count');
                        counter.textContent = response.data.total;
                        e.target.parentElement.classList.add('voted');
                    } else {
                        alert(response.data);
                    }
                }
            });
        });
    });
});

4. Sécurité et performances

Chargement des scripts

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('comment-voting', get_template_directory_uri() . '/js/comment-voting.js', ['jquery'], null, true);
    wp_localize_script('comment-voting', 'ajaxSettings', [
        'ajaxurl' => admin_url('admin-ajax.php')
    ]);
});

Mesures de sécurité

Vérification de nonce
Limitation par adresse IP
Validation et nettoyage des entrées
Limitation d’accès aux utilisateurs non connectés (facultatif)

5. Styles CSS

.comment-voting {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.vote-btn {
    padding: 0.25rem 0.5rem;
    border: 1px solid #ddd;
    background: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.vote-btn:hover {
    background: #f0f0f0;
}

.vote-btn.voted {
    background: #0073aa;
    color: white;
    border-color: #0073aa;
}

.vote-count {
    min-width: 2rem;
    text-align: center;
    font-weight: bold;
}

6. Tests recommandés

Vérifier la restriction par IP
Vérifier la mise à jour dynamique sans rechargement
Simuler des cas de vote invalide
Vérifier l’affichage des scores

7. Extensions possibles

Réservation aux utilisateurs connectés

if (!is_user_logged_in()) {
    wp_send_json_error('Seuls les utilisateurs connectés peuvent voter');
}

Système de réputation utilisateur

add_action('update_comment_meta', function($meta_id, $comment_id, $meta_key, $meta_value) {
    if ($meta_key === 'like_count') {
        $user_id = get_comment($comment_id)->user_id;
        $reputation = get_user_meta($user_id, 'user_reputation', true) ?: 0;
        update_user_meta($user_id, 'user_reputation', $reputation + 1);
    }
}, 10, 4);

Conclusion

L’ajout d’un système de vote sur les commentaires WordPress, sans plugin, est une solution à la fois légère, performante et personnalisable. Elle renforce l’interaction sur votre site et peut servir de base à des mécaniques d’engagement plus poussées comme la réputation utilisateur ou le tri des commentaires par pertinence.

Pour aller plus loin dans la personnalisation des commentaires et de l’interactivité sur votre site, consultez notre article dédié sur l’amélioration de l’engagement des commentaires.