WordPress 2.5の新機能 ギャラリー[gallery]を使って画像一覧表示する

WordPress 2.5の新機能としてギャラリーが追加された。ギャラリーを利用すると[gallery]というコードを投稿欄に入力するだけで簡単に画像一覧ページを作成することができる。

ギャラリーの使用例

複数の画像を一度にアップロードすることを可能にしたフラッシュアップローダーや、サムネイルサイズの設定変更可能などの機能追加がギャラリーの下支えをしているだろう。

フラッシュアップローダーにはIEのバグがあり、IEでのフラッシュアップローダー(メディアアップロード機能)の不具合を修正するに詳しく書いたので参照してほしい。サムネイルサイズの設定変更は、「設定 - その他の設定」で行うことができる。「サムネイルを実寸法にトリミングする 」をチェックしておけば、画像サイズの比に合わせて縮小されることはなくなる。

画像サイズの設定変更

今回はこの新機能ギャラリーの使い方を解説しよう。ギャラリーを使用するには、投稿やページ作成画面で画像をアップロードした後に、投稿欄に[gallery]というショートコードを追加するだけだ。

CODE:
  1. [gallery]

WordPress 2.5からはShortcode APIが追加されており、[gallery]もこのショートコードの一つである。Shotcode APIについてはWordPressのCodexを見てほしい。

さて、[gallery]には様々なオプションを指定することができる。以下のような形式だ。

CODE:
  1. [gallery option1="value1" option2="value2"]

基本オプション

  • columns
    画像を何列表示にするか指定する。デフォルトは3列。自動的に行替するコードを挿入する。4列表示にするには以下のように入力する。

    CODE:
    1. [gallery columns="4"]

  • id
    投稿IDを指定する。デフォルトでは投稿IDを指定せず、現在の投稿(ページ)に関連付けられた画像を表示する。投稿IDが123に関連付けてアップロードされた画像を表示するには以下のように入力する。

    CODE:
    1. [gallery id="123"]

  • size
    表示する画像サイズを指定する。画像サイズには"thumbnail"、"medium"、"full"の三種類が指定できる。デフォルトは"thumbnail"になっている。中くらいの大きさの画像を一覧で表示させるには以下のようにする。

    CODE:
    1. [gallery size="medium"]

上級オプション

  • orderby
    サムネイルの表示順序を変更する。デフォルトは、"menu_order ASC, ID ASC"である。ASCは昇順、DESCは降順である。
  • itemtag
    ギャラリーの画像とキャプションのタグを囲むXHTMLタグを指定する。デフォルトは、"dl"である。
  • icontag
    ギャラリーの画像を囲むXHTMLタグを指定する。デフォルトは、"dt"である。
  • captiontag
    ギャラリーのキャプションを囲むXHTMLタグを指定する。デフォルトは、"dd"である。

    CODE:
    1. [gallery itemtag="div" icontag="span" captiontag="p" orderby="menu_order ASC, ID ASC"]

[gallery]という簡単なショートコードを入力するだけで簡単に画像一覧表示をさせることができるということがわかったと思う。しかし、実際に使ってみると画像表示がいまいち格好良くない。次回、ギャラリーを拡張して、Lightbox表示できるようにカスタマイズしたプラグインをご紹介しようと思う。

追記:[gallery]を拡張し、Lightbox表示に変更するプラグインを作成した。Lightbox Gallery Pluginである。フォトログや写真アルバムサイトを構築予定の方はぜひ使ってみてほしい。

このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

« お手軽にGoogle Mapsの地図を張り付ける方法(携帯電話でも表示できる)
Google Static Maps APIの機能が拡張(パスを表示可能に) »

関連記事

Trackback URL

Trackbacks (3)

[…] WordPress 2.5の新機能 ギャラリーを使って画像一覧表示する | WordPressで企業

[…] WordPress 2.5の新機能 ギャラリーを使って画像一覧表示する […]

[…] →サンプルページ 参照サイト:WordPress 2.5の新機能 ギャラリーを使って画像一覧表示する Topics: その他 | Comments […]

Comment