【高機能】WordPressにギャラリーを追加できる「FooGallery」の使い方

「少し凝った、レスポンシブな画像ギャラリーを簡単に作成したい。」

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

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

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

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

FooGalleryを選んだ理由

ギャラリーのプラグインには種類がありますが、FooGalleryを選んだ理由を少しお伝えしておきます。

主な理由は下記です。

分かりやすく３点にわけましたが、つまりは「高機能」であるということです。

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

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

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

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

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

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

インストール後にポップアップが出ますが、ここはスキップして大丈夫です。
これで使用できる状態になりました。

FooGalleryの使い方は、以下の２点を抑えておけばOKです。

それでは１つずつ解説していきます。

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
記事にショートコードを挿入

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