Personalizare comentarii WordPress: evidențierea vizuală a răspunsurilor autorului

Dorești să evidențiezi comentariile scrise de tine pe propriul blog pentru ca vizitatorii să distingă imediat răspunsurile oficiale ale autorului? Personalizarea vizuală a comentariilor autorului îmbunătățește lizibilitatea discuțiilor și crește interactivitatea comunității.

1. Metoda directă: identificarea autorului în fișierul de comentarii

Dacă tema ta folosește o buclă clasică de comentarii în fișierul comments.php, poți verifica dacă utilizatorul care a lăsat comentariul este administratorul sau autorul principal (de regulă cu ID-ul 1).

Pasul 1: Adăugarea stilului CSS

Deschide fișierul style.css al temei și adaugă o clasă dedicată pentru comentariul autorului:

.authorstyle {
    background-color: #eafaf1 !important;
    border-left: 4px solid #2ecc71;
    padding: 12px 15px;
    border-radius: 4px;
}

Pasul 2: Aplicarea clasei în șablonul PHP

În fișierul comments.php, identifică elementul <li> principal al fiecărui comentariu și inserează verificarea condiționată:

<li class="<?php if ( 1 == $comment->user_id ) { echo 'authorstyle '; } ?><?php echo $oddcomment; ?>">
    <!-- Conținutul comentariului -->
</li>

2. Metoda nativă și recomandată: clasa .bypostauthor

În temele WordPress moderne care folosesc funcția nativă wp_list_comments(), WordPress adaugă în mod automat o clasă CSS dedicată numită .bypostauthor fiecărui comentariu lăsat de autorul articolului respectiv.

Această abordare este mult mai eficientă deoarece nu necesită modificarea codului PHP și funcționează corect chiar și pe blogurile cu mai mulți autori (nu doar pentru utilizatorul cu ID 1). Tot ce trebuie să faci este să adaugi regula în style.css:

/* Evidențierea comentariilor autorului articolului */
.comment.bypostauthor,
li.bypostauthor > article {
    background-color: #f4fbf7;
    border-left: 4px solid #27ae60;
}

/* Opțional: o mică etichetă pentru autor */
.comment.bypostauthor .comment-author cite::after {
    content: " (Autor)";
    font-size: 0.85em;
    color: #27ae60;
    font-weight: bold;
}

Astfel, răspunsurile tale vor ieși imediat în evidență, iar cititorii vor găsi mult mai ușor clarificările oferite în secțiunea de comentarii.