So erstellen Sie eine Website oder ein Blog im Jahr 2020 - Kostenlose und einfache Anleitung zum Erstellen einer Website

So markieren Sie Autorenkommentare in WordPress

Möchten Sie Autorenkommentare zu WordPress-Beiträgen auf Ihrer Website veröffentlichen?

Das Hervorheben von Autorenkommentaren in Ihrem WordPress-Blog kann Ihnen helfen, Engagement aufzubauen. Benutzer hinterlassen eher einen Kommentar, wenn sie sehen, dass der Autor aktiv an der Diskussion teilnimmt.

In diesem Artikel zeigen wir Ihnen, wie Sie Autorenkommentare in WordPress einfach hervorheben können, um das Engagement zu steigern.

Kommentare des Feature-Autors zu WordPress-Blog-Beiträgen

Warum Autorenkommentare in WordPress hervorheben?

Kommentare sind eine großartige Möglichkeit, um Benutzerbindung auf Ihrer Website zu generieren. Wenn Sie mehr Feedback zu Ihren Artikeln erhalten möchten, können Sie dies anregen, indem Sie sich aktiv an den Diskussionen beteiligen.

Bei einem neuen WordPress-Blog können Sie während der Kommentarmoderation ganz einfach auf Kommentare antworten. Wenn Sie einen Blog mit mehreren Autoren haben, können Sie die Autoren ermutigen, sich ebenfalls an der Diskussion zu beteiligen.

Die meisten WordPress-Themes unterscheiden jedoch nicht zwischen Kommentaren und listen sie im gleichen Stil auf.

Normales Kommentar-Layout ohne Hervorhebung des Autors

Ein gelegentlicher Leser kann durch die Kommentare blättern, ohne sich des zusätzlichen Inhalts bewusst zu sein, der vom Autor zur Diskussion hinzugefügt wurde.

Autorenkommentare hervorheben hilft Ihnen dabei, dies zu beheben, und hebt Autorenkommentare hervor und macht sie auffälliger.

Das ultimative Ziel hier ist es, neue Benutzer zu ermutigen, sich den Kommentaren anzuschließen und sich letztendlich für Ihren Newsletter anzumelden oder Kunde zu werden.

Lassen Sie uns einen Blick darauf werfen, wie Sie Autorenkommentare in WordPress einfach hervorheben können.

Hervorhebung des Kommentarautors in WordPress

Der einfachste Weg, Kommentare von Post-Autoren hervorzuheben, ist das Hinzufügen von benutzerdefiniertem CSS zu Ihrem WordPress-Theme. Auf diese Weise können Sie den erforderlichen Code einfach hinzufügen und eine Live-Vorschau sehen, wie er auf Ihrer Website aussehen würde, ohne ihn zu speichern.

Zuerst müssen Sie besuchen Aussehen » Anpassen im WordPress-Adminbereich. Dadurch wird die Anpassungsschnittstelle des WordPress-Designs gestartet. Sie werden eine Reihe von Optionen in einer Spalte auf der linken Seite und eine Live-Vorschau Ihrer Website bemerken.

WordPress-Theme-Customizer

Von hier aus müssen Sie auf die Registerkarte Zusätzliches CSS klicken. Dadurch wird ein Textbereich geöffnet, in dem Sie Ihr benutzerdefiniertes CSS hinzufügen.

Zusätzliche CSS-Registerkarte

Sie möchten jedoch sehen, wie das benutzerdefinierte CSS aussieht, wenn es angewendet wird. Dazu müssen Sie zu einem Blogbeitrag navigieren, der Kommentare des Autors des Beitrags enthält.

Zeigen Sie Kommentare im Design-Customizer an

Scrollen Sie nach unten zum Kommentarbereich und fügen Sie dann das folgende benutzerdefinierte CSS in das Feld Benutzerdefiniertes CSS auf der linken Seite ein.

.bypostauthor { 
background-color: #e7f8fb;
}

Sie werden sofort feststellen, dass die Änderung des Autorenkommentars mit dem von Ihnen eingegebenen benutzerdefinierten CSS übereinstimmt.

Der Kommentar des Autors ist mit einer anderen Hintergrundfarbe hervorgehoben

Wie funktioniert das alles?

Sie werden sehen, dass WordPress einige Standard-CSS-Klassen zu verschiedenen Bereichen Ihrer Website hinzufügt. Diese CSS-Klassen sind unabhängig vom verwendeten WordPress-Theme vorhanden.

In diesem Beispielcode haben wir die CSS-Klasse .bypostauthor verwendet, die allen Kommentaren hinzugefügt wird, die vom Autor eines Beitrags hinzugefügt wurden.

Lassen Sie uns etwas mehr CSS-Stil hinzufügen, um es noch markanter zu machen. Hier ist ein Beispielcode, der den Kommentaren des Beitragsautors ein kleines „Autor“-Tag und einen Rahmen um das Avatarbild des Autors hinzufügt.

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

So sah es auf unserer Testseite aus.

Kommentarautor mit Autor-Tag hervorgehoben

Kommentarhervorhebung nach Benutzerrolle in WordPress

Jetzt haben viele WordPress-Blogs Teammitglieder, die für die Beantwortung von Kommentaren verantwortlich sind. Beliebte Websites können einen Beitragsautor, einen Administrator und Moderatoren haben, die alle auf Kommentare reagieren, um die Benutzerinteraktion zu fördern.

Wie heben Sie einen Kommentar hervor, der von einem Mitarbeiter hinzugefügt wurde, der nicht der eigentliche Autor des Beitrags ist?

Es gibt einen einfachen Trick, um dies zu erreichen. Es erfordert jedoch, dass Sie Ihrer WordPress-Website benutzerdefinierten Code hinzufügen. Wenn Sie dies noch nicht getan haben, lesen Sie unseren Artikel zum einfachen Hinzufügen von benutzerdefiniertem Code in WordPress.

Zuerst müssen Sie den folgenden Code zum Code-Snippets-Plug-in oder zur Datei functions.php Ihres Themes hinzufü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=" ';
} 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;

Dieser Code fügt einfach das Benutzerrollen-Tag neben dem Namen des Kommentarautors hinzu. So würde es ohne Custom-Styling aussehen.

Benutzerrollen-Tags zu Kommentaren hinzugefügt

Machen wir es ein bisschen hübscher, indem wir benutzerdefiniertes CSS hinzufügen. Gehe zu Aussehen » Anpassen Seite und wechseln Sie auf die Registerkarte Zusätzliches CSS.

Danach können Sie das folgende CSS verwenden, um das Benutzerrollen-Tag in den Kommentaren zu gestalten.

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

So sah es auf unserer Testseite aus. Sie können den Code gerne an die Farben und den Stil Ihres Themas anpassen.

Benutzerrolle hervorgehoben

Für weitere Details lesen Sie vielleicht unseren Artikel zum Hinzufügen von Benutzerrollen-Tags zu WordPress-Kommentaren.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Autorenkommentare in WordPress hervorheben. Möchten Sie sehen, wie Benutzer mit Ihrer Website interagieren? Sehen Sie sich unser Tutorial an, wie Sie das Benutzerengagement in WordPress verfolgen und Web-Push-Benachrichtigungen zu Ihrer WordPress-Site hinzufügen, um Ihren Traffic zu erhöhen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch unter Twitter Y Facebook.