カテゴリー表示モード:標準 | RC2

ホーム > CSS | WordPress > コメント欄のカスタマイズ

コメント欄のカスタマイズ

コメント表示のカスタマイズニコニコプレス(春)ver.1.3 のコメント表示を少しだけ自分好みにカスタマイズ。
コアを弄らなくても comment_author_link の分岐を functions.php とかに別に作れそうだけど、思ったとおりに動くものが作れなかったので、強引に弄ってみた。

wp-includes/comment-template.php
urlがある場合、画像リンクになるよう変更。

function get_comment_author_link() {
	/** @todo Only call these functions when they are needed. Include in if... else blocks */
	$url    = get_comment_author_url();
	$author = get_comment_author();

	if ( empty( $url ) || 'http://' == $url )
		$return = $author;
	else
		$return = "$author <a class='home' href='$url' rel='external nofollow' class='url'></a>";
	return apply_filters('get_comment_author_link', $return);
}

元ソース

function get_comment_author_link() {
	/** @todo Only call these functions when they are needed. Include in if... else blocks */
	$url    = get_comment_author_url();
	$author = get_comment_author();

	if ( empty( $url ) || 'http://' == $url )
		$return = $author;
	else
		$return = "<a href='$url' rel='external nofollow' class='url'>$author</a>";
	return apply_filters('get_comment_author_link', $return);
}

functions.php
sandbox_commenter_link からはアバター画像だけ表示に変更。

function sandbox_commenter_link() {
	$commenter = get_comment_author_link();
	if ( ereg( '<a[^>]* class=[^>]+>', $commenter ) ) {
		$commenter = ereg_replace( '(<a[^>]* class=[\'"]?)', '\\1url ' , $commenter );
	} else {
		$commenter = ereg_replace( '(<a )/', '\\1class="url "' , $commenter );
	}
	$avatar_email = get_comment_author_email();
	$avatar_size = apply_filters( 'avatar_size', '64' ); // Available filter: avatar_size
	$avatar = str_replace( "class='avatar", "class='photo avatar", get_avatar( $avatar_email, $avatar_size ) );
	echo $avatar;
}

元ソース

function sandbox_commenter_link() {
	$commenter = get_comment_author_link();
	if ( ereg( '<a[^>]* class=[^>]+>', $commenter ) ) {
		$commenter = ereg_replace( '(<a[^>]* class=[\'"]?)', '\\1url ' , $commenter );
	} else {
		$commenter = ereg_replace( '(<a )/', '\\1class="url "' , $commenter );
	}
	$avatar_email = get_comment_author_email();
	$avatar_size = apply_filters( 'avatar_size', '64' ); // Available filter: avatar_size
	$avatar = str_replace( "class='avatar", "class='photo avatar", get_avatar( $avatar_email, $avatar_size ) );
	echo $avatar . ' <br /><span class="fn n">' . $commenter . '</span>';
}

comments.php
sandbox_commenter_link から comment_author_link に変更。

							<div class="comment-author vcard"><?php sandbox_commenter_link() ?></div>
							<div class="comment-meta"><?php printf(__('<span class="fn n"> %1$s </span><span class="meta-sep">|</span> %2$s %3$s <span class="meta-sep">|</span> <a href="%4$s" title="固定リンク">Permalink</a>', 'sandbox'),
										get_comment_author_link(),
										get_comment_date(),
										get_comment_time(),
										'#comment-' . get_comment_ID() );
										edit_comment_link(__('Edit', 'sandbox'), ' <span class="meta-sep">|</span> <span class="edit-link">', '</span>'); ?>
										<?php if ($comment->comment_approved == '0') _e("\t\t\t\t\t<span class='unapproved'>現在コメントの承認待ちです。</span>\n", 'sandbox') ?>
										<?php comment_text() ?></div>
							<br class="clear" />

元ソース

							<div class="comment-author vcard"><?php sandbox_commenter_link() ?></div>
							<div class="comment-meta"><?php printf(__('投稿日 %1$s at %2$s <span class="meta-sep">|</span> <a href="%3$s" title="Permalink to this comment">パーマリンク</a>', 'sandbox'),
										get_comment_date(),
										get_comment_time(),
										'#comment-' . get_comment_ID() );
										edit_comment_link(__('Edit', 'sandbox'), ' <span class="meta-sep">|</span> <span class="edit-link">', '</span>'); ?></div>
<div><?php if ($comment->comment_approved == '0') _e("\t\t\t\t\t<span class='unapproved'>現在コメントの承認待ちです。</span>\n", 'sandbox') ?>
							<?php comment_text() ?></div>

style.css
追加:comment_author_link のアンカーを画像リンクに変更。

div.comment-meta a.home {
	background:url(images/home_list.png) no-repeat left;
	padding-left:20px;
}

div span コメント表示classの調整

.comment-author {
	float:left;
	margin:10px 15px;
}
span.fn {
	color:#080;
	font-weight:bold;
}
.comment-meta {
	float:left;
	margin:5px 10px 8px 0px;
	padding:5px 5px 5px 10px;
	width:558px;
}

#comments-list div {
	border:2px solid #ccc;
	background-color:#fff;
}
#comments-list p {
	padding:0px;
	margin:5px;
}

元ソース

.comment-author {
	padding:10px;
	padding-bottom:0px;
	font-weight:bold;
	font-size:14px;
}
span.fn {
	

}
.comment-meta {
	padding:0px;
	padding-left:10px;
	margin:0px;
}
#comments-list div {
	padding:5px;
	margin:10px;
	margin-top:5px;
	background-color:#fff;
	border:2px solid #ccc;
}
#comments-list p {
	padding:0px;
	margin-bottom:5px;
}