サイドバーの最近の投稿にサムネイル画像も表示する方法

必要なもの

1. カスタムフィールド
2. Recent posts plugin
3. Post-Plugin Library(Recent posts pluginを使用するのに必要です )

方法

カスタムフィールド

注意

1. 毎回記事ごとに表示する画像とカスムフィールドの記入が必要になります。
2. 画像のアップロードが行えていて、Recent posts plugin が使える環境であることが前提です。

プラグインのオプション設定

1. Post-Plugin Library をアップロードしてからRecent posts plugin を有効化します。
2. General Settingsで表示数やページを含めるかなどを好みで設定します。
3. Output Settings

Output template:
[php]

{link}

{date} – {categorylinks}

[/php]
Text and codes before the list:
[php]

[/php]
Text and codes after the list:
[php]

[/php]

サイドバーテンプレート

[php]

[/php]

• CSS: 画像もあるので、ダウンロードして確認してください。
• Demo: Rif.create

画像の用意

1. 投稿記事に使用した画像のサムネイルを使用する場合は、既に画像をアップロードしているので、その画像のサムネイルを使います。
2. 記事に全く画像を使用していない場合は、新たに画像をアップロードするか、過去にアップロードした画像をギャラリーから選びます。
   前もって、そんな時の為の画像や、カテゴリ別の画像を用意して分かりやすい名前でアップロードしておくと後が楽です。
3. 一度アップロードした画像は
   管理画面>設定>その他の設定>画像サイズ
   にて指定したサイズで自動でサムネイルが作られています。
   例えば管理画面でサムネイル画像サイズを100×100に設定すると
   http://mysite.com/wp-content/uploads/2008/07/thumbnails.png
   とアップロードした大きな画像は、自動的に
   http://mysite.com/wp-content/uploads/2008/07/thumbnails-100×100.png
   というサムネイル画像が作られるという訳です。よって、一度アップロードした大きな画像のサムネイルを使いたい時は、-100×100 を付加したファイル名を使用します。(もちろんいったんサムネイル画像を記事に挿入してそのファイル名をコピーしても同じことです。)

カスタムフィールドの記入

1. 投稿作成時に下にあるカスタムフィールドを記入します。
2. キーの入力
   後でカスタムフィールドに入力したサムネイル画像を呼び出す時に必要になりますので、それがサムネイル画像だと分かる名前を入力します。ここでは"Thumbnail" にしました。大文字と小文字は区別されるので、自分がCSSのクラス名と区別できるように大文字を利用しました。
   以後、記事を投稿する度にこのカスタムフィールドのキーを使います。
3. 値の記入
   ここでは先ほどアップロードしたファイル
   http://mysite.com/wp-content/uploads/2008/07/thumbnails.png
   のサムネイル画像を使用するので
   http://mysite.com/wp-content/uploads/2008/07/thumbnails-100×100.png
   と入力します。

※上記はWP Free Theme Rif.createでの利用例です。

プレビュー

Demo

Rif.creat

動作確認

WordPress 2.6-beta1

使用プラグイン

• Post-Plugin Library
• Recent Comments
• Recent Posts
• Simple Tags
• ShareThis

使用Ajax framework

Adobe Labs – Spry framework for Ajax
使用Spry widgets
• SpryTabbedPanels.js (タブ　)
• SpryCollapsiblePanel.js (閉会式パネル)

カスタマイズ

トップページ(hoe.php)

上部に最新記事ひとつ、その下にタブでカテゴリ別の最新記事4件、カスタムフィールドを利用したサムネイルと共に表示しています。
カテゴリIDの入力が必要です。
デフォルトでは表示カテゴリ数は3つですが、コードの追加で数の増減はできます。
数があまり多い場合はタブ自体のサイズ変更が必要です。
最初に開いておくカテゴリを指定できます。
トップページは、設定でページを選ばなくても、home.phpを作るとindex.phpより優先されます。

サイドバー(sidebar.php and sidebar-2.php)

トップページと他のページではサイドバーを変えています。
デフォルトではトップページでカテゴリ別の最新投稿表示をしているのでサイドバーの最近の投稿は非表示にしています。
カスタムフィールドを利用して記事のサムネイル表示をしています。
Recent Comments, Recent Postsプラグインのオプション設定が必要になります。
about meボタンをクリックするとボックスが開閉します。aboutme.phpに記入した内容が表示されます。デフォルトではAboutページへリンクを貼っています。
サイドバー(sidebar.php)を呼び込むテンプレートタグは
[php]

[/php]
ですが、sidebar-2.phpを呼び込む時は
[php]

[/php]
と、複数サイドバーを操作することが楽になりました。