【高機能】WordPressにギャラリーを追加できるプラグイン「FooGallery」：使い方も解説

「WordPressの標準機能でギャラリーを作ってみたけど物足りない。もう少し凝った、レスポンシブな画像ギャラリーを簡単に作成できないかなぁ。」

こういった方向けの内容です。

ワードプレスには標準でギャラリーを設置する方法がありますが、少しカスタマイズしないとレスポンシブに対応しきれていない場合があります。

そうなるとCSSのカスタマイズが必要となるため、初心者には少し厳しい．．．
ですが、「FooGallery」という高機能プラグインを使うことで、この問題は一発で解決します。

というわけで、この記事ではFooGalleryの使い方について解説していきます。

数あるプラグインの中から「FooGallery」を選んだ理由

まずはじめに「FooGallery」を選んだ理由を少しお伝えしておきます。

ギャラリープラグインはいくつかありますが、コレを選んだ理由としては下記のとおり。

分かりやすく３点にわけましたが、一言でいってしまえば「高機能」であるということです。

ワードプレスの標準のギャラリーはレスポンシブにカスタマイズが必要だったりするので、必須条件であるレスポンシブが手間なしで実装されているのはありがたいですね。

デザインが豊富なこととカスタマイズ性が高いことで幅も広がりますし、どんな用途でもある程度対応できる使いやすさは大きなポイントでしょう。

これに加えて、ユーザー数も10万オーバーと多いこともいい点ですね。

多くの人が使っているプラグインは、安全性な可能性が高いですし、アップデートが止まる可能性も低いので。

というわけで「FooGallery」を選んだわけですが、ここからは実際にインストールする方法や使い方について解説していきます。

まずはプラグインのインストールを行なっていきましょう。

手順は以下の２ステップです。

インストール後にポップアップが出ますが、ここはスキップして大丈夫です。

これで使用できる状態になりました。

FooGalleryを使ったギャラリーの追加方法についてですが、基本的には以下の２点を抑えておけばOKです。

たったこれだけ？と思うかもしれませんが、これを理解しておくだけで「FooGallery」の使い方については問題なしです。

というわけで、ここからは上記の内容について１つずつ解説していきます。

STEP.1
作成画面へ移動

ギャラリーを作成するには、ワードプレスの管理画面から「FooGallery」→「Add Gallery」を選択します。
ここでタイトルを入力しておきましょう。
STEP.2
写真の選択

ギャラリーに使用する写真を選択していきます。
※画像の並びはドラッグ&ドロップで並び替えることができます。
STEP.3
デザインを選択

デザインを６種類の中から選びましょう。

これで完成。と言いたいところですが、説明がちょっと不十分なのでここから「デザイン」と「ギャラリーの詳細設定」について補足でお伝えしておきます。

ギャラリーのデザインについて

デザインはデフォルトで下記の６種類となっています。

プレビューを見ながら切り替えれるので、この辺は実際に見ながら決めることができます。

用途と好みで選べますが、使いやすいのは「Responsive Image Gallery」と「Masonry Image Gallery」あたりかと思います。

ギャラリーの表示方法は詳細に設定もできます

FooGalleryはギャラリー作成時の「Gallery Settings」という項目で、表示方法を変えることもできます。

具体例をあげておくと下記のような感じです。

上記内容でもごく一部という感じで、カスタマイズの範囲は非常に広いです。
ちなみにCSSによってカスタマイズすることも可能なので、コーディングができる方だと広がりはさらに半端ないですね。

ひとまず設定に関しての、重要な内容はここまでです。
デザインが決まったら、ギャラリーを保存してショートコードをコピーしておきましょう。

記事内への設置はショートコードを挿入するだけです。

STEP.1
ショートコードの確認

作成したギャラリーのショートコードは、管理画面の「FooGallery」→「Galleries」からも見ることができます。
作成時にコピーをしていな場合はここでショートコードのコピーをとっておきましょう。
STEP.2
記事にショートコードを挿入

コピーしたショートコードを、記事内の入れたい場所にカーソルを入れて貼り付けます。