WordPressのコメント欄て、デフォルトではなんだかそっけなくて、関連記事に行くまでに邪魔だな～とすら思ったりします。
せっかくなので、少しカスタマイズしたいなと思って調べてみたら意外と難しかったので、理想通りではないのですが、私の力量ですぐ出来ることだけやってみました。
あんまり悩んで時間をかけても、仕方がないと思うので…。
テーマは「Affinger4」で表示を確認しています。
WordPressにログインしているとコメント欄の「名前」「メールアドレス」などのラベルが出てこないので、テスト環境がなく本番を直接カスタマイズする場合は、別のブラウザで反映を確認しながらやると良いと思います。
「メールアドレスが公開されることはありません」の文言を変更する
私は名前とメールアドレスの入力を必須に設定しているので、デフォルトでは「メールアドレスが公開されることはありません。 * が付いている欄は必須項目です」と書いてあります。
これだけではコメントしづらいよな～と思ったり、時々、コメントにフルネーム書いて来られる方がいるので、ちょっとした注意事項を追加したいと思います。
子テーマの「function.php」に追記する
素人はできるだけ触りたくないですが、「function.php」に追記します。
必ず子テーマで、変更前はバックアップを取ってからやりましょう。
私もついさっき、しくじって一瞬ブログが真っ白になりましたので、くれぐれもご注意ください。
慌ててFTPソフトで、子テーマの「function.php」の中身を修正して元に戻しました。
「function.php」に追記する内容はこんな感じです。
文言はお好みで変更してくださいませ。
// コメント欄の文言を変更
add_filter('comment_form_defaults', 'change_comment_email_notes');
function change_comment_email_notes( $defaults ) {
$defaults['comment_notes_before'] = 'コメントは確認後に反映されます。
お名前はニックネームでどうぞ。
メールアドレスは必須ですが、公開されません。
';
return $defaults;
}
反映すると、こんな風に文言が変わります。
本当は、「名前 *」の箇所を「名前 *（ニックネームでどうぞ）」みたいな感じにしたかったのですが、なんか難しそうなので、ひとまずこれで良いことにします…。
LINKWordPress：コメントフォームをカスタマイズする方法 | NxWorld
コメント欄の見た目を変更する
見た目がちょっと、あまりにもそっけないので、少しだけ色を変えたり、主に色を変えるカスタマイズしたいと思います。
ここから下は、「style.css」に書き足していきます。
子テーマをお使いの方は子テーマの「style.css」に追記すれば反映されます。
「ウェブサイト」入力欄を非表示にする
こんな欄があったのか、と思うほど要らない項目のような気がするので、非表示にします。
この項目自体を表示させない方法もあるようですが、取り急ぎ簡単な方法で、「style.css」で非表示にしたいと思います。
/* コメント欄のURLを非表示 */
.comment-form-url {display: none;}
「comment」に見出しと入力欄の装飾
まずは「comment」の箇所に、見出しなのに見出しらしさ（？）が全く無いので、せめて色味を追加してみます。
/* コメント欄の見出し */
.post #comments h3 {
background-color: #FF7A7A;
color: #fff;/* 文字の色 */
border-radius: 5px;/* 四隅の丸み */
-webkit-border-radius: 5px;/* 四隅の丸みと同じ数字に */
-moz-border-radius: 5px;/* 四隅の丸みと同じ数字に */
position: relative;
margin-bottom: 0 0 1.5em;
padding: 0.2em 0.5em;
}
見出しを作る時、いつもゆいくりさんのページにお世話になっております。
LINK女子におすすめ！コピペだけでかわいい見出しになるCSS10選 | はぴまむ
コメントの入力枠も、デフォルトではうっすいグレーでよく見えないので、色を付けてみます。
/* コメントエリアの枠 */
#comments textarea {
margin-bottom: 5px;
width: 100%;
border: 1px #FF7A7A solid;
}
#comments input {
box-sizing: border-box;
padding: 10px;
width: 100%;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border: 1px #FF7A7A solid;
margin-bottom: 5px;
}
すると、なんだか「コメント」「名前」などの文字が目立たなくなったので、FontAwesomeのアイコンを前に入れてみました。
/* コメントのラベル部分 */
#comments label:before {
content: "\f040";
font-family: FontAwesome;
}
「before」を使う場合は、アイコンはそのままでは入れられない（らしい）ので、下記ページの方法で割り当てられている「content」の値を調べる必要があります。
LINKfontawesomeのアイコンをcssの:before/:afterで挿入する - Qiita
Affinger4の場合は、「/wp-content/themes/affinger4/css/fontawesome/css/font-awesome.min.css」を開いて、アイコン名（「fa-check-square」など）で検索すれば良さそうです。
ついでに、「コメントを送る」ボタンの色も変えてみました。
/* コメントを送るボタン */
#comments input[type="submit"] {
background-color: #995151;
color: #fff;
padding: 10px;
-webkit-appearance: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
カスタマイズ前、カスタマイズ後の比較
カスタマイズ前。
カスタマイズ後。
少しは可愛らしくなったのではないかと…！
ボタンの色はちょっと、もう少し考えます。
…でも、普通は「名前」「メールアドレス」「コメント本文」の順番じゃないかしら？
なんで本文が一番上なんだろう…？
と思ったけど、見なかったことにしますｗｗ
コメント欄全体に背景色を付ける
コメントの入力欄のところばっかり見ていたのですが、よく見たらコメントをもらった後のデザインも、相当そっけない！
気付いてしまったので何かしたいですが、本格的にデザインを変えたいならプラグインを使ったほうが早そうです。
取り急ぎ、背景カラーを付けてみました。
サンプルはこの記事の下の、コメント欄をご参照くださいませ！
/* コメント全体の背景色 */
#comments {
background: #ffffcc;
}