コメント欄をスレッド掲示板風にする【WordPress】

2015/05/06

code

単純なリスト形式のコメント欄にしたほうが、見やすいのではないか？ということでコメント欄をカスタマイズしてみました。

参考にしたサイト

・テンプレートタグ/wp list comments - WordPress Codex 日本語版
・WordPressのdefaultテーマを改造してコメント欄を作る：後編（コメント一覧のカスタマイズ） - 残像ブログ

１つ目のリンク先のサンプルが非常に参考になります。多くのサイトはこれを原型にしているかと思います。２つめのリンクと合わせて読めば分かりよいかと思います。

サンプルコード

<?php 
if ( post_password_required() ) {
	return;
}
?>
<div id="comments" class="comments-area">
<?php
if(have_comments()):
?>
  <h3 class="comments-title">『<?php the_title(); ?>』へのコメント</h3>
  <ol class="commets-list">
    <?php wp_list_comments('callback=my_list_comments'); //コメントの出力をカスタマイズする?>
  </ol>
<?php
endif;
?>
	<div id="comment-form-more">
	<?php // コメント入力欄
		comment_form();
	?>
	</div>
</div><!-- /comment area -->

comments.phpという名前で上記を保存してください。既存のテンプレートを置き換えても動作するかと思います。

上記を動作するためには、my_list_commentsという関数が必要なので、それをfunctions.phpに追記します。その関数のなかで、コメントリストのレイアウト（出力）を記述しているので、そこでカスタマイズが出来ます。

テンプレートを作成して公開する予定なら、「post_password_required」というロジックはいれておいたほうがよいかと思います。記事がパスワード保護されている時に、コメントのところだけコールされたら見えてしまうとかそういうのがあるのかもと思います。WPの標準のテーマをみると入っているかと思います。

function my_list_comments($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment; ?>
    <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
    <div id="comment-<?php comment_ID(); ?>">
 
    <div class="comment-listCon">
        <div class="comment-info vcard">
			<span class="comment-author">
            	<?php echo get_avatar( $comment, 32 );//アバター画像 48?>
            	<?php printf(__('名前:<cite class="fn">%s<span class=""></span></cite> :'), get_comment_author_link()); //投稿者の設定 ?>
			</span>
	        <span class="comment-datetime">投稿日：<?php printf(__('%1$s at %2$s'), get_comment_date('Y/m/d'),  get_comment_time('H:i')); //投稿日の設定 ?></span>
            <span class="comment-edit"><?php edit_comment_link(__('Edit'),'  ',''); //編集リンク ?></span>
        </div>
        <?php if ($comment->comment_approved == '0') : //コメント承認前 ?>
            <em><?php _e('Your comment is awaiting moderation.') ?></em>
        <?php endif; ?>
        <div class="comment-text">
        <?php comment_text(); //コメント本文 ?>
        </div>
    </div>
</div>
<?php
}

上記をfunctions.phpに追記

スレッド表示とかは使わないので、上記のような短いロジックになります。

.comments-area .comment-author{
  color:#008800;
}
.comments-area .comment-author a{
  color:#0000ff;
}

.comments-area  .comment-info{
  font-weight:bold;
}

.comments-area .comment-author{
  font-weight:bold;
}
 
.comments-area img.avatar {
  float:right;
  margin-right:0;
  margin-left:10px;
    display:none;
}
.comments-area .comment-text{
  font-size:14px;
  padding-right:30px;
}

/*コメントタイトル*/
.comments-title{
	font-size: 16px;
	font-weight: bold;
	padding: 10px;
	margin-bottom: 10px;
	background-color: #fff;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #666;
	border-bottom-color: #666;
}

スタイルシートはこんな感じにしています。
アバターは、「display:none;」で消してます。

氏名欄：comment-author
コメント：comment-text
ですので、色や文字の大きさを変更すると、それらしくなるかと思います。　

その他

・Testing Tool — Google Developers

｢vcard｣?あたりは残しておいたほうがよいかなと思ってそうしました。上記ツールで動作しているかどうかはわかるかと思います。

コメントもSEOの評価に含まれるようなので、コメント数やコメントした人の情報のもとになるかもと思うからというのもあります。あとは、WP標準のテンプレートとなるべく同じにしておいたほうが無難だろうとは思います。

参考：【実験企画後編】WordPressのpost_classタグを消さなくても構造化データエラーは消せます。そこで構造化データについて少し注目してみましょう | マイペースクリエイターの覚え書き

参考にしたサイト

サンプルコード

その他

関連記事