シンプルな返信機能付きコメントフォームと、一覧ページにコメント一覧を設置する

手っ取り早く、シンプルな返信機能付きのコメントが必要なときに使える。

完成形はこちら。
投稿ページがこれで、

トップページなどに設置する一覧表示がこちら。

下記条件にてカスタマイズした。

アバターなし
入力欄は名前、メアド、本文の3つのみ
モデレーション（承認待ち）処理なし
返信されたコメントは全て共通で、左側に余白（margin-left: 1em;）

骨組みテーマ・Bonesからファイルとコード流用

「Bones」公式サイトから一式をダウンロードして、

comments.php
functions.php

だけ残し他は全て削除。
※WordPressテーマをBonesで構築していなくても問題なし。

single.php 呼び出しコードを記載

divとidは後ほどCSSで整形する用。

<div id="block-comment">
<?php comments_template(); ?>
<!-- /#block-comment --></div>

<?php comments_template(); ?>

</div>

comments.php カスタマイズ

元コードを下記に修正した。

<?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(); ?>

<?php

if (post_password_required()) {

return;

}

<?php if (have_comments()) : ?>

<?php

wp_list_comments(array(

'style' => 'div',

'short_ping' => false,

'callback' => 'bones_comments',

'type' => 'all',

'reply_text' => __('返信', 'bonestheme'),

'reverse_top_level' => null

));

</section>

<?php endif; ?>

<?php comment_form(); ?>

functions.php コメント用コードをカスタマイズ

元コードを下記に修正した。

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
}

function bones_comments($comment, $args, $depth) {

$GLOBALS['comment'] = $comment; ?>

<?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'),' ','') ) ?>

</header>

<?php comment_text() ?>

</section>

<?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>

</article>

<?php

}

functions.php コード追加

入力欄の順番を名前・メアド・本文に

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');

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入力欄を削除

function remove_comment_url_fields($fields) {
  unset($fields['url']);
  return $fields;
}
add_filter('comment_form_default_fields', 'remove_comment_url_fields');

function remove_comment_url_fields($fields) {

unset($fields['url']);

return $fields;

}

add_filter('comment_form_default_fields', 'remove_comment_url_fields');

メールアドレス欄を空白に、名前欄にプレースホルダ

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');

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');

デフォルト文言の変更

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');

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');

投稿者名が無記名の場合のデフォルト名

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);

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);

リンクを別窓に

function autoblank($text) {
  $return = str_replace('<a', '<a target="_blank"', $text);
  return $return;
}
add_filter('comment_text', 'autoblank');

function autoblank($text) {

$return = str_replace('<a', '<a target="_blank"', $text);

return $return;

}

add_filter('comment_text', 'autoblank');

HTML入力を無効化

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');

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で整形

#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 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;
}

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 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タグは適当。

<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>

<h4>投稿されたコメント</h4>

<?php

$comments = get_comments(array('status' => 'approve', 'number' => 3));

foreach($comments as $comment):

$post = get_post($comment->comment_post_ID);

</ul></a>

<dl>

</dl>

</article>

<?php endforeach; ?>

</section>

一覧表示をCSS整形

#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;
}

#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標準仕様となった。
「返信」をクリックすると、ページを再読込せずコメントフォームがその場に移動してくる。

<head>
<?php if (is_singular()) wp_enqueue_script("comment-reply"); ?>
</head>

<head>

<?php if (is_singular()) wp_enqueue_script("comment-reply"); ?>

</head>

鼻ちょうちん

シンプルな返信機能付きコメントフォームと、一覧ページにコメント一覧を設置する

骨組みテーマ・Bonesからファイルとコード流用

single.php 呼び出しコードを記載

comments.php カスタマイズ

functions.php コメント用コードをカスタマイズ

functions.php コード追加

入力欄の順番を名前・メアド・本文に

URL入力欄を削除

メールアドレス欄を空白に、名前欄にプレースホルダ

デフォルト文言の変更

投稿者名が無記名の場合のデフォルト名

リンクを別窓に

HTML入力を無効化

投稿ページのコメントフォームをCSSで整形

トップページなどに投稿コメントの一覧表示

一覧表示をCSS整形

header.php JS呼び出しコード追加

コメントを投稿する返信をキャンセル

シンプルな返信機能付きコメントフォームと、一覧ページにコメント一覧を設置する

骨組みテーマ・Bonesからファイルとコード流用

single.php 呼び出しコードを記載

comments.php カスタマイズ

functions.php コメント用コードをカスタマイズ

functions.php コード追加

入力欄の順番を名前・メアド・本文に

URL入力欄を削除

メールアドレス欄を空白に、名前欄にプレースホルダ

デフォルト文言の変更

投稿者名が無記名の場合のデフォルト名

リンクを別窓に

HTML入力を無効化

投稿ページのコメントフォームをCSSで整形

トップページなどに投稿コメントの一覧表示

一覧表示をCSS整形

header.php JS呼び出しコード追加

コメントを投稿する 返信をキャンセル

コメントを投稿する返信をキャンセル