WordPressのコメント(comments.php)をカスタマイズする
WordPressでは、comments_template()というインクルードタグをテンプレートファイルに挿入することで、あらかじめ用意されているコメントテンプレートを利用することができます。
しかし、WordPressテーマを作成する際には、デフォルトのものではちょっと物足りないということもあるかと思います。
そんなときには、WordPressテーマ内にcomments.phpというテンプレートファイルを用意することで、コメントテンプレートをカスタマイズすることができます。
本日は、WordPressテーマにcomments.phpを用意して、デフォルトのコメントテンプレートを生かしつつカスタマイズする方法についてご紹介します。
comments.phpを作成する
コメントテンプレートは、ユーザーのコメントが一覧になって表示されるコメントリストの部分と、コメントを投稿するためのコメントフォームからなっています。
まずはcomments.phpに、それらを読み込むためのソースを記述します。
- comments.php
-
<div id="comments" class="comments"> <?php if( have_comments() ): //コメントがあったらコメントリストを表示する ?> <h3>コメント</h3> <ol class="commets-list"> //コメントリストを読み込む <?php wp_list_comments( 'avatar_size=80' ); ?> </ol> <?php endif; ?> //コメントフォームを読み込む <?php $args = array( 'title_reply' => 'コメントする', 'comment_notes_before' => '<p>コメント記入欄の上に表示するメッセージ</p>', 'comment_notes_after' => '<p>コメント記入欄の下に表示するメッセージ</p>', 'label_submit' => 'SUBMIT' ); comment_form( $args ); ?> </div><!-- #comments -->
wp_list_comments()関数でコメントリストを、comment_form()関数でコメントフォームを読み込んでいます。
wp_list_comments( ‘avatar_size=80’ )はコメントリストにアバター画像を表示したときの画像のサイズの指定です。ここでは80px×80pxとしました。
comment_form()関数ではコメントフォーム内の文言について配列で指定しています。
コメント一覧
下記は実際にページとして生成される際には下記のようなソースになります。
ここではスタイル指定に無関係な記述は削除してありますので、実際にはもっと長いです。
- HTML
-
<ol class="commets-list"> <li class="depth-1"> <div class="comment-body"> <div class="comment-author vcard"> <img src='#' class='avatar' /> <cite class="fn">XXXXXX</cite> <span class="says">より:</span> </div> <div class="comment-meta commentmetadata"> <a href="#">2016年07月31日 19:27</a> </div> <p>コメント</p> <div class="reply"> <a class='comment-reply-link' href='#'>返信</a> </div> </div> <ul class="children"> <li class="depth-2"> <div class="comment-body"> <div class="comment-author vcard"> <img src='#' class='avatar' /> <cite class="fn">XXXXXX</cite> <span class="says">より:</span> </div> <div class="comment-meta commentmetadata"> <a href="">2016年07月31日 21:39</a> </div> <p>コメントへの返信</p> <div class="reply"> <a rel='nofollow' class='comment-reply-link' href=''>返信</a> </div> </div> <ul class="children"> <li class="depth-3"> <div class="comment-body"> <div class="comment-author vcard"> <img src='images.png' class='avatar' /> <cite class="fn">XXXXXX</cite> <span class="says">より:</span> </div> <div class="comment-meta commentmetadata"> <a href="">2016年07月31日 21:40</a> </div> <p>コメントへの返信への返信</p> <div class="reply"> <a rel='nofollow' class='comment-reply-link' href=''>返信</a> </div> </div> <ul class="children"> <li class="depth-4"> <div class="comment-body"> <div class="comment-author vcard"> <img src='images.png' class='avatar' /> <cite class="fn">XXXXXX</cite> <span class="says">より:</span> </div> <div class="comment-meta commentmetadata"> <a href="">2016年07月31日 21:52</a> </div> <p>コメントへの返信への返信への返信</p> <div class="reply"> <a rel='nofollow' class='comment-reply-link' href=''>返信</a> </div> </div> <ul class="children"> <li class="depth-5"> <div class="comment-body"> <div class="comment-author vcard"> <img src='images' class='avatar' /> <cite class="fn">XXXXXX</cite> <span class="says">より:</span> </div> <div class="comment-meta commentmetadata"> <a href="">2016年07月31日 21:52</a> </div> <p>コメントへの返信への返信への返信への返信</p> </div> </li><!-- .depth-5 --> </ul><!-- .children --> </li><!-- .depth-4 --> </ul><!-- .children --> </li><!-- .depth-3 --> </ul><!-- .children --> </li><!-- .depth-2 --> </ul><!-- .children --> </li><!-- .depth-1 --> </ol>
こんな感じで、もっとも上層のコメントのli要素にdepth-1というクラス名が付きます。
そして、それに返信するとli.depth-1の入れ子としてul.childrenが生成され、その中にli.depth-2、またそれに返信するとli.depth-2の入れ子としてul.childrenが生成され、その中にdepth-3、それにまた返信するとli.depth-3の入れ子としてul.childrenが生成され、その中にdepth-4、… というようにクラス名が付与されます。
コメントリストでは最初のコメント(ここで言うli.depth-1)とそれに対する返信とでスタイルを変えることが多いと思いますので、ul.childrenに返信コメント用のスタイルを指定しておくとよさそうです。
ログアウト状態のコメントフォーム
WordPressからログアウトした状態でコメントを表示すると、下記のようなソースになります(こちらも不要な部分は省略しています)。
- HTML
-
<div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">コメントする <small> <a id="cancel-comment-reply-link" href="" style="display:none;">コメントをキャンセル</a> </small> </h3> <form action="wp-comments-post.php" method="post" id="commentform" class="comment-form"> <p class="comment-notes"> <span id="email-notes">メールアドレスが公開されることはありません。</span> <span class="required">*</span> が付いている欄は必須項目です </p> <p class="comment-form-comment"> <label for="comment">コメント</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525"></textarea> </p> <p>コメント記入欄の下に表示するメッセージ(comment_notes_afterに設定した文言)</p> <p class="comment-form-author"> <label for="author">名前 <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" /> </p> <p class="comment-form-email"> <label for="email">メールアドレス <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" /> </p> <p class="comment-form-url"> <label for="url">ウェブサイト</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" /> </p> <p class="form-submit"> <input name="submit" type="submit" id="submit" class="submit" value="SUBMIT" /> <input type='hidden' name='comment_post_ID' value='' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> <p style="display: none;"> <input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="" /> </p> <p style="display: none;"> <input type="hidden" id="ak_js" name="ak_js" value="250"/> </p> </form> </div><!-- #respond -->
p.comment-notesの部分の文言は、comments.phpのcomment_form()関数でcomment_notes_beforeを指定すると、そちらで指定した文言に置き換わります。
ログイン状態のコメントフォーム
ログインした状態だと下記のようになります。
名前、メールアドレス、ウェブサイトの入力欄が消えて、WordPressのユーザー名などが表示されます(こちらも不要な部分は省略しています)。
- HTML
-
<div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">コメントする <small> <a id="cancel-comment-reply-link" href="" style="display:none;">コメントをキャンセル</a> </small> </h3> <form action="" method="post" id="commentform" class="comment-form"> <p class="logged-in-as"> <a href="" aria-label="XXXXXX としてログイン中。プロフィールを編集。">XXXXXX としてログイン中</a>。 <a href="">ログアウトしますか ?</a> </p> <p class="comment-form-comment"> <label for="comment">コメント</label> <textarea id="comment" name="comment"></textarea> </p> <p>コメント記入欄の下に表示するメッセージ</p> <p class="form-submit"> <input name="submit" type="submit" id="submit" class="submit" value="SUBMIT" /> <input type='hidden' name='comment_post_ID' value='' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='' /> </p> <p style="display: none;"> <input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="" /> </p> <input type="hidden" id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment_disabled" value="" /> <script>(function(){if(window===window.parent){document.getElementById('_wp_unfiltered_html_comment_disabled').name='_wp_unfiltered_html_comment';}})();</script> <p style="display: none;"> <input type="hidden" id="ak_js" name="ak_js" value="" /> </p> </form> </div><!-- #respond -->
これらのソースのid名やclass名に合わせてスタイルを指定してみてください。
single.phpでcomments.phpを読み込む
投稿でコメントを表示するために、single.phpでcomments.phpを読み込みます。
固定ページなどでもコメントを表示させたい場合には、同じ要領で読み込ませてください。
ちなみにcomments_template()はループ内に記述するようにと言われることがありますが、ループ内である必要はありません。
- single.php
-
<?php get_header(); ?> <?php if(have_posts()) : while(have_posts()) : the_post(); ?> <?php endwhile; else : ?> <?php endif; ?> <?php comments_template(); ?> <?php get_footer(); ?>
なおWordPressのコメントには、各コメントの「返信」リンクをクリックするとコメントフォームが直下まで移動してくるJSファイルが用意されています。
そのJSファイルを読み込むため、WPテーマのheader.phpなどにあるhead要素内に下記のソースを記入します。
<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
以下のような感じで、wp_head()の直上に書いておくといいでしょう。
- header.php
-
. . . <?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?> <?php wp_head(); ?> <?php get_template_part( 'snippet-1' ); ?> </head>
まとめ
以上の流れで進めれば、comments.phpをカスタマイズできるかと思います。
