もはや定番となっている、サイドバーにサムネイル付きで人気記事などのメニューを表示させるデザイン。

人気記事のサムネイル付き表示は【Wordpress Popular Posts】で行うことができますが、それと同じようなことを「最新の投稿」で行うことができるのが【Recent Post Plus】です。

使用しているテーマにデフォルトでこのような機能が付いていれば不要です。

ワードプレス公式テーマの「Twenty Twelve」なんかではテキストのみですので、プラグインを導入してしまうのが手っ取り早い実現手段となります。

「WordPress Popular Posts」についての説明は以下の記事
サイドバーウィジェットにサムネイル付きの「人気の記事」を表示させるプラグイン【WordPress Popular Posts】

インストールと使い方

WordPressの管理画面から、「プラグイン」＞「新規追加」＞「検索」で【Recent Posts Plus】を検索してプラグインをインストールします。

「概観」＞「ウィジェット」に「Recent Posts Plus」が追加されているので任意の場所に設置。クリックすると出る設定バーから詳細設定を行います。

設定項目

基本設定

わざわざ日本語にするほどでもなく、ほとんど見た通りに設定するだけです。

サムネイルはせっかくプラグインを導入するのだから表示しましょう。記事抜粋の表示は好みで。メニューが縦長になるのでちょっとごちゃつきます。

詳細設定

「Show expert options」にチェックを入れると項目が増え、タイトルや抜粋記事の文字数の設定、サムネイルの表示サイズ変更などが行えます。

「Widget Output Template 」を利用するとCSSでデザインのカスタマイズが行えます。

デザインのカスタマイズ

いざ導入してみたら、なんと… デザインがぐちゃぐちゃorz

まぁ、個人的なテンプレの問題かもしれません。

いちいち修正するのもめんどうだったのでどうしようかと思っていたら、ちょうどいい記事があったのでそのまま利用させて頂きました。

自分でCSSをカスタマイズできる人は適当にやって問題ありません。

参考にさせて頂いたサイト様
Recent Posts Plusのstyle.css 設定

Recent Post Plusの設定項目にある「Widget Output Template」と「style.css」の2箇所の修正を行います。

Widget Output Template

「Widget Output Template」に以下のコードを入力します。

<div class="widget_recent_entries clearfix">
  <div class="widget_recent_post-image">
        <a title="{TITLE_RAW}" href="{PERMALINK}" >{THUMBNAIL}</a>
  </div>
  <div class="widget_recent_entry_title">
        <a title="{TITLE_RAW}" href="{PERMALINK}" >{TITLE}</a>{EXCERPT}</div><div class="widget_recent_border">
  </div>
</div>

Style.cssの設定

「Style.css」に以下のコードを追加。

/* clearfix */
.clearfix:after {
content: "."; 
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
 
.clearfix {
  min-height: 1px;
}
 
* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}
 
/* Recent Posts Plus */
.widget_recent_border {
    border-bottom-color: #EDEDED;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    max-width: 100%;
 
}
.widget_recent_entries {
        padding-top: 0.714285714rem;
        margin 0 auto;
        max-width: 100%;
}
 
.widget_recent_post-image {
        width: 16.255206745%;
        float: left;
        margin-top: 0.714285714rem;
}
.widget_recent_post-image img {
        max-width: 100%;
        height: auto;
        width: auto;
}
.widget_recent_entry_title {
        width: 80.493751904%;
        margin-top: 0.714285714rem;
        float: right;
        font-size: 0.857142857rem;
        line-height: 1.6;
}

説明

画面幅に応じて変わるレスポンシブデザイン対応。固定の場合は「%」「rem」を「px」に変更。

中央揃えで、コンテンツの幅は以下のようになっているので好みの大きさに修正します。

• widthのベース幅：「320PX」
• サムネイルの幅：「50px」
• タイトルの幅：「260px」