Image Archives

wordpress_logo

Translate this page into English with Google Translate or Excite Translation

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

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

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

利点

  • カスタムフィールドや、画像の「説明」に何かを書き加える必要がない。
  • アップロード時に、ファイル名に何かの法則性さえ持たせておけば検索が楽。

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

Sample

僕はレビュー記事の最初の画像のファイル名の最後に 「_logo」を付けているので、それを検索しています。

現在バージョン 0.32 です。

更新点

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.8.4 で動作確認済みです。Wordpressの「プラグイン」メニューの「新規追加」で検索してインストールする場合、ダウンロードする必要はありません。

インストール

方法1

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

方法2

上のzipを解凍して、Wordpressの

wp-content/plugins

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

使い方

記事の中に、

[ image_archives ]

を追加します。image_archivesの両端の空白はいりません。[image?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=%article_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 は設定しないとなりません。

term_id		= 1
order_by	= title
order		= ASC
str			= %_logo
limit		= 0,50
size		= medium
design		= 2
item		= 9
column		= 3
date_format	= Y-m-d
date_show	= off
  • term_id はタグやカテゴリーの数字のIDです。複数選択可能です。その時は、コンマで区切ってください。term_id=1,3,7 のようにしてください。
  • order_by はどの項目で並べるかです。title または date が選べます。
  • order は実際の並べる順番です。昇順と降順が選べます。ASC と DESC を選べます。
  • str は検索文字列です。SQLのLIKE条件の文字列を書きます。(参考サイト)　デフォルトでは”%_logo”になっています。これは、拡張子を除いた名前がpost_title(メディアライブラリのファイル、タイトルと同じです。)に設定されるので、拡張子を除くファイル名の後ろが「_logo」になっている場合という事です。
  • 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 にしてください。

CSSでデザインをいじってください。table -> (tbody) -> (tr) -> td -> div -> a -> img -> p のそれぞれに、class=”img_arc” を付けてあります。div については、画像を表示する前の div には class=”img_arc_img” を、テキストの前の div には、class=”img_arc_text” にしています。また、日付を表示する p は、design = 1 , 2 の時、class=”img_arc_date” にしてます。

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

a.img_arc {
	text-decoration: none;
}

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

注意事項

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

同じタグを持つ記事

この記事に関連する記事

Leave a Comment





Return to Top