Så här addar du en etikett för användarens roll bredvid kommentarer i WordPress

En av våra läsare frågade nyligen om det är möjligt att markera användarroller bredvid varje kommentar i WordPress. Det är en vanlig fråga, och vi har hjälpt många webbplatsägare att lägga till den här funktionen för att bygga en starkare känsla av gemenskap.

Genom att visa etiketten för användarrollen kan du direkt signalera vilka kommentarer som kommer från betrodda användare på din webbplats, t.ex. författare, redaktörer och administratörer.

I den här artikeln visar vi hur du enkelt kan lägga till en etikett för användarrollen bredvid kommentarer i WordPress.

Varför visa etiketten för användarens roll bredvid namnet på författaren till kommentaren i WordPress?

Om du allow user registration på din website eller run a multi-author WordPress website, så kan user labels presentera användare för varandra baserat på deras roller.

Till exempel kommer användare med användarrollen redaktör att visa en badge bredvid sitt namn i kommentarer, så att andra användare vet att den här kommentaren gjordes av en redaktör.

Det bygger förtroende hos din publik och ökar användarnas engagemang i kommentarer på din webbplats.

Många WordPress-teman lyfter bara fram kommentarer som gjorts av inläggets författare. De visar inte etiketter för några andra användarroller, även om andra kommentarer görs av registrerade användare eller webbplatsadministratörer.

Med detta sagt, låt oss ta en titt på hur du enkelt kan lägga till en användarrollsetikett bredvid kommentarer i WordPress.

Lägga till etikett för användarens roll bredvid namnet på kommentarsförfattaren i WordPress

Denna tutorial kräver att du addar kod till dina WordPress theme-filer. Om du inte har gjort det tidigare, vänligen ta en titt på vår guide om hur du copy and paste code snippets i WordPress.

Det första du behöver göra är att lägga till följande kod i ditt temas functions.php-fil, i ett webbplatsspecifikt plugin eller i ett kodsnippet-plugin.

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;

Denna funktionskod ovan åtgärds-hookar WordPress-filter som används för att visa namnet på författaren till kommentaren för att inkludera etiketten för användarens roll.

Vi rekommenderar att du lägger till den här koden med hjälp av WPCode, det bästa code snippets-pluginet för WordPress. Det är det säkraste och enklaste sättet att add to kod utan att editera ditt temas functions.php-fil.

För att komma igång måste du installera och aktivera det gratis pluginet WPCode. Detaljerade instruktioner finns i denna tutorial om hur du installerar ett plugin för WordPress.

När pluginet är aktiverat navigerar du till Code Snippets ” + Add Snippet från WordPress instrumentpanel. Där klickar du på knappen “+ Add Custom Snippet” under alternativet “Add Your Custom Code (New Snippet)”.

Därefter måste du välja “PHP Snippet” som kodtyp från listan med alternativ som visas på skärmen.

Du kommer då till sidan Create Custom Snippet.

Härifrån måste du lägga till en titel för ditt kodavsnitt. Det kan vara vad som helst för att hjälpa dig att komma ihåg vad koden är till för.

Sedan klistrar du in koden från ovan i rutan “Code Preview”.

Därefter är det bara att flytta omkopplaren från “Inaktiv” till “Aktiv” högst upp på sidan.

Klicka till sist på knappen “Save Snippet”.

You can now visit any post with comments to see it in action.

Kommentarer som görs av registrerade användare visar deras användarroll bredvid kommentarens författarnamn. Kommentarer som görs av icke-registrerade användare visar endast kommentarens författarnamn.

Nu när vi har add to användarens roll är det dags att styla den och få den att se ren ut.

I vår kod har vi add to en CSS-klass för varje användarroll, så vi kan använda dessa CSS-klasser för att customize varje användarmärke på olika sätt (dvs. använda olika färger etc.).

Du kan använda följande exempel på CSS som utgångspunkt:

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

Känn dig gratis att justera CSS efter vad du gillar. Så här såg det ut på vår demo website:

För mer details, se vår guide om hur du enkelt lägger till custom CSS på din WordPress site.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till en etikett för användarrollen bredvid kommentarer i WordPress. Du kanske också vill kolla in vår guide om hur du lazy loadar gravatars i WordPress-kommentarer och våra expertval av de bästa pluginsen för att förbättra WordPress-kommentarer.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.