Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come evidenziare i commenti dell’autore in WordPress

Volete mettere in evidenza i commenti dell’autore nei post di WordPress sul vostro sito web?

Evidenziare i commenti dell’autore nel vostro blog WordPress può aiutarvi a creare coinvolgimento. Gli utenti sono più propensi a lasciare un commento quando vedono che l’autore partecipa attivamente alla discussione.

In questo articolo vi mostreremo come evidenziare facilmente i commenti dell’autore in WordPress per aumentare il coinvolgimento.

Highting comments by an author in WordPress blog posts

Perché evidenziare i commenti degli autori in WordPress?

I commenti sono un ottimo modo per aumentare il coinvolgimento degli utenti sul vostro sito web. Se volete ottenere più commenti sui vostri articoli, potete incoraggiarli partecipando attivamente alle discussioni.

Per un nuovo blog WordPress, potete facilmente rispondere ai commenti e partecipare alle discussioni con i vostri lettori. Se gestite un blog con più autori, potete incoraggiare gli autori a contribuire alla moderazione dei commenti.

Tuttavia, la maggior parte dei temi WordPress non distingue i commenti e li elenca con lo stesso stile.

Regular comments layout with no author highlighting

Un lettore occasionale potrebbe scorrere i commenti, senza rendersi conto del contenuto aggiuntivo apportato dall’autore nella discussione.

Evidenziare i commenti dell’autore aiuta a rimediare e a far risaltare maggiormente i commenti dell’autore.

L’obiettivo finale è quello di incoraggiare i nuovi utenti a partecipare ai commenti e, infine, a iscriversi alla vostra newsletter o a diventare clienti.

Detto questo, vediamo come evidenziare facilmente i commenti degli autori in WordPress.

Evidenziare l’autore dei commenti in WordPress

Il modo più semplice per evidenziare i commenti in base all’autore del post è aggiungere un CSS personalizzato al vostro tema WordPress. Ciò consente di aggiungere facilmente il codice necessario e di vedere un’anteprima dal vivo di come apparirebbe sul vostro sito web senza doverlo salvare.

Per prima cosa, è necessario visitare Aspetto ” Personalizza nell’area di amministrazione di WordPress. In questo modo si aprirà l’interfaccia del personalizzatore del tema di WordPress. Noterete una serie di opzioni in una colonna a sinistra e un’anteprima live del vostro sito web.

Theme customizer in WordPress

Da qui, è necessario fare clic sulla scheda “CSS aggiuntivo”. Si aprirà un’area di testo in cui aggiungere il CSS personalizzato.

Additional CSS tab

Tuttavia, si vuole vedere come apparirà il CSS personalizzato una volta applicato. Per farlo, è necessario navigare in un post del blog che contiene i commenti di un autore del post.

Viewing comments in Theme Customizer

Scorrere fino alla sezione dei commenti e aggiungere il seguente CSS personalizzato nella casella CSS personalizzato a sinistra.

.bypostauthor { 
background-color: #e7f8fb;
}

Si noterà immediatamente che il commento dell’autore cambia in base al CSS personalizzato inserito.

Author's comment highlighted with a different background color

Come funziona tutto questo?

WordPress aggiunge alcune classi CSS predefinite a diverse aree del sito web. Queste classi CSS sono presenti indipendentemente dal tema WordPress utilizzato.

In questo codice di esempio, abbiamo usato la classe CSS .bypostauthor, che viene aggiunta a tutti i commenti aggiunti dall’autore di un post.

Aggiungiamo altri stili CSS per metterlo ancora più in evidenza. Ecco un esempio di codice che aggiunge una piccola etichetta “Autore” ai commenti dell’autore del post e un bordo intorno all’immagine avatar dell’autore.

.bypostauthor:before { 
content:"Author";
float:right;
background-color:#FF1100;
padding:5px;
font-size:small;
font-weight:bold;
color:#FFFFFF;
}
.bypostauthor .avatar {
border:1px dotted #FF1100;
}

Ecco come appariva sul nostro sito web di prova.

Comment author highlighted with the Author label

Evidenziare i commenti in base al ruolo dell’utente in WordPress

Ora, molti blog WordPress hanno membri del team responsabili di rispondere ai commenti. I siti web più famosi possono avere l’autore del post, l’amministratore e i moderatori che rispondono ai commenti per aumentare il coinvolgimento degli utenti.

Come si fa a evidenziare un commento aggiunto da un membro dello staff che non è l’autore effettivo del post?

Esiste un facile hack per raggiungere questo obiettivo. Tuttavia, richiede l’aggiunta di codice personalizzato al vostro sito WordPress. Se non l’avete mai fatto prima, consultate il nostro articolo su come incollare snippet dal web in WordPress.

Per prima cosa, è necessario aggiungere il seguente codice al file functions.php del vostro tema o in un plugin di snippets di codice:

if ( ! class_exists( 'WPB_Comment_Author_Role_Label' ) ) :
class WPB_Comment_Author_Role_Label {
public function __construct() {
add_filter( 'get_comment_author', array( $this, 'wpb_get_comment_author_role' ), 10, 3 );
add_filter( 'get_comment_author_link', array( $this, 'wpb_comment_author_role' ) );
}
  
// Get comment author role 
function wpb_get_comment_author_role($author, $comment_id, $comment) { 
$authoremail = get_comment_author_email( $comment); 
// Check if user is registered
if (email_exists($authoremail)) {
$commet_user_role = get_user_by( 'email', $authoremail );
$comment_user_role = $commet_user_role->roles[0];
// HTML output to add next to comment author name
$this->comment_user_role = ' <span class="comment-author-label comment-author-label-'.$comment_user_role.'">' . ucfirst($comment_user_role) . '</span>';
} else { 
$this->comment_user_role = '';
} 
return $author;
} 
  
// Display comment author                   
function wpb_comment_author_role($author) { 
return $author .= $this->comment_user_role; 
} 
}
new WPB_Comment_Author_Role_Label;
endif;

