WordPress:コメントフォームをカスタマイズする方法

  • Posted on
  • Category : WordPress
WordPress:コメントフォームをカスタマイズする方法

このブログでもコメント部分はプラグインを使用していたりと、WordPressのコメントフォームを触ったことがあまりないなとふと思って改めて見直したり試したりしたので、その時の備忘録も兼ねてコメントフォームを自分好みにカスタマイズする方法などを紹介します。カスタマイズといってもガッツリいじる感じとか難しいようなものではなく、文言やマークアップを少し変更するなど、デフォルトにちょっとだけ手を加えるような簡易的なものです。

最近だとJetpackやDisqusなどの手軽に実装できる便利なプラグインが沢山あることもあって、そういったものを取り入れているブログも多く見かけますが、以下はデフォルトのコメントフォームの使用方法やちょっとしたカスタマイズ方法になります。
ソーシャルアカウントと連携させたいとかになるとやはりプラグインを使った方が手っ取り早く実装できますが、デフォルトの機能で十分ということであればマークアップや文言の変更などは容易にできますし、あとはCSSでスタイルを調整してあげれば簡単に自分好みの見栄えに変更することができます。

一応以下で書いているソースなどは実際に自分で使って動作や表示に問題ないかなどの確認をもちろんした上でまとめてはいますが、ちょっと不安な部分とかもあったりするので、もっとスマートにできるとか認識が間違ってる部分とかあったら是非教えてください。

WordPress:コメントフォームをカスタマイズする方法 目次

  1. 各種設定
  2. コメントフォームを出力する
  3. 必要ない項目をCSSで非表示にする
  4. コメントフォームの表示をカスタマイズする #1
    1. サンプルソース
  5. コメントフォームの表示をカスタマイズする #2
    1. サンプルソース
  6. コメントフォームに項目を追加する
  7. コメントのオートリンク機能を無効化にする
  8. コメントのリンクにtarget=”_blank”を付加する
  9. コメントで使用できるタグや属性の追加・無効化する
    1. 使用できるタグを追加
    2. 使用できるタグと属性を追加
    3. デフォルトで使用できるタグを無効化する
  10. 固定ページでコメントを非表示にする

1. 各種設定

いきなりカスタマイズ関係ないじゃんって感じですが…。
「名前とメールアドレスの入力を必須にする」や「ユーザー登録してログインしたユーザーのみコメントをつけられるようにする」など、コメントに関しての設定をしたい場合は「設定 > ディスカッション」で変更することができます。

各種設定

例えば、デフォルトだと名前とメールアドレスは入力必須項目になっているために空欄だとコメントを送信することができませんが、コメントを気軽にしてもらうなどの理由で入力必須にする必要がないのであれば「他のコメント設定 > 名前とメールアドレスの入力を必須にする」についているチェックを外せば入力必須を解除することができます。

逆にもっとコメントできる対象を絞りたいとかであれば、同じく「他のコメント設定」部分にある「ユーザー登録してログインしたユーザーのみコメントをつけられるようにする」にチェックを入れてあげれば、コメント部分に「コメントを投稿するにはログインしてください。」という文言が表示され、誰でもコメントができないように設定することができます。

他にもいろいろと設定できることはあり、○日以上前の投稿のコメントフォームを自動的に閉じる・コメントのスレッド設定・コメントが投稿された時のメール通知の有無・コメント表示の管理者承認の有無・アバター表示の有無などといったことも指定ができます。

目次へ

2. コメントフォームを出力する

単純にコメントフォームを出力したい場合は、表示したい箇所に以下を記述することで簡単にコメントフォームを表示することができます。
Twenty Thirteenなどのテーマをそのまま使用している場合などは、テーマ内のcomments.phpの下の方に記述があるのが確認できると思います。

<?php comment_form(); ?>
コメントフォームを出力する

画像はTwenty Thirteenのコメントフォームのキャプチャしたところで、<?php comment_form(); ?>を記述するとこのようなコメントフォームが表示されます。

フォームはデフォルトだと以下の様なソースで出力されるので、必須項目マークの色を変更したいとかボタンの大きさを変更したいぐらいであれば、これらのIDやクラスを用いてCSSで簡単にスタイル調整ができます。

