WordPress のテーマを作成しているのですが、コメント欄はシンプルなデザインにしたいなと思い、いろいろ調べたものをまとめてみました。function.php を少し編集することで、出力される文字を変更することもできます。
コメントの設定
できるだけシンプルな表示にするため、設定は以下のようにしました。管理画面の「設定」→「ディスカッション」からコメント欄の設定を行うことができます。
特に、コメントの入れ子構造とアバターの表示は無効にしておきたいものです。設定を変更し終わったら「変更を保存」ボタンを押し忘れないようにしてください。
コメント欄のオートリンク機能を無効化にする
WordPress の初期設定では、コメントで URL を貼ると自動的にリンクに変換してくれます。ある程度の期間ブログを運営していると、コメント欄に怪しいリンクが貼られた英文のスパムコメントが大量に書き込まれると思います。これにはプラグインの Akismet を使って対応するのが定番ですが、たまに Akismet をかいくぐってコメント欄に投稿してくるツワ者がいたりします。
最近はネットリテラシーがだいぶ行き渡っているので、無闇に怪しいリンクを踏んでしまうユーザーは多くないと思いますが、はじめからオートリンク機能を無効化にしておけば確実です。
functions.php に次の一文を追加してください。
1 | remove_filter('comment_text', 'make_clickable', 9); |
こうすれば、URL を貼られてもただの文字列として扱われることになります。
コメントで使用できるタグや属性を無効化する
WordPress の初期設定では、コメント欄で次のタグや属性を使用することができます。先ほどコメント欄のオートリンク機能を無効化にしましたが、それだけだと a タグを使うことでリンクを貼ることができてしまうので、コメント欄でのリンクを完全に無効化することができません。
そこで、function.php を編集して、コメント欄で HTML タグを使用できないようにしてしまいます。a タグ以外に strike タグや strong タグなども使用できなくなりますが、コメント欄なので問題ないでしょう。
1 2 3 4 5 6 7 8 9 | function invalidate_comment_tags($comment_content) { if (get_comment_type() == 'comment') { $comment_content = htmlspecialchars($comment_content, ENT_QUOTES); } return $comment_content; } add_filter('comment_text', 'invalidate_comment_tags', 9); add_filter('comment_text_rss', 'invalidate_comment_tags', 9); add_filter('comment_excerpt', 'invalidate_comment_tags', 9); |
コメントフォームのカスタマイズ
現在作成しているテーマの single.php を開き、コメントを表示したい位置に次のソースコードを追加します。
1 | <?php comment_form(); ?> |
ブログ記事を表示すると、コメント部分に次のような HTML が出力されます。
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 26 27 28 29 30 31 | <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title"> コメントを残す <small><a rel="nofollow" id="cancel-comment-reply-link" href="/wordpress/2017/01/18/%E3%83%86%E3%82%B9%E3%83%88/#respond" style="display:none;">コメントをキャンセル</a></small> </h3> <form action="http://localhost/wordpress/wp-comments-post.php" method="post" id="commentform" class="comment-form"> <p class="comment-notes"> <span id="email-notes">メールアドレスが公開されることはありません。</span> </p> <p class="comment-form-comment"> <label for="comment">コメント</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea> </p> <p class="comment-form-author"> <label for="author">名前</label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" /> </p> <p class="comment-form-email"> <label for="email">メールアドレス</label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" /> </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="コメントを送信" /> <input type='hidden' name='comment_post_ID' value='4' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p> </form> </div><!-- #respond --> |
スタイルシートでなにも設定しなければ次のように表示されるはずです。
次のようにカスタマイズしたいとします。
- 「コメントを残す」→「お気軽にコメントをどうぞ。」に変更
- 「メールアドレスが公開されることはありません。」→削除
- コメント入力フォームの横にある「コメント」→削除
- 「メールアドレス」テキストボックス→削除
- 「ウェブサイト」テキストボックス→削除
テンプレートタグである comment_form は引数を渡すことができ、$args の値を変更することでコメントフォームを自由にカスタマイズすることができます。
1 | comment_form($args, $post_id); |
デフォルトの設定は wp-includes/comment-template.php で定義されています。WordPress 4.7.1 では2214行目から2252行目までです。
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 | $defaults = array( '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" maxlength="65525" aria-required="true" required="required"></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>', 'logged_in_as' => '<p class="logged-in-as">' . sprintf( __( '<a href="%1$s" aria-label="%2$s">Logged in as %3$s</a>. <a href="%4$s">Log out?</a>' ), get_edit_user_link(), esc_attr( sprintf( __( 'Logged in as %s. Edit your profile.' ), $user_identity ) ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>', 'comment_notes_before' => '<p class="comment-notes"><span id="email-notes">' . __( 'Your email address will not be published.' ) . '</span>'. ( $req ? $required_text : '' ) . '</p>', 'comment_notes_after' => '', 'action' => site_url( '/wp-comments-post.php' ), 'id_form' => 'commentform', 'id_submit' => 'submit', 'class_form' => 'comment-form', 'class_submit' => 'submit', 'name_submit' => 'submit', 'title_reply' => __( 'Leave a Reply' ), 'title_reply_to' => __( 'Leave a Reply to %s' ), 'title_reply_before' => '<h3 id="reply-title" class="comment-reply-title">', 'title_reply_after' => '</h3>', 'cancel_reply_before' => ' <small>', 'cancel_reply_after' => '</small>', 'cancel_reply_link' => __( 'Cancel reply' ), 'label_submit' => __( 'Post Comment' ), 'submit_button' => '<input name="%1$s" type="submit" id="%2$s" class="%3$s" value="%4$s" />', 'submit_field' => '<p class="form-submit">%1$s %2$s</p>', 'format' => 'xhtml', ); |
先ほど single.php に記述した の一文を次のように修正します。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?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" maxlength="245"' . $aria_req . $html_req . ' /></p>', 'email' => '', 'url' => '', ), 'comment_field' => '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p>', 'comment_notes_before' => '', 'comment_notes_after' => '', 'title_reply' => 'お気軽にコメントをどうぞ。', ); comment_form($comments_args); ?> |
だいぶスッキリしました。
コメントリストをカスタマイズする
ここまでの設定で動作確認としてコメントを書き込んでみてください。コメントリストは表示されないはずです。コメントリストを表示するためには、wp_list_comments テンプレートタグを使ったループが必要です。ブログインデックスやブログ記事を表示するのにもループが必要でしたが、それのコメントバージョンですね。
先ほど、コメントフォームを表示するために single.php にソースコードを追加しましたが、これを次の一文に置き換えます。
1 | <?php comments_template(); ?> |
次にテーマフォルダのなかに comment.php を作成してください。ソースコードは次のとおり。
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 26 27 28 | <div id="comment-area"> <h2 id="comments">コメント</h2> <?php // コメントリストの表示 if(have_comments()): ?> <ol class="commets-list"> <?php wp_list_comments(); ?> </ol> <?php endif; // ここからコメントフォーム $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" maxlength="245"' . $aria_req . $html_req . ' /></p>', 'email' => '', 'url' => '', ), 'comment_field' => '<p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p>', 'comment_notes_before' => '', 'comment_notes_after' => '', 'title_reply' => 'お気軽にコメントをどうぞ。', ); comment_form($comments_args); // コメントフォームここまで ?> </div> |
13行目からがコメントフォームを表示する部分ですが、これは先ほど single.php に追加していたソースコードと同じものです。デフォルトでスタイルシートのカスタマイズをしていなければ、次のように表示されるはずです。
出力される HTML は次のようになります。
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 26 27 28 29 30 31 32 33 34 35 36 37 38 | <H2 id="comments">コメント</H2> <OL class="commets-list"> <LI class="comment even thread-even depth-1" id="comment-5"> <DIV class="comment-body" id="div-comment-5"> <DIV class="comment-author vcard"> <CITE class="fn">雪平鍋</CITE><SPAN class="says">より:</SPAN> </DIV> <DIV class="comment-meta commentmetadata"> <A href="http://localhost/wordpress/2017/01/20/%e3%83%86%e3%82%b9%e3%83%881/#comment-5">2017年1月20日 6:38 PM</A> </DIV> <P>和風鍋であり、蓋のない中程度の深さの片手鍋。汁の注ぎ口が左右両方に付いている場合が多い。煮物、茹で物、出汁を作る時など、鍋を利用する日本料理で使用される事が多い一種の万能鍋である。</P> </DIV> </LI><!-- #comment-## --> <LI class="comment odd alt thread-odd thread-alt depth-1" id="comment-6"> <DIV class="comment-body" id="div-comment-6"> <DIV class="comment-author vcard"> <CITE class="fn">天ぷら鍋</CITE><SPAN class="says">より:</SPAN> </DIV> <DIV class="comment-meta commentmetadata"> <A href="http://localhost/wordpress/2017/01/20/%e3%83%86%e3%82%b9%e3%83%881/#comment-6">2017年1月20日 6:38 PM</A> </DIV> <P>揚げ物に用いられる鍋。揚げ油を切るための天ぷら網や油はねを防止するためのフードなどを有する。温度計などが付属するものもある。</P> </DIV> </LI><!-- #comment-## --> <LI class="comment even thread-even depth-1" id="comment-7"> <DIV class="comment-body" id="div-comment-7"> <DIV class="comment-author vcard"> <CITE class="fn">ジンギスカン鍋</CITE><SPAN class="says">より:</SPAN> </DIV> <DIV class="comment-meta commentmetadata"> <A href="http://localhost/wordpress/2017/01/20/%e3%83%86%e3%82%b9%e3%83%881/#comment-7">2017年1月20日 6:39 PM</A> </DIV> <P>ジンギスカン専用の浅鍋。肉を焼くために中央が丸く盛り上がっており、余分な脂が落ちるように穴が開いているものもある。</P> </DIV> </LI><!-- #comment-## --> </OL> |
コメントリストをカスタマイズするにはどうしたらよいのでしょうか。例えば、次のようにカスタマイズしたいとします。
先ほど作成した comment.php の8行目を修正します。
1 | <?php wp_list_comments('callback=custom_comment_list'); ?> |
wp_list_comments テンプレートタグに引数として渡しているものは独自関数です。callback=○○○○○ の書式で記述します。○○○○○ の部分は関数名ですが、これは自分で好きにつけることができます。関数本体は function.php に記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function custom_comment_list($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?> <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>"> <div class="comment_meta"> <span class="author"> 名前 ： <?php echo get_comment_author(); ?> </span> <span class="post_date"> <?php echo get_comment_date() ?> <?php echo get_comment_time() ?> </span> </div> <?php comment_text() ?> </li> <?php } |
最後にスタイルシートでデザインをカスタマイズすれば完成です。
コメントリストのカスタマイズとして、wp_list_comments テンプレートタグに引数として渡すことのできるものは他にもあります。こちらがわかりやすかったのでオススメです。
wp_list_comments – Lovelog+*WordPress テンプレートタグのコメントタグ | Lovelog+*
Comment