WordPressのコメントとトラックバックを分けてカスタマイズ

かなり長いことああでもないこうでもないとやっていましたが、やっと形になったっぽいです。2.X系でのカスタマイズ方法は良く目にするんですが、3.X系だとちょっと違うようで悩み抜きました。

<?php comments_template(); ?>

今のデザインだとこんな感じ。

CSSで見た目を変えることはできていても、コメントとトラックバック（ピンバック）を分けたり、もうちょっとカスタマイズしたいな…っていう気持ちがむくむくと。

具体的に言えば、こんな風に。というわけで、やってみます！

comments.phpを作成

まっさらなエディタにこんな感じで書いて、comments.phpという名前で保存。

<?php if (isset($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
	die ('Please do not load this page directly. Thanks!');
if ( post_password_required() ) { ?>
	<p class="nocomments">This post is password protected. Enter the password to view any comments.</p>
<?php return; } ?>

<?php if (have_comments()): ?>
	<div id="comping">
	<?php $comments_cnt=get_comment_only_number(); ?>
	<!-- コメント -->
	<?php if ($comments_cnt > 0) { ?>
		<h3><?php echo $comments_cnt; ?>件のコメント</h3>
		<ul class="commentlist">
			<?php wp_list_comments('type=comment&callback=mytheme_comment'); ?>
		</ul>
	<?php } ?>
	<!-- トラックバック -->
	<?php if (get_comments_number()-$comments_cnt > 0) { ?>
		<h3><?php echo get_comments_number()-$comments_cnt; ?>件のトラックバック</h3>
		<ul class="pinglist">
			<?php wp_list_comments('type=pings&callback=mytheme_pings'); ?>
		</ul>
	<?php } ?>
	</div>
<?php endif; ?>

1～5行目は、直接アクセスを禁止したり保護をかける時用。そこから下は、have_comments()でコメント/トラックバック（ピンバック）があるときだけ出力されるようになっています。

これで、さっきのsingle.phpのcomments_template();がこちらを呼び出してくれるようになります。でもこれだけじゃ動きません！いくつか関数を呼び出しているので、functions.phpに記述が必要です。

コメント数だけを取得する関数

9行目のget_comment_only_number();で呼び出す関数をfunctions.phpへ記述。

function get_comment_only_number() {
	global $wpdb, $post;
	$cnt = $wpdb->get_var(
		"SELECT count(*) FROM $wpdb->comments WHERE comment_post_ID = $post->ID AND comment_type = '' AND comment_approved = '1';"
	);
	return $cnt;
}

• 後から知ることが多いWordPressお役立ちスニペット9つ -Webデザインレシピ

Webデザインレシピさんのコードを参考にさせていただき、手を加えました。WPデータベースのwp_commentsテーブルの情報を取ってきているわけですが、トラックバックやピンバックはcomment_typeフィールドに’trackback’, ‘pingback’が入り、通常コメントは値なしとのことなので、それを条件にします。あとcomment_approvedが1で「承認済み」です。

コメント部分のhtmlを成形する関数

14行目、callback=mytheme_commentで呼び出す関数を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(); ?>" class="comment-body">
		<?php echo get_avatar( $comment, 40 ); ?>
		<?php printf(__('<cite class="fn">%s</cite>'), get_comment_author_link()) ?>
		<?php if ($comment->comment_approved == '0') : ?>
			<p class="wait">*このコメントはただいま承認待ちです*</p>
		<?php endif; ?>
		<div class="comment-meta">
			<?php printf(__('%1$s'), get_comment_date() . ' ' . get_comment_time()) ?><?php edit_comment_link(__('(Edit)'),'  ','') ?>
		</div>
		<?php comment_text() ?>
		<div class="reply">
			<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
		</div>
	</div>
<?php }

トラックバック部分のhtmlを成形する関数

21行目、callback=mytheme_pingsで呼び出す関数をfunctions.phpへ記述。

function mytheme_pings($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment; ?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
	<div id="comment-<?php comment_ID(); ?>" class="comment-body">
		<?php printf(__('%s'), get_comment_author_link()) ?>
		<div class="comment-meta">
			<?php printf(__('%1$s'), get_comment_date()) ?><?php edit_comment_link(__('(Edit)'),'  ','') ?>
		</div>
		<?php comment_text() ?>
	</div>
<?php }

※現在当サイトで使っているテーマでは、9行目のコメント部分を抜いてあります。

• WP3.3-Theme⑦comments.php -Ma-TaRi
• コメントの表示をカスタマイズする -memocarilog

こちらのサイトのコードを参考に作らせて頂きました、ありがとうございます！

忘れちゃいけないstyle.css

PHPによってはき出してもらったhtmlを装飾します。

/*全体*/
#comping h3{
	padding:5px;
	margin-top:40px;
	}
