【WordPress】Cocoonのコメント欄をカスタムする

ブログを書いていく上でコメントというのはモチベの一つになると思います。

コメントがあるということは見てもらえているという何よりの証拠ですからね。

ですが、デフォルトのコメント欄だとメアドの入力が必要だったりして、コメントがつきにくいのです。
^{(“そもそもPV数的にコメント少ないだろ”とか言う正論やめてください)}

方法を一通りまとめたので、コメントを増やしたいと思っている方は是非試してみてください◎

完成形

まずは完成形です。
今回紹介する方法を全て取り入れるとこんな感じになります。

ポイントは以下の５つです。

ここからそれぞれのカスタム方法を解説していきます。

カスタマイズ方法

１．メール・URLの入力欄を非表示に

やることはとっても簡単で、追加CSSまたはstyle.cssに以下の3行をコピペして追加するだけです。

.comment-form-email, .comment-form-url, .comment-notes {
  display: none;
}

2秒で解説すると、以下の3つをdisplay: noneで非表示にしているだけです。あら簡単。

• .comment-form-email(=メアドの入力欄)
• .comment-form-url(=URLの入力欄)
• .comment-notes(=注意書き(メールアドレスは公開されません的な奴))

２．デフォルト名でのコメントを可能に

これは２つ手を加えます。
①投稿者名が未入力時にデフォルト名を設定する
②投稿者名の欄にデフォルト名を表示しておく

動作としては①だけで動くのですが、実際にコメントを書く側の立場になって考えてみると。。。

そうなんです、投稿者名の欄が空欄だと、未入力で大丈夫かどうかなんて分かるはずがないのです。

ということで②でデフォルト名を表示しておいた方が良いと思うのです。

①投稿者名が未入力→”名無しさん”で投稿

やることが分かれば後は簡単です。
functions.phpに以下をコピペするだけの簡単なお仕事なのです。

// ----------------------------------------------------------------------------
// コメント欄の名前が未入力の場合の投稿者名
// ----------------------------------------------------------------------------
function default_author_name($author, $comment_ID, $comment) {
  if ($author == __('Anonymous')) {
    $author = '名無しさん';
  }

  return $author;
}
add_filter('get_comment_author', 'default_author_name', 10, 3);

投稿者名の欄が未入力の場合に”名無しさん”と設定するフィルターを追加しています。
“名無しさん”の部分はお好きな名前に書き替えてもらって大丈夫です◎

②投稿者名の欄にデフォルト名を表示

先ほどと同じく、functions.phpに以下をコピペするだけです。

function customize_comment_form_fields($arg) {
  $arg['author'] = '<p class="comment-form-author">' .
  '<label for="author">' . __('', 'domainreference') . '</label> ' .
  ( $req ? '<span class="required">*</span>' : '' ) .
  '<input id="author" name="author" placeholder="名無しさん" type="text" value="' .
  esc_attr($commenter['comment_author']) . '" size="30"' . $aria_req . ' /></p>';
  return $arg;
}
add_filter('comment_form_default_fields', 'customize_comment_form_fields');

やってることとしては、コメントフォームの”author”つまり投稿者名の欄を書き換えています。

placeholder="名無しさん"と設定することで、投稿者名の欄に最初から”名無しさん”が入力された状態でコメントフォームを表示することができます。

３．入力フォームの順番

個人的に、入力フォームは
「コメント」→「名前」
ではなく
「名前」→「コメント」
が好きなので順番を変えました。

例によってfunction.phpに以下をコピペするだけです。

// ----------------------------------------------------------------------------
// コメント欄の入力項目の順をコメント→名前から名前→コメントに変更
// ----------------------------------------------------------------------------
function move_comment_field($fields) {
  $comment_field = $fields['comment'];
  unset($fields['comment']);
  $fields['comment'] = $comment_field;

  return $fields;
}
add_filter('comment_form_fields', 'move_comment_field');

コメントが後ろに来るように、一回取り出してから末尾に付け直しているだけです。

４．送信ボタンを分かりやすく

これは一部のCocoonスキンでのみ発生するのですが、淡色系のテーマだと送信ボタンの文字(デフォルト白色)がクッソ見にくいです。

この事象が起きてしまった場合は以下を追加CSS or style.cssに記載してください。

/* コメント送信ボタンの文字色・背景色が見えにくいので修正 */
.comment-form .form-submit input {
  background-color: #edfaff;
  border-color: #72c7e6;
  border: 1px solid #ddd;
  color: #333;
}

上記の場合、私が使用しているスキンに合わせた水色系のボタンが完成します。

色は、ご使用のスキンに合わせて適宜#~の部分を変更して設定してください。

５．コメント欄全体のデザインをカッコ良くする

自分のデザインセンスが皆無なことは良く分かっているので人様のサイトをリスペクト(パクリ)して作成しました。
https://web-ashibi.net/archives/2715

CSSを公開＆解説もつけてくれている神サイトなので、上記を参考に作ると間違いないです。
色とか文字サイズを自分好みにするだけで簡単にオシャンティーなコメント欄が完成します。

参考

名無しさんの実現方法
http://ugokay01.wpblog.jp/comment-form-default-author-name/

かっこいいコメント欄のCSS
https://web-ashibi.net/archives/2715