【WordPress】管理人コメント用スタイルを適用する

コメント欄に管理人専用スタイルを適用
コメント欄に管理人専用スタイルを適用した表示例。

かねてよりコメント欄にて、サイト管理者(私)のコメントのみ別のスタイルを適用させたいと考えていました。WordPress にて簡単にできる方法があるのでご紹介。
なお、こちらの記事が大変参考になりました。多謝!

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

WP Version 2.7 より “comment class” というテンプレートタグが使えるようになっていてそれを利用します。

[php]
<?php comment_class(); ?>
[/php]

このように使用します。このテンプレートタグを使うと、各コメントのクラス属性を表示・取得できます。
Codex の解説ページはこちら(まだ日本語訳はされていません)。

Function Reference/comment class – WordPress Codex

これにより、各コメントにユーザ ID や偶数/奇数、階層などがクラス付けされて出力されます。
また自分で任意のクラスを追加したい場合は、

[php]
<?php comment_class(‘your-own-class’); ?>
[/php]

このように記述すれば your-own-class が追加されます。
複数ある場合は、

[php]
<?php comment_class(‘your-own-class your-own-class2 your-own-class3’); ?>
[/php]

とスペースを入れて列記すれば OK。

さて、comments.php の各コメント該当箇所はこのような感じだと思います。

[php highlight=”4″]
<?php if ($comments) : //コメントがある場合 ?>
<ul class="each-comment">
<?php foreach ($comments as $comment) : //各コメント開始 ?>
<li id="comment-<?php comment_ID() ?>" class="each-comment-content">
<article>
<?php if ($comment->comment_approved == ‘0’) : //承認待ちコメントがある場合 ?>
<p class="note"><strong>このコメントは、現在管理人の承認待ちです。</strong></p>
<?php endif; ?>
<?php comment_text(); //コメント本文 ?>
<footer>
<ul>
<li><?php echo get_avatar($comment, ’40’); //アバター画像を表示 ?> <?php comment_author_link() ?> commented</li>
<li>at <a href="#comment-<?php comment_ID() ?>"><?php comment_date(‘H:i’) ?> on <?php comment_date(‘M d, Y’) ?></a></li>
<?php edit_comment_link(‘Edit this comment’,'<li> | ‘,'</li>’); ?>
</ul>
</footer>
</article>
</li><!– .each-comment-content –>
<?php endforeach; //各コメント終了 ?>
</ul><!– .each-comment –>

<?php else : //コメントがまだない場合 ?>
<?php endif; //コメントの有無判断を終了 ?>
[/php]

私は今まで各コメントに each-comment-content というクラスをつけていました。
出力されるコードはこのようになります。

[php]
<li id="comment-0123" class="each-comment-content">
[/php]

この部分を comment_class() を使って以下のようにしました。

[php highlight=”4″]
<?php if ($comments) : //コメントがある場合 ?>
<ul class="each-comment">
<?php foreach ($comments as $comment) : //各コメント開始 ?>
<li id="comment-<?php comment_ID() ?>" <?php comment_class(‘each-comment-content’); ?>>
<article>
<?php if ($comment->comment_approved == ‘0’) : //承認待ちコメントがある場合 ?>
<p class="note"><strong>このコメントは、現在管理人の承認待ちです。</strong></p>
<?php endif; ?>
<?php comment_text(); //コメント本文 ?>
<footer>
<ul>
<li><?php echo get_avatar($comment, ’40’); //アバター画像を表示 ?> <?php comment_author_link() ?> commented</li>
<li>at <a href="#comment-<?php comment_ID() ?>"><?php comment_date(‘H:i’) ?> on <?php comment_date(‘M d, Y’) ?></a></li>
<?php edit_comment_link(‘Edit this comment’,'<li> | ‘,'</li>’); ?>
</ul>
</footer>
</article>
</li><!– .each-comment-content –>
<?php endforeach; //各コメント終了 ?>
</ul><!– .each-comment –>

<?php else : //コメントがまだない場合 ?>
<?php endif; //コメントの有無判断を終了 ?>
[/php]

これによって出力されるコードはこのようになります(著者によるコメントの場合)。

[php]
<li id="comment-0123" class="comment byuser comment-author-ichijonori bypostauthor odd alt thread-odd thread-alt depth-1 each-comment-content">
[/php]

注目するのは bypostauthor というクラス。その通り「その投稿(またはページ)の著者によるコメント」であることを意味しています。このクラスにスタイルを紐づければ、いわゆる「管理人コメント」にのみ別スタイルを適用させることが簡単にできます。

適用スタイル例:

[css]
li.bypostauthor {
background: url(img/bg-pink.png) repeat;
}
[/css]

う~ん、素晴らしい。手軽に利用できるクラスは bypostauthor だと思いますが、他にも様々なクラスが出力されるので、これらもうまく利用すると色々楽しめそうですね。

なお、「そのコメントが著者によるものであるかどうかの判断」ですが、(少なくとも私がテスト環境にて確認した)WP Version 3.0.1 では「ログインした状態で、*管理画面でない*各投稿記事のコメント欄から投稿したコメント」については著者として認識されませんでした。つまり「管理画面経由で投稿したコメント」でないとログインしていたとしても著者として認められず、bypostauthor クラスが出力されませんでした。
2011年8月27日現在の最新ヴァージョンである 3.2.1 ではそこが修正されており、各記事から投稿したコメントについても「ログインした状態で投稿したもの」であれば著者であると照合されています。
私はいつも管理画面ではなく各記事にてコメントの返信を行っていたので最初かなり落胆しましたがほっとしました^^;

  • Posted at 22:37 on Aug 27, 2011
  • | No comments yet

Response

  • 現在、この投稿へのコメント/トラックバックは受け付けていません。