Wie man Kommentare von Autoren in WordPress hervorhebt

Möchten Sie die Kommentare des Autors in WordPress-Beiträgen auf Ihrer Website hervorheben?

Die Hervorhebung der Kommentare des Autors in Ihrem WordPress-Blog kann Ihnen helfen, das Engagement zu steigern. Die Nutzer werden eher einen Kommentar hinterlassen, wenn sie sehen, dass der Autor aktiv an der Diskussion teilnimmt.

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

Warum Kommentare von Autoren in WordPress hervorheben?

Kommentare sind eine gute Möglichkeit, das Engagement der Nutzer auf Ihrer Website zu steigern. Wenn Sie mehr Kommentare zu Ihren Artikeln erhalten möchten, können Sie diese fördern, indem Sie sich aktiv an den Diskussionen beteiligen.

In einem neuen WordPress-Blog können Sie ganz einfach auf Kommentare antworten und sich an Diskussionen mit Ihren Lesern beteiligen. Wenn Sie einen Blog mit mehreren Autoren betreiben, können Sie die Autoren ermutigen, auch bei der Moderation der Kommentare mitzuhelfen.

Die meisten WordPress-Themes unterscheiden jedoch nicht zwischen den Kommentaren und sie werden im gleichen Stil aufgelistet.

Ein Gelegenheitsleser scrollt vielleicht durch die Kommentare und bemerkt nicht den zusätzlichen Inhalt, den der Autor in der Diskussion beisteuert.

Die Hervorhebung von Autorenkommentaren schafft hier Abhilfe und sorgt dafür, dass die Kommentare des Autors hervorstechen und besser wahrgenommen werden.

Das Ziel ist es, neue Nutzer zu ermutigen, sich an den Kommentaren zu beteiligen und schließlich Ihren Newsletter zu abonnieren oder Kunde zu werden.

Werfen wir also einen Blick darauf, wie man Autorenkommentare in WordPress leicht hervorheben kann.

Hervorhebung des Kommentarautors in WordPress

Die einfachste Möglichkeit, Kommentare nach Verfasser hervorzuheben, ist das Hinzufügen von benutzerdefiniertem CSS zu Ihrem WordPress-Theme. So können Sie den benötigten 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 im WordPress-Verwaltungsbereich die Seite Erscheinungsbild “ Anpassen aufrufen. Dadurch wird die Oberfläche des WordPress-Theme-Anpassers geöffnet. Sie werden eine Reihe von Optionen in einer Spalte auf der linken Seite und eine Live-Vorschau Ihrer Website sehen.

Von hier aus müssen Sie auf die Registerkarte „Zusätzliches CSS“ klicken. Dadurch wird ein Textbereich geöffnet, in den Sie die benutzerdefinierten CSS einfügen.

Sie möchten jedoch sehen, wie das benutzerdefinierte CSS aussehen wird, wenn es angewendet wird. Dazu müssen Sie zu einem Blogeintrag navigieren, der Kommentare von einem Autor enthält.

Scrollen Sie nach unten zum Abschnitt „Kommentare“ und fügen Sie das folgende benutzerdefinierte CSS in das Feld „Benutzerdefiniertes CSS“ auf der linken Seite ein.

.bypostauthor { 
background-color: #e7f8fb;
}

Sie werden sofort feststellen, dass sich der Autorenkommentar entsprechend dem von Ihnen eingegebenen benutzerdefinierten CSS ändert.

Und wie funktioniert das alles?

Wie Sie sehen, fügt WordPress verschiedenen Bereichen Ihrer Website einige Standard-CSS-Klassen zu. Diese CSS-Klassen sind unabhängig von dem WordPress-Theme, das Sie verwenden, vorhanden.

In diesem Beispielcode haben wir die CSS-Klasse .bypostauthor verwendet, die zu allen Kommentaren hinzugefügt wird, die von einem Beitragsautor hinzugefügt werden.

Fügen wir noch ein paar CSS-Stile hinzu, um es noch deutlicher zu machen. Hier ist ein Beispielcode, der den Kommentaren des Beitragsverfassers ein kleines „Autor“-Label und einen Rahmen um das Avatar-Bild 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 Test-Website aus.

Hervorhebung von Kommentaren nach Benutzerrolle in WordPress

In vielen WordPress-Blogs sind inzwischen Teammitglieder für die Beantwortung von Kommentaren zuständig. Beliebte Websites haben möglicherweise den Autor des Beitrags, den Administrator und die Moderatoren, die alle auf Kommentare antworten, um das Engagement der Nutzer zu steigern.

Wie markiert man einen Kommentar, der von einem Mitarbeiter hinzugefügt wurde, der nicht der eigentliche Verfasser des Beitrags ist?

Es gibt einen einfachen Hack, um das zu erreichen. Dazu müssen Sie jedoch benutzerdefinierten Code zu Ihrer WordPress-Website hinzufügen. Wenn Sie dies noch nicht getan haben, lesen Sie unseren Artikel über das Einfügen von Snippets aus dem Internet in WordPress.

Zuerst müssen Sie den folgenden Code in die Datei functions.php Ihres Themes 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;

Anstatt die Datei functions.php Ihres Themes zu bearbeiten, empfehlen wir, diesen Code mit WPCode hinzuzufügen. Dieses Code Snippets Plugin macht es sicher und einfach, benutzerdefinierten Code in WordPress hinzuzufügen.

Um loszulegen, müssen Sie das kostenlose WPCode-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie unsere Anleitung zur Installation eines WordPress-Plugins.

Sobald das Plugin aktiviert ist, gehen Sie in Ihrem WordPress-Dashboard auf Code Snippets “ Snippet hinzufügen.

Fahren Sie dann mit der Maus über die Option „Eigenen Code hinzufügen (neues Snippet)“ und klicken Sie auf die Schaltfläche „Snippet verwenden“.

Fügen Sie dann einen Titel für Ihr Snippet hinzu, fügen Sie den Code von oben in das Feld „Codevorschau“ ein und wählen Sie „PHP Snippet“ als Codetyp aus dem Dropdown-Menü.

Schalten Sie dann einfach den Schalter von „Inaktiv“ auf „Aktiv“ um und klicken Sie auf die Schaltfläche „Snippet speichern“ oben auf der Seite.

Dieser Code fügt einfach die Bezeichnung der Benutzerrolle neben dem Namen des Kommentarverfassers ein. So würde es ohne benutzerdefiniertes Styling aussehen.

Lassen Sie uns das Ganze noch ein wenig verschönern, indem wir einige benutzerdefinierte CSS hinzufügen. Gehen Sie zu Darstellung „ Seite anpassen und wechseln Sie zur Registerkarte Zusätzliches CSS.

Danach können Sie das folgende CSS verwenden, um die Beschriftung der Benutzerrolle 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 Themes anpassen.

Für weitere Details lesen Sie bitte unseren Artikel über das Hinzufügen von Benutzerrollen-Labels zu WordPress-Kommentaren.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie man Autorenkommentare in WordPress hervorhebt. Möchten Sie sehen, wie Nutzer mit Ihrer Website interagieren? In unserem Tutorial erfahren Sie, wie Sie das Nutzerengagement in WordPress verfolgen können und wie Sie Web-Push-Benachrichtigungen auf Ihrer WordPress-Website hinzufügen können, um Ihren Traffic zu steigern.

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.