<div id="respond" class="comment-respond">
	<h3 id="reply-title" class="comment-reply-title">コメントを残す <small><a rel="nofollow" id="cancel-comment-reply-link" href="/?p=1#respond" style="display:none;">コメントをキャンセル</a></small></h3>
	<form action="http://example.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate>
		<p class="comment-notes">メールアドレスが公開されることはありません。 <span class="required">*</span> が付いている欄は必須項目です</p>
		<p class="comment-form-author">
			<label for="author">名前 <span class="required">*</span></label>
			<input id="author" name="author" type="text" value="" size="30" aria-required='true' />
		</p>
		<p class="comment-form-email">
			<label for="email">メールアドレス <span class="required">*</span></label>
			<input id="email" name="email" type="email" value="" size="30" aria-required='true' />
		</p>
		<p class="comment-form-url">
			<label for="url">ウェブサイト</label>
			<input id="url" name="url" type="url" value="" size="30" />
		</p>
		<p class="comment-form-comment">
			<label for="comment">コメント</label>
			<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>
		</p>
		<p class="form-allowed-tags">
			次の<abbr title="HyperText Markup Language">HTML</abbr> タグと属性が使えます:  <code>&lt;a href=&quot;&quot; title=&quot;&quot;&gt; &lt;abbr title=&quot;&quot;&gt; &lt;acronym title=&quot;&quot;&gt; &lt;b&gt; &lt;div cite=&quot;&quot;&gt; &lt;cite&gt; &lt;code&gt; &lt;del datetime=&quot;&quot;&gt; &lt;em&gt; &lt;i&gt; &lt;q cite=&quot;&quot;&gt; &lt;strike&gt; &lt;strong&gt; </code>
		</p>
		<p class="form-submit">
			<input name="submit" type="submit" id="submit" value="コメントを送信" />
			<input type='hidden' name='comment_post_ID' value='1' id='comment_post_ID' />
			<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
		</p>
	</form>
</div><!-- #respond -->

※見易いように改行していおり、赤字はIDやクラス名部分です。

目次へ

3. 必要ない項目をCSSで非表示にする

本当は後述する方法で行った方がソース上からも消えますしもちろん良いんですが、あまりPHPは触りたくないとか手っ取り早く必要ない部分を消したいという場合はCSSだけでも一応対応はできます。
例えばサイトの種類によっては必要ないという声をよく聞く「ウェブサイト」の入力項目と「次のHTMLタグと属性が使えます: ~ …」の2つを消したいという場合は、CSSに以下を追記することで非表示にできます。

CSS

.comment-form-url,
.form-allowed-tags {
	display: none;
}
必要ない項目をCSSで非表示にする

画像は上記CSSを記述後に表示確認をしたところで、このように「ウェブサイト」の入力項目(.comment-form-url)と「次のHTMLタグと属性が使えます: ~ …」(.form-allowed-tags)の2つを非表示にすることができます。

目次へ

4. コメントフォームの表示をカスタマイズする #1

<?php comment_form( $args, $post_id ); ?>

冒頭で紹介したものは省略していますがcomment_formには上記のように引数を使用でき、$argsを使うことでマークアップや文言などいろいろと表示を自分好みに変更することができます。
デフォルトでは以下のようになっています。
(下記はWordPress 3.7のwp-includes/comment-template.phpから抜粋しているもので、現段階でCodexに掲載されているものとは一部内容が違う箇所があります)

