Hinzufügen eines Labels für die Benutzerrolle neben den Kommentaren in WordPress

Einer unserer Leser fragte, ob es möglich sei, die Benutzerrolle neben jedem Kommentar in WordPress hervorzuheben?

Die Anzeige der Benutzerrolle verleiht den Kommentaren von registrierten Benutzern auf Ihrer Website Gewicht, insbesondere von Autoren, Redakteuren und Administratoren.

In diesem Artikel zeigen wir Ihnen, wie Sie in WordPress auf einfache Weise ein Benutzerrollen-Label neben den Kommentaren hinzufügen können.

Warum wird in WordPress neben dem Namen des Kommentarverfassers ein Label für die Benutzerrolle angezeigt?

Wenn Sie eine Benutzerregistrierung auf Ihrer Website zulassen oder eine WordPress-Website mit mehreren Autoren betreiben, können Benutzeretiketten die Benutzer anhand ihrer Benutzerrollen einander vorstellen.

Benutzer mit der Benutzerrolle „Redakteur “ beispielsweise zeigen in Kommentaren neben ihrem Namen ein Abzeichen an, das andere Benutzer darauf hinweist, dass dieser Kommentar von einem Redakteur verfasst wurde.

Es stärkt das Vertrauen der Nutzer und erhöht ihr Engagement bei Kommentaren auf Ihrer Website.

Viele WordPress-Themes heben nur Kommentare hervor, die vom Verfasser des Beitrags verfasst wurden. Sie zeigen keine Beschriftungen für andere Benutzerrollen an, selbst wenn andere Kommentare von registrierten Benutzern oder Website-Administratoren abgegeben werden.

Schauen wir uns also an, wie man in WordPress ganz einfach eine Benutzerrollenbezeichnung neben den Kommentaren hinzufügen kann.

Hinzufügen eines Benutzerrollen-Labels neben dem Namen des Kommentarautors in WordPress

Für dieses Tutorial müssen Sie Code zu Ihren WordPress-Theme-Dateien hinzufügen. Wenn Sie dies noch nicht getan haben, werfen Sie bitte einen Blick auf unsere Anleitung zum Kopieren und Einfügen von Codeschnipseln in WordPress.

Als erstes müssen Sie den folgenden Code in die Datei functions.php Ihres Themes, in ein Site-spezifisches Plugin oder in ein Code Snippets Plugin einfügen.

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;

Diese Funktion Code oben Haken in WordPress-Filter verwendet, um Kommentar Autor Name anzeigen, um Benutzer Rolle Label enthalten.

Wir empfehlen, diesen Code mit WPCode hinzuzufügen, dem besten Code Snippets Plugin für WordPress. Es ist der sicherste und einfachste Weg, Code hinzuzufügen, ohne die functions.php-Datei Ihres Themes zu bearbeiten.

Um loszulegen, müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Detaillierte Anweisungen finden Sie in dieser Anleitung zur Installation eines WordPress-Plugins.

Sobald das Plugin aktiviert ist, navigieren Sie im WordPress-Dashboard zu Code Snippets “ + Snippet hinzufügen. Klicken Sie dort auf die Schaltfläche „Snippet verwenden“ unter der Option „Eigenen Code hinzufügen (neues Snippet)“.

Als Nächstes fügen Sie oben auf der Seite einen Titel für Ihr Codefragment ein. Das kann alles sein, was Ihnen hilft, sich zu erinnern, wofür der Code ist.

Fügen Sie dann den Code von oben in das Feld „Codevorschau“ ein und wählen Sie „PHP Snippet“ als Codetyp aus der Dropdown-Liste auf der rechten Seite.

Danach schieben Sie einfach den Schalter von „Inaktiv“ auf „Aktiv“ und klicken auf die Schaltfläche „Snippet speichern“.

Sie können jetzt jeden Beitrag mit Kommentaren besuchen, um ihn in Aktion zu sehen.

Bei Kommentaren, die von registrierten Nutzern verfasst werden, wird neben dem Namen des Verfassers des Kommentars auch die Rolle des Nutzers angezeigt. Bei Kommentaren von nicht registrierten Benutzern wird nur der Name des Verfassers des Kommentars angezeigt.

Nun, da wir die Benutzerrolle hinzugefügt haben, ist es an der Zeit, sie zu gestalten und sauber aussehen zu lassen.

In unserem Code haben wir eine CSS-Klasse für jede Benutzerrolle hinzugefügt, so dass wir diese CSS-Klassen verwenden können, um jedes Benutzerabzeichen unterschiedlich zu gestalten (z. B. unterschiedliche Farben zu verwenden usw.)

Sie können das folgende CSS-Beispiel als Ausgangspunkt verwenden:

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

Sie können das CSS nach Belieben anpassen. So sah es auf unserer Demo-Website aus:

Weitere Einzelheiten finden Sie in unserer Anleitung zum einfachen Hinzufügen von benutzerdefiniertem CSS zu Ihrer WordPress-Website.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man in WordPress neben den Kommentaren ein Benutzerrollen-Label hinzufügt. Vielleicht interessieren Sie sich auch für unsere Anleitung, wie man Gravatare in WordPress-Kommentaren verzögert lädt, und unsere Expertenauswahl der besten Plugins zur Verbesserung von WordPress-Kommentaren.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.