memocarilog

ずいぶん以前に「コメントフォームの表示のカスタマイズ 」という記事を書きましたが、label や input 要素の部分のカスタマイズ方法は書いていなかったので、その部分をまとめてみました。

コメントの送信フォームを表示するには comment_form() タグを使用します。このタグをテンプレートファイルへ記入するだけでデフォルトのコメントフォームが表示されます。

デフォルトの表示

デフォルトの表示は、多少スタイルをCSSで整えてはいますが以下の画像のようになっています。

デフォルトのコードや、comment_form() タグに渡せるパラメータ等は以前の記事や codexをご参照頂ければと思います。

名前/メールアドレス/ウェブサイトフィールドのカスタマイズ

名前、メールアドレス、ウェブサイトのフィールドの表示は、comment_form() タグに引数 ‘fields’ に値を渡すことで変更できます。

名前は ‘author’ に、メールアドレスは ’email’ に、ウェブサイトは ‘url’ に表示したい形を指定し、それらを配列にまとめて変数 $fileds に入れることになりますが、配列の変数を作る前に以下のように、 $aria_req （必須項目を判定する変数）に true をいれ、wp_get_current_commenter() で現在の投稿者の名前、メールアドレスなどを取得しておきます。

$commenter = wp_get_current_commenter();
$aria_req = true;

次に配列の変数 $fileds を作ります。

例として名前の表示を「お名前」、メールアドレスの表示を「Eメール」、ウェブサイトの表示を「ホームページ」にし、ラベルの後に改行を入れるというカスタマイズにするとします。

以下のように、’author’、’email’、’url’ それぞれに表示内容を記述します。それを配列にし、$fileds にいれます。

$fileds = array(
	'author' =>
		'<p class="comment-form-author">' .
		'<label for="author">お名前</label> ' .
		( $req ? '<span class="required">*</span>' : '' ) .'<br />'.
		'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
		'" size="30"' . $aria_req . ' /></p>',
				
	'email' =>
		'<p class="comment-form-email"><label for="email">Eメール</label> ' .
		( $req ? '<span class="required">*</span>' : '' ) .'<br />'.
		'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
		'" size="30"' . $aria_req . ' /></p>',
				
	'url' =>
		'<p class="comment-form-url"><label for="url">ホームページ</label>' .'<br />'.
		'<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
		'" size="30" /></p>'
		);

先の項目の $commenter / $aria_req と合わせて comment_form( ) の記述よりも前にこれを書いておきます。そして、comment_form() のパラメータ ‘fields’ にフィルターを通した $fileds を渡します。

<?php comment_form(	array( 
	'fields' => apply_filters( 'comment_form_default_fields', $fileds ) 
) ); ?>

名前/メールアドレス/ウェブサイトのカスタマイズをまとめたコード

ここまでをまとめて書くと以下のようになります。これをテンプレートファイルへ記入します。

<?php 
	$commenter = wp_get_current_commenter();
	$aria_req = true;

	$fileds = array(
		'author' =>
		'<p class="comment-form-author">' .
		'<label for="author">お名前</label> ' .
		( $req ? '<span class="required">*</span>' : '' ) .'<br />'.
		'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
		'" size="30"' . $aria_req . ' /></p>',
				
		'email' =>
			'<p class="comment-form-email"><label for="email">Eメール</label> ' .
			( $req ? '<span class="required">*</span>' : '' ) .'<br />'.
			'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
			'" size="30"' . $aria_req . ' /></p>',
				
		'url' =>
		      '<p class="comment-form-url"><label for="url">ホームページ</label>' .'<br />'.
		      '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
		      '" size="30" /></p>'
	);

	comment_form( array( 
		'fields' => apply_filters( 'comment_form_default_fields', $fileds )
	) );
?>

これで3つのフィールドの変更ができました。

コメントテキストエリアのカスタマイズ

コメント本文を入れるテキストエリアとラベルの表示の変更は引数 ‘comment_field’ に値を設定します。
コメントの文字を「メッセージ」に変更し textarea の rows を8にするには以下のように記入します。

<?php comment_form(	array(
	'comment_field' => '<p class="comment-form-comment"><label for="comment">メッセージ</label><br /><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>'
)	);		
?>

↓変更後

コメントフォームをデフォルトで表示するは簡単ですが label や input 要素 をカスタマイズするのは少しややこしいですね。