WordPressのコメントフォームをカスタマイズ！文や入力欄のテキストやHTMLを削除・編集

2021年1月26日2021年1月28日WordPressカスタマイズ・基礎知識

WordPressでは標準機能で「ディスカッション」という名前のコメント欄が使えます。

テーマなどでそれなりの見た目のコメント欄が設置できますが、
「メールアドレス」「ウェブサイト(URL)」などの無駄な入力欄を消したかったり、
「コメントを残す」などのテキストを変更したかったり…色々と自分のサイトに合わせてカスタマイズしたいこともありますよね。

目次から目的のカスタマイズをクリックして方法を確認してください。

ここではコメント送信フォームの部分のカスタマイズです。コメント欄全体のカスタマイズはコチラ

みんながやりたい部分は既に解説記事が沢山あるのですが、ここまで出来るか！とビックリするほどカスタマイズする方法をすべてご紹介します。

プログラミングやPHPがわからない方でも、手順に従えば出来るようにご説明するのでプラグインも知識も必要ありません！

死ぬほど丁寧に説明しているつもりなので、基本はなんとなくわかるんだけど、型通り以上に自分でカスタマイズしたい！という場合にも、仕組みがわかって思い通りにカスタマイズしやすくなると思います。

コメントフォームの入力欄を削除・編集する

デフォルトのコメントフォームには、入力欄が用意されています。

後から投稿したコメントを編集できるようにしたり、サイト所有者からコメントした人に連絡できるようにしたりと色々と役に立つことはありますが、とにかく気軽にコメントを残してもらいたい場合には邪魔になってしまいます。

パッと見ただけでもごちゃごちゃしますし、入力必須でなくても入力しなきゃいけない感じで面倒くさそうですよね。

一般的なブログでは、名前とコメント欄、またはせいぜいメールアドレスだけで十分な場合が多いでしょう。

フィールド名	出力されるフォーム項目
author	名前／作成者
email	メールアドレス/email
url	ウェブサイト/URL
cookies	チェックボックス：次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
comment	テキストエリア（コメントのテキストフィールド）

これらの項目をコメントフォーム内から削除するには、comment_form_default_fieldsというフィルターフックを使います。

メールアドレス・URLの入力欄を削除する

特に需要の多い、メールアドレスとURLの入力欄を削除するコードです。子テーマのfunctions.phpに追加するだけでただただ消えます。

functions.phpに追加

function my_comment_form_customize$arg) {
$arg['email'] = '';
$arg['url'] = '';
return $arg;
 }
 add_filter('comment_form_default_fields', 'my_comment_form_customize');

消したくないフィールド名の行は削除して利用してください。

名前やコメント入力欄自体を削除したいことはあまりないかと思いますが、こういう仕組みなので上記の部分を追加すればすべて削除することも出来ます。

WordPressのディスカッション設定

元々WordPressのデフォルト機能で設定できる部分なので、大前提として管理画面からディスカッション設定を調整しておきましょう。

管理画面の設定からディスカッションを開きます。

コメントの投稿者の名前とメールアドレスの入力を必須にするのチェックを外します。

ここを外していないと、名前とメールアドレスの入力欄を削除したのに入力しないと送信できない状態になります。

Cookieの保存のためのチェックボックスを表示しない

Cookiesの項目は、次回同じサイトに訪れたときに、わざわざ入力しなくても良いという機能で便利といえば便利ですが、上記の方法などでメールアドレスやURLを表示しないようにしている場合は不要です。

こちらはPHPコードは不要で、ディスカッション設定で無効にできます。

 コメント投稿者が Cookie を保存できるようにする、Cookie オプトイン用チェックボックスを表示しますのチェックを外せば、

コメント欄にある次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。という覧が消えます。

名前・メール・サイトなどのラベルやHTMLを書き換える

サンプルサイトで名前とメールのラベルを書き換え、サイトを削除しています。サンプルサイト

functions.phpに追加するコードの例

function my_comment_form_customize($arg) {
$arg['author'] = '<p class="comment-form-author"><label for="author">名前(ニックネーム)</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
    '" size="30"' . $aria_req . ' /></p>';
$arg['email'] = '<p class="comment-form-email"><label for="email">メール(ご連絡先)</label> ' .
    ( $req ? '<span class="required">*</span>' : '' ) .
    '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
    '" size="30"' . $aria_req . ' /></p>';
$arg['url'] = '';
return $arg;
 }
 add_filter('comment_form_default_fields', 'my_comment_form_customize');

名前→名前(ニックネーム)に、メール→メール(ご連絡先)に書き換え、URLは削除しています。

※上の方で説明している削除用のコードとこのコードは同じものなので、例と同じように書き換える項目と削除する項目を一緒に書いてください。

解説）
各フィールドで出力されるHTMLは大体共通なので、名前の項目の中身を例に説明します。

