Come aggiungere un'etichetta di ruolo utente accanto ai commenti in WordPress

Uno dei nostri lettori ha recentemente chiesto se fosse possibile evidenziare i ruoli utente accanto a ogni commento in WordPress. Questa è una domanda comune e ha senso, poiché i commenti possono diventare rapidamente difficili da seguire, specialmente su blog o siti community molto attivi.

Visualizzare un'etichetta del ruolo utente accanto a ogni commento aiuta i tuoi visitatori a vedere immediatamente quali commenti provengono da utenti fidati come autori, editor o amministratori. Aggiunge contesto, costruisce credibilità e può persino incoraggiare interazioni più significative nella tua community.

Abbiamo aiutato molti proprietari di siti ad aggiungere questa funzionalità, ed è un modo semplice per rendere la tua sezione commenti più organizzata e professionale.

In questo articolo, ti mostreremo come aggiungere facilmente un'etichetta del ruolo utente accanto ai commenti in WordPress, in modo che i tuoi lettori possano riconoscere rapidamente chi sta contribuendo.

Perché mostrare l'etichetta del ruolo utente accanto al nome dell'autore del commento in WordPress?

Se consenti la registrazione degli utenti sul tuo sito web o gestisci un sito WordPress con più autori, la visualizzazione delle etichette dei ruoli utente può aiutare i visitatori a capire rapidamente chi sta commentando e quale sia il loro ruolo utente.

Ad esempio, un utente con il ruolo utente editor può avere un badge accanto al proprio nome nei commenti, segnalando agli altri che il commento proviene da un editor.

Questo non solo crea fiducia con il tuo pubblico, ma incoraggia anche interazioni e coinvolgimento più significativi sul tuo sito.

Molti temi WordPress evidenziano solo i commenti dell'autore del post. Non mostrano etichette per altri ruoli utente, anche se altri commenti sono fatti da utenti registrati, amministratori o editor. L'aggiunta di queste etichette garantisce che tutti i contributori chiave sul tuo sito siano facilmente riconosciuti.

Ora che hai compreso i vantaggi, diamo un'occhiata a come aggiungere facilmente un'etichetta di ruolo utente accanto ai commenti in WordPress.

Aggiungere un'etichetta di ruolo utente accanto al nome dell'autore del commento in WordPress

Questo tutorial richiede l'aggiunta di codice ai file del tuo tema WordPress. Se non l'hai mai fatto prima, dai un'occhiata alla nostra guida su come copiare e incollare snippet di codice in WordPress.

La prima cosa da fare è aggiungere il seguente codice al file functions.php del tuo tema, in un plugin specifico per il sito, o in un plugin di snippet 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;

Questo codice di funzione sopra aggancia ai filtri di WordPress utilizzati per visualizzare il nome dell'autore del commento per includere l'etichetta del ruolo dell'utente.

Su WPBeginner, raccomandiamo sempre di aggiungere questo codice utilizzando WPCode, il miglior plugin per snippet di codice per WordPress.

L'utilizzo di WPCode è più sicuro e più semplice rispetto alla modifica diretta del file functions.php del tuo tema. Previene errori che potrebbero compromettere il tuo sito, mantiene organizzate le tue personalizzazioni e garantisce che le tue modifiche non vengano perse quando aggiorni il tuo tema.

Per iniziare, è necessario installare e attivare il plugin gratuito WPCode. Per istruzioni dettagliate, consulta questo tutorial su come installare un plugin di WordPress.

Una volta attivato il plugin, naviga su Snippet di codice » + Aggiungi snippet dalla dashboard di WordPress.

Da lì, fai clic sul pulsante '+ Aggiungi snippet personalizzato' sotto l'opzione 'Aggiungi il tuo codice personalizzato (Nuovo snippet)'.

Successivamente, devi selezionare 'Snippet PHP' come tipo di codice dall'elenco di opzioni che appaiono sullo schermo.

Questo ti porterà alla pagina Crea snippet personalizzato.

Da qui, devi aggiungere un titolo per il tuo snippet di codice. Può essere qualsiasi cosa per aiutarti a ricordare a cosa serve il codice.

Quindi, incolla il codice sopra nella casella 'Anteprima codice'.

Successivamente, sposta semplicemente l'interruttore da 'Non attivo' ad 'Attivo' nella parte superiore della pagina.

Infine, fai clic sul pulsante 'Salva snippet'.

Ora puoi visitare qualsiasi post con commenti per vederlo in azione.

I commenti lasciati da utenti registrati visualizzeranno il loro ruolo utente accanto al nome dell'autore del commento. Qualsiasi commento lasciato da utenti non registrati visualizzerà solo il nome dell'autore del commento.

Ora che abbiamo aggiunto il ruolo utente, è ora di stilizzarlo e renderlo pulito.

Nel nostro codice, abbiamo aggiunto una classe CSS per ogni ruolo utente, in modo da poter utilizzare queste classi CSS per personalizzare ogni badge utente in modo diverso (ad esempio, utilizzare colori diversi, ecc.)

Puoi utilizzare il seguente CSS di esempio come punto di partenza:

.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;
}

Sentiti libero di modificare il CSS a tuo piacimento. Ecco come appariva sul nostro sito demo:

Per maggiori dettagli, consulta la nostra guida su come aggiungere facilmente CSS personalizzato al tuo sito WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere un'etichetta di ruolo utente accanto ai commenti in WordPress. Potresti anche voler consultare la nostra guida su come caricare pigramente i Gravatar nei commenti di WordPress e le nostre scelte esperte dei migliori plugin per migliorare i commenti di WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.