おはようございます、サブロー(@saburo_design)です。

もともと当サイトは私のポートフォリオサイトも兼ねていたのですが、今ではすっかりただの雑記ブログと化してしまいました。当初はデザイナーらしく、

意識高いカンジのサイト作っちゃうゾ!

と意気込んでおりましたが、書いている内容があまりにも意識低すぎて、こんな泥舟のようなサイトにポートフォリオとして載せられた実績が私と共に軒並み評価を落としてしまいそうだったので、ポートフォリオ関係は全て外してしまいました。

同じサイズの写真を等間隔で並べるだけでしたらさほど難しくはないのですが、カードレイアウト?タイルレイアウトと言うのでしょうか?ただ写真を並べるだけでなくGoogleの画像検索のようなレンガ状に並べたレイアウトで見せたいと思うとちょっと知識が必要です。

そこで写真ギャラリーが作成できる『Foo Gallery』というプラグインが使いやすく、写真メインのポートフォリオサイトなどでとても役に立ちそうでしたのでご紹介したいと思います。

プラグインをインストールして有効化する

【管理画面】→【プラグイン】→【新規追加】で『Foo Gallery』で検索します。そして『Foo Gallery』をインストールして有効化。

『Foo Gallery』をインストールして有効化
『Foo Gallery』をインストールして有効化

『Foo Gallery』と併せて『FooBox Image Lightbox』というプラグインもインストールして有効化しておきます。

ギャラリーを新規作成する

サイドバーの【FooGallery】→【Add Gallery】でギャラリーを新規作成します。

使用する写真を選択

ギャラリーに使用する写真をメディアライブラリから選択します

ギャラリーを作成
ギャラリーを作成

まずは自分が分かりやすいタイトルを入力します。

ギャラリーの設定

【Gallery Template】からギャラリーの表示形式を選択します。

ギャラリーの表示形式を選択
ギャラリーの表示形式を選択
  • Responsive Image Gallery
  • Image Viewer
  • Justified Gallery
  • Masonry Image Gallery
  • Simple Portfolio
  • Single Thumbnail Gallery

Responsive Image Gallery

デフォルトのギャラリーです。全ての写真が指定したサイズで出力され、等間隔で並べられます。すっきりキッチリ写真を並べたい人はコレ。

Responsive Image Gallery
Responsive Image Gallery

Image Viewer

写真を並べるのではなく、1枚1枚見せるタイプのギャラリーです。画像をクリックすると拡大表示されます。スペースを取らないのでギャラリーをコンテンツのおまけとして配置するならコレがいいかも。

Image Viewer
Image Viewer

Justified Gallery

写真をレンガ状に並べるタイプのギャラリーです。個人的にはこれが一番オススメ。

Justified Gallery
Justified Gallery

Masonry Image Gallery

写真を縦レンガ状に並べるタイプのギャラリーです。

Masonry Image Gallery
Masonry Image Gallery

Simple Portfolio

デフォルトのResponsive Image Galleryと同じように出力されますが、メディアライブラリで設定した写真のキャプションと説明を表示させる事ができます。

Single Thumbnail Gallery

こちらもImage Viewerと同じように1枚1枚写真を見せるタイプのギャラリーですが、メディアライブラリで設定した写真のキャプションと説明を表示させる事ができます。

写真の並び順を変更

初期設定ではFoo Galleryに写真を追加した順でギャラリーに表示されますが、【Gallery sort】で写真の並び順を変える事ができます。

写真の並び順を変更
写真の並び順を変更
Default
ギャラリーに写真を追加した順
Date created – newest first
写真の作成日が新しい順
Date created – oldest first
写真の作成日が古い順
Date modified – most recent first
写真の修正日が新しい順
Date modified – most recent last
写真の修正日が古い順
Title – alphabetically
タイトルのアルファベット順
Title – reverse
タイトルのアルファベットの逆順
Random
ランダム順

個人的にランダムが選べるのは嬉しいところ。ギャラリーのページを見るたびに写真の順番が変わります。

まとめ

いかがでしたでしょうか?後は設置したい箇所にショートコードをコピペすればギャラリーの完成です。もしテンプレート内にギャラリーを設置したい場合は <?php echo do_shortcode( '[foogallery id="○○○"]' ); ?>で設置できます。

『Foo Gallery』はレスポンシブにも対応しているのが嬉しいですね。

他にも写真間の余白の設定など色々細かい設定が可能ですので自分だけのおしゃれなギャラリーを作ってみてください。