'<p class="comment-form-author"><label for="author">' . ★__( 'Name', 'domainreference' ) . '</label> ' .
☆C .'<input id="author" name="author" type="text" value="' . ◆esc_attr( $commenter['comment_author'] ) .'" size="30"' . ◇$aria_req . ' /></p>'

★のところが「名前」と出力させてる部分です。PHPで翻訳しています。

自分で入力するならわざわざ翻訳する必要はないので、まるっと削除して<label for="author">名前</label>と連結して好きなラベル名に変えちゃいましょう。

☆の部分は、WordPressの設定で必須(required)になっていたら、必須マークを表示するという部分です。
不要ならなくて良いのでこちらも削除して…</label><input id="author"…って繋げちゃっても良いです。

◆部分はデフォルトのvalueを設定するところなので、cookieで名前を保存したりする場合に使われます。のちのち使いたくなるかもしれないので削除しないことを推奨

◇部分は、WordPressの設定で必須(required)になっていたらrequiredを出力してバリデーション（入力しないとコメントを送信しない）ようにさせるための部分です。

以上を踏まえて、表示するテキストを変えたりHTML要素を加えちゃったりできます。フォーム項目の名前などが同じなら、まるっと自分でHTMLを書いて置き換えてもOKです。

コメントフォームのコメント欄と名前などの順番を並び替える

WordPress4.4からコメント入力のテキストフィールドが一番上に、名前やメールなどが下に表示されるように変わったらしいです。

日本人からするとなんとも違和感のある並び…。

コメントと名前のみにしているフォームなら、名前はおまけみたいなものなのでそのままでもいいかも？ただ複数入力項目のあるフォームでは、流れが悪いので順番を変えましょう。

functions.phpに追加します。

