WordPressのコメントを意のままにカスタマイズする方法

コメントのカスタマイズ
まとめ

コメントのカスタマイズ

コメントのカスタマイズは主に以下の4つのパターンに当てはまると思います。

不要な入力フォームの削除
入力フォームの順番並び替え
タイトル、placeholderの追加や、送信ボタンのラベル変更など
出力するコメント要素・レイアウトの変更

comment_form_default_fieldsを使って不要な入力フォームの削除

デフォルトのコメント入力フォームは、「本文」「名前」「メールアドレス」「ウェブサイト」「送信ボタン」の５つです。
「本文」と「送信ボタン」は必須として、他の3つはなくても問題ありません。
comment_form_default_fieldsフィルターを使って出力するフォームを空にします。

add_filter( "comment_form_default_fields", "comment_default_remove");
function comment_default_remove( $fields ){
	// 不要フォームの削除
    $fields['author']   = '';
    $fields['url']      = '';
    $fields['email']    = '';
}

フォームは空になりますが、管理画面の設定 > ディスカッション > コメントの投稿者の名前とメールアドレスの入力を必須にするのチェックを外さないと
必須入力漏れで送信ができなくなります。

入力フォームの順番を並び替える

テキストエリアを名前やメールアドレスの下にしたい場合はこのコードを使います。

add_filter( 'comment_form_fields', function shift_comment_form );
function shift_comment_form( $fields ) {
	//一度削除してから、セットすることで順番が最後になる
	$comment_field = $fields ['comment'];
	unset( $fields ['comment'] );
	$fields ['comment'] = $comment_field;
	return $fields;
}

ちなみに、WordPress4.4から、「本文」「名前」「メールアドレス」「ウェブサイト」の順になったそうです。

タイトル、placeholderの追加や、送信ボタンのラベルなどを変更する

タイトルや送信ボタンの文字、placeholderの追加などできます。
その他のパラメーターは以下のリンクを参照してください。
http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/comment_form

add_filter( 'comment_form_defaults', array( $this, 'custom_comment_form') );
function custom_comment_form( $args ) {
	//文言修正
	$args = array (
        'title_reply'           => '<p class="commentTit">この記事に関するコメント</p>',
        'label_submit'          => '送信する',
        'comment_notes_before'	=> '',
		'comment_field' 		=> '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required" placeholder="ここにコメントを入力してください"></textarea></p>',
	);
	return $args;
}

出力するコメント要素・レイアウトの変更

wp_list_comments_argsをフックすることでテーマのwp_list_commentsにコールバックを追加することなく、functions.phpで完結させています。コメント出力リストを自由に変更することができます。

add_action( 'wp_list_comments_args', array( $this, 'comment_custom_display' ) );
function comment_custom_display( $r ) {
	$args  = array(
		'callback'	=> array( $this, 'custom_comment' ),
	);
	$r = wp_parse_args( $args, $r );
	return $r;
}
function custom_comment_display($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment; ?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
	<div id="comment-<?php comment_ID(); ?>">
		<div class="comment-author vcard">
			<?php echo get_avatar( $comment, 38 ); ?>
		</div>
		<div class="comment-txt">
			<?php comment_text(); ?>
		</div>
		<div class="comment-meta">
			<span><?php comment_author_link(); ?></span><span>投稿日：<?php comment_date('Y/m/d(D)') ?></span>
		</div>
	</div>
<?php
}

まとめ

今回全ての修正にフィルターフックを使いました。
フィルターフックを使うことで既存のテンプレートを修正することなくfunctions.phpで完結できるので、テーマの管理がしやすくなります。
コメントに関するその他のフィルターフックはcomment-template.phpを読むとすぐに見つけることができるので、もし紹介した以外のカスタムをしたい場合は目当てのフックを探してみてください。
https://core.trac.wordpress.org/browser/tags/4.7.2/src/wp-includes/comment-template.php

企業などのサイトではコメントを設けることは少ないですが、口コミサイトやECサイトなどでは必須のコメント機能。
コメントのデザイン、機能を思い通りにカスタムし、使いやすいコメントフォームを作ってみてください。