【WordPress】 コメント欄のカスタマイズ(その1)

前回作成したアンテナサイトではコメント欄を簡素化しタレコミのツールとして使っています。
メールアドレスとURLは必要なく、名前と内容だけで気軽に書き込めるようにしています。
このカスタマイズについての記録です。

いつものように子テーマでの対応します。
まずは前半、コメント欄の見た目のカスタマイズです。

スポンサーリンク

1.やりたいこと

・名前とメールアドレスは必須ではない。
・メールアドレスとURLの欄を削除
・コメント欄周囲の説明文をアレンジor削除。
・送信ボタンのテキスト変更

20141111_comment_01b

2.名前とメールアドレスの必須を解除

これは簡単ですね。
ダッシュボードの「設定」「ディスカッション」のチェックボタンを外します。

20141111_comment_02b

これで必須を表す「※」と「※がついている欄は必須項目です。」が消えます。

3.テキスト変更と削除

次にテキスト類をカスタムします。
今回も子テーマのfunctions.phpを使います。

次のコードをfunctions.phpに追加します。

add_filter('comment_form_defaults','my_comment_form');
function my_comment_form($args){
	$args['comment_notes_before'] = '';
	$args['comment_notes_after'] = '';
	$args['title_reply'] = 'コメントする';
	$args['label_submit'] = 'コメント送信';
	return $args;
}

それぞれは以下のように対応しています。
もちろん消しているテキストも任意の文章を入れることが可能です。

20141111_comment_03b

するとこうなりました。

20141111_comment_04

4.メールとURLの欄を削除

メールアドレスとウェブサイトという欄を消してしまいます。

functions.phpに次のコードを追加します。

add_filter('comment_form_default_fields', 'my_comment_form_fields');
function my_comment_form_fields($fields) {
	$commenter = wp_get_current_commenter();
	$req = get_option('require_name_email');
	$aria_req = ($req ? " aria-required='true'" : '');
	$fields =  array(
		'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
		'email' => '',
		'url' => '',
	);
	return $fields;
}

欄を生成するための配列$fieldsの中身を削ることで欄を削除しています。

ちなみに削除する前の$fieldsは/wp-includes/comment-template.phpで指定されています。
必要ない欄を「”」で中身を空にしているだけです。
url欄だけいらないなどの場合はこれを使うと良いでしょう。

	$fields   =  array(
		'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
		            '<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">' . __( 'Email' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
		            '<input id="email" name="email" ' . ( $html5 ? 'type="email"' : 'type="text"' ) . ' value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
		'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label> ' .
		            '<input id="url" name="url" ' . ( $html5 ? 'type="url"' : 'type="text"' ) . ' value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
	);

さて話をすこし戻して、

	$commenter = wp_get_current_commenter();

ここはコメントする人の情報を呼び出しています。
コメントを投稿したことがある人は名前、メールアドレス、URLを取得してコメント欄に事前に書き込みます。

	$req = get_option('require_name_email');

これは「名前とメールアドレスは必須」と設定されているかを調べています。

	$aria_req = ($req ? " aria-required='true'" : '');

いつ見ても???となる構文ですが、$regが trueなら「aria-required=’true’」、falseなら””(空)にするという内容です。
分かりやすくすると「名前とメールアドレスは必須」ならメールアドレスの欄は「aria-required=’true’」、必須でなければaria-requiredを設定しないということです。

aria-requiredとは何者でしょうか?
これは高齢者や障害者でも不自由なく使えるようにするアクセシビリティーの機能で、この指定をすることで音声読み上げの際に「必須」が分かるようになるのだそうです。
このサイトでは設定を必須にする予定はないのですが、今後のために追加しておきました。

さてどうなったでしょうか。

20141111_comment_05

完成です。

5.comments.phpでもやってみる

functionos.phpではなく子テーマのcomments.phpでもやってみましょう。

comments.phpの最後の箇所を変更します。

20141111_comment_06b

以下のコードに書き換えます。

	<?php
	$comments_args = array(
		'fields' => array(
			'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . ( $req ? ' <span class="required">*</span>' : '' ) . '</label> ' .
		        	    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
			'email'  => '',
			'url'    => '',
		),
		'title_reply'          => 'コメントする',
		'comment_notes_before' => '',
		'comment_notes_after'  => '',
		'label_submit'         => 'コメント送信',
	);


	 comment_form($comments_args);
	?>

コメント欄を呼び出すcomment_form()に引数として変更したい内容を渡しています。
書き換えたcomments.phpは子テーマに入れます。

20141111_comment_07

はい、できました。
変更箇所を忘れてしまいそうですが、作業としてはこちらのほうが簡単ですね。

残りの課題

見た目は完成しましたが、実はまだ問題があります。

1つはコメントにhtmlタグが使えてしまうこと。
「使えます」というテキストを消しただけで機能としてはまだ使えます。
シンプルなコメント欄にしたいならhtmlタグは必要ないでしょう。

2つ目は「コメント欄に書かれたurlがリンクになってしまうこと。
スパムを考えるとありがたくない機能です。
これも必要ないでしょう。

次回はこの2つをまとめます。


スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA