WordPress Twenty Twelve 最近の投稿(Recent Posts Plus)にサムネイル画像を追加する方法

wordpress-logo-stacked-rgb

TwentyTwelveのデフォルトで用意されている外観ウィジェット「 最近の投稿 」ではサムネイル画像は表示されません。記事タイトルの他に画像を表示することで、PVの導線にもなるのではと思います。

今回、WordPressの 「 Recent Posts Plus 」というプラグインを使って最近の投稿にサムネイルを表示させせる方法を書こうと思います。

Recent Posts Plusでは、サムネイル画像の挿入の他、本文を抜粋し表示することもできます。表示もCSSで制御出来るので、カスタマイズに向いていると思います。

完成イメージ

スクリーンショット_2013_04_15_15_58
完成イメージは、こんな感じです。サムネイル画像、タイトルのみ表示にしました。本文もいれようと思いましたが、少しごちゃごちゃした感じになるので、やめました。

1. Recent Posts Plus プラグインのインストール

スクリーンショット_2013_04_15_8_57
WordPressの管理画面から、「プラグイン」→「 キーワード 」検索から「 Recent Posts Plus 」を検索しプラグインをインストールしましょう。

2. サムネイルサイズの変更

スクリーンショット_2013_04_15_9_05-2
サムネイル画像は、指定したサイズにあわせてはみ出した部分をカットするトリミング方法と、指定したサイズの枠に合わせて比率を維持したまま縮小する方法があります。

サムネイル用の画像を用意するのが一番良いと思いますが、相当な手間が掛かります。比率を維持したまま縮小すると、幅が同じでも高さがばらばらに表示されてしまうので、ここではトリミング方法を採用しますが、ここは使用環境にあわせて変更していただければと思います。

サムネイル画像のサイズを変更します。ここでは、「 幅:50 高:50 」にサムネイルのサイズを変更します。「サムネイルを実寸法にトリミングする」にチェックをいれます。

3. Recent Posts Plusのウィジェット設定

スクリーンショット_2013_04_15_14_57
メインサイドバーへ「  Recent Post Plus 」をドラッグし、以下の項目を設定します。

設定項目名 入力値説明
表示する投稿数 最近の投稿を表示する記事数を入力
include post thumbnail サムネイル画像を挿入する場合にチェックを入れます。
今回、サムネイル画像を挿入するのでチェックを入れます。
Show expert options 表示をカスタマイズする場合にチェックを入れます。
今回、表示をカスタマイズするのでチェックを入れます。
Thumbnail size サムネイルサイズを入力します。

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>

 4. style.css 設定

最後は、CSSで表示を設定します。以下のコードをテーマフォルダにある「 style.css 」の1417行目付近の「 /* =Media queries 」の前に追記します。font-size等は環境に応じて適時変更していただければと思います。floatを使っているので、clearfixのコードも併せて入れておきます。

/* 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;
}

SNSで最新情報をチェック

更新情報は、twitter,facebook,でチェックできます。facebook限定の記事もありますので非ご登録いただければとおもいます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です