サブサイトのフォーラムにコメント入力欄のカスタマイズについて以下のような質問がありました。
コメント欄のカスタマイズでこちらにたどり着きました。
やりたいことはシンプルに、コメント入力欄や名前入力欄の上部のテキストを「コメントをどうぞ」→任意のテキストに変更したい「名前」→「お名前」や「ニックネーム」、「ペンネーム」などサイトによって任意に変更したいという感じです。
こういった、コメント欄カスタマイズ方法の質問は、これまで何度かあるので一定の需要があるのかと、この機会にやり方を記しておこうと思います。
今回のカスタマイズで変更できる部分は、以下のテキスト部分です。
目次
主な手順
コメント欄テキストのカスタマイズ方法の主な手順は以下です。
- テーマ内からcomment_form関数が使われている場所を探す
- comment_form関数部分を編集する
今回は、Wordpress公式テーマのTwenty Sixteenを例にカスタマイズ方法を紹介したいと思います。
今回は、Twenty Sixteenのカスタマイズ方法ですが、基本的にどのテーマでも同じ手順で変更できるかと思います。
テーマ内からcomment_form関数が使われている場所を探す
まずは、テーマ内でcomment_form関数が使われている部分を探します。
探すのには、テキストエディターのGrep検索などで「comment_form」というテキストを検索してみてください。
Sublime Textでの検索方法
僕が使用しているSublime Text 3だと、メインメニューの「Find」から「Find in Files（Ctrl + Shift + F）」から、Grep検索フォームを表示させて、「comment_form」を検索してください。
すると、以下のような検索結果が表示されます。
Twenty Sixteenの場合は、comments.phpテンプレートに記入されていました。
EmEditorでの検索方法
一応、日本語エディターのEmEditorでの方法も書いておきます。
EmEditorメインメニューの「検索」から「ファイルから検索（Ctrl + Shift + F）」を選択してください。
大抵のプログラム用エディターには、この一括検索機能がついているかと思います。
comment_form関数部分を編集する
今回の例として使用しているTwenty Sixteenの場合は、comments.phpテンプレートにcomment_form関数が記入されていました。
なので、親テーマのcomments.phpをコピーして、子テーマフォルダ直下に貼り付けてください。そして子テーマにコピペしたファイルをエディターなどで開いてください。
ここで、「なぜ子テーマにファイルをコピーするのか？」については以下を参照してください。
大抵のテーマの場合は、comment_form関数は、以下のように利用されています。
comment_form();
この部分を、以下のようにコピペで書き換えます。
$name = 'お名前';
$mail = 'あなたのメアド';
$site = 'あなたのサイト';
$comments_args = array(
'fields' => apply_filters( 'comment_form_default_fields', array(
'author' =>
'<p class="comment-form-author">' .
'<label for="author">'.$name.'</label> ' .
( $req ? '<span class="required">*</span>' : '' ) .
'<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">'.$mail.'</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>',
'url' =>
'<p class="comment-form-url"><label for="url">'.$site.'</label>' .
'<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
'" size="30" /></p>'
)
),
);
comment_form($comments_args);先頭の方にある$name、$mail、$siteのテキストについては好みのものに変更してください。
comment_form関数に引数があらかじめ設定されていた場合
今回の例として使用しているTwenty Sixteenの場合、comment_form関数に以下のような引数が設定されていました。
comment_form( array(
'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
'title_reply_after' => '</h2>',
) );こういった場合は、引数にもともとあった設定項目も取り入れて、以下のように記入します。
$name = 'お名前';
$mail = 'あなたのメアド';
$site = 'あなたのサイト';
$comments_args = array(
'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
'title_reply_after' => '</h2>',
'fields' => apply_filters( 'comment_form_default_fields', array(
'author' =>
'<p class="comment-form-author">' .
'<label for="author">'.$name.'</label> ' .
( $req ? '<span class="required">*</span>' : '' ) .
'<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">'.$mail.'</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>',
'url' =>
'<p class="comment-form-url"><label for="url">'.$site.'</label>' .
'<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
'" size="30" /></p>'
)
),
);
comment_form($comments_args);動作確認
今回のカスタマイズで、デフォルトの日本語環境だと「名前」、「メールアドレス」、「サイト」であったコメント入力フォームのテキストが以下のように変更されました。
まとめ
コメントフォームのカスタマイズは、通常のテンプレートファイルのカスタマイズと違い、ちょっと分かりづらいかもしれません。
ただ、やり方さえ分かってしまえば、comment_form関数で指定する引数の内容を指定するだけなので、いろいろなカスタマイズができるかと思います。
このコメントフォームのカスタマイズについては、WordPress Codexの関数リファレンス/comment formがサンプルも豊富で分かりやすいかと思います。
僕も今回は、Codexの「デフォルト $args 配列」項目にあるデフォルト配列をコピペして不要な部分を削除し、必要な部分だけ編集しました。
$comments_args = array(
'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' ),
'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() ) )
) . '</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( ) ) )
) . '</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>',
'fields' => apply_filters( 'comment_form_default_fields', array(
'author' =>
'<p class="comment-form-author">' .
'<label for="author">' . __( 'Name', 'domainreference' ) . '</label> ' .
( $req ? '<span class="required">*</span>' : '' ) .
'<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', 'domainreference' ) . '</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>',
'url' =>
'<p class="comment-form-url"><label for="url">' .
__( 'Website', 'domainreference' ) . '</label>' .
'<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
'" size="30" /></p>'
)
),
);この、デフォルト配列さえ分かっていれば、いろいろと応用が利くかと思います。
はじめまして、ARIAと申します。
最近ブログを始めて、comments.phpを作成するのに大変手間取っていたので、
このサイトのおかげですごく助かりました。
他にもいろいろな記事を参考にさせていただいています。
ありがとうございます！