Vuoi mettere in evidenza i commenti dell'autore nei post di WordPress sul tuo sito web?

Evidenziare i commenti dell'autore nel tuo blog WordPress può aiutarti a creare coinvolgimento. Gli utenti hanno maggiori probabilità di lasciare un commento quando vedono che l'autore sta partecipando attivamente alla discussione.

In questo articolo, ti mostreremo come evidenziare facilmente i commenti dell'autore su WordPress per aumentare il coinvolgimento.

Perché evidenziare i commenti dell'autore su WordPress?

I commenti sono un ottimo modo per aumentare il coinvolgimento degli utenti sul tuo sito web. Se lo desidera ottenere più commenti sui tuoi articoli, quindi puoi incoraggiarlo partecipando attivamente alle discussioni.

Per un nuovo blog WordPress, puoi facilmente rispondere ai commenti durante la moderazione dei commenti. Se esegui un file blog multi-autore, quindi puoi incoraggiare anche gli autori a prendere parte alla discussione.

Tuttavia, la maggior parte dei temi di WordPress non distingue tra commenti e li elenca utilizzando lo stesso stile.

Un lettore occasionale può scorrere i commenti, non rendendosi conto del contenuto aggiuntivo fornito dall'autore nella discussione.

Evidenziare i commenti dell'autore ti aiuta a rimediare e fa risaltare i commenti dell'autore e sono più evidenti.

L'obiettivo finale qui è incoraggiare i nuovi utenti a partecipare ai commenti e alla fine iscriviti alla tua newsletter o diventare un cliente.

Detto questo, diamo un'occhiata a come evidenziare facilmente i commenti dell'autore su WordPress.

Evidenziazione dell'autore del commento in WordPress

Il modo più semplice per evidenziare i commenti per autore del post è di aggiunta di CSS personalizzati al tuo tema WordPress. Ciò ti consente di aggiungere facilmente il codice necessario e vedere un'anteprima dal vivo di come apparirebbe sul tuo sito web senza salvarlo.

Per prima cosa, devi visitare Aspetto »Personalizza nell'area di amministrazione di WordPress. Questo lancerà il file Personalizzatore di temi WordPress interfaccia. Noterai una serie di opzioni in una colonna alla tua sinistra e un'anteprima dal vivo del tuo sito web.

Da qui, è necessario fare clic sulla scheda CSS aggiuntivo. Si aprirà un'area di testo in cui aggiungerai il CSS personalizzato.

Tuttavia, vorresti vedere come apparirà il CSS personalizzato una volta applicato. Per fare ciò, è necessario accedere a un post del blog che contiene commenti di un autore del post.

Scorri verso il basso fino alla sezione dei commenti e quindi aggiungi il seguente CSS personalizzato nella casella CSS personalizzato a sinistra.

.bypostauthor { 
background-color: #e7f8fb;
}

Noterai immediatamente la modifica del commento dell'autore che corrisponde al CSS personalizzato che hai inserito.

Allora come funziona tutto questo?

Vedi WordPress ne aggiunge alcuni classi CSS predefinite in diverse aree del tuo sito web. Queste classi CSS sono presenti indipendentemente dal tema WordPress che stai utilizzando.

In questo codice di esempio, abbiamo usato il .bypostauthor Classe CSS che viene aggiunta a tutti i commenti aggiunti dall'autore di un post.

Aggiungiamo altri stili CSS per renderlo ancora più evidente. Di seguito è riportato un codice di esempio che aggiunge una piccola etichetta “Autore” ai commenti dell'autore del post e un bordo attorno all'immagine dell'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.

Evidenziazione dei commenti per ruolo utente in WordPress

Ora, molti blog WordPress hanno membri del team responsabili della risposta ai commenti. I siti web popolari possono avere autore di post, amministratori e moderatori che rispondono ai commenti per aumentare il coinvolgimento degli utenti.

Come si evidenzia un commento aggiunto da un membro dello staff che non è l'autore effettivo del post?

C'è un semplice trucco per ottenerlo. Tuttavia, richiede l'aggiunta di codice personalizzato al tuo sito Web WordPress. Se non l'hai mai fatto prima, consulta il nostro articolo su come aggiungere facilmente codice personalizzato in WordPress.

Innanzitutto, devi aggiungere il seguente codice al plug-in degli snippet di codice o a quello del tuo tema functions.php file.

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 = ' ' . ucfirst($comment_user_role) . '';
} 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;

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

Rendiamolo un po 'più carino aggiungendo un po' di CSS personalizzato. Vai a Aspetto »Personalizza pagina e passa alla scheda CSS aggiuntivo.

Successivamente, puoi utilizzare il seguente CSS per definire lo stile dell'etichetta del ruolo 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. Sentiti libero di modificare il codice per adattarlo ai colori e allo stile del tuo tema.

Per maggiori dettagli, potresti leggere il nostro articolo su come farlo aggiungere le etichette dei ruoli utente ai commenti di WordPress.

Ci auguriamo che questo articolo ti abbia aiutato a imparare come evidenziare i commenti dell'autore su WordPress. Vuoi vedere come gli utenti interagiscono con il tuo sito web? Guarda il nostro tutorial su come monitorare il coinvolgimento degli utenti in WordPress, e come aggiungere una notifica push web sul tuo sito WordPress per aumentare il tuo traffico.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale Youtube per i tutorial video di WordPress. Puoi trovarci anche su Twitter e Facebook.