<?php $defaults = array(
	'fields'               => apply_filters( 'comment_form_default_fields', $fields ),
	'comment_field'        => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
	'must_log_in'          => '<p class="must-log-in">' .  sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
	'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
	'comment_notes_before' => '<p class="comment-notes">' . __( 'Your email address will not be published.' ) . ( $req ? $required_text : '' ) . '</p>',
	'comment_notes_after'  => '<p class="form-allowed-tags">' . sprintf( __( 'You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>',
	'id_form'              => 'commentform',
	'id_submit'            => 'submit',
	'title_reply'          => __( 'Leave a Reply' ),
	'title_reply_to'       => __( 'Leave a Reply to %s' ),
	'cancel_reply_link'    => __( 'Cancel reply' ),
	'label_submit'         => __( 'Post Comment' ),
	'format'               => 'xhtml',
);
?>

それぞれどのようなものを表示するためのものなのかはCodexでも確認はできますが、翻訳されているものではないので簡単に説明を残しておきます。
(下記の中にはWordPress 3.7のwp-includes/comment-template.phpから抜粋しているものもあるので、Codexに掲載されている情報と一部異なる記述もあります)

‘fields’
名前(author)・メールアドレス(email)・ウェブサイト(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>',
);

例えばよく使いそうなものだと、名前とメールアドレスは必要だけどウェブサイトの項目は必要ないという場合があります。
その際は下記のように'url'を空にするように記述します。
記述後に表示を確認すると、コメントフォームからウェブサイトの入力項目が消えているのを確認できます。

<?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'  => '<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'    => '',
	),
);

comment_form($comments_args);
?>
‘comment_field’
コメント入力部分のlabeltextareaをいじりたい時に使用します。
‘must_log_in’
「設定 > ディスカッション > 他のコメント設定 > ユーザー登録してログインしたユーザーのみコメントをつけられるようにする」にチェックを入れていて、ログインしていないユーザーが閲覧した場合に表示される部分です。
デフォルトでは「コメントを投稿するにはログインしてください。」という文言が表示されます。
‘logged_in_as’
ログインしているユーザー名などを表示する部分です。
adminというユーザー名でログインしている場合、デフォルトでは「admin としてログインしています。ログアウトしますか ?」という文言が表示されます。
‘comment_notes_before’
フォーム前に表示する部分で、デフォルトだと「メールアドレスが公開されることはありません。 * が付いている欄は必須項目です」という文言が表示されます。
‘comment_notes_after’
フォーム後に表示する部分で、デフォルトだと「次のHTMLタグと属性が使えます: ~ …」という文言が表示されます。
‘id_form’
デフォルトだとformにはid="commentform"が指定されていますが、これを任意のものへ変更できます。
‘id_submit’
「コメントを送信」ボタンはデフォルトだとinput type="submit"id="submit"が指定されていますが、これを任意のものへ変更できます。
‘title_reply’
コメントフォームのタイトル部分で、デフォルトだと「コメントを残す」という文言が表示されます。
‘title_reply_to’
返信する際のタイトル部分で、例えばadminというユーザーに返信をする場合、デフォルトだと「admin にコメントする」という文言が表示されます。
(これはJavaScriptが無効になっている時に表示されるもので、有効時には'title_reply'で設定されている文言が表示されます)
‘cancel_reply_link’
コメントキャンセル時の文言に使用する部分で、デフォルトだと「コメントをキャンセル」という文言が表示されます。
ただTwenty Thirteenyではこの部分にアイコンフォントが使用されているので、ここで変更してもパッと見は変わりません。
‘label_submit’
コメント送信ボタンの部分で、デフォルトだと「コメントを送信」という文言が表示されます。
‘format’
さらっとしか見てませんがCodexのcomment formにも特に説明などもないし、あまり調べたりもしていないので正直よくわかってないんですが、おそらく3.6から導入されたセマンティックマークアップに関連するものなのかなと思います…。
詳しくわかる方は是非教えてください X(

更に詳しく知りたい場合はCodexなど参照してください。

コメントフォームの表示をカスタマイズする #1 サンプルソース

上記を踏まえて実際によく使われそうな記述をしてみます。
今回はそれぞれ下記を適応させてみます。

  • 「コメントを残す」 → 「コメントはお気軽にどうぞ」に変更
  • 「メールアドレスが公開されることはありません。 * が付いている欄は必須項目です」 → 「メールアドレスは公開されませんのでご安心ください。(ここに改行)また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。」
  • 「ウェブサイト」の項目を削除
  • 「次のHTMLタグと属性が使えます: ~ …」 → 「内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。」に変更
  • 「コメントを送信」 → 「コメントを送信する」に変更

上記を適応させるための実際のソースと見栄えはそれぞれ以下のようになります。

<?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'  => '<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'    => '',
	),
	'title_reply'          => 'コメントはお気軽にどうぞ',
	'comment_notes_before' => '<p class="comment-notes">メールアドレスは公開されませんのでご安心ください。<br />また、<span class="required">*</span> が付いている欄は必須項目となりますので、必ずご記入をお願いします。</p>',
	'comment_notes_after'  => '<p class="form-allowed-tags">内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。</p>',
	'label_submit'         => 'コメントを送信する',
);

