昨日からサイドバーに「Recent Comments（最近のコメント）」を表示しようと色々とやってみました。
WordPressではプラグインを使わないとこれが表示できません。
色々と探しましたが、最終的に採用したプラグインはHirobee’s Trail [Memorandum]様のCommented entry listです。
タイトルでは1.1となっていますが現在の最新版は1.2のようです。
設置自体は特に問題なくできたんですが、どういうスタイルにするかで色々と弄ってみました。
その前に一応設置方法をメモ。
- 作者のサイトよりプラグインをダウンロード。
- 解凍して「commented-entry-list_1.2」フォルダごと「/wp-content/plugins/」ディレクトリへアップロード。
- 管理画面よりプラグインを有効化。
以上です。
プラグインの有効化が終わったら最近のコメント一覧を表示したいところに、
<?php get_recently_commented(); ?>
を挿入して下さい。
これで一応最近のコメント一覧が表示されるはずです。
詳細は作者のサイトやプラグインに同封されている「ReadMe.txt」を参照して下さい。
さて、サイドバーの各リストは<ul>～<ul>を使いCSSで見た目を変更していましたが、このプラグインをデフォルトで使う場合出力されるソースが入れ子になってしまうので表示が崩れてしまいました。
そこで、プラグインに同封されている「commented-entry-list.php」に少しだけ手を加えさせていただき、<ul>や<li>にclass名を割り振ってそれぞれを細かくCSSで設定してみました。
変更したのは29行目から44行目辺りまでの以下の部分です。
$permalink = get_permalink($comment->ID)."#commentlist";
$output .= "<li>";
$output .= "<a href=\"$permalink\">$post_title</a>\n";
$output .= "\t<ul>\n";
$first_comment = FALSE;
}
$comment_date = $comment->comment_date;
$commentid = get_permalink($comment->ID)."#comment-".$comment->comment_ID;
if ( mysql2date('Y m d', $comment_date) == gmdate('Y m d', current_time(timestamp)) ) { # Today's comment
$comment_date = mysql2date('H:i', $comment_date);
} else {
$comment_date = mysql2date('m/d', $comment_date);
}
$output .= "\t\t<li><span class=\"comment_date\"><a href=\"$commentid\" title=\"\">$comment_date</a> </span>".
"<span class=\"comment_author\">".tkzy_get_comment_author_link($comment,20)."</span></li>\n";
}
少しずつ色んなところに手を加えているんですが、大きく変更したというか追加した部分は、まず30行目の
$output .= "<li>";
に「class名=commented-post-title」を以下のように追加。
$output .= "<li class=\"commented-post-title\">";
次に32行目の
$output .= "\t<ul>\n";
に「class名=commented-data」を以下のように追加。
$output .= "\t<ul class=\"commented-data\">\n";
class名を追加したのは以上の2箇所です。
その他、デフォルトでは当日のコメントには時間、過去のコメントには日付がそれぞれ表示されるようになっていましたが、当日のコメントにも日付が表示されるように統一しました。
変更後の最終的なソースを以下に掲載します。
$permalink = get_permalink($comment->ID)."";
$output .= "<li class=\"commented-post-title\">";
$output .= "<a href=\"$permalink\">$post_title</a>\n";
$output .= "\t<ul class=\"commented-data\">\n";
$first_comment = FALSE;
}
$comment_date = $comment->comment_date;
$commentid = get_permalink($comment->ID)."#comment-".$comment->comment_ID;
if ( mysql2date('Y m d', $comment_date) == gmdate('Y m d', current_time(timestamp)) ) { # Today's comment
$comment_date = mysql2date('m-d', $comment_date);
} else {
$comment_date = mysql2date('m-d', $comment_date);
}
$output .= "\t\t<li><span class=\"comment-date\"><a href=\"$commentid\">$comment_date</a></span>".
"<span class=\"comment-author\">".tkzy_get_comment_author_link($comment,20)."</span></li>\n";
}
これでカスタマイズのための基礎が整いましたので次にHTMLとCSSですね。
まずHTMLですが、うちのブログではサイドバーの表示したいところに以下のように挿入しました。
<h3>Recent Comments</h3>
<ul class="recent-comments-list">
<?php get_recently_commented(10); ?>
</ul>
そうすると出力されるソースは例えば以下のようになります。
<h3>Recent Comments</h3>
<ul class="recent-comments-list">
<li class="commented-post-title"><a href="http://manchie.com/7">伝場兄モデル来たる！</a>
<ul class="commented-data">
<li><span class="comment-date"><a href="http://manchie.com/7#comment-3">10-05</a></span><span class="comment-author"><a href="http://manchie.com/">リョウ</a></span></li>
<li><span class="comment-date"><a href="http://manchie.com/7#comment-2">10-05</a></span><span class="comment-author"><a href="http://blog.goo.ne.jp/thunder-birder">サンダー</a></span></li>
</ul>
</li>
<li class="commented-post-title"><a href="http://manchie.com/1">新ドメイン取得</a>
<ul class="commented-data">
<li><span class="comment-date"><a href="http://manchie.com/1#comment-1">09-22</a></span><span class="comment-author"><a href="http://manchie.com/">リョウ</a></span></li>
</ul>
</li>
</ul>
入れ子状態になっているのが分かると思います。
次にCSSで見た目を変更します。
ul.recent-comments-list {
border-top: 1px dashed #a3a3a3;
}
ul.recent-comments-list li.commented-post-title {
border-bottom: 1px dashed #a3a3a3;
}
ul.recent-comments-list li.commented-post-title > a {
padding: 10px 0 10px 25px;
background: url('images/arrow.png') no-repeat 10px center;
display: block;
}
ul.recent-comments-list li.commented-post-title > a:link,
ul.recent-comments-list li.commented-post-title > a:visited {
color: #666666;
}
ul.recent-comments-list li.commented-post-title > a:hover,
ul.recent-comments-list li.commented-post-title > a:active {
color: #333333;
text-decoration: none;
background: #f6f3ec url('images/arrow-hover.png') no-repeat 10px center;
}
ul.commented-data > li {
padding: 10px 0 10px 45px;
border-top: 1px dashed #a3a3a3;
background: url('images/arrow.png') no-repeat 30px center;
display: block;
}
ul.commented-data > li:hover {
background: #f6f3ec url('images/arrow-hover.png') no-repeat 30px center;
}
ul.commented-data > li a:link,
ul.commented-data > li a:visited {
color: #666666;
}
ul.commented-data > li a:hover,
ul.commented-data > li a:active {
color: #333333;
text-decoration: none;
}
span.comment-date {
margin-right: 1em;
}
ポイントとしては、初めて子供セレクタを使ったことです。
ただこれが一番良いやり方なのかは全く分かりませんので、もう少しベストなやり方があればどなたか教えて下さい（笑）
とにかく、以上のように色々と手を加えさせていただくことで自分の思うような感じに表示することができました。
