コメントフォームをカスタマイズする – comment.phpを使う方法
そもそもコメント欄を表示させるには?
投稿ページなどでコメントを受け付けたい場合、まずその処理内容をcomment.phpというファイルに記述します。テーマ内にcomment.phpがなければ新たに作るか、作らなければwp-includes/comment.phpが自動的に読み込まれます。カスタムをする場合はテーマフォルダ内にcomment.phpを作った方がいいでしょう。フルカスタムしなくても、カスタムしなかった部分はwp-includes/comment.phpが補ってくれます。
デフォルトのコメント欄を表示するだけなら、コメント欄をつけたいページ(single.phpなど)にcomment_form();と記述するだけで完了です。※これだけならテーマ内にcomment.phpを作らなくてもコメント欄を設けられます。ただ、今回は少しカスタムをしたいのでテーマ内に新たにcomment.phpを作って進めます。
|
1 2 |
// single.phpなどコメント欄を表示したいファイルで <?php comment_form(); ?> |
コメント欄をカスタムするには?
関数comment_form()には2つ引数を渡せます。
|
1 |
<?php comment_form( $args, $post_id ); ?> |
この$argsにデフォルトで代入されている値は以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php $args = 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>'//「 コメントを投稿するにはログインしてください」のHTML '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>', // 「...としてログインしています」のHTML 'comment_notes_before' => '<p class="comment-notes">' . __( 'Your email address will not be published.' ) . ( $req ? $required_text : '' ) . '</p>', // 「メールアドレスが公開されることはありません」のHTML '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>', // 「次のHTMLタグと属性が使えます: ～ …」のHTML 'id_form' => 'commentform', // formタグにつけるid属性の値 'id_submit' => 'submit', // 送信ボタンにつけるid属性の値 'title_reply' => __( 'Leave a Reply' ), // 「コメントを残す」の文字列 'title_reply_to' => __( 'Leave a Reply to %s' ), // 「...にコメントする」の文字列 'cancel_reply_link' => __( 'Cancel reply' ), // 「コメントをキャンセル」の文字列 'label_submit' => __( 'Post Comment' ), // 送信ボタンのvalue属性の値 'format' => 'xhtml', ); ?> |
これを直接書き換えるのではなく新たに$argsを作って引数としてcomment_form()に渡して上書きすることでカスタマイズします。
入力項目を変更する
$argsの配列で最初のプロパティとして定義されている’fields’ => apply_filters( ‘comment_form_default_fields’, $fields ),の2つ目の引数$fieldsがデフォルトで入力項目となっている「名前、メールアドレス、ウェブサイト」を指定している部分となります。デフォルトで代入されている値は以下のようになっています。
|
1 2 3 4 5 6 7 8 9 10 |
<?php $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>', // ウェブサイト ); ?> |
入力項目「ウェブサイト」を削除する
「ウェブサイト」という項目を削除したい場合には以下のように値を空にします。※変数$fieldsを書き換えるのではなく、$argsの’fields’プロパティを上書きする形で行ないます。$fieldsは入力された値をエンコード(esc_attr)したり、入力必須項目に*印をつけるといったコア部分のメソッドが実行されています。
comment_form()に引数として渡す変数をcomment.phpに記述します。今回は$comment_argsとして進めます。
|
1 2 3 4 5 6 7 8 9 10 11 |
<?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' => '' // 空にする ), ); ?> |
‘author’と’email’の値は元のものをコピペしました。
それ以外の部分もお好みで変えていきます。’fields’の配列を閉じたあとに続けてプロパティと値を記述していきます。$comment_args変数を閉じたあとにcomment_form()を実行します。引数には定義した$comment_argsをわたします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?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' => 'コメントをする', 'label_submit' => 'コメントを送信する', 'class_submit' => 'btn btn-primary', 'comment_notes_before' => 'メールアドレスがサイト上で公開されることはありません。', 'comment_field' => '<p class="comment-form-comment">' . '<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">' . '</textarea></p>', ); comment_form($comment_args); // comment_form()に作った引数を渡して実行 ?> |
最後にcomment.phpの先頭に$comments_args内のfieldsプロパティ内で使用する変数に値を代入しておきます。
|
1 2 3 4 5 |
<?php $commenter = wp_get_current_commenter(); // 現在のコメント投稿者情報を取得する (comment_author, comment_author_email, comment_author_url) $req = get_option( 'require_name_email' ); // 管理画面で「名前とメールアドレスは必須」と設定されているかどうか $aria_req = ( $req ? " aria-required='true'" : '' ); // 必須となっていたらtrue、なっていなかったらfalse (音声読み上げの際に「必須」が分かるようにする) ?> |
「名前とメールアドレスは必須」に設定しているかどうかは管理画面の「設定」→「ディスカッション」で指定します。
そしてコメント欄を表示したいファイル(single.phpなど)でcomment.phpを呼び出します。このときcomment_form()関数に代えてcomments_template()関数を実行します。
|
1 |
<?php comments_template(); ?> |
コメント
コメントはありません。