Invece di modificare il file functions.php del vostro tema, vi consigliamo di aggiungere questo codice con WPCode. Questo plugin di snippets di codice rende sicura e facile l’aggiunta di codice personalizzato in WordPress.

WPCode

Per iniziare, è necessario installare e attivare il plugin gratuito WPCode. Se avete bisogno di aiuto, consultate la nostra guida su come installare un plugin di WordPress.

Una volta attivato il plugin, andare su Code Snippets ” Add Snippet dalla dashboard di WordPress.

Quindi, passare il mouse sull’opzione “Aggiungi codice personalizzato (nuovo snippet)” e fare clic sul pulsante “Usa snippet”.

Add a new custom code snippet in WPCode

Quindi, aggiungete un titolo per il vostro snippet, incollate il codice di cui sopra nella casella “Anteprima codice” e selezionate “Snippet PHP” come tipo di codice dal menu a discesa.

Paste snippet into the WPCode plugin

A questo punto, è sufficiente spostare l’interruttore da “Inattivo” ad “Attivo” e fare clic sul pulsante “Salva snippet” nella parte superiore della pagina.

Activate and save your custom code snippet

Questo codice aggiunge semplicemente l’etichetta del ruolo dell’utente accanto al nome dell’autore del commento. Ecco come apparirebbe senza alcuno stile personalizzato.

User role labels added to comments

Rendiamolo un po’ più bello aggiungendo alcuni CSS personalizzati. Andare alla pagina Aspetto ” Personalizzazione e passare alla scheda CSS aggiuntivi.

Successivamente, si può usare il seguente CSS per stilizzare l’etichetta del ruolo dell’utente nei commenti.

.comment-author-label {
    padding: 5px;
    font-size: 14px;
    border-radius: 3px;
}
  
.comment-author-label-editor {  
background-color:#efefef;
}
.comment-author-label-author {
background-color:#faeeee;
}
  
.comment-author-label-contributor {
background-color:#f0faee;   
}
.comment-author-label-subscriber {
background-color:#eef5fa;   
}
  
.comment-author-label-administrator { 
background-color:#fde9ff;
}

Ecco come appariva sul nostro sito di prova. Sentitevi liberi di modificare il codice per adattarlo ai colori e allo stile del vostro tema.

User role highlighted

Per maggiori dettagli, potete leggere il nostro articolo su come aggiungere le etichette dei ruoli degli utenti ai commenti di WordPress.

Speriamo che questo articolo vi abbia aiutato a capire come mettere in evidenza i commenti degli autori in WordPress. Potreste anche consultare il nostro tutorial su come mettere in evidenza le nuove pubblicazioni per i visitatori restituiti in WordPress e la nostra selezione dei migliori plugin per boxed autori per WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

20 commentiLascia una risposta

  1. Rafael

    Not work for me :(

    I use custom theme with comments.php from twenty Twenty Thirteen.

    Where can I add more CSS classes ?

  2. Irfan Ali

    Thank you very much.

  3. Haina

    Hi! Whenever somenone leaves a comment on my website, the author name appears in gray. How can I change that do black? Also, a “permalink” word is always bellow the date and time of the comment . How can I get rid of that? Any help will be much appreciated. Thanks.

      • Haina

        Thanks for the quick reply. However, my understanding of CSS is less than “fair”. If you could give me direct instructions on how to get the comment author name in black, it would be great. If not, I understand also. Thanks.

  4. Martin

    How is it possible to exclude any replies to the authors comment from the styling?

  5. Peter Huan

    I tried to it but i could not. I was added to my theme opition by myself.
    May be i was changed “div”…
    Thank you for topic.

  6. Fahad

    There is a problem with changing the background if the auther is the creator of the comment and someone else replied, since the nested reply will also have the same highlighted background!

  7. deven

    Nice post … but is there any plugin for doing the same ( there are some but 2-3 yers old ) looking for a new one with more customize options.

  8. char

    Is there a way to give each author (the main ones) different color comments?

    • Editorial Staff

      Yes, it is possible to assign different color comments for registered users. The class would look like .comment-author-username. Replace username with the author’s username.

      Admin

  9. Ahmad Raza

    I followed the way you described but i have not found <li id=”comment-“> template in my comments.php
    Any solution?

  10. Gretchen Louise

    I’d love to see this tutorial updated to apply to Genesis and multi-author blogs! :)

  11. Keith Davis

    Useful tip.
    When I read post comments, I tend to read the author’s comments on the assumption that what he says carries more authority.
    I’m OK with the CSS but never sure about the php.
    You may have enticed me to start messing with the php!

  12. janghuan

    In my wordpress version,I just need to add a exist class that the wordpress generates.It’s “comment-author-admin”.Maybe the class “bypostauthor” that wordpress generates also does work.

    • Editorial Staff

      You can probably add a comma and add more user IDs, but it will show all editor’s comment in highlighted version, so yes it will be a fail if you look at it that way.

      Admin

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.