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

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

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

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

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

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

1. まずは Get Custom Field Values をダウンロードしてget-custom.phpをpluginsへアップロード。
2. プラグイン管理ページより有効化。
3. サムネイルを表示したいテンプレートに以下のソースを挿入 ((当ブログの場合はメインテンプレートやカテゴリページなど。ループ内であればどこでも大丈夫だと思います。))

[html]‘, ‘blank’); ?>[/html]

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

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

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

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

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

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

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

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

記事を投稿

普通に記事を書いたら、サムネイル画像をアップロード ((サムネイルをアップロードする場所は、例で書いたソースの場合 /wp-content/uploads/ 以下です。))

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

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

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

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

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

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

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

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

[php]


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

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

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

もっと簡単に表示させる

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

[html]“>phpThumb

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

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

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

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

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

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

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