Translate this page into English with Google Translate or Excite Translation

特定のカテゴリーの記事をサムネイルのようにリスト表示するのに wp-kougabu を使おうかと思っていましたが、僕の環境ではいろいろと大変そうだったので、プラグインを作ってみました。wp-kougabu と同じように、画像付きのアーカイブを作れます。

Image Archives は、設定した文字列でデータベースを検索し、検索にヒットした画像を表示します。表示した画像は、その画像が使われている記事のパーマリンクにリンクされます。記事のタイトルも表示されます。

設定次第で、記事をサムネイル表示の様にできます。

利点

• カスタムフィールドや、画像の「説明」に何かを書き加える必要がない。
• アップロード時に、ファイル名に何かの法則性さえ持たせておけば検索が楽。
• 記事内の画像で最初にアップロードしたものや最後にアップロードしたものを表示することもできる。ソートされた画像のファイル名での最初と最後の画像の指定も可能。

僕はPHPにあまり詳しくないので、公開するのは結構不安なのですが、もし何か問題あれば教えてください。是非、こうした方がいいというアドバイスもお願いします。

Sample

現在バージョン 0.41 です。

更新点

0.40

• 特に検索文字列を使わなくても、記事の中の画像を一つだけ表示できるようにしました。この機能は first_image_mode=on にすると使えます。初期設定では記事内の「最初」の画像を表示します。「最初」というのは、最初にアップロードされたという意味です。記事の中の画像の位置ではないので注意してください。もちろん image_order を使うと、一番最後にアップロードされた画像を表示できます。アップロードされた時間ではなく、画像のファイル名(post_title) でも並べ替えが可能です。

0.30

• design = 4, 5 の追加。4,5の時のみ、jQueryを用いて表示します。
• item という attribute を横のアイテム数という意味から、1ページに表示するアイテムの数という意味に変えた。横の列の数は「column」で定めることができます。

0.20

• テンプレートタグ、 wp_image_archives() の追加。
• attributesの追加。limit, date_format, date_show を追加した。
• 新しいデザインの追加。全然使えないかも。
• term_id のデフォルト値を 1 にした。
• class名を変更。
• その他コードの修正。

ダウンロード

WordPress Plugin Directory

WordPress 2.9.2 で動作確認済みです。WordPress の「プラグイン」メニューの「新規追加」で検索してインストールする場合、ダウンロードする必要はありません。

インストール

方法1

WordPress の「プラグイン」メニューの「新規追加」から追加してください。ダウンロードしたzipをアップロードするか、検索で「Image Archives」を入れ、そこからインストールしてください。

方法2

上のzipを解凍して WordPress の

wp-content/plugins

というのフォルダに、解凍してできた”image-archives”フォルダをまるごとアップロードします。その後、WordPressのプラグインの管理から、Image Archivesを有効化(「使用する」)してください。

使い方

記事の中に、

[ image_archives ]

を追加します。image_archivesの両端の空白はいりません。[ima---hives]というように空白はいりません。さらに、attributes を設定します。必要な attributes だけを書いてください。

[ image_archives term_id=? ordered_by=? order=? str=? limit=? size=? design=? item=? column=? date_format=? date_show=? ]

例えば、下のような感じになります。

[ image_archives term_id=5 str=%_thumbnail limit=0,30 size=thumbnail design=2 item=5 date_show=on ]

または、PHP Codeの中で、

wp_image_archives ();

と書きます。この時、attributes の書き方は、

wp_image_archives ('term_id=3&limit=0,30&date_show=on');

の様にします。

attributes のデフォルトの値は下のようになっています。上のようにして attributes を設定しないとデフォルトの値が使われます。しかし、デフォルトの値では多くの場合画像が検索にヒットしないでしょう。特に term_id と str は設定しないとなりません。

もし上のような煩わしい設定なしに使ってみたい人は、first_image_mode を on にして、 term_id だけを設定してみてください。この時、初期設定では記事の中でアップロードされた画像の中で一番古い画像を表示します。つまり、一番最初にアップロードされた画像を表示します。記事の中の一番上にある画像ではないので注意してください。画像をファイル名でソートして、一番上に来たものを表示したい時、image_order_by=title としてください。ソートした時に一番下に来るものも表示できます。この様にしたい時、image_order=DESC としてください。一番最後にアップロードした画像を表示する時にも使えます。

