アイキャッチ画像をサイドバーの「最近の投稿」に表示する

Tweet

アイキャッチ画像を、ブログのサイドバーに表示させる方法をメモしておきます。
プラグインを使わず、テンプレートに直接コードを書く方法と、プラグインを導入する方法の二つを記しておきます。

プラグインを使わず、アイキャッチ画像をサイドバーに表示する方法

1.下図のように記事投稿欄に「アイキャッチ画像を設定」の項目があるか確認する。

WordPress3.0以降は標準装備になっているようですが、使用しているバージョンやテーマによっては、項目が設定されていない場合もあるようです。
アイキャッチ画像の設定項目がない場合は、テーマのfunction.phpに以下のコードを追加して、アイキャッチ画像を機能させます。

add_theme_support('post-thumbnails')

2.アイキャッチに使いたい画像をアップして、「アイキャッチ画像として使用」をクリックする。

上図のように記事投稿画面にアイキャッチ画像が表示されます。
これをサイドバーの「最近の投稿」欄に画像＋投稿日＋タイトルといった感じで表示させたいと思います。

3.テンプレートにコードを記述する。

使用するテンプレートはテーマのsidebar.phpです。「最近の投稿」を表示したい場所に下記コードを挿入します。

<div id="side-recent">
    <h3>最近の投稿</h3>
<ul>
<?php $myposts = get_posts('posts_per_page=9'); foreach($myposts as $post) : ?>
<li><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(50,50) ); ?><?php the_time('y.m.d') ?>&nbsp;<?php the_title(); ?></a>
</li> <?php endforeach; ?>
</ul>
<br style="clear:both;"></div>

以下の赤色部分は任意変更可能です。
■　<div id=”side-recent“>・・・divのidは任意の名前
■　<h3>最近の投稿</h3>・・・任意の名前
■　posts_per_page=9　・・・数字は表示する「最近の投稿」数
■　<?php the_post_thumbnail( array(50,50) ); ?>・・・数字はアイキャッチ画像のサイズ。
サイズを指定せず、<?php the_post_thumbnail( ) ); ?>と書けば、WordPressの管理画面にある初期設定「メディア」で指定したサムネイルのサイズになります。
■　<?php the_time(‘y.m.d‘) ?>　・・・日付のスタイル。WordPress Codex 日本語版「日付と時刻の書式」参照。

4.スタイルシートに項目を追加する。

テーマのstyle.cssに#side-recent （名前は任意）を追加して、「最近の投稿」欄のデザインを整えます。

テンプレートをカスタマイズしてアイキャッチ画像を表示する方法については、下記のサイトを参考にさせていただきました。

参照サイト:「http://節約主婦ブログ.jp/」の「WPのサイドバーに画像付記事リンクを設置」

プラグインを導入して、アイキャッチ画像をサイドバーに表示する方法

アイキャッチ表示関係のプラグインもいろいろあるようですが、ここではSimple Featured Posts Widgetを紹介します。ウィジェットでアイキャッチ画像付きの最近の投稿欄を作成してくれます。
手順は

• 1.プラグインの新規追加からSimple Featured Posts Widgetを検索してインストールする。
• 2.インストールしたら有効化する。
• 3.ウィジェット設定画面でSimple Featured Posts Widgetをサイドバーに設定する。
• 4.Simple Featured Posts Widgetのスタイルシート（sfpw-style.css）を編集して、デザインを整える。（任意）