#comping p{margin-bottom:15px;}
#comping p.wait{margin:5px; color:#F00;}
#comping .comment-meta,
#comping .comment-meta a{
	margin-bottom:10px;
	color: #999;
	font-size:85%;
	}
#comping .comment-meta a:hover{color: #ccc;}

/*コメント用*/
.commentlist{margin-bottom:30px;}
	.commentlist li {
		background: url(images/line.png) no-repeat;
		padding:15px 0 0 55px;
		position:relative;
		}
	.commentlist .avatar {
		background:#fff;
		border:1px solid #ddd;
		left:0;
		margin:0 16px 0 0;
		padding:3px;
		position:absolute;
		top:15px;
		}
	.commentlist .reply a{
		position: absolute;
		top: 15px;
		right: 0;
		padding: 2px 10px 2px 20px;
		background: url(images/icon_com.gif) no-repeat left 7px;
		font-size: 85%;
		color: #333;
		text-decoration: none;
		}
		.commentlist .reply a:hover {color: #f66;}

/*トラックバック用*/
.pinglist{margin-bottom:30px;}
	.pinglist li {
		background: url(images/line.png) no-repeat;
		padding:15px 0 0 10px;
		position:relative;
		}

さて、これでこんな感じになったと思います。でも、このままじゃ投稿フォームがありません。

投稿フォームを追加

<?php comment_form(); ?>

と記述するだけであら素敵！投稿フォームが自動で出力されます！

されるんですが…このままだとなんだかちょっともっさり感…。こちらもカスタマイズしたいところです。

さっきのcomments.phpの後ろに追記

<?php $defaults = array(
	'comment_notes_before' => '',
	'fields' => array(
		'author' => '<p class="comment-form-author">' . '<label for="author">' . ( $req ? '<span class="required">*</span>' : '' ) . __( 'Name' ) . '</label><br />' .
			'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
		'email'  => '<p class="comment-form-email"><label for="email">' . ( $req ? '<span class="required">*</span>' : '' ) . __( 'メールアドレス（公開されません）' ) . '</label><br />' .
			'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
		'url'	=> '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label><br />' .
			'<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>'),
	'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><br /><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
	'comment_notes_after'  => ''
); ?>

<?php comment_form( $defaults ); ?>

comment_form()は元々$defaults = array()という要素を持っているので、その中の変えたいところだけ設定して、comment_form( $defaults )として読み込んであげるとそこだけ上書きされますよー、ということだと思います。

分かりにくいとは思いますが、私は上記のコードで、

• フォーム上下のコメント（公開されません・必須ですとか、タグが使えます）を消す
• 各フォームのラベル（名前・メールアドレスなど）をちょこっといじる
• ラベルとフォームの間に改行

ということをしています。

• WordPressのテンプレートタグを使ってコメントフォームをカスタマイズする方法 -Oxy notes
• WordPress：コメントフォームをカスタマイズする方法 | NxWorld

こちらのサイトが分かりやすいです！

こんな感じになりました！

時間はかかったけど勉強になりました

そもそもWordPressではコメントとトラックバックの区別がないと言ってるのに、どうにかして分けたいという我侭w どなたかの参考になれたら幸いです。むしろ間違ってるところとかありましたらご連絡頂けると嬉しいです。