function comment_input_change_order( $fields ) {
//コメント
  $comment_field = $fields['comment'];
  unset( $fields['comment'] );
  $fields['comment'] = $comment_field;
//メール
  $comment_field = $fields['email'];
  unset( $fields['email'] );
  $fields['email'] = $comment_field;

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

メールは必須項目ではないので、メールはコメントの下にくるようにしてみました。

サンプルサイト

解説）

//コメント
  $comment_field = $fields['★comment'];
  unset( $fields['★comment'] );
  $fields['★comment'] = $comment_field;

★部分をフィールドの名前で書き換えて、このセットを並べたい順番に記述していくだけです。

フィールド名はこちらの表を参照

「フィールドを一旦削除してから、一番後ろに追加」ということをしているコードなので、後ろに移動したいものだけ順番に追加してください。

コメントフォームのタイトル・ラベル・テキスト・文言を変更する

ここから、すべてcomment_form_defaultsというWordPressのフィルターフックを使ってカスタマイズします。

functionから始まるコードの中身で、WordPressの標準機能を変えるためのものです。

同じfunctionは一度しか記述してはいけないので、いろんなカスタマイズをする場合でも中身だけを加えたり書き換えたりしてください。

子テーマのfunctions.phpに書くコード

 function custom_comment_form($args, $user_identity) {
//ここから編集
    $args['title_reply'] = 'コメントをどうぞ'; //この部分だけ加えたり書き換えたりする
//ここまで
  return $args;
}
add_filter('comment_form_defaults', 'custom_comment_form');

ここから編集～ここまでの間の行だけ編集します。

書き加えたり編集したりするのは、$args['xxxxxx'] = xxxxx;の行です。最後の；を忘れないように注意しましょう。

下記のカスタマイズ方法では、functionの部分から丸ごと書いていたり、中身の編集部分のみ説明したりするので、この構造を忘れずに自分のカスタマイズしたい部分を編集してご利用ください。

フォームタイトル・説明文・項目名などのテキストを変更

コメントではなく「質問」にしたい場合や、色々とわかりにくい文章がある場合、消したい文がある場合は、フィールド名に対して設定していきます。

 function custom_comment_form($args, $user_identity) {
    $args['title_reply'] = 'コメントをどうぞ'; //コメントフォームタイトル
    $args['label_submit'] = 'コメントする'; //コメントフォーム送信ボタン
    $args['title_reply_to'] = 'このコメントに返信'; //他のコメントに返信するボタン
    $args['cancel_reply_link'] = 'コメントの返信をキャンセル'; //他コメントへの返信をキャンセルするボタン
    $args['comment_notes_before'] = 'メールアドレスは非公開です'; //コメントタイトルの後に表示されるテキスト
    $args['comment_notes_after'] =  ''; //コメント欄の後に表示されるデフォルトでは大体非表示のテキスト
  return $args;
}
add_filter('comment_form_defaults', 'custom_comment_form');

「メールアドレスが公開されることはありません。」を削除

comment_notes_beforeは、最後のcomment_notes_afterのように、中身を空にすれば非表示になります。

functions.phpに追加するコード

 function custom_comment_form($args, $user_identity) {
    $args['comment_notes_before'] = ''; //コメントタイトルの後に表示されるテキスト
    $args['comment_notes_after'] =  ''; //コメント欄の後に表示されるデフォルトでは大体非表示のテキスト
  return $args;
}
add_filter('comment_form_defaults', 'custom_comment_form');

それ以外のタイトルや、送信ボタンや、返信ボタンなどはデフォルトで要素ごと非表示にはできずテキストだけ消える形になってしまうので、CSSで非表示にするしかありません。

コメントへの返信を出来なくする

コメントの返信に関する部分は、ディスカッション設定でコメントを□階層までのスレッド (入れ子) 形式にするのチェックを外すと返信自体ができなくなるので消えます。

無効しない場合、何段階までにするかで、何回まで返信ができるかどうかが設定できます。

コメントのテキストエリアのHTMLカスタマイズで高さの変更等

特にコメント欄の高さを変更したいという方が多いと思いますが、コメント欄のラベルの変更、CSSクラスの追加やアイコン追加まで、何でもできます。

サンプルサイトでは、コメントのラベルの横にFont Awesomeのアイコンを付け、さらにコメント欄を半分ほどの高さにしました。サンプルサイト

functions.phpに追加するコード

 function custom_comment_form($args, $user_identity) {
    $args['comment_field'] = '<p class="comment-form-comment"><label for="comment"><i class="fas fa-edit"></i>' . _x( 'Comment', 'noun' ) .
    '</label><textarea id="comment" name="comment" cols="45" rows="4" aria-required="true">' .
    '</textarea></p>';
  return $args;
}
add_filter('comment_form_defaults', 'custom_comment_form');

※同じfunctionを複数追加せず、中身のみ追加してください！説明はコチラ

解説）

'<p class="comment-form-comment"><label for="comment">☆<i class="fas fa-edit"></i>' . ★_x( 'Comment', 'noun' ) .
    '</label><textarea id="comment" name="comment" cols="45" rows="◆4" aria-required="true">' .
    '</textarea></p>'

☆でFont Awesomeのアイコンを追加しました。

★がラベル部分です。日本語で普通に入力するなら<lable for="comment">なまえ</label>と連結しちゃいましょう。

textareaのrowsで高さを設定しています。デフォルトは8です。

「さや としてログイン中。ログアウトしますか ?」の削除＆文字列とリンクのカスタマイズ

logged_in_asで出力される部分を削除orカスタマイズです。

これは設定から表示／非表示を設定できず、ユーザーがログインしている場合に自動的に表示されます。

特にコメントとログイン機能は無関係だという場合は、削除してしまった方がスッキリします。

「さや としてログイン中。ログアウトしますか ?」の削除

下記コードをfunctions.phpに追加すれば削除されます。

 function custom_comment_form($args) {
    $args['login_as'] = ""; //「〇〇としてログインしています」を削除
　　return $args;
}
add_filter('comment_form_defaults', 'custom_comment_form');

※同じfunctionを複数追加せず、中身のみ追加してください！説明はコチラ

「さや としてログイン中。」のプロフィールへのリンクURLを変える

ログイン中のテキストは、WordPressのプロフィールページへのリンクになっていますが、サイトのユーザー向けには、WordPressのプロフィールページは利用していない場合が多いと思います。

WP-Membersなどのマイページを利用している場合は、URLを変更します。

 function custom_comment_form($args) {
    $current_user = wp_get_current_user(); //現在ログイン中のユーザー情報を取得
    //「〇〇としてログインしています」の部分
    $args['logged_in_as'] = '<p class="logged-in-as">' . sprintf( '<a href="%1$s" target="_blank">%2$s</a>としてログインしています <a href="%3$s" title="ログアウトする">ログアウトしますか？</a>', home_url('/mypage/'), $current_user->display_name, wp_logout_url( apply_filters( 'the_permalink', get_permalink( ) ) ) ) . '</p>';
    return $args;
}
add_filter('comment_form_defaults', 'custom_comment_form');

※同じfunctionを複数追加せず、中身のみ追加してください！説明はコチラ

解説）

'<p class="logged-in-as">' . sprintf( '<a href="☆%1$s" target="_blank">★%2$s</a>としてログインしています <a href="◆%3$s" title="ログアウトする">ログアウトしますか？</a>', ☆home_url('/mypage/'), ★$current_user->display_name, ◆wp_logout_url( apply_filters( 'the_permalink', get_permalink( ) ) ) ) . '</p>'

sprintf()で☆のところに☆で設定した値が入るようになっています。★と◆も同様。

aタグのリンク先href="☆"の部分に☆で指定したURLが入るので、home_url('/スラッグ/')で「https://自分のサイトのホームURL/スラッグ/」にリンクするように変更しています。

スラッグが違う場合は変更し、ホームURLを使わない場合は、home_url()を使わずに直接'https://saya-to.com/login-members/your-mypage/'などと入力してもOKです。

★の$current_user->display_nameでは表示名として設定された名前が入るようになっていますが、設定されていない場合は他の項目に変えましょう。

$current_userで取得できる情報一覧はコチラのページでチェック

◆のところはログアウトした後戻ってくるようになっている関数で、通常は変更は不要かと。☆と同様に別のページに飛ばしても良いですが、その場合はリダイレクトで戻ってこれないので注意。

さらにプロフィールページへのリンクのaタグにtaget="_blank"を付けて別ページで開くようにしています。

「コメントを投稿するにはログインしてください」の設定＆ログインURLの変更

must_log_inで出力される部分の設定とカスタマイズです。

ディスカッション設定でユーザー登録してログインしたユーザーのみコメントをつけられるようにするにチェックを入れると、ログインしないとコメントフォームが表示されないようになります。

このチェックを外しておかないと、一般ユーザーがコメントできなくなるので注意しましょう。

そのとき、デフォルトではただ文章で「コメントを投稿するにはログインしてください」と表示され、ログイン部分がログインページへのリンクになりますが、この部分のHTMLの出力もカスタマイズできます。

解説用の例）

 function custom_comment_form($args) {
    $args['title_reply'] = 'コメントをどうぞ';
    $args['label_submit'] = '投稿';
    //ログインしてくださいの部分
　　$args['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( ) ) ) ) . '</p>'★;
	return $args;
}
add_filter('comment_form_defaults', 'custom_comment_form');

★～★で囲まれている部分をカスタマイズすると、出力されるHTMLを自由自在に変更できます。

上記はデフォルトのコードです。出力される仕組みを理解して、変えたい部分を変えましょう。

'■<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( ) ) )◆ ) . '■</p>■'

■～■のところが文章を囲んでいるpタグです。他のタグに変更したい場合や、さらにdivタグで囲いたい場合などはここをカスタマイズします。

★～★で囲まれている部分が、日本語に変換されて★コメントを投稿するには★★してください★になります。

☆～☆で囲まれているaタグの部分が、ログインページへのリンク部分です。こちらも日本語に変換されて☆ログイン☆になり、さらにaタグのhrefの中身◇の部分が◆～◆の中身で置換されます。

◆～◆で囲まれている部分が、ログインページへのリンク部分を設定するところで、デフォルトではWordPressへのログイン画面(管理画面にログインするときの画面)が表示され、ログイン後に管理画面ではなく現在のページに戻ってくるように設定されています。

実際の会員サイトでは、WordPressのログイン画面ではなくWP-Membersなどのプラグインのログイン画面を使う場合が多いでしょう。

ログインURLをサイト内のログインページに変更する

ログインURLをhttps://saya-to.com/mypage/などのURLに変更するには、こうします。

$args['must_log_in'] = '<p class="must-log-in">' .  sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), home_url('/mypage/') ) . '</p>'

