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

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

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


2014/5/29追記

こちらの記事は2012年に書かれたものなので情報が古いです。

Ver3.9.1現在では single.php にて

<?php comments_template(); ?>

という記述でコメントを読み込みますが、テーマ内に comments.php が存在する場合はそちらが優先され、存在しない場合は wp-includes/theme-compat/ 内の comments.php を読み込んでいます。カスタマイズしたい場合は、こちらのファイルをコピーして自テーマ内に入れて、そちらを変更していくのが良いと思います。

以下、当時の情報ですがご参考になりそうなところがあれば幸いです。

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

120427-1

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

120427-2

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

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で「承認済み」です。

2020/9/10追記

上記のコードで取得できなくなっていたので、こちらのサイトを参考にさせてもらって修正しました! コメント数だけ取得できるようになったんですね~

コメント部分の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行目のコメント部分を抜いてあります。

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

忘れちゃいけない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;
		}

120427-3

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

投稿フォームを追加

先程のcomments.phpの一番最後に、
<?php comment_form(); ?>

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

120427-4

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

さっきの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 )として読み込んであげるとそこだけ上書きされますよー、ということだと思います。

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

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

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

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

120427-5

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

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

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

公開日:2012/04/27
更新日:2020/09/10

4件のピンバック

  1. WordPressテーマ作成に役立つ記事&学んだことまとめ(テーマ作成編)

    もはや全く新しい話でも何でもないのですが、先月オリジナルテーマを作成してサイトのデザインを変更しました。 WordPressのテーマ作成は自分にとってはとても難しく、色々なブログの…

  2. […] WordPressのコメントとトラックバックを分けてカスタマイズ *Ateitexe […]

  3. […] これは、*youさんの記事(WordPressのコメントとトラックバックを分けてカスタマイズ *Ateitexe)を参考に、ちょっと自分用にカスタマイズして利用させていただきました。 […]

  4. […] す。 このメソッドにコールバックを渡せば、出力用のhtmlをカスタマイズできます。 カスタマイズの方法は以下が詳しいです。 WordPressのコメントとトラックバックを分けてカスタマイズ […]

4件のコメント

  1. Oxy より:

    とりあげていただいてありがとうございます。
    足跡残しと、動作テストにw

    • you より:

      動作テスト、ありがとうございます!
      ちゃんと動いてるでしょうかw

  2. ほしゃしゃ より:

    ありがとうございました!助かりました!
    twentytwelveのコメントをカスタマイズしてみたものの、どうもしっくりいかず。

    • *you より:

      ほしゃしゃさん、コメントありがとうございます!
      お役に立てて光栄ですー(*´ω`*)


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)