【Wordpress Tips】サムネイル付の新着記事一覧をサイドバーに表示できるプラグイン「Recent Posts Plus」を導入

最近Wordpressのカスタマイズに凝っていて、ふとサイドバーの新着記事一覧にサムネイルを表示したいと思い「Recent Posts Plus」を導入してみました。

一覧性が落ちるのと、画像を表示するので多少表示時間にも影響はあると思いますが、個人的には前の殺風景な新着記事一覧よりもこちらの方が楽しげなので、結構気に入っています。

■簡単なチュートリアル

インストール方法は超簡単！
Wordpressのプラグイン画面から「Recent Post Plus」を検索してインストールするだけ。

カスタマイズはウィジェット画面で行います。
よくわかんない！という方はとりあえず「Include post thumbnail」にチェックを付ければOK！

■色々カスタマイズしてみよう

ちなみにうちの環境だとIncludepost thumbnailにチェックを付けただけだとこんな残念な感じになってしまうので、表示形式とCSSをいじってやる必要があります。

ウィジェット画面で行う表示形式のカスタマイズは、以下の要素をhtmlタグと組み合わることで行う事ができます。（詳細は公式のマニュアルを参照して下さい）

{ID} ：記事のID
{THUMBNAIL} ：サムネイル画像
{TITLE_RAW} ：タイトル（指定文字数での短縮なし）
{TITLE} ：タイトル（指定文字数での短縮有り）
{EXCERPT} ：記事本文（指定文字数での短縮有り）
{PERMALINK} ：記事のURL
{DATE} ：投稿日時（オプションで形式指定可）
{AUTHOR} ：記事の投稿者名

うちの例を挙げると次の様になります。

[html]
<a title=”{TITLE_RAW}” href=”{PERMALINK}”>{TITLE}</a>
{THUMBNAIL}{EXCERPT}
[/html]

CSSがこちら（うちのサイドバーのCSS設定に併せて調整しているので、ちょっと変な書き方してます）

[css]
.widget_recent_entries li {
clear: both;
border-bottom: 1px dotted #dddddd;
}

.widget_recent_entries .wp-post-image {
float: left;
margin: 5px 5px 0 0;
}

.widget_recent_entries li p {
margin-top: 5px;
font-size: 75%;
font-color: #808080;
margin: 0 0 5px 0;
padding: 5px 0 5px 5px;
}
[/css]

完成の図はこんな感じです。

表示のカスタマイズはかなり柔軟にできるので、是非公式のマニュアルのサンプルコードなんかを参考にしつつ、お好みの新着一覧を作ってみて下さい。