先日、WordPressのコメントフォームをスタイリングする方法を紹介しましたが、WordPressのコメントレイアウトをスタイリングする方法について書かなければ不完全だと思いました。過去に、テーマデザイナーがテンプレートをスタイリングしやすくするために、WordPressが生成する初期設定のCSSクラスとIDがあることを説明しました。この投稿では、WordPressのコメントレイアウトをスタイリングする方法と、それを使ってできるクールなことのいくつかを紹介するために、これらの初期設定を使用します。
この投稿では、この例のために、デフォルト設定のTwenty Twelve WordPressテーマを変更します。注：この投稿は、HTMLとCSSをそれなりに理解している初級テーマデザイナーやDIYユーザー向けです。
初期設定のWordPressコメントクラス
WordPressの初期設定では、コメントテンプレートの要素に対してこれらのクラスが生成されます：
[cbk1］
編集が必要なCSSクラスを見つける方法
WordPressのコメントレイアウトのスタイリングに移る前に、新規ユーザーにちょっとしたヒントを。Google ChromeとMozilla Firefoxウェブブラウザには、WordPressテーマ開発者のスキルアップに使える便利なツールがあります。このツールは、Inspect Elementと呼ばれています。ウェブページ上の要素にマウスを持っていき、右クリックして要素の検査を選択するだけです。ブラウザーウィンドウが2行に分かれ、下のウィンドウにその要素のソースコードが表示されます。また、下のウィンドウでは、CSS要素と、それらがどのようにスタイル設定されているかを見ることができます。テスト用にCSSを編集することもできます。覚えておいていただきたいのは、Inspect Elementを使って変更した内容は、あなただけに見えるということです。ページを更新した瞬間に、その変更は消えてしまいます。変更を恒久的なものにするには、テーマのstyle.cssファイルやその他の適切なファイルを使用する必要があります。
コメントする背景色の奇数と偶数の追加
奇数コメントと偶数コメントで背景色を変えるのは、ここ数年のデザイントレンドです。コメントする数が多い場合は特に読みやすくなります。また、テーマカラーとの相性も良いため、多くのデザイナーがこの機能を利用したいと考えています。デザイナーがこの目標を達成するのを助けるために、WordPressは各コメントにそれぞれ奇数と偶数のクラスを追加します。
以下のコードを貼り付けることで、テーマのstyle.cssにコメントする際の奇数/偶数スタイルを簡単に追加することができます。
[cbk2］
結果は次のようになります：
コメントする投稿者とメタ情報のスタイリング
WordPressはまた、各コメントヘッダーに表示される要素にクラスを追加します。これにより、テーマデザイナーは投稿者情報やコメント日時などのコメントメタ情報の表示をカスタマイズすることができます。以下は、テーマのstyle.cssファイルに貼り付けて、これらの要素を異なるスタイルにするサンプルコードです。この例では、コメントするメタ情報に背景色を追加し、間隔をあけています。
[cbk3］
このようになります：
投稿者コメントを別のスタイルにする
投稿者のコメントが背景色やバッジで強調されているのをよく見かけます。WordPressでは、投稿者によって作成されたすべてのコメントにbypostauthorという初期設定が追加されます。WordPressのテーマデザイナーは、このクラスを使って投稿者コメントを別のスタイルにすることができます。
いくつかのテーマは、コメントを表示するために独自のコールバック関数を使用しています。コールバック関数を使うことで、これらのテーマは投稿者別のコメントに追加情報を加えることができます。例えば、Twenty Twelveではコメントコールバック関数twentytwelve_comment()(テーマのfunctions.phpファイルにあります)の中で以下の行を使っています。
[cbk4］
このコードは、コメントのメタ情報に<span>投稿者</span>を追加します。あなたのWordPressテーマが投稿者によるコメントをどのように扱うかによって、好きなように変更することができます。
Twenty Twelveとは異なるテーマを使用している場合は、テーマがどのようにコメントを処理するのかを確認する必要があります。テーマのcomments.phpファイルを開いてください。もしあなたのテーマが独自のコールバック関数を使用している場合、wp_list_comments関数の中にこのように表示されます：
<?php wp_list_comments( array( 'callback' => 'twentytwelve_comment', 'style' => 'ol' ) ); ?>
上記の例では、テーマがコールバック関数としてtwentytwelve_commentを使用していることがわかります。コールバック関数が指定されている場合、この関数を見つける最も可能性の高い場所はテーマのfunctions.phpファイルです。
この例では、投稿者の代わりにエディターを表示するようにこの関数を変更しています。そのために、コメントするコールバック関数をこのように変更しています：
[cbk6］
また、テーマのstyle.cssファイルに以下のように追加することで、見た目を変更します：
[cbk7］
このようになります：
WordPressでコメントする際の返信先リンクをスタイリングする。
ほとんどのWordPressテーマには、各コメントの下に返信リンクがあります。この機能はスレッドコメントを有効化している場合にのみ表示されます。スレッドコメントを有効化するには、WordPressの管理画面（設定 ” ディスカッション）にアクセスします。その他のコメント設定というセクションを見て、スレッド化（入れ子）コメントを有効化するボックスにチェックを入れてください。
返信リンク用にWordPressによって初期設定されたCSSクラスはreplyと comment-reply-linkです。これらのクラスを使って返信リンクを修正し、CSSボタンにします。
[cbk8］
このようになります：
コメント編集ボタンのスタイリング
ほとんどのWordPressテーマでは、コメントを編集できるログイン中のユーザーには、各コメントの下にコメント編集リンクが表示されます。ここでは、初期設定のcomment-edit-linkクラスを使用して、リンクの外観を変更するちょっとしたCSSを紹介します。
[cbk9］
以下のようになります：
スタイリング コメントをキャンセル 返信先: .
ほとんどの優れたWordPressテーマでは、返信先のリンクをクリックすると、返信するコメントのすぐ下にコメントフォームが開き、コメント返信をキャンセルするリンクが表示されます。初期設定のCSS IDcancel-comment-reply を使って、コメント返信のキャンセルリンクを変更してみましょう。
[cbk10］
以下のようになります：
WordPressコメントフォームのスタイリング
使いやすく、美しい、スタイリッシュなコメントフォームは、ユーザーがあなたのブログにコメントを残すことを促します。以前、WordPressのコメントフォームをスタイリングする方法について詳しい記事を投稿しました。WordPressのコメントフォームをどのように次のレベルに引き上げることができるか、ぜひそちらをご覧ください。
この投稿がWordPressのコメントレイアウトをスタイリングするのに役立つことを願っています。何かご質問やご提案がありましたら、以下にコメントを残してお気軽にお知らせください。
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!
管理者
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.
管理者
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/
管理者
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.
管理者
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.
管理者
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.
管理者
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).
管理者
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.
管理者
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/
管理者
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:
.comment-list li{list-style:none;}1-click Use in WordPress
管理者
Alfrex says
Thank you. This post is extremely helpful.