first_image_mode= off
image_order_by	= date
image_order	= ASC
term_id		= 1
order_by	= title
order		= ASC
str			= %
limit		= 0,50
size		= medium
design		= 2
item		= 9
column		= 3
date_format	= Y-m-d
date_show	= off
title_show	= on

• first_image_mode は記事内の画像を検索し、それを1つの記事に対して1つの画像を表示するモードです。画像の検索の設定は下の attributes できます。
• image_order_by は first_image_mode が on の時のみに効果があります。どの項目に従ってソートをするか選択できます。date と title を選べます。title というのは画像のファイル名だと思ってください。Database では post_title です。これはWordPressの管理画面の「メディア」から変更することも可能です。
• image_order も first_image_mode が on の時のみに効果があります。上のソート方法を昇順か降順か選択できます。ASC か DESC を入れてください。
• term_id はタグやカテゴリーの数字のIDです。複数選択可能です。その時は、コンマで区切ってください。term_id=1,3,7 のようにしてください。
• order_by はどの項目で並べるかです。title または date が選べます。
• order は実際の並べる順番です。昇順と降順が選べます。ASC と DESC を選べます。
• str は検索文字列です。SQLのLIKE条件の文字列を書きます。(参考サイト)　アップロードした画像のファイル名にヒットするように設定します。デフォルトでは “%” になっています。設定した term_id に含まれる画像が全て表示されます。特定の画像にしたい場合、拡張子を除いた名前が post_title(メディアライブラリのファイル、タイトルと同じです。) に格納されているので、拡張子を除くファイル名を指定してください。例えば、アップロードした画像が、「good-foods-for-your-health-1」の時、”str=good%”、”str=good-foods%”、”str=”%health%” などとすると検索にヒットします。
• limit は表示する画像の数の制限です。’始めの数字,終わりの数字’ という様に指定します。’limit=0,30′ という感じに使います。また、’limit=20,50′ の様に、始めの数字は ’0′ で無くてもかまいません。
• size は表示する画像のサイズです。アップロードした画像は WordPress によって縮小されるのでそれを用います。thumbnail, medium, large, full を選べます。
• design は、出力のデザインです。ぱっと思いついたデザインですが、1 から 5 を選べます。4,5については、jQuery を用いて表示しますので、JavaScript が有効である必要があります。
• column は design=2,4,5 の時に有効で、テーブルの列数、つまり一行に表示する画像の数です。念のため 1以上100以下 に限定しています。
• item は1ページ(Section)に表示する画像の数です。design=4,5 の時に有効です。
• date_format は日付を表示する際のフォーマットです。これは PHP.net date を参照してください。
• date_show は日付を表示するかどうかの設定です。on か off にしてください。
• title_show は記事のタイトルを表示するかどうかの設定です。on か off にしてください。

CSSでデザインをいじってください。table に class=”img_arc” を付けてあります。div については、画像を表示する前の div には class=”img_arc_img” を、テキストの前の div には、class=”img_arc_text” にしています。また、日付を表示する div は class=”img_arc_date” にしてます。

table.img_arc {
	border: 0 none;
	margin: 0;
}

div.img_arc_text a {
	text-decoration: none;
}

などとしてください。また、design=4,5 で jQuery を使った時のCSSに関しては、jQuery UI の Accordion、Tabs を参照してください。

注意事項

• 画像は記事に添付されている必要があります。
• パーマリンク先の記事は「公開済み」である必要があります。

デザイン

このデザインは古いバージョンのものです。参考程度にしてください。

同じタグを持つ記事

• WordPress 2.8.x – 2.9 でRSSの配信を more タグの前までにする方法

この記事に関連する記事

• WordPress 2.8.x – 2.9 でRSSの配信を more タグの前までにする方法
• YouTube で綺麗な動画を観よう
• Warcraft Anniversary の Interviews Video の下の字幕が素晴らしい
• Torchlight の良さそうなMODまとめ
• 草の付箋紙(栞) Green Marker