comment_form($comments_args);
?>
コメントフォームの表示をカスタマイズする

目次へ

5. コメントフォームの表示をカスタマイズする #2

同じくコメントフォームの表示をカスタマイズする方法なんですが、こちらはfunctions.phpを使って行う方法です。
例えばウェブサイトの項目削除・「次のHTMLタグと属性が使えます: ~ …」の文言変更・送信ボタンの文言変更という3つを行いたい場合、functions.phpに以下のように記述します。
functions.phpがテーマ内にない場合は作成してください。

functions.php

add_filter('comment_form_default_fields', 'custom_comment_form_fields');

function custom_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' => '<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' => '',
	);
	return $fields;
}

add_filter('comment_form_defaults', 'custom_comment_form');

function custom_comment_form($args) {
	$args['comment_notes_after'] = '<p class="form-allowed-tags">内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。</p>';
	$args['label_submit'] = 'コメントを送信する';
	return $args;
}

上記のように記述することで、functions.phpを使っても先ほどのようにコメントフォームの自分好みにいろいろと変更することができ、ここでは載せていませんが'comment_field'とか'title_reply'など他の部分ももちろん変更できます。

コメントフォームの表示をカスタマイズする #2 サンプルソース

上記を踏まえて、先ほどのサンプルと同様で実際によく使われそうな記述をしてみます。
適応させたい内容は先ほどの方法と同じく以下になります。

  • 「コメントを残す」 → 「コメントはお気軽にどうぞ」に変更
  • 「メールアドレスが公開されることはありません。 * が付いている欄は必須項目です」 → 「メールアドレスは公開されませんのでご安心ください。(ここに改行)また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。」
  • 「ウェブサイト」の項目を削除
  • 「次のHTMLタグと属性が使えます: ~ …」 → 「内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。」に変更
  • 「コメントを送信」 → 「コメントを送信する」に変更

上記を適応させるための実際のソースは以下のようになります。
(見栄えは先ほどのものと変わらないので省きます)

functions.php

add_filter('comment_form_default_fields', 'remove_comment_url_fields');

function remove_comment_url_fields($fields) {
	unset($fields['url']);
	return $fields;
}

add_filter('comment_form_defaults', 'custom_comment_form');

function custom_comment_form($args) {
	$args['title_reply'] = 'コメントはお気軽にどうぞ';
	$args['comment_notes_before'] = '<p class="comment-notes">メールアドレスは公開されませんのでご安心ください。<br />また、<span class="required">*</span> が付いている欄は必須項目となりますので、必ずご記入をお願いします。</p>';
	$args['comment_notes_after'] = '<p class="form-allowed-tags">内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。</p>';
	$args['label_submit'] = 'コメントを送信する';
	return $args;
}

ソースを見て気付いた方もいるかと思いますが、実は「ウェブサイト」の項目を削除する箇所の記述が先ほど紹介した方法とは違うものになっています。
今回のサンプルのように「名前」と「メールアドレス」の項目はそのままで「ウェブサイト」だけ削除にしたいという場合、このような短い記述でも削除することができます。

目次へ

6. コメントフォームに項目を追加する

管理画面上で確認できるようにとかもできるんですが、今回は簡易的に入力欄を設けて、そこに入力されたものをコメント一覧に表示するという単純なものになります。
今回はサンプルとして「好きな食べもの」を入力する項目を作成し、入力内容を出力する方法です。
以下をfunctions.phpに記述します。

functions.php

