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 stylar du layouten för dina comments i WordPress

Senast visade vi dig hur du stylar WordPress kommentarformulär, och vi tänkte att det skulle vara ofullständigt om vi ej skrev om styling av WordPress comments layout. Tidigare har vi diskuterat att det finns standard WordPress genererade CSS-klasser och ID:n för att göra det lättare för temadesigners att styla sina templates. I den här artikeln kommer vi att använda dessa standardklasser för att visa dig hur du stylar din WordPress comments layout och några av de coola saker du kan göra med den.

För det här exemplets skull kommer vi att ändra standardtemat Twenty Twelve WordPress i den här artikeln. Note: Den här artikeln är för nybörjare inom tema-design och DIY-användare som har en rimlig förståelse för HTML och CSS.

Klasser för standard WordPress Comments

Som standard genererar WordPress dessa klasser för element i templates för comments:

/*Comment Output*/

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {} 
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

Så här hittar du vilka CSS-klasser du behöver edit

Innan vi går vidare till styling av WordPress comments layout, ett litet tips för våra nya användare. Google Chrome och Mozilla Firefox web browsers kommer med ett praktiskt verktyg som du kan använda för att förbättra dina färdigheter i att utveckla WordPress theme. Verktyget är anropat Inspect Element. Ta helt enkelt din mus till ett element på en page, högerklicka och välj inspect element. Din webbläsare kommer att delas upp i två row och i det nedre fönstret kommer du att se källkoden för det elementet. I det nedre fönstret kan du också se CSS-element och hur de är stylade. Du kan till och med editera CSS där inne för teständamål. Det är viktigt att komma ihåg att allt du ändrar med hjälp av Inspect Element bara är synligt för you. I samma ögonblick som du uppdaterar page försvinner dessa ändringar. För att göra ändringarna permanently måste du använda din style.css-fil eller andra lämpliga filer i dina themes.

Inspect element in Google Chrome to look at source code and quickly find matching CSS rules

Lägga till udda och jämna bakgrundsfärger för Comments

Att ha olika bakgrundsfärg för udda och jämna kommentarer är en designtrend som har funnits i några år nu. Det hjälper läsbarheten, särskilt om du har många kommentarer. Det ser också riktigt bra ut med vissa färger i temat, vilket är anledningen till att många designers vill använda den här funktionen. För att hjälpa designers att uppnå detta mål adderar WordPress en udda respektive jämn klass till varje comment.

Du kan enkelt add to odd/even styling för comments i ditt temas style.css genom att klistra in följande kod.

.commentlist .even .comment { 
background-color:#ccddf2; 
} 
.commentlist .odd .comment {
background-color:#CCCCCC;
}

Resultatet skulle se ut ungefär så här:

Using CSS to add alternate colors for even and odd comments in WordPress

Styling Kommentar Författare och Meta Information

WordPress addar också klasser till element som visas i varje comment header. Detta allow temadesigners att customize displayen av författarinformation och annan kommentar meta som kommentarens datum och tid. Här är ett exempel på kod som du kan klistra in i ditt temas style.css-fil för att styla dessa element på olika sätt. I det här exemplet har vi add to bakgrundsfärg till comment meta tillsammans med lite avstånd.

.comments-area article header {
	margin: 0 0 48px;
	overflow: hidden;
	position: relative;
	background-color:#55737D;
	color:#FFFFFF;
	padding: 10px;
}

Det är så här det ska se ut:

Styling comment meta and author information in WordPress comments

Styling av post författarens kommentarer på olika sätt

Ofta kanske du ser att kommentarer från författare till inlägg markeras antingen med en annan bakgrundsfärg eller något ytterligare märke. WordPress adderar en standardklass bypostauthor till alla kommentarer som görs av postens författare. WordPress temadesigners kan använda den här klassen för att styla inläggsförfattarens kommentarer på olika sätt.

Vissa teman använder en egen callback-funktion för att displayed comments. Med hjälp av callback-funktionen kan dessa teman add to ytterligare information till en comment by post author. Twenty Twelve använder till exempel följande rad i callback-funktionen för kommentarer, twentytwelve_comment() (location i functions.php-filen i temat).

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Post author', 'twentytwelve' ) . '</span>' : '' );

Denna kod add to <span>Post Author</span> till metainformationen för kommentaren. Beroende på hur ditt WordPress-tema hanterar kommentarer från författaren till posten, kan du ändra det till vad du vill.

Om du använder ett annat theme än Twenty Twelve, måste du ta reda på hur ditt theme hanterar comments. Öppna helt enkelt ditt temas comments.php-fil. Om ditt theme använder sin egen callback-funktion, skulle du se den inuti wp_list_comments-funktionen, gillar du det här:

<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>

