シンプルな返信機能付きコメントフォームと、一覧ページにコメント一覧を設置する
手っ取り早く、シンプルな返信機能付きのコメントが必要なときに使える。
完成形はこちら。
投稿ページがこれで、
トップページなどに設置する一覧表示がこちら。
下記条件にてカスタマイズした。
- アバターなし
- 入力欄は名前、メアド、本文の3つのみ
- モデレーション(承認待ち)処理なし
- 返信されたコメントは全て共通で、左側に余白(margin-left: 1em;)
骨組みテーマ・Bonesからファイルとコード流用
「Bones」公式サイトから一式をダウンロードして、
- comments.php
- functions.php
だけ残し他は全て削除。
※WordPressテーマをBonesで構築していなくても問題なし。
single.php 呼び出しコードを記載
divとidは後ほどCSSで整形する用。
1 2 3 | <div id="block-comment"> <?php comments_template(); ?> <!-- /#block-comment --></div> |
comments.php カスタマイズ
元コードを下記に修正した。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?php if (post_password_required()) { return; } ?> <?php if (have_comments()) : ?> <h6 id="comments-title"><?php comments_number( __('No Comments', 'bonestheme'), __('1 コメント', 'bonestheme'), __('% コメント', 'bonestheme'));?></h6> <section class="commentlist"> <?php wp_list_comments(array( 'style' => 'div', 'short_ping' => false, 'callback' => 'bones_comments', 'type' => 'all', 'reply_text' => __('返信', 'bonestheme'), 'reverse_top_level' => null )); ?> <!-- /.commentlist --></section> <?php endif; ?> <?php comment_form(); ?> |
functions.php コメント用コードをカスタマイズ
元コードを下記に修正した。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function bones_comments($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?> <div id="comment-<?php comment_ID(); ?>" <?php comment_class('cf'); ?>> <article> <header> <?php $bgauthemail = get_comment_author_email(); ?> <?php printf(__('<cite class="comment-author">%1$s</cite> %2$s', 'bonestheme'), get_comment_author_link(), edit_comment_link(__('(Edit)', 'bonestheme'),' ','') ) ?> <time><?php comment_date(__('Y/m/d', 'bonestheme')); ?> <?php comment_time(__('H:i:s', 'bonestheme')); ?></time> </header> <section> <?php comment_text() ?> </section> <?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?> </article> <?php } |
functions.php コード追加
入力欄の順番を名前・メアド・本文に
1 2 3 4 5 6 7 | function move_comment_field_to_bottom($fields) { $comment_field = $fields['comment']; unset($fields['comment']); $fields['comment'] = $comment_field; return $fields; } add_filter('comment_form_fields', 'move_comment_field_to_bottom'); |
URL入力欄を削除
1 2 3 4 5 | function remove_comment_url_fields($fields) { unset($fields['url']); return $fields; } add_filter('comment_form_default_fields', 'remove_comment_url_fields'); |
メールアドレス欄を空白に、名前欄にプレースホルダ
1 2 3 4 5 6 7 8 | function remove_comment_email_value($fields) { $fields['email'] = '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="email" name="email" type="text" value="" size="30"></p>'; $fields['author'] = '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) . '<input id="author" name="author" type="text" value="" size="30" placeholder="名無しの紳士"></p>'; return $fields; } add_filter('comment_form_default_fields', 'remove_comment_email_value'); |
デフォルト文言の変更
1 2 3 4 5 6 7 8 9 | function custom_comment_form($args) { $args['title_reply'] = 'コメントを投稿する'; $args['comment_notes_before'] = '<p class="comment-notes">※メールアドレスは管理人だけに届き、サイトには表示されません。<br>※「送信する」ボタンは、一度だけクリックしてお待ちください。</p>'; $args['comment_field'] = '<p class="comment-form-comment"><label for="comment">' . _x('本文', 'noun') . '</label><textarea id="comment" name="comment" aria-required="true"></textarea></p>'; $args['label_submit'] = '送信する'; $args['cancel_reply_link'] = '返信をキャンセル'; return $args; } add_filter('comment_form_defaults', 'custom_comment_form'); |
投稿者名が無記名の場合のデフォルト名
1 2 3 4 5 6 7 | function rename_anonymous($author = '', $comment_ID = 0, $comment) { if (empty($comment->comment_author) && empty($comment->user_id)) { $author = '名無しの紳士'; } return $author; } add_filter('get_comment_author', 'rename_anonymous', 20, 3); |
リンクを別窓に
1 2 3 4 5 | function autoblank($text) { $return = str_replace('<a', '<a target="_blank"', $text); return $return; } add_filter('comment_text', 'autoblank'); |
HTML入力を無効化
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function custom_comment_tags($data) { global $allowedtags; unset($allowedtags['a']); unset($allowedtags['abbr']); unset($allowedtags['acronym']); unset($allowedtags['b']); unset($allowedtags['div']); unset($allowedtags['cite']); unset($allowedtags['code']); unset($allowedtags['del']); unset($allowedtags['em']); unset($allowedtags['i']); unset($allowedtags['q']); unset($allowedtags['strike']); unset($allowedtags['strong']); return $data; } add_filter('comments_open', 'custom_comment_tags'); add_filter('pre_comment_approved', 'custom_comment_tags'); |
投稿ページのコメントフォームをCSSで整形
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | #block-comment { text-shadow: 0 1px white; margin-bottom: 40px; } #block-comment header { position: static; margin-bottom: 0; z-index: 1; } #block-comment a { color: #167ac6; } /* n コメント */ #comments-title { font-size: 1.17rem; font-weight: normal; } /* コメント入力フォームのブロック */ .comment-respond { padding-top: 30px; border-top: 1px solid #fafafa; } /* コメントを投稿する */ #reply-title { color: #333; font-size: 1.17rem; margin-bottom: 5px; padding: 0; border: 0; background: none; } /* コメントをキャンセル */ #reply-title small { margin-left: 10px; } /* 注意書き */ .comment-notes { font-size: 15px; line-height: 1.3; } /* 名前、メールアドレス、本文 */ .comment-form label { display: block; margin-bottom: 3px; } /* フォームブロック */ .comment-form p { margin-bottom: 10px; } /* フォームパーツ */ .comment-form input, .comment-form textarea { font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", "Osaka", sans-serif; } /* 名前、メアド、本文 */ .comment-form p input, .comment-form textarea { padding: 3px 5px; } @media screen and (max-width: 600px) { .comment-form p input, .comment-form textarea { width: 90%; } } /* 本文 */ .comment-form textarea { min-height: 150px; margin-bottom: 5px; } @media screen and (min-width: 601px) { .comment-form textarea { width: 500px; } } /* 送信ボタン */ .form-submit input[type="submit"] { cursor: pointer; font-size: 15px; padding: 10px 30px; } /* 投稿されたコメントブロック */ .comment { line-height: 1.5; border-top: 1px solid #fafafa; } .comment:first-of-type { border-top: 0; } .comment article { margin-top: 13px; } /* コメント文 */ .comment p:not(:first-child) { margin-top: 12px; } /* コメント投稿者名 */ .comment-author { font-style: normal; margin-right: 7px; } /* 返信コメントのブロック */ .depth-1 { padding-bottom: 13px; border-top: 1px solid #fafafa; border-bottom: 1px solid #d7d6d6; } .depth-2 { margin-left: 1em; } |
トップページなどに投稿コメントの一覧表示
全てのコメントを表示させたいときは、number を0に。
HTMLタグは適当。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <section id="block-comment-index"> <h4>投稿されたコメント</h4> <?php $comments = get_comments(array('status' => 'approve', 'number' => 3)); foreach($comments as $comment): $post = get_post($comment->comment_post_ID); ?> <article> <a href="<?php the_permalink(); ?>"><ul> <li><?php the_post_thumbnail(); ?></li> <li><?php the_title(); ?></li> </ul></a> <dl> <dt><?php comment_author_link(); ?> <?php comment_date('Y/m/d'); ?> <?php comment_time('H:i:s'); ?></dt> <dd><?php comment_text(); ?></dd> </dl> </article> <?php endforeach; ?> <!-- /#block-comment-index --></section> |
一覧表示をCSS整形
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 | #block-comment-index { text-shadow: 0 1px white; line-height: 1.5; margin-bottom: 30px; } #block-comment-index h4 { font-size: 20px; font-weight: normal; margin-bottom: 5px; } #block-comment-index article { padding: 10px 0; border-top: 1px solid #fafafa; border-bottom: 1px solid #d7d6d6; } #block-comment-index article:first-of-type { padding-top: 0; border-top: 0; } #block-comment-index article:last-of-type { border-bottom: 0; } #block-comment-index li:first-child { max-width: 200px; float: left; margin-right: 10px; } #block-comment-index a { color: #167ac6; } |
header.php JS呼び出しコード追加
いつからかWP標準仕様となった。
「返信」をクリックすると、ページを再読込せずコメントフォームがその場に移動してくる。
1 2 3 | <head> <?php if (is_singular()) wp_enqueue_script("comment-reply"); ?> </head> |
コメントを投稿する