function add_comment_fields($fields) {
	$fields['food'] = '<p class="comment-form-food"><label for="food">' . __( '好きな食べもの' ) . '</label>' .
	                  '<input id="food" name="food" type="text" size="30" /></p>';
	return $fields;
}
add_filter('comment_form_default_fields', 'add_comment_fields');

function add_comment_meta_values($comment_id) {
	if(isset($_POST['food'])) {
		$food = wp_filter_nohtml_kses($_POST['food']);
		add_comment_meta($comment_id, 'food', $food, false);
	}
}
add_action ('comment_post', 'add_comment_meta_values', 1);

ソース上の赤字部分は任意で変更をしてください。(今回は「好きな食べもの」なので「food」を使用しています。)
次に入力された内容を表示したい箇所に以下を記述します。

<?php echo "好きな食べもの: ".get_comment_meta( $comment->comment_ID, 'food', true ); ?>

上記で項目追加を実装できるので、あとはCSSで見栄えを調整したりしてください。
Twenty Thirteenを使用している場合は、CSSのclass="comment-form-authorclass="comment-form-emailの部分に追加した項目部分に使用しているクラスなどを追記してあげれば、他の項目と見栄えを簡単に併せることができます。

先述したように管理画面で確認をしたいとかその内容を何かに用いたい場合などではなく、とりあえず簡易的に入力欄を設けて出力するだけで良いのであれば上記で実装できます。

目次へ

7. コメントのオートリンク機能を無効化にする

WordPressのコメント部分はURLを貼ると自動的にリンクに変換されるんですが、これを無効化する方法です。
以下をfunctions.phpに記述します。

functions.php

remove_filter('comment_text', 'make_clickable', 9);

例えばコメント欄に「http://example.com」と記述すると、通常は<a href="http://example.com">http://example.com</a>のように自動的にリンク設定がされて表示されるのですが、上記を記述すると http://example.com という感じでただの文字列として表示されるようになります。

ただ、これを記述しただけだと<a href="">を使用して書かれた場合は結局リンクが有効化されてしまうので、後述する「9-3. デフォルトで使用できるタグを無効化する」と併せて使用することで完全にリンクを無効化できます。

目次へ

8. コメントのリンクにtarget=”_blank”を付加する

先程はリンクを無効化する方法でしたが、こちらはリンクを有効化している際に使えるスニペットです。
コメント欄にURLを記述してリンクとして表示された際、そのリンクにtarget=_blank"を付加してくれます。
以下をfunctions.phpに記述します。

functions.php

function autoblank($text) {
	$return = str_replace('<a', '<a target="_blank"', $text);
	return $return;
}
add_filter('comment_text', 'autoblank');

目次へ

9. コメントで使用できるタグや属性の追加・無効化する

コメント(textareaの部分)下に書いてありますが、コメント部分はデフォルトで以下のタグや属性が使用できます。

  • <a href=”” title=””>
  • <abbr title=””>
  • <acronym title=””>
  • <b>
  • <div cite=””>
  • <cite>
  • <code>
  • <del datetime=””>
  • <em>
  • <i>
  • <q cite=””>
  • <strike>
  • <strong>

これらのタグや属性を使用できないように無効化させたり、逆にデフォルトでは使用できないタグを使えるようにするというのをfunctions.phpを使って実装します。

9-1. 使用できるタグを追加

今回はサンプルとして、デフォルトでは使用できない<pre>を使用できるようにします。
以下をfunctions.phpに記述することで、コメントで<pre>が使用できるようになり、「次のHTMLタグと属性が使えます: ~ …」 の部分にも<pre>が追加されます。

functions.php

add_filter('comments_open', 'custom_comment_tags');
add_filter('pre_comment_approved', 'custom_comment_tags');

function custom_comment_tags($data) {
	global $allowedtags;
	$allowedtags['pre'] = array();
	return $data;
}

※赤字部分に追加したいHTMLタグを記述します

9-2. 使用できるタグと属性を追加

上記方法では<pre>を使用できるようにするだけでしたが、以下の方法で更に属性も追加することができます。
今回はサンプルとして同じく<pre>を追加しつつ、class=""の属性も使用できるようにします。
以下をfunctions.phpに記述することで、先程と同様でコメントで<pre>が使用できるようになり、「次のHTMLタグと属性が使えます: ~ …」 の部分にも<pre>が追加されますが、今回は属性も追加しているので<pre class="">という感じで追記されます。

