WordPressでギャラリーページを作りたいと、いろいろと調べていましたが、今回ようやく自分でも何とか出来る気に入ったやり方を見つけたので、ここにメモしておきます。

必要なプラグインについて

今回は次のプラグインを利用します。

  • Lightbox Gallery
    WordPress2.5から標準で備わったとされるギャラリー機能の機能拡張プラグイン

プラグインについては、例によってダウンロード後に解凍してpluginsフォルダに入れて置いてください。

まずはWordPress標準のギャラリー機能によるサムネイル表示

  • ギャラリーのためのページを新規作成します。
  • 画像データをアップロードします(とりあえず2、3枚)。
  • ギャラリータブを選択して、[ギャラリーを挿入]ボタンをクリックします。
画像を追加の画面

画像を追加の画面 クリックで拡大します

  • ページの編集画面でHTMLモードでみると、本文に[ ]で囲まれたgalleryという文字が挿入されているのが分かりますが、これがギャラリーのためのショートコードです。
    先ほどの[ギャラリーを挿入]ボタンをクリックする代わりに、直接このコードを記述してもOKです。
  • この状態でプレビューを見ると、サムネイル表示になっているのが確認できます。
    また画像をクリックすると、背景を半透明にしながら画像を拡大表示してくれます。
サムネイル表示

galleryによるサムネイル表示

WordPress標準機能でのサムネイル表示のカスタマイズ

サムネイル画像のサイズは、WordPress管理画面の 設定 > メディア > サムネイルのサイズで指定します。
その他、サムネイル表示のレイアウトなどについては、先ほどの[ ]で囲まれたgalleryショートコードにオプションを指定することで調整していきます。
オプション指定は半角スペースで区切ることで複数指定が可能です。

  • 1行あたりの画像枚数の指定 column
    [gallery columns=”ここに枚数を半角数字で指定”]
    サムネイル画像サイズとの絡みは考慮しなくていけません
  • サムネイル画像サイズの指定 size
    [gallery size=”ここにサイズのキーワードを指定”]
    指定できるのは、”thumbnail” “medium” “full”の3つ
    “thumbnail”を指定した場合には、WordPressの管理画面で設定したサイズになる
  • 画像の順序 order
    [gallery order=”ここに順序のキーワードを指定”]
    ASCは昇順、DESCは降順

ショートコードに関しては、WordPress公式サイトもご覧ください。

そしてLightbox Galleryによるさらなるカスタマイズ

Lightbox Galleryプラグインにより、galleryショートコードのオプションが強化されます。

  • 画像クリック後のLightbox表示サイズの指定 lightboxsize
    [gallery lightboxsize=”ここにサイズを指定”]
    デフォルトが”medium”になっているらしく、”full”指定にも対応しています
  • 1ページあたりの最大表示サムネイル枚数 num
    [gallery num=”ここに枚数を指定”]
    numで枚数指定すると、それを超えた枚数の画像あったらナビケーションを表示してくれます
    もしもナビゲーションを表示したくなかったら、更に pagenavi=”0″ の指定を加えます

このnum機能が本当にステキです。
ポイントはギャラリー用ページとしては1つしか作成していないのに、自動的に複数ページに分けて表示してくれるというところです。

これがないと画像がどんどん増えていくのをどう対応したらいいでしょうか。

  • ある程度の枚数で区切って、ページを新規に追加していくという方法になる…
  • 複数ページで構成させると、あるページ内での画像の挿入・削除において全体でズレてくれない…
  • 順序指定なども、そのページごとでの指定であり全体での順序とはならない

・・・といったような問題が発生するのではと思います。

lightbox Galleryの拡張機能は他にもあるので、詳しい解説はLightbox Galleryの開発者様のページをご覧ください。

CSSによるデザインの調整

サムネイル画像の枠の色や太さなどの装飾は、lightbox Galleryプラグイン内のCSSで管理されています。
プラグインフォルダ直下のlightbox-gallery.cssを編集することでカスタマイズが可能です。

今回のギャラリー作成にあたっては、Lightbox Galleryの開発者様のページが大変参考になりました。
この場を借りてお礼申し上げます。

こちらが作成したギャラリーです。写真は随時追加していく予定です。