前回からちょっと間が空いてしまいましたが、
今回はコメントについてやって行きたいと思います。
ところで、
管理画面の「設定＞ディスカッション」にてコメント関連の設定が行えます。
ちなみに自サイトでは以下のような設定にしてあります。
例えば、名前とメールアドレスの入力を必須にチェックを入れると、
入力フォームの「名前」と「メール」の所には * のマークが付いたりしますが、
「コメント」の所には何故か付きません。
入力必須なのは自明なので、あえてやる必要はないとのことなのでしょうが、
個人的には一貫性がないような気がします(^_^;)
そんなわけで、色々といじりたくなってしまったので、カスタマイズしてみます。
ということで、「Twenty Twenty-One」な標準テーマとかのコードなどを参考にした結果、
comments.php のコードは以下のようになりました。
<?php
if ( post_password_required() ) {
return;
}
echo '<div id="comments" class="comments-area">';
if ( have_comments() ) {
printf( '<h2 class="comments-title"><i class="icon-comments"></i> %d件のコメント</h2>', get_comments_number() );
echo '<ul class="comment-list">';
wp_list_comments();
echo '</ul>';
}
$commenter = wp_get_current_commenter(); // コメント者の名前、メールアドレス、サイトアドレス（あれば）。
$req = get_option( 'require_name_email' ); // 名前とメールアドレスの入力が必須かどうか。
$req_attr = ' required';
$req_mark = '<span class="required"><i class="icon-asterisk"></i></span>';
$html5 = current_theme_supports( 'html5', 'comment-form' ); // コメントフォームがHTML5対応になっているかどうか。
comment_form(
[
'fields' => [
'author' => sprintf( '<p class="comment-form-author"><label for="author">名前%s</label><input id="author" name="author" type="text" value="%s" size="30" maxlength="245"%s></p>',
$req ? $req_mark : '',
esc_attr( $commenter['comment_author'] ),
$req ? $req_attr : ''
),
'email' => sprintf( '<p class="comment-form-email"><label for="email">メールアドレス%s</label><input id="email" name="email" %s value="%s" size="30" maxlength="100" aria-describedby="email-notes"%s></p>',
$req ? $req_mark : '',
$html5 ? 'type="email"' : 'type="text"',
esc_attr( $commenter['comment_author_email'] ),
$req ? $req_attr : ''
),
'url' => sprintf( '<p class="comment-form-url"><label for="url">サイトアドレス</label><input id="url" name="url" %s value="%s" size="30" maxlength="200"></p>',
$html5 ? 'type="url"' : 'type="text"',
esc_attr( $commenter['comment_author_url'] )
)
],
'comment_field' => sprintf(
'<p class="comment-form-comment"><label for="comment">コメント%s</label><textarea id="comment" name="comment" cols="45" rows="3" maxlength="65525"%s></textarea></p>',
$req_mark,
$req_attr
),
'comment_notes_before' => sprintf( '<p class="comment-notes"><span id="email-notes">メールアドレスが公開されることはありません。</span>%sが付いている欄は必須項目です。</p>',
$req_mark
),
'comment_notes_after' => '',
'title_reply_to' => '<i class="icon-reply"></i> %s へ返信',
'title_reply' => '<i class="icon-comment"></i> コメントする',
'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
'title_reply_after' => '</h2>',
'cancel_reply_link' => 'キャンセル',
]
);
echo '</div>'; 少々長いコードになってしまっていますが、解説してみます。
まず、 post_password_required() にて投稿のパスワードが必要かどうか、必要なら正しく入力されているかを確認します。
自サイトではパスワードとか設定していないし、そもそも投稿者が管理人しかいません(^_^;)
なので、あえてやる必要は無いのですが、参考にしたコードに従って一応やっておきます。
次に、コメント一覧を出力します。
have_comments() でコメントがあるか確認します。
get_comments_number() で何件あるかを取得できます。
そして、wp_list_comments() でコメント一覧を出力します。
必要に応じてパラメータを設定できますが、特に何もせずにデフォルトのままにしました。
なお、管理画面の設定で「アバター無し」「コメントの複数ページ分割無し」にしてあるので、それらに関連するコードは省いています。
続いて、入力フォームを出力します。
wp_get_current_commenter() でコメント者の名前など（あれば）の情報を取得して、フォームの入力値として参照します。
get_option( ‘require_name_email’ ) で名前とメールアドレスの入力が必須かどうかを取得して、必須項目かどうかの印を付ける際などで参照します。
さらに、current_theme_supports( ‘html5’, ‘comment-form’ ) でコメントフォームがHTML5対応になっているか取得しておきます。
対応していれば、<input> 属性の type=”email” や type=”url” などを使うことができるようになります。
なお、theme_supports については後の回の投稿で書いてみる予定でいます。
そして、comment_form() で最終的な入力フォームを出力します。
パラメータを設定することで、フォームの各部品の内容を調整することができます。
多くのパラメータがあるので、かなり細かく調整することが可能ですね。
こちらにある comment_form() のコードを参照すると、より理解が深まると思います。
次回に続きます。