画像ギャラリープラグイン-Portfolio Filter Galleryの使い方

2020-06-23プラグイン

画像でも、動画でもOK!ギャラリーを簡単に見やすく、使いやすく設定出来、ショートコードでどこにでも埋め込めるプラグインです。

Portfolio Filter Gallery

 

インストール

プラグインの新規追加で検索してインストールし、有効化します。

 プラグイン名は、以下にカーソルを載せ右に出る「Copy」を押すことでコピー出来ます。

 

Portfolio Filter Gallery

Portfolio Filter Gallery

 

無料で利用可能ですが、一部機能には制限があります。

プロ版の価格については以下の通りです。

 

Portfolio Filter Gallery

 

新規ギャラリー作成

インストール、有効化すると「Portfolio Gallery」メニューが出来ます。

Add New Gallery」から新規作成。

Portfolio Filter Gallery

 

タイトルを入力

Portfolio Filter Gallery

 

 

Portfolio Filter Gallery

タイトル下に上図のようなワーニングメッセージが出る場合がありますが、内容は以下の通りですので、新しくインストールした方は無視でOK

セキュリティ上の理由により、WordPressガイドラインに従ってプラグイン設定コードを更新しました。

プラグインバージョン1.0.7以前を一度使用したユーザーは、下のボタンをクリックして、以前に保存した設定を最新のプラグインに従って更新する必要があります。

以前に作成したギャラリーや設定が失われるのを防ぎます。

このプロセスは1回実行され、すべてのギャラリー設定を更新し、新しいプラグインコードに応じてそれらを回復します。

すでに設定を更新している場合は、このプロセスを無視してください。

 

画像を追加

緑色の枠の中をクリックするとメディアライブラリーが開きますので、通常の画像挿入と同様に、メディアを選択し、追加します。

Portfolio Filter Gallery

 

メディアを編集

選択した画像(または動画)が並んでいますので、それぞれ、必要に応じて以下を編集します。

  1. 動画であれば、Videoに変更
  2. 表示されるテキストを編集
  3. リンク先が必要ならURLを入力

 

Portfolio Filter Gallery

 

上図、赤枠の部分に入力した文字は、以下のように表示されます。

ギャラリー内

Portfolio Filter Gallery

拡大時

Portfolio Filter Gallery

 

 

画像を追加・削除する

削除したい場合は「ゴミ箱」ボタンで簡単に削除可能。

Portfolio Filter Gallery

 

更に追加したい場合は、最初と同様に緑色の枠「ADD IMAGES」から。

Portfolio Filter Gallery

 

 

簡単設定3項目

最低3つの設定を変更するだけでも、十分に使えますので、まずはその3か所を解説します。

 

Configuration」を開きます。

画像サイズ

画像サイズ(サムネイル)を選択します。

初期値がフルサイズになっているので、サムネイルか中サイズに変更します。

  • サムネイル
  • フルサイズ

Portfolio Filter Gallery

 

ギャラリーの横配置で表示する数

クライアントのサイズごとに数を設定可能です。

初期値は上から 4,1,3,2です。

PC部分(2上から2つ目)は、「」ですので、これを変更します。(もちろん任意です)

Portfolio Filter Gallery

 

LightBoxの設定

このプラグインは、「Lightbox」を利用しています。

Lightboxとは、Webサイトでサムネイル画像などを拡大表示する為のJavaScriptとCSSで動作するアプリケーションです。

サイト上に表示されている画像をクリックすると、別ウィンドウ風に拡大表示されます。複数の画像をギャラリーに設定し、次々に画像をスクロールして見る事が出来ます。

Lightbox(公式サイト)

Lightbox(ウィキペディア)

LightBox Configuration」を開きます。

ギャラリーデザインを選択します。

Portfolio Filter Gallery

 

初期値:Bootstrap 3 LightBox

  • none
  • Bootstrap 3 LightBox
  • LD LightBox
noneにすると拡大画像へのリンクなし

 

Bootstrap 3 LightBox 表示例

Portfolio Filter Gallery

 

LD LightBox 表示例

Portfolio Filter Gallery

 

 

注意点

テーマによってはギャラリー機能やデザイン設定がある場合があるので、拡大後の画像がダブって表示される場合があります。

たとえばCocoonの場合は以下の設定を「なし」にしておくと思い通りに表示されます。

Cocoon画像設定

 

 

フィルターのOFFについて

Filters」を開きます。

 

フィルター振り分けが出来るのが特徴のプラグインですが、とりあえずフィルターなしで表示する際は、

フィルター設定をしておらず、フィルターが表示になっていると、以下のように選択肢はないのに「ALL」と出てしまう事がある為、

Portfolio Filter Gallery

 

フィルターをOFFにしておきます。

 

初期値が「表示する」になっているので、「YES」に変更

Portfolio Filter Gallery

 

 

フィルターについては後述していますので、最後の「フィルター設定」の項をご覧ください。

 

保存・公開

完成したら「公開」ボタンを押します。

記事同様、下書きのまま保存する事も出来ます。

 

編集画面の右側にショートコードがあるので、これをコピーして記事内やウィジェットに貼り付けます。

Portfolio Filter Gallery

 

または、ギャラリー一覧にもショートコードが表示されていて、コピー可能です。

Portfolio Filter Gallery

 

※テーマやプラグイン競合によっては、一覧では表示されない場合があります。Cocoonの場合は、表示されず。

 

 

その他の設定

ホバー時に影

Configuration」内

 

Portfolio Filter Gallery

 

サムネイルの説明表示など

以下の画像は初期値ですので、デフォルトで説明は表示されます。

画像番号を出したい場合は、Yesに変更するなど、任意で設定します。

Portfolio Filter Gallery

 

画像番号の表示例

Portfolio Filter Gallery

 

 

フィルター設定

フィルターとは

以下のように、ギャラリー登録した画像をカテゴリー分けする事が出来ます。

Portfolio Filter Gallery

 

選択すると、そのカテゴリーの画像のみを表示する事が出来ます。

Portfolio Filter Gallery

 

フィルター機能を使う場合は、まずフィルターカテゴリーを作成します。

無料版では4つまでしか作成できません!

 

メニューから「Filters」を開きます。

Portfolio Filter Gallery

 

Add New Category」を押します。

Portfolio Filter Gallery

初期設定で「all」があり、これは削除不可です。

これ以外に4つまで作成可能で、振り分けできるのは4種になります。

 

新しいカテゴリーを入力し、「Add Category」を押すと追加されます。

Portfolio Filter Gallery

 

ギャラリー編集画面の「Filters」で、フィルター表示を「Noにします。

初期値:No

ややこしいですが、Hide filters(フィルターを隠す)項目はYesが非表示、

表示される設定が「No」になります。

ボタンの色と文字色を設定出来ます。

Portfolio Filter Gallery

 

各画像にどのフィルターを割り当てるかを設定します。

Portfolio Filter Gallery

 

カスタムCSS

更にデザインを自分好みにしたいなどと言った場合には、カスタムCSSに記述する事で実現可能です。

Portfolio Filter Gallery

 

 

関連記事