WordPressのコメント欄をスレッド掲示板風に変更する

カスタム

wpphp_comment_theme

WordPressには普通のブログと同様にコメント機能がありますが、
このコメント表示をスレッド掲示板風にカスタマイズする方法を紹介します。

テーマ内に functions.php を用意する

現在使っているテーマの「functions.php」を用意します。
無ければ「functions.php」をテーマフォルダ内に作成します。

functions.php にメソッドを追加する

コメント欄のテンプレートを「functions.php」に追加します。

// コメント一覧カスタマイズ
function mytheme_comment($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment; ?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
		<div id="comment-<?php comment_ID(); ?>">
		<?php if ($comment->comment_approved == '0') : ?>
			<em><?php _e('Your comment is awaiting moderation.') ?></em>
			<br />
		<?php endif; ?>

			<div class="comment-meta commentmetadata">
				<?php 
				if ( function_exists('gtcn_comment_numbering') ):
					echo gtcn_comment_numbering($comment->comment_ID, $args);
				endif; ?>: <?php 
				$user = get_userdata($comment->user_id);
				$author = $user->user_login;
				
				printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time('H時i分')) 
				?> ID:<?php
				$ip01 = get_comment_author_IP();
				$ip02 = get_comment_date(j);
				$ip03 = ip2long($ip01);
				$ip04 = ($ip02) * ($ip03);
				echo mb_substr(base64_encode($ip04), 0, 9);
				
				edit_comment_link(__('(Edit)'),'  ','') ?> 
			</div>
			<div class="comment-body">
				<?php comment_text() ?> 
			</div>
		</div>
<?php //WordPress は子要素を追加した後に、自動で追加するため</li>は不要
}

コメント欄のテンプレートを変更する

コメント欄のテンプレートは「comments.php」を使用しているので、
このファイルを修正します。
wp_list_comments() の引数のcallbackに上で作成したメソッド名を指定します。

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

	<ul class="comment-list">
		<?php wp_list_comments('type=comment&callback=mytheme_comment'); ?> 
	</ul>

	<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : ?>
	<div class="comment-navigation clearfix">
		<div class="nav-previous"><?php previous_comments_link('<< 前へ'); ?></div>
		<div class="nav-next"><?php next_comments_link('次へ >>'); ?></div>
	</div>
	<?php endif; // Check for comment navigation. ?>

<?php else: ?>
	コメントはまだありません。
<?php endif; // have_comments() ?>

確認してみる

うまくいけばコメント一覧がこのような形式で表示されるはずです。

1. テスト 2016年01月01日 15:00 ID:XXXXXX
コメントの本文です。

カスタム

関連記事