※設定変更するfunctionの中身に追加してください！説明はコチラ

解説）

$args['must_log_in'] = '<p class="must-log-in">' .  sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), ◆home_url('/mypage/')◆ ) . '</p>'

◆～◆部分がログインページのURLを指定している部分です。

これで、ログインをクリックすると「https://自分のサイトのホームURL/mypage/」にリンクします。

その形式ではない場合は、直接'https://saya-to.com/mypage/login/'などと入力してもOKです。

でもこうやってカスタマイズしてしまうとログインしてもコメント欄にリダイレクトは出来ないので、それはmypageの方でログイン後のリダイレクトを別で設定しましょう。

文章内のリンクではなくログインボタンにする

この設定を利用するということは、ちゃんとログインしてコメントしてもらいたいということなので、もっとログインのためのリンクを目立たせたい場合もありますよね。

文章中のリンクではなくボタンにして目立たせるにはこうします。

	$args['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( ) ) ) . '</p><p><a href="'.wp_login_url( apply_filters( 'the_permalink', get_permalink( ) ) ).'" class="btn btn-primary">ログインする</a></p>';

※設定変更するfunctionの中身に追加してください！説明はコチラ

解説）

	$args['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( ) ) )◆ . '</p>★<p><a href="'.◆wp_login_url( apply_filters( 'the_permalink', get_permalink( ) ) )◆.'" class="btn btn-primary">ログインする</a></p>★';

通常のコードに追加して、★～★に囲まれたところで、pタグで行を足してaタグのログインリンクをボタンで作っています。classの設定とCSSでボタンにしてください。

このコードで更にデフォルトのログイン画面ではなく自分のログインページを設定する場合は前項の説明を見てURL部分◆～◆を差し替えてください。