functions.php

add_filter('comments_open', 'custom_comment_tags');
add_filter('pre_comment_approved', 'custom_comment_tags');

function custom_comment_tags($data) {
	global $allowedtags;
	$allowedtags['pre'] = array('class'=>array());
	return $data;
}

※赤字部分に追加したいHTMLタグと属性をそれぞれ記述します

9-3. デフォルトで使用できるタグを無効化する

先述したようにデフォルトのコメントでは全部で<a href="" title=""><strong>など13種類のタグが使用できますが、何らかの理由で特定のタグは使用してほしくない場合はfunctions.phpunset($allowedtags['ここにタグ']);のように記述すると、そのタグを無効化することができます。
サンプルとして以下はデフォルトで使用できるとなっている全てのタグを無効化にしたものです。

functions.php

add_filter('comments_open', 'custom_comment_tags');
add_filter('pre_comment_approved', 'custom_comment_tags');

function custom_comment_tags($data) {
	global $allowedtags;
	unset($allowedtags['a']);
	unset($allowedtags['abbr']);
	unset($allowedtags['acronym']);
	unset($allowedtags['b']);
	unset($allowedtags['div']);
	unset($allowedtags['cite']);
	unset($allowedtags['code']);
	unset($allowedtags['del']);
	unset($allowedtags['em']);
	unset($allowedtags['i']);
	unset($allowedtags['q']);
	unset($allowedtags['strike']);
	unset($allowedtags['strong']);
	return $data;
}

上記を記述するとデフォルトで使用できるとなっているタグが全て使用できなくなり、更に「次のHTMLタグと属性が使えます: ~ …」の部分からも削除されます。

デフォルトで使用できるタグを無効化する

先程の<pre>を使用可能にするのと併せて記述し、「<pre class="">が使用できるようにして、その他のタグや属性は使用不可にする」という記述をした場合はこの画像のようにコメント下の部分が表示されます。

目次へ

10. 固定ページでコメントを非表示にする

インストール直後とかで見るとわかりやすいですが、デフォルトテーマでは投稿だけでなく固定ページにもコメントフォームなどが表示されています。
固定ページではコメントは必要ないから非表示にしたいという場合、各ページの「表示オプション > コメントの投稿を許可する」のチェックを外すとか直接page.phpなどの固定ページに使用しているテンプレートのコメント箇所を削除するなどでももちろんできますが、functions.phpに以下を記述することで一括で全固定ページのコメントを非表示にすることができます。

functions.php

function close_page_comment($open, $post_id) {
	$post = get_post($post_id);
	if ($post && $post->post_type == 'page') {
		return false;
	}
	return $open;
}
add_filter('comments_open', 'close_page_comment', 10, 2);

この方法はディスカッションの設定に関わらず全固定ページのコメントを非表示にしてくれるので、手っ取り早く且つ確実に固定ページのコメントを非表示にしたい時は良さそうです。
この方法は以下で紹介されていたものです。

目次へ

以上、WordPressのデフォルトのコメントフォームをカスタマイズする方法でした。
見ての通りどれも難しいカスタマイズとかでもなく簡単にできることばかりだと思うので、WordPressを使ってるけど変更の仕方がわからないからデフォルトのコメントフォームを設置しているという方は、これらを参考にしてもらえるとデザインや文言を自分好みにいろいろとカスタマイズできると思います。

今回いろいろと試したりこのエントリーを書くにあたってCodexも参考にしましたが、以下2エントリーを特に参考にさせてもらいました。
海外ブログなので英語なんですが、英語がわからない人でも翻訳機能とか使えば大体内容はわかるかと思います。
また、ここでは紹介していない方法もあったりするので、他のカスタマイズも気になる方はご覧になってみてください。

Back to Top

WordPress:コメントフォームをカスタマイズする方法

WordPress:コメントフォームをカスタマイズする方法

/ WordPress

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。