WordPress標準のコメント欄を出力するためにある「コメントブロック」は、「何かの文章を追加したい」「入力欄の文字列（ラベル）を変更したい」．．など、デザインを除くカスタマイズが簡単にできるようにはなっていません。
クラシックテーマであれば、コメント用のテンプレートを差し替えてしまえば結構なカスタマイズが効くものの、ブロックテーマはPHPでテンプレート類をざくざく編集できるわけではないので、余計にやりにくいですね。
そこで今回は、WordPress標準で用意されているフックを使用して、できる範囲でカスタマイズする方法を、自身の備忘録を兼ねて紹介していきます。
なお、クラシックテーマでも、テーマ独自のコメントフォームを用意しているテーマでなければ、以下のカスタマイズが有効となる可能性がありますので、一度試してみてもいいかも知れません。
本ページ掲載のコードを使用するときは
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
フォーム項目の並び順変更・ラベル変更
多分、コメントフォームのカスタマイズでやりたいことと言えばこの2つでしょう。
- 「名前」「メール」「サイト」「コメント」の文字を書き換えたい
- テキスト入力欄をメールアドレスなどの入力欄の下へ移動したい（または任意の並び順にしたい）
次のコードを追加して加工することで、この2つが結構簡単に実現できます。
変更した文字列に対して多言語対応させる時は、以下の措置が必要です。
- 環境に合わせてテキストドメインを指定する
- 書き換える文字列を英語で記述する
- 翻訳用ファイルを用意して日本語化する
function sample_ordered_and_change_comment_field( $fields ) {
//各ラベルを置き換える-入力があれば書き換え
$label_author = __('','textdomain');//「名前」の代替文字
$label_email = __('','textdomain');//「メール」の代替文字
$label_url = __('','textdomain');//「サイト」の代替文字
$label_cookies = __('','textdomain');//「次回のコメント．．．」の代替文字
$label_comment = __('','textdomain');//「コメント」の代替文字
$req_mark = __('','textdomain');//必須の「※」の代替文字
//変数があるかないかで処理を分岐
//「名前」
if($label_author ==''){
$author_text = __( 'Name' );
}else{
$author_text = $label_author;
}
//「メール」
if($label_email ==''){
$email_text = __( 'Email' );
}else{
$email_text = $label_email;
}
//「サイト」
if($label_url ==''){
$url_text = __( 'Website' );
}else{
$url_text = $label_url;
}
//「次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。」
if($label_cookies ==''){
$cookies_text = __( 'Save my name, email, and website in this browser for the next time I comment.' );
}else{
$cookies_text = $label_cookies;
}
//「コメント」
if($label_comment ==''){
$comment_text = _x( 'Comment', 'noun' );
}else{
$comment_text = $label_comment;
}
//「※」
if($req_mark ==''){
$req_mark_text = __('*');
}else{
$req_mark_text = $req_mark;
}
//ラベルを書き換えたHTML
//WordPress6.3時点のテンプレート
$temp_author = '<p class="comment-form-author"><label for="author">'.$author_text.'<span class="required">'.$req_mark_text.'</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p>';
$temp_email = '<p class="comment-form-email"><label for="email">'.$email_text.'<span class="required">'.$req_mark_text.'</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p>';
$temp_url = '<p class="comment-form-url"><label for="url">'.$url_text.'</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p>';
$temp_cookies = '<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">'.$cookies_text.'</label></p>';
$temp_comment = '<p class="comment-form-comment"><label for="comment">'.$comment_text.'<span class="required">'.$req_mark_text.'</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p>';
//一旦すべてのフィールドを削除
unset($fields['author']);
unset($fields['email']);
unset($fields['url']);
unset($fields['comment']);
unset($fields['cookies']);
//変数各項目を再度呼び出し直す（行を入れ替えれば項目の表示順が変わる）
$fields['author'] = $temp_author;//「名前」欄
$fields['email'] = $temp_email;//「メールアドレス」欄
$fields['url'] = $temp_url;//「サイト」欄
$fields['comment'] = $temp_comment;//「テキスト入力」欄
$fields['cookies'] = $temp_cookies;//Cookie利用のチェック
return $fields;
}
add_filter( 'comment_form_fields', 'sample_ordered_and_change_comment_field' );参考：apply_filters ( ‘comment_form_fields’, array $comment_fields )
コードの簡易説明
まず基本構造的には、「comment_form_fields」というフィルターフックを使って、コメントフォームの何かを変更しています。
そして上から順に処理を進めていきます。
冒頭の部分は、フォームのラベル（見出し）として表記される名称の変更です。
以下が上記のコードで変更が必要な部分のコードを切り取ったもので、「ここに代替文字列」へ変更したい見出しの文字列を入力します（変更しないものは空のままにします）。
//各ラベルを置き換える-入力があれば書き換え
$label_author = __('ここに代替文字列','textdomain');//「名前」の代替文字
$label_email = __('ここに代替文字列','textdomain');//「メール」の代替文字
$label_url = __('ここに代替文字列','textdomain');//「サイト」の代替文字
$label_cookies = __('ここに代替文字列','textdomain');//「次回のコメント．．．」の代替文字
$label_comment = __('ここに代替文字列','textdomain');//「コメント」の代替文字
$req_mark = __('ここに代替文字列','textdomain');//必須の「※」の代替文字そして、その後のコードで、「ここに代替文字列」の部分が入力されていればそれを、入力がなければWordPress標準の文字列を出力するように切り分けて別の変数として格納しています。
次に、WordPress6.3時点でのデフォルトコメントフォーム項目のHTMLへ、見出し文字列の変更の有無に従って反映させたものを、また新たな変数として格納しています。
その後、「unset～」の各行で、一旦フォームの項目を消します。
最後に、各項目のHTMLを変数化したものを、フォーム項目へ代入して最終出力させています。
この時、以下の行を入れ替えることで、フォーム項目の並び順が変更できるようになっています。
//変数各項目を再度呼び出し直す（行を入れ替えれば項目の表示順が変わる）
$fields['comment'] = $temp_comment;//「テキスト入力」欄
$fields['author'] = $temp_author;//「名前」欄
$fields['email'] = $temp_email;//「メールアドレス」欄
$fields['url'] = $temp_url;//「サイト」欄
$fields['cookies'] = $temp_cookies;//Cookie利用のチェック上記コードでの並び順は、WordPress標準の項目順にしていますが、テキスト入力欄の行を下に移動することで、メールアドレスなどの入力項目の下へテキスト入力欄を移動するということも簡単にできます
その他コメント欄にある各文字列を変更する
コメントフォーム内の文字列には、単純に文字列として変更可能なものと、HTMLとして変更しなければならないものがあるので、別々に紹介しておきます。
変更した文字列に対して多言語対応させる時は、以下の措置が必要です。
- 環境に合わせてテキストドメインを指定する
- 書き換える文字列を英語で記述する
- 翻訳用ファイルを用意して日本語化する
固定文字列として書き換えるもの
コメントフォーム内で文字列として置き換え可能なものは以下の文字列です。
- 「コメントを残す」
- 「コメントをキャンセル」
- 「〇〇に返信」
- 「コメントを送信」
コード中にコメントを入れていますが、この中で「〇〇に返信」という文字列は現在変更できないようです（プログラムバグなのかも？）
以下のコードを追加することで、これらの文字列が変更可能です。
/*** ラベルのみを変更するもの ***/
function sample_set_comment_form_defaults_label( $defaults ) {
//「〇〇（作者）にコメントを残す」の部分は変更されない模様なので含めていない(20230816現在)
//title_reply_to
//ラベルの代替文字列
//「コメントを残す」
$title_reply_label = __('','textdomain');
//「コメントをキャンセル」
$cancel_reply_link_label = __('','textdomain');
//「コメントを送信」
$submit_label = __('','textdomain');
//ラベルの有無で文字列を整形
//「コメントを残す」
if($title_reply_label == ''){
$title_reply_text = __( 'Leave a Reply' );
}else{
$title_reply_text = $title_reply_label;
}
//「コメントをキャンセル」
if($cancel_reply_link_label == ''){
$cancel_reply_link_text = __( 'Cancel reply' );
}else{
$cancel_reply_link_text = $cancel_reply_link_label;
}
//「コメントを送信」
if($submit_label == ''){
$submit_text = __( 'Post Comment' );
}else{
$submit_text = $submit_label;
}
//書き換え処理
//「コメントを残す」
$defaults['title_reply'] = $title_reply_text;
//「コメントをキャンセル」
$defaults['cancel_reply_link'] = $cancel_reply_link_text;
//「コメントを送信」
$defaults['label_submit'] = $submit_text;
return $defaults;
}
add_filter( 'comment_form_defaults', 'sample_set_comment_form_defaults_label' );コードの簡易解説
上記コードは、「代替文字列の設定」「代替文字列の有無によって条件分岐」「文字列の置き換え」の3段階で構成されています。
最上部に書かれている以下のコードの「ここに代替文字列」に入力した場合、その文字列へと書き換わり、なければ標準の文字列が表示されます。
//ラベルの代替文字列
//「コメントを残す」
$title_reply_label = 'ここに代替文字列';
//「コメントをキャンセル」
$cancel_reply_link_label = 'ここに代替文字列';
//「コメントを送信」
$submit_label = 'ここに代替文字列';HTMLとして書き換えるもの
コメントフォーム内の文字列を変更するにあたり、完全なHTMLを記述して書き換えなければいけない項目用のカスタマイズコードです。
なお、このカスタマイズには、いくつかの注意点がありますので挙げておきます。
- 完全なHTMLである必要がある
- コード中のクラスなどを変えてしまうと表示が崩れることがある
- 文章中に変数があるものを書き換える場合には、PHPでその箇所の情報を呼び出す記述を追加する必要がある
変数を持つ、例えば「〇〇（ユーザー名）としてログインしています。」という文字列を書き換える場合は後述する例のようにする必要があります（結構大変です）。
例：「メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です」
以下は「メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です」の内容を「メールアドレスは返信の通知等を行うために利用することを目的としており、公開されることはありません。[改行]※がついている欄は入力を必須とさせていただいています。」へ変更するためのコードです。
function sample_change_comment_notes_before_defaults_html( $defaults ) {
//「メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です」を変更
$defaults['comment_notes_before'] = '<p class="comment-notes"><span id="email-notes">メールアドレスは返信の通知等を行うために利用することを目的としており、公開されることはありません。</span><br><span class="required-field-message"><span class="required">※</span> がついている欄は入力を必須とさせていただいています。</span></p>';
return $defaults;
}
add_filter( 'comment_form_defaults', 'sample_change_comment_notes_before_defaults_html' );例：「〇〇（ユーザー名）としてログインしています。」
function sample_set_comment_form_change_html_logged_in_as( $defaults ) {
//ログインしているユーザー名を取得
$current_user = wp_get_current_user();
$nicename = esc_html($current_user->nickname);
//ユーザーリンク
$userurl = get_edit_user_link();
//ログアウトURL
$logouturl = wp_logout_url( get_permalink() );
$defaults['logged_in_as'] = '<p class="logged-in-as">'.$nicename.'としてログインしています。<a href="'.$userurl.'">プロフィールを編集します</a>。<a href="'.$logouturl.'">ログアウトしますか</a>';
return $defaults;
}
add_filter( 'comment_form_defaults', 'sample_set_comment_form_change_html_logged_in_as' );「コメントを投稿するにはログインしてください。」
function sample_set_comment_form_change_html_must_log_in( $defaults ) {
//ログインURL
$loginurl = wp_login_url();
$defaults['must_log_in'] = '<p class="must-log-in">コメントを投稿するには<a href="'.$loginurl.'">ログイン</a>してください。</p>';
return $defaults;
}
add_filter( 'comment_form_defaults', 'sample_set_comment_form_change_html_must_log_in' );参考：「comment_form( array $args = array(), int|WP_Post $post = null )」
フォーム項目の中に文字列などを追加する
フォームの各項目の上下などに、注釈や注意事項、最近では日本でも必要性が増しつつあるプライバシーポリシーページへのリンクなど、何かの文字列を入れたいということがあると思います。
以下入れたい場所別に別のコードと、標準のコメントブロックの場合にどこへ追加されるかを画像で示していますので、用途に合わせて使用してください。
//comment_form_top
function sample_action_comment_form_top() {
echo '
<div style="background:red;color:#fff;text-align:center;">
<p style="padding:4px;">「comment_form_top」で何かのHTMLを出力</p>
</div>';
}
add_action( 'comment_form_top', 'sample_action_comment_form_top' );
//comment_form_before
function sample_action_comment_form_before() {
echo '
<div style="background:red;color:#fff;text-align:center;">
<p style="padding:4px;">「comment_form_before」で何かのHTMLを出力</p>
</div>';
}
add_action( 'comment_form_before', 'sample_action_comment_form_before' );
//comment_form
function sample_action_comment_form() {
echo '
<div style="background:red;color:#fff;text-align:center;">
<p style="padding:4px;">「comment_form」で何かのHTMLを出力</p>
</div>';
}
add_action( 'comment_form', 'sample_action_comment_form' );
//comment_form_after
function sample_action_comment_form_after() {
echo '
<div style="background:red;color:#fff;text-align:center;">
<p style="padding:4px;">「comment_form_after」で何かのHTMLを出力</p>
</div>';
}
add_action( 'comment_form_after', 'sample_action_comment_form_after' );
//comment_form_after_fields
function sample_action_comment_form_after_fields() {
echo '
<div style="background:red;color:#fff;text-align:center;">
<p style="padding:4px;">「comment_form_after_fields」で何かのHTMLを出力</p>
</div>';
}
add_action( 'comment_form_after_fields', 'sample_action_comment_form_after_fields' );
//comment_form_before_fields
function sample_action_comment_form_before_fields() {
echo '
<div style="background:red;color:#fff;text-align:center;">
<p style="padding:4px;">「comment_form_before_fields」で何かのHTMLを出力</p>
</div>';
}
add_action( 'comment_form_before_fields', 'sample_action_comment_form_before_fields' );
//comments_closed
function sample_action_comments_closed() {
echo '
<div style="background:red;color:#fff;text-align:center;">
<p style="padding:4px;">「comments_closed」で何かのHTMLを出力</p>
</div>';
}
add_action( 'comment_form_comments_closed', 'sample_action_comments_closed' );
//comment_form_logged_in_after
function sample_action_comment_form_logged_in_after() {
echo '
<div style="background:red;color:#fff;text-align:center;">
<p style="padding:4px;">「comment_form_logged_in_after」で何かのHTMLを出力</p>
</div>';
}
add_action( 'comment_form_logged_in_after', 'sample_action_comment_form_logged_in_after' );
//comment_form_must_log_in_after
function sample_action_comment_form_must_log_in_after() {
echo '
<div style="background:red;color:#fff;text-align:center;">
<p style="padding:4px;">「comment_form_must_log_in_after」で何かのHTMLを出力</p>
</div>';
}
add_action( 'comment_form_must_log_in_after', 'sample_action_comment_form_must_log_in_after' );
あとがき
ここまでコメントフォームをカスタマイズする方法をいくつか紹介してきました。
公式を見ていると、コメントフォーム用のフックはたくさんあって、それぞれが独立しているような、連携しているような．．後からいろいろと用途に合わせて追加された感があり、本ページ作成にあたっていろいろと試行錯誤した結果、自身ではこれが一番やりやすいであろうというフックを使ったコードを紹介しています。
このページに辿りつく前に、恐らく皆さんはいろいろなページで部分的な方法を参考にカスタマイズされてきたと思いますが、ひょっとするとその方たちが使われているフックとは違うものを使用していて、前述したように関連するようなしないような関係性から、併用すると誤った動作をするかも知れません。
本ページを参考にカスタマイズするという方は、今まで挿入していたフィルターフックやアクションフックの行を一時コメントアウトして一旦停止した状態で、試していただいた方が無難かと思います。
