WordPressの記事にサムネイルを表示する方法

• 2009-01-09
• WordPress
• プラグイン

あけましておめでとうございます。今年もポツポツ更新していきます。今回はコメにてサムネイル表示の質問をいただいたので、このブログでのサムネイル表示方法とサムネイル関連のプラグインをご紹介します。

当ブログではカスタムフィールドでサムネイルを表示していますが、ソースはカスタムフィールドを拡張する 『Get Custom Field Values』 というプラグインを利用して記述しています。

Get Custom Field Valuesを使用しなくてもサムネイル表示は可能ですが、今回は当ブログの表示方法まんまをそのまま書かせていただきます。

この方法はWordPressを使い始めたばかりの時に、とあるブログさんを参考にさせてもらいました。紹介したかったのですが、URLはおろか名前も思い出せませんでした。スイマセン。

当ブログでのサムネイル表示方法

1. まずは Get Custom Field Values をダウンロードしてget-custom.phpをpluginsへアップロード。
2. プラグイン管理ページより有効化。
3. サムネイルを表示したいテンプレートに以下のソースを挿入1

<a href="<?php the_permalink() ?>"><?php echo c2c_get_custom('post_icon', '<img width="160" height="120" alt="'.the_title('', '', false).'" src="/wp-content/uploads/', '.jpg" />', 'blank'); ?></a>

サムネイルからリンクをしない場合はaタグを削除してください。

‘post_icon’ がカスタムフィールドの名前（キー）になります。ここはthumbnailなど、任意の名前に変更しても大丈夫です。

続いてサムネイルの表示設定。

width、heightでサムネイルのサイズを指定、altには記事名が自動で挿入されるように設定しています。src=”/wp-content/uploads/” 部分は、画像へのパス。通常はそのままでも大丈夫なはずですが、自分の環境に合わせて適宜変更してください。

.jpgはサムネイル画像の拡張子です。gifやpngなど、自分が利用したい拡張子に変更することも可能です。

blankはサムネイルの値を指定しない場合に表示される画像の名前。当ブログではblank.jpgというファイルをuploadsフォルダにアップしてあるので、blankにしていますが、これも変更して問題ありません。

ちなみにblankはこのような画像が表示されるように設定しています。

以上で表示設定は完了です。

記事を投稿

普通に記事を書いたら、サムネイル画像をアップロード2

次にカスタムフィールドに設定を追加します。

名前（Key）にpost_iconと記入、値にサムネイルの名前（○○○.jpgというファイルをアップした場合、○○○の部分のみ）を記入しカスタムフィールドを追加。

あとは普通に公開すると、ソースを挿入した部分にサムネイルが表示されます。

※ちょっと小技
記事のパーマリンクをidに設定している場合は、サムネイルのファイル名もid番号にしておくといいかもしれません。そうすると SimpleTags というプラグインで関連記事にサムネイルを表示できたりします。

例として、更新がストップしているのでかなり手抜き表示ですが、札幌グルメ道楽の記事下、関連するお店のような表示が可能になります。

※2009/5/20追記
ファイル名をid番号にしなくても、当ブログでの、関連記事部分や新着記事のように、各記事やサイドバーにてサムネイルを表示することは可能です。

Get Custom Field Valuesを使用しない場合

プラグインを使用しないでカスタムフィールドに直接サムネイルのURLを指定する場合。このソースをそのまま使用する場合は、post_iconの値にサムネイルのURLを記入する必要があります。

<?php
    $values = get_post_custom_values("post_icon");
    $imgSrc = $values&#91;0&#93;;
?>
<?php if ($imgSrc != '') : ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="<?php echo $imgSrc; ?>" alt="<?php the_title(); ?>" width="160" height="120" />
</a>
<?php endif; ?>

参考記事： WordPressのトップページにエントリーのサムネイルを表示した | 本質思考道場

この方法は値が指定されていない場合、何も表示されないようになっているので、たまにサムネイルを表示させたいという場合は、楽だし見映えもいいですね。

ほぼ参考記事の通り掲載しましたが、<?php echo $imgSrc; ?>の前後のソースを自分の管理状況にあわせて工夫することによって、かなり楽にサムネイルを表示できるようになると思います。

もっと簡単に表示させる

サムネイルの名前を記事と同じIDにするというのが条件ですが、下記ソースだとプラグインやカスタムフィールドなど特に必要なく表示させることができます。

<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/thumb/<?php the_ID(); ?>.jpg" width="160" height="120" alt="<?php the_title(); ?>"/></a>

ただ単に/uploads/thumb/からアップロードしたサムネイルを呼び出しているだけです。the_ID();の部分をカスタムフィールドの値を呼び出す設定にすると、任意のファイル名やURLを指定することも可能です。

例えばメディアアップローダーを毎回使用して、必ず100×100のサムネイルを表示している場合。

<a href="<?php the_permalink() ?>"><img src="<?php bloginfo('url'); ?>/wp-content/uploads/<?php echo get_post_meta($post->ID, 'post_icon', TRUE); ?>-100x100.jpg" width="160" height="120" alt="<?php the_title(); ?>"/></a>

post_iconの値にはファイル名を入れる。

上記二つのソースはブランク画像の設定が出来ませんが、必ず記事にサムネイルを設定するという人は一番簡単な方法かもしれません。

※メディアアップローダーを使って画像をアップロードする場合、Wordpressの「その他設定」にある『アップロードしたファイルを年月ベースのフォルダに整理』のチェックを外すと、デフォルト設定では、画像は全てuploadsフォルダにアップロードされます。また、メディア設定でサムネイルのサイズを指定できます。例えば幅と高さを100に設定した場合『画像名-100×100.jpg』というサムネイルが自動で作成されます。

phpThumbやサムネイル表示用のプラグインを使用する

上記方法は一度設定さえしてしまえば手順自体は簡単ですが、各記事でサムネイル画像を用意する場合、画像の加工やアップロードなど面倒になる場合があります。そういう場合はphpThumbやサムネイル表示用のプラグインを利用すると便利になるかもしれません。

phpThumb

phpThumbを使ったWordpressテーマ　Indomagz 3Gallery WordPress Theme

上記テーマの中にphpThumbが組み込まれているので、参考にしてみて下さい。
ただ、phpThumbを使った場合は表示方法やサーバースペックにもよりますが、記事が増えてくると重くなる場合があるので注意が必要です。気づいてから修正するのは大変ですからね。

以下のプラグインは検証していないので、個々でお試し下さい。また、英語の説明しかない場合は、なんとなくの解釈とスクリーンショットを見た感想で書いています。全く違う内容のプラグインだったらごめんなさい。

Thumbnail For Excerpts
記事内の最初の画像をサムネイルにして表示できるプラグイン（かもしれません）

WP Post Thumbnail
画像を任意の大きさにカットしてサムネイルとして利用プラグイン、のような気がします。

QF-GetThumb
記事内の最初の画像を自動でキャッシュしてサムネイル表示。
表示させたい画像をある程度指定することも可能。

なんだか色々なやりかたがありますが、自分が一番楽だと思う方法をお試し下さい。ちなみに色々調べていったら、当ブログの方法はかなり面倒だったような気がします…

1. 当ブログの場合はメインテンプレートやカテゴリページなど。ループ内であればどこでも大丈夫だと思います。 [↩]
2. サムネイルをアップロードする場所は、例で書いたソースの場合 /wp-content/uploads/ 以下です。 [↩]