DN*BLOG

コメントの表示レイアウトを変えてみました。

アバターを表示するようにして、そのアバターから吹き出しを作りました。
よく見るレイアウトですね。

で、アバターは「Gravatar」に登録してある方が表示されるようになっています。
登録していない方は、上記画像の白い影の画像が表示されます。

ココまでは良かったんですが、WordPressのコメント欄ってトラックバックもピングバックも一緒に表示されちゃうんですよね。（もしかして、設定ある？？？？）

前からコレは区別がしづらいと思っていたんですけど、手つかずでした。
ついでに無理矢理ですけど、区別できるようにしてみましたのでメモ。

コメント、トラックバック、ピングバックを区別する。

トラックバックとピンバックはアバターの表示が出来ないのでアバター表示欄には何も表示されていない状態です。
なので、下記画像のようにしました。

すっごい簡単なアバターですけど・・・。

トラックバックだったら上段のアバター、ピングバックだったら下段のアバターが表示されます。
ココからがキモです。
まずはソースをご覧下さい。

CSSソース

.avatarBox span.typeComment {
	display:none;
}

.avatarBox span.typeTrackback,
.avatarBox span.typePingback {
	width:32px;
	height:0;
	display:block;
	overflow:hidden;
	padding-top:32px;
}

.avatarBox span.typeTrackback {
	background:url(../img/ico_tb.jpg) no-repeat 0 0;
}

.avatarBox span.typePingback {
	background:url(../img/ico_pb.jpg) no-repeat 0 0;
}

XHTMLソース

<div class="avatarBox">
	<?php echo get_avatar( $comment, 32 ); ?>
	<span class="<?php comment_type('typeComment','typeTrackback ','typePingback'); ?>">comment type</span>
</div>

CSSは画像置換の記述です。

XHTMLが重要部分です。
まず、「class=”avatarBox”」のdivがアバターを表示させているボックスになっています。
「<?php echo get_avatar( $comment, 32 ); ?>」このコードはアバターを表示するコードです。コメントの場合、アバターを登録しているしていないに関わらず表示されます。
「<span class=”<?php comment_type(‘typeComment’,'typeTrackback ‘,’typePingback’); ?>”>comment type</span>」このコードがキモになっています。
「<?php comment_type(‘typeComment’,'typeTrackback ‘,’typePingback’); ?>」このコードはコメントの種類を区別します。

• typeCommentはコメントの場合に表示する文字列です。
• typeTrackbackはトラックバックの場合に表示する文字列です。
• typePingbackはピングバックの場合に表示する文字列です。

本来でしたら、コメントが投稿された時に表示される名前やテキスト等と一緒に表示させる時に使うコードなのですが、それを利用してクラス名に割当て、それぞれのコメントタイプを区別しCSSで画像の表示をしています。

普通のコメントの場合は、このブロック要素になっているspanは必要ないので「display:none;」で非表示に。
トラックバックの場合は、「span.typeTrackback」が適用され、トラックバックのアバターが表示されます。
ピングバックもトラックバックと同様ですね。

このようなやり方で無理矢理、コメント、トラックバック、ピングバックの区別がわかるようにしました。

長々とすいません。
わかりづらかったらコメントでもいいので質問受付まーす。