I exemplet ovan kan du se att temat använder twentytwelve_comment som callback-funktion. Om en callback-funktion anges är den mest troliga location för att hitta denna funktion i functions.php-filen i your theme.

I det här exemplet ändrar vi den här funktionen för att visa Editor istället för Post Author. För att göra det har vi ändrat callback-funktionen för comments så här:

// If current post author is also comment author, make it known visually.

( $comment->user_id === $post->post_author ) ? '<span> ' . __( 'Editor', 'twentytwelve' ) . '</span>' : '');

Vi kommer också att ändra hur det ser ut genom att lägga till följande i vårt temas style.css-fil så här:

li.bypostauthor cite span {
	color: #21759b;
	background-color: #f8f0cb;
	background-image: none;
	border: 1px solid #f8f0cb;
	border-radius: 3px;
	box-shadow: none;
	padding: 3px;
	font-weight:bold;
}

Det är så här det skulle se ut:

Styling aurhor comments differently in WordPress comments

Styling Kommentar Reply-To Link i WordPress Comments

De flesta teman i WordPress har en svarslänk under varje comment. Denna funktion visas endast om du har aktiverat trådade comments. För att aktivera trådade kommentarer, gå till din WordPress-admin (Settings ” Discussion). Titta på den section där det står other comment settings och kontrollera boxen för enable threaded (nested) comments.

Standard CSS-klasserna som genereras av WordPress för svarslänken är reply och comment-reply-link. Vi kommer att använda dessa klasser för att ändra svarslänken och göra om den till en CSS-knapp.

.reply { 
	float:right;
	margin:0 10px 10px 0;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

.comment article {
	padding-bottom:2.79rem;
}

a.comment-reply-link,
a.comment-edit-link {
	color: #FFFFFF;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	text-decoration:none;
}

a.comment-reply-link:hover,
a.comment-edit-link:hover {
	color: #f6e7d7;
}

Det är så här det skulle gilla att se ut:

Styling the comment reply button in WordPress comments using CSS

Styling av knappen Comment Edit

I de flesta teman i WordPress kan inloggade användare med capability att redigera kommentarer se en länk för att redigera kommentarer under varje kommentar. Här är en liten CSS som använder standardklassen comment-edit-link för att ändra länkens appearance.

a.comment-edit-link {
	float:left;
	margin:0 0 10px 10px;
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
}

Så här skulle det gilla att se ut:

Using CSS to style comment edit link in WordPress Comments

Styling Cancel Comment Reply-To Link

I de flesta bra WordPress teman, klickar du på Reply-länken öppnar kommentarformuläret precis under den kommentar du svarar på med en länk för att cancel kommentar svar. Låt oss ändra denna cancel comment reply link genom att använda standard CSS ID cancel-comment-reply.

#cancel-comment-reply-link  { 
	text-align:center;
	background-color: #55737D;
	border:1px solid #55737D;
	border-radius:3px;
	padding:3px;
	width:50px;
	color:#FFFFFF;
	box-shadow: 1px 1px 2px 2px #4f4f4f;
	text-decoration:none;
}

Här är hur det skulle gilla att se ut:

Styling the cancel comment reply link in WordPress comment reply form

Styling av formuläret för comments i WordPress

Användbara, estetiskt tilltalande och snygga kommentarsformulär uppmuntrar användarna att lämna en comment på din blogg. Tidigare har vi skrivit en detaljerad artikel om hur man stylar WordPress kommentarformulär. Vi rekommenderar starkt att du går och kontrollerar det för att se hur du kan ta ditt WordPress-kommentarformulär till nästa nivå.

Vi hoppas att den här artikeln hjälper dig att utforma din layout för WordPress comments. Om du har några frågor eller förslag är du välkommen att höra av dig till oss genom att lämna en comment under.

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

41 kommentarerLämna ett svar

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

    Thank you. This post is extremely helpful.

    • WPBeginner Support

      Glad our guide was helpful!

      Administratör

  3. murat

    hi, i added the codes to comments.php with tags but it didnt change anything.how to solve it?

    • WPBeginner Support

      The code in this article is CSS code, you would want to add it under Appearance>Customize>Additional CSS for the code to affect your site.

      Administratör

  4. Prashant

    I have my site where i have the replies to comments appear right below in straight line below the actual comment.. how can we put a small offset like you have done here for the replies to comments?

  5. Will

    It’s 2018!

    Is this still the easiest method to style a Wordpress comment?

    This article was written 5 years ago. A search around Google. It seems like the WordPress comment system is NOT beginner-friendly to customize, and hasn’t evolved much at all. Disappointing!

    • WPBeginner Support

      Hey Will,

      Yes, it still applies. You are right that the default WordPress comment system is quite basic. However, you can easily extend it using plugins like De:comments which add lots of other features to your comments and make them more engaging.

      Administratör

      • Prashant

        Yeah.. nice tip!

  6. Henry

    Great Tutorial!
    But how do I get the comments to show up side by side (Like a ”for” and ”against”) kind of debate to a single post. Also will I need to have two different comment forms underneath them?

  7. Mike

    Hi,

    How can I style the hyperlinks in the comments area? I want to change the hyperlink color in the comments box.

    Thank-you.

    Mike

  8. Szymon

    Great article. Thanks a lot!

  9. Aaron

    Hey WPBeginner,

    Awesome post! I read through it and am still having trouble figuring out what I need to do to display the ”Reply” button and Gravatars.

    I’m not sure if the theme displays this information, but I do have Avatars enabled in the Reading section of the admin panel.

    I thought maybe I could place a bit of code somewhere in the comments.php file, but I don’t see where I could add these changes manually. The part of the code that brings comments in looks something like this:

    ~~~~

    Recent Comments

    ’comment’, ’callback’ => ’crawford_comment’)); ?>

    ~~~~

    Am I looking in the wrong place? Answer is probably yes, but I’m not sure where to check.

    Here’s a page with comments, for reference:
    Any advice appreciated!

    • WPBeginner Support

      The comments.php template is pointing to you to look for the callback function. This callback is defined in your theme’s functions.php file. This is where you will edit your comment layout.

      Administratör

  10. Imad Daou

    Would you please show the same steps but for Gensis 2.0? I followed the above steps, but I still couldn’t figure out how to change the comment layout background color. I use Genesis Sample theme.

    My website under development and I can’t have it live yet, but the dropbox links below will show you how the comments boxes are white and I couldn’t find out using all the tricks you mentioned above how to change the color background color.

    I wanted to use #333333 as background instead of white.

    Thank you so much for all your hard work.

  11. Wakhid

    Hi WPbeginner, im trying to create a custom form comments but i really don’t know how to create it,

    sorry my english is bad

  12. Derek

    I followed this tutorial and have only one question:

    How can you get the reply box to appear nested under the post you are replying to?

    • Arauz

      Im add in this question too. I have a template but i cant show the nested comments from the admin of the site.

      Help us please.

  13. Sohil Patel

    Great post.. Thanks

    • Nickool

      Just want to see reply layout

  14. Charlene

    Wow all of these tips have been so helpful! Thanks for a great post!

    I’m now wondering how can I add text beside all Admin names in the comments, even if they’re not the post author?

    I’m assuming it would be here but not sure what needs to be changed:
    ’( $comment->user_id === $post->post_author )’

    Thanks!!

  15. Cameron

    If you leave a reply it shows as being posted even though it hasn’t been approved.

  16. Geoffrey

    Careful on line 44 of default WordPress comments classes,


    .commentlist li ul.children li.depth-{id} {}

    is not a valid CSS selector. {id} must be replaced with the appropriate ID (an integer).

  17. hellobass

    .commentlist .reply {}
    .commentlist .reply a {}

    Where are the ”-” in your exemple (’Default WordPress Comments Classes’)?

    because its : .comment-list

    • WPBeginner Support

      hellobass, actually .commentlist or .comment-list is not generated by WordPress and themes usually choose them on their own. For example, Twenty Twelve uses .commentlist and Twenty Thirteen uses .comment-list you can find out which class your theme is using by look at comments.php or in Chrome developer tools (Inspect Element).

      Administratör

  18. Shuen

    Good tutorial! It help me alot for styling the comment area, Thank you!!! ^_^

  19. Avner

    Thank you! that was very helpful!

    How can I apply the odd and even styling to apply only inside a thread (in order to distinguish between child comments)? I would like the readers to be able to distinguish easily between comments in the same thread and allow them to follow it easily.

    Thanks!

  20. Audee

    Is there any tips to style very deep levels of nested comments in WordPress?
    :D I must have been crazy for styling 5 deep levels nested comment.
    It will be nice and save up much time to have a set of CSS code which is reusable for different project. But often happened that different layout width might made this reusable styling took longer to configure.

    Thank you for sharing this article, bookmarked for further study ;)

  21. Venera

    Thank you!

  22. Adam

    This is so annoying i can not get half of this to work
    the odd and even colours only apply to the nested comments
    It will not let me style the Comment Author and Meta Information at all
    Please help me Fix this

    • Editorial Staff

      Impossible to tell what is going on without looking at your work.

      Administratör

  23. rolanstein

    Excellent post! Thank you.

    May I ask how you add the ’Notify me of followup comments via e-mail’ and ’Subscribe to…’ boxes below your comment form?

    Cheers
    rolanstein

  24. Jannik

    Awesome Tutorial!
    How did you get rid of the – ordered list? It always has numbers infront of my comments and I really don’t like it.

    Thanks!

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.