wordpressで記事のサムネイルを表示する

March 27th, 2009 ≫2,719 views

トップページやサイドバー等に、その時に書いた記事の中に配置された写真のサムネイル等が表示されればいいなぁ、なんて思ってだいぶたちますが、ようやく落ち着いてきたのでご紹介しようと思います。

【Post Thumb Revisited】というプラグインです。

このプラグインは上記にも書いたとおり、記事の中に画像が合った場合、記事中1枚目の画像を抜粋しサムネイルを生成して表示してくれるプラグインです。ちょうどここのサイト【モノストック】でも実行されています。

・下記の画像は個別記事のページ、記事の中でたくさん画像を用いています。

・上記の記事の一番上に配置した画像のサムネイルを生成し下記のように各記事のサムネイルを表示してくれます。

さて、それではプラグインのインストール方法から始めましょう。

まずはプラグインをダウンロードします。
プラグインダウンロード≫http://wordpress.org/extend/plugins/alakhnors-post-thumb/
開発元≫http://www.alakhnor.com/post-thumb/

他のプラグインと変わらず、解凍しwp-content/plugin/にアップロードします。

管理画面≫プラグインにプラグインの

・Post Thumb Revisited

・Post thumb revisited template library

・Post thumb widget

上記3つを有効化します。

インストールは以上で完了です、あとは管理画面≫設定≫Post Thumbにて細かい設定を行います。

この時英語表記で少しわかりずらいのですが、ざっくりと必要な設定の説明を以下に記述します。

Location settings

≫Base path

これは自分のサイトのrootからのパスになります例えば、

ここのサイトですと【/home/sites/chicappa.jp/users/chicappa.jp-mono-stock/web】

≫Full domain name

これは普通に自分のドメイン名【 http://mono-stock.com】最後……�れない

≫Folder name

これはサムネイルを生成したら格納されるディレクトリの指定です。

例えば【wordpress/wp-content/uploads/pth】最後の【/】は入れない

≫Default image

これは記事に画像が存在しない時に置き換わる仮のサムネイルのファイル場所です。

デフォルトだと【wordpress/wp-content/plugins/alakhnors-post-thumb/images/default.png】

となっています。

Thumbnail options

ここは生成されるサムネイルのクオリティや大きさの設定になります。人それぞれの設定になるので、一応参考までにここのサイトの設定を掲載しておきます。

サイトの基本設定とサムネイルの設定をすれば基本的にはデフォルトの状態で使用できます、画像以外にも動画の生成などもやってくれる賢いプラグインです。

実際表示するためにテンプレートに記述

それでは実際に表示してみるために使用しているテーマのカスタマイズをしましょう。

サムネイルを表示したい場所（例えばsidebar.php）などに以下を記述。

<?php echo get_recent_thumbs('altappend=first_&width=180&height=120&category=1&offset=0&limit=1');<br />
?&gt;

上記のように表記すると、「180×120のサイズでカテゴリ1の画像を1記事分表示します」というタグです。

他にも

<?php echo get_recent_thumbs('altappend=main_&width=50&height=50&category=1&offset=1&limit=6');<br />
?&gt;

上記は「50×50のサイズでカテゴリID1のサムネイルを6つ分表示する」っというタグになっているようです。

カテゴリーのみのサムネイルも指定もできるので、便利ですね。

純粋にすべての記事のサムネイルをただ表示したい場合は

<?php the_thumb();<br />
?&gt;

っと表記します。

最新の記事のサムネイルのみを表示したい場合は

<?php the_recent_thumbs(); ?&gt;

っと表記します。

あとはランダム表記も可能なようです。

<?php the_random_thumb(); ?&gt;

っと表記すれば、記事全体からランダムなサムネイルを表示してくれるようです。

使い方によっては、すごく見やすいサイトに出来上がるので、ショッピングサイトなどにも適応できそうですね。

是非ご参考下さい。

上記ストックに関連するストックはコチラ

boolmark：

この記事はお役に立てましたか？

(6 votes, average: 4.33 out of 1)

Loading ...

ストック更新日時： Friday, March 27th, 2009 ｜ 12:02 PM｜category：wordpress関連.
RSS購読：RSS 2.0 You can post a comment, or leave a trackback.

何かお探しですか？

欲しい情報が見つからなかったら

ストックマガジンをご活用下さい。

フリーで使える写真素材・デザインの使える情報サイトの紹介

Categories