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.
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:
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 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 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 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:
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 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.
Syed Balkhi says
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!
denny says
Thank you. This post is extremely helpful.
WPBeginner Support says
Glad our guide was helpful!
Administratör
murat says
hi, i added the codes to comments.php with tags but it didnt change anything.how to solve it?
WPBeginner Support says
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
Prashant says
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?
WPBeginner Support says
It would depend on how your theme styles comments but you can see how we’ve styled the replies on our theme using inspect element: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administratör
Will says
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 says
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 says
Yeah.. nice tip!
Henry says
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?
Mike says
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
Szymon says
Great article. Thanks a lot!
Aaron says
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 says
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
Imad Daou says
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.
Wakhid says
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
WPBeginner Support says
Please see our guide on how to add custom fields to WordPress comment form.
Administratör
Derek says
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 says
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.
Sohil Patel says
Great post.. Thanks
Nickool says
Just want to see reply layout
Nickool says
ok
Hang says
Thanks
Charlene says
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!!
Cameron says
If you leave a reply it shows as being posted even though it hasn’t been approved.
petiu says
wow, nice!
Geoffrey says
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).hellobass says
.commentlist .reply {}
.commentlist .reply a {}
Where are the ”-” in your exemple (’Default WordPress Comments Classes’)?
because its : .comment-list
WPBeginner Support says
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
Shuen says
Good tutorial! It help me alot for styling the comment area, Thank you!!! ^_^
Avner says
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!
Audee says
Is there any tips to style very deep levels of nested comments in WordPress?
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
Venera says
Thank you!
Adam says
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 says
Impossible to tell what is going on without looking at your work.
Administratör
rolanstein says
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
Editorial Staff says
This article should help: https://www.wpbeginner.com/blueprint/comments/
Administratör
Jannik says
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!
Editorial Staff says
You have to add list-style: none; in the CSS class .comment-list li. Example CSS would be:
1-click Use in WordPress
Administratör
Alfrex says
Thank you. This post is extremely helpful.