Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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.

Highting comments by an author in WordPress blog posts

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.

Regular comments layout with no author highlighting

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.

Theme customizer in WordPress

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.

Additional CSS tab

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.

Viewing comments in Theme Customizer

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.

Author's comment highlighted with a different background color

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.

Comment author highlighted with the Author label

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.

WPCode

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“.

Add a new custom code snippet in WPCode

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ü.

Paste snippet into the WPCode plugin

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

Activate and save your custom code snippet

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

User role labels added to comments

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.

User role highlighted

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 Kommentare von Autoren in WordPress hervorhebt. Vielleicht interessiert Sie auch unser Tutorial, wie Sie neue Beiträge für wiederkehrende Besucher in WordPress hervorheben können, und unsere Expertenauswahl der besten Plugins für Autoren-Bio-Boxen in WordPress.

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.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

21 KommentareEine Antwort hinterlassen

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Rafael

    Not work for me :(

    I use custom theme with comments.php from twenty Twenty Thirteen.

    Where can I add more CSS classes ?

  3. Haina

    Hi! Whenever somenone leaves a comment on my website, the author name appears in gray. How can I change that do black? Also, a „permalink“ word is always bellow the date and time of the comment . How can I get rid of that? Any help will be much appreciated. Thanks.

      • Haina

        Thanks for the quick reply. However, my understanding of CSS is less than „fair“. If you could give me direct instructions on how to get the comment author name in black, it would be great. If not, I understand also. Thanks.

  4. Martin

    How is it possible to exclude any replies to the authors comment from the styling?

  5. Peter Huan

    I tried to it but i could not. I was added to my theme opition by myself.
    May be i was changed „div“…
    Thank you for topic.

  6. Fahad

    There is a problem with changing the background if the auther is the creator of the comment and someone else replied, since the nested reply will also have the same highlighted background!

  7. deven

    Nice post … but is there any plugin for doing the same ( there are some but 2-3 yers old ) looking for a new one with more customize options.

  8. char

    Is there a way to give each author (the main ones) different color comments?

    • Editorial Staff

      Yes, it is possible to assign different color comments for registered users. The class would look like .comment-author-username. Replace username with the author’s username.

      Admin

  9. Ahmad Raza

    I followed the way you described but i have not found <li id=“comment-„> template in my comments.php
    Any solution?

  10. Gretchen Louise

    I’d love to see this tutorial updated to apply to Genesis and multi-author blogs! :)

  11. Keith Davis

    Useful tip.
    When I read post comments, I tend to read the author’s comments on the assumption that what he says carries more authority.
    I’m OK with the CSS but never sure about the php.
    You may have enticed me to start messing with the php!

  12. janghuan

    In my wordpress version,I just need to add a exist class that the wordpress generates.It’s „comment-author-admin“.Maybe the class „bypostauthor“ that wordpress generates also does work.

    • Editorial Staff

      You can probably add a comma and add more user IDs, but it will show all editor’s comment in highlighted version, so yes it will be a fail if you look at it that way.

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.