WordPressでタイル状の写真ギャラリーを簡単に設置できるプラグイン『Foo Gallery』！写真をおしゃれに見せたいならオススメ！

2019.01.152017.02.07

この記事は約4分で読めます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

いかがでしたでしょうか？後は設置したい箇所にショートコードをコピペすればギャラリーの完成です。もしテンプレート内にギャラリーを設置したい場合は下記のコードで設置できます。

<?php echo do_shortcode( ‘[foogallery id=”○○○”]’ ); ?>

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

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