WP カスタマイズ小技1
Submitted by Rika on 2008/07/11 – 23:25 No Comment
サイドバーの最近の投稿にサムネイル画像も表示する方法
必要なもの
- カスタムフィールド
- Recent posts plugin
- Post-Plugin Library(Recent posts pluginを使用するのに必要です )
方法
カスタムフィールド
注意
- 毎回記事ごとに表示する画像とカスムフィールドの記入が必要になります。
- 画像のアップロードが行えていて、Recent posts plugin が使える環境であることが前提です。
プラグインのオプション設定
- Post-Plugin Library をアップロードしてからRecent posts plugin を有効化します。
- General Settingsで表示数やページを含めるかなどを好みで設定します。
- Output Settings
Output template:
PHP:
Text and codes before the list:
PHP:
-
<ul>
Text and codes after the list:
PHP:
-
</ul>
サイドバーテンプレート
PHP:
-
<div class="side-posts memo">
-
<div class="topmemo"></div>
-
<h2 id="toc-7"><?php _e('Recent Posts'); ?></h2>
-
<?php recent_posts(); ?>
-
<div class="bottommemo"></div>
-
</div>
-
<?php } ?>
- CSS: 画像もあるので、ダウンロードして確認してください。
- Demo: Rif.create
画像の用意
- 投稿記事に使用した画像のサムネイルを使用する場合は、既に画像をアップロードしているので、その画像のサムネイルを使います。
- 記事に全く画像を使用していない場合は、新たに画像をアップロードするか、過去にアップロードした画像をギャラリーから選びます。
前もって、そんな時の為の画像や、カテゴリ別の画像を用意して分かりやすい名前でアップロードしておくと後が楽です。 - 一度アップロードした画像は
管理画面>設定>その他の設定>画像サイズ
にて指定したサイズで自動でサムネイルが作られています。
例えば管理画面でサムネイル画像サイズを100x100に設定すると
http://mysite.com/wp-content/uploads/2008/07/thumbnails.png
とアップロードした大きな画像は、自動的に
http://mysite.com/wp-content/uploads/2008/07/thumbnails-100x100.png
というサムネイル画像が作られるという訳です。よって、一度アップロードした大きな画像のサムネイルを使いたい時は、-100x100 を付加したファイル名を使用します。(もちろんいったんサムネイル画像を記事に挿入してそのファイル名をコピーしても同じことです。)
カスタムフィールドの記入
- 投稿作成時に下にあるカスタムフィールドを記入します。
- キーの入力
後でカスタムフィールドに入力したサムネイル画像を呼び出す時に必要になりますので、それがサムネイル画像だと分かる名前を入力します。ここでは"Thumbnail" にしました。大文字と小文字は区別されるので、自分がCSSのクラス名と区別できるように大文字を利用しました。
以後、記事を投稿する度にこのカスタムフィールドのキーを使います。 - 値の記入
ここでは先ほどアップロードしたファイル
http://mysite.com/wp-content/uploads/2008/07/thumbnails.png
のサムネイル画像を使用するので
http://mysite.com/wp-content/uploads/2008/07/thumbnails-100x100.png
と入力します。
※上記はWP Free Theme Rif.createでの利用例です。
