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

Så här markerar du författarens kommentarer i WordPress

Vill du lyfta fram författarens kommentarer i WordPress posts på din website?

Att markera författarens kommentarer i din WordPress blogg kan hjälpa dig att skapa engagemang. Användare är mer benägna att lämna en comment när de ser att författaren aktivt deltar i diskussionen.

I den här artikeln visar vi dig hur du enkelt kan markera författarens kommentarer i WordPress för att öka engagemanget.

Highting comments by an author in WordPress blog posts

Varför lyfta fram författarens kommentarer i WordPress?

Comments är ett bra sätt att skapa engagemang hos användarna på din website. Om du vill få fler comments på dina artiklar kan du uppmuntra det genom att aktivt delta i diskussionerna.

För en new WordPress blogg kan du enkelt svara på kommentarer och delta i diskussioner med dina läsare. Om du runar en blogg med flera författare kan du också uppmuntra författarna att hjälpa till med moderationen av kommentarer.

I de flesta themes för WordPress görs dock ingen skillnad mellan comments och de listas på samma sätt.

Regular comments layout with no author highlighting

En tillfällig läsare kan rulla genom kommentarerna och ej inse det ytterligare content som författaren bidrar med i diskussionen.

Att markera författarens kommentarer hjälper you att åtgärda detta och gör att författarens kommentarer sticker ut och blir mer notice.

Det ultimata målet här är att uppmuntra nya användare att delta i kommentarerna och i slutändan prenumerera på ditt nyhetsbrev eller bli en customer.

Med detta sagt, låt oss ta en titt på hur du enkelt kan markera författares kommentarer i WordPress.

Markera författaren till en comment i WordPress

Det enklaste sättet att markera kommentarer efter författare till post är genom att lägga till custom CSS i ditt WordPress theme. Detta allow you att enkelt add to den kod som behövs och se en live preview av hur det skulle se ut på din website utan att save den.

Först måste du besöka Appearance ” Customize i WordPress admin area. Detta kommer att starta WordPress tema customizer gränssnitt. Du kommer att notera en massa alternativ i en column till vänster och en live preview av din website.

Theme customizer in WordPress

Härifrån måste du klicka på tabben ”Ytterligare CSS”. Detta öppnar ett textområde där du kommer att lägga till den custom CSS.

Additional CSS tab

Du skulle dock vilja se hur den customize CSS kommer att se ut när den tillämpas. För att göra det måste du navigera till ett blogginlägg som innehåller kommentarer från en författare till inlägget.

Viewing comments in Theme Customizer

Rulla ner till sektionen comments och lägg sedan till följande custom CSS i Custom CSS boxen till vänster.

.bypostauthor { 
background-color: #e7f8fb;
}

You’ll immediately notice the author comment change matching the custom CSS you entered.

Author's comment highlighted with a different background color

Så hur fungerar alltihop?

You see WordPress adderar några standard CSS-klasser till olika area på din website. Dessa CSS-klasser finns där oavsett vilket WordPress theme du använder.

I den här exempelkoden har vi använt CSS-klassen .bypostauthor som läggs till i alla kommentarer som läggs till av en författare till ett post.

Låt oss add to några fler CSS-stilar för att göra det ännu mer framträdande. Här är ett exempel på kod som add to en liten ”Author”-etikett till kommentarerna av postens författare och en kant runt författarens avatar image.

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

Så här såg det ut på vår test website.

Comment author highlighted with the Author label

Markera kommentarer efter användarens roll i WordPress

Nu har många WordPress bloggar teammedlemmar som är responsiva för att besvara comments. Populära webbplatser kan ha post författare, administratör och moderatorer som alla svarar på kommentarer för att öka engagemanget hos användarna.

Hur markerar du en comment som lagts till av en anställd som ej är den faktiska författaren till posten?

Det finns ett enkelt hack för att uppnå det. Det är dock obligatoriskt att du addar custom code till din WordPress website. Om du inte har gjort det tidigare kan du läsa vår artikel om hur du klistrar in snippor från webben i WordPress.

Först måste du add to följande kod till functions.php-filen i ditt theme eller i ett code snippets 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;

Istället för att editera ditt temas functions.php-fil, rekommenderar vi att du lägger till den här koden med WPCode. Detta code snippets plugin gör det säkert och enkelt att add to custom code i WordPress.

WPCode

För att komma igång måste du installera och aktivera det gratis pluginet WPCode. Om du behöver hjälp kan du läsa vår guide om hur du installerar ett plugin för WordPress.

När pluginet är aktiverat, gå till head till Code Snippets ” Add Snippet från din WordPress dashboard.

Håll sedan muspekaren över alternativet ”Add Your Custom Code (New Snippet)” och klicka på knappen ”Use snippet”.

Add a new custom code snippet in WPCode

Därefter add to a title for your snippet, paste the code from above into the ”Code Preview” box, and select ”PHP Snippet” as the code type from the dropdown menu.

Paste snippet into the WPCode plugin

Efter det är det bara att toggle omkopplaren från ”Inaktiverad” till ”Aktiv” och klicka på knappen ”Save Snippet” högst upp på sidan.

Activate and save your custom code snippet

Den här koden addar helt enkelt etiketten för användarens roll bredvid namnet på författaren till kommentaren. Så här skulle det se ut utan någon custom styling.

User role labels added to comments

Låt oss göra det lite snyggare genom att lägga till lite custom CSS. Gå till appearance ” Customize page och växla till Additional CSS tabs.

Följaktligen kan du använda följande CSS för att formatera etiketten för användarens roll i kommentarerna.

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

Så här såg det ut på vår test site. Ändra gärna koden så att den matchar färgerna och stilen i ditt theme.

User role highlighted

För mer detaljer kan du läsa vår artikel om hur du lägger till etiketter för roller för användare i WordPress comments.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du markerar författares kommentarer i WordPress. Du kanske också vill se vår tutorial om hur man markerar new posts för återkommande visitors i WordPress och våra expertval av de bästa tillägg för författares bio box för WordPress.

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

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.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

22 kommentarerLämna ett svar

  1. Dennis Muthomi

    I have a QUESTION on Comments – since comments are user-generated content, is there any way to get them indexed by search engines?
    I know forum and community posts often show up in search results, so I’m curious if something similar works for WordPress comments.

    • WPBeginner Support

      Normally if you check with your SEO plugin they may have a tool or setting to add markup for your comments :)

      Administratör

  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. Irfan Ali

    Thank you very much.

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

  5. Martin

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

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

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

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

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

      Administratör

  10. Ahmad Raza

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

  11. Gretchen Louise

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

  12. 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!

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

      Administratör

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.