ライトボックス機能を実装するWordPressプラグインEasy FancyBoxの使い方

こんにちは、今日はWordPressサイトにライトボックス機能を追加するプラグイン、Easy FancyBoxの使い方についてまとめていきます。

確認環境

WordPress 5.3.4

インストール方法

プラグインの新規追加メニューでEasy FancyBoxと検索してインストール

または以下の公式サイトからダウンロードして追加します。

Easy FancyBox

使い方

画像ブロックで画像を表示、そのブロックのリンクの編集メニューから「メディアファイル」を選択します。
通常はこの設定では画像クリック時に別ページで画像が表示されますが、プラグインを有効化しているとライトボックス表示になります。

設定

プラグインの設定については設定 > メディアの設定画面にプラグイン用の項目が追加されます。

メディア

FancyBoxを有効化するメディアの種類を設定します。

項目	説明
FancyBox を有効化	プラグインの有効化するメディアの種類を設定します。

オーバーレイ

コンテンツを開いた際に周囲に表示されるオーバーレイの設定を行います。

オーバーレイでその下のコンテンツが覆われ、オーバーレイをクリックすることでもコンテンツを閉じることができます。

項目	説明
FancyBox でコンテンツが開かれた周囲にオーバーレイを表示	オーバーレイを表示するか設定します。
オーバーレイがクリックされた時 FancyBox を閉じる	オーバーレイをクリック時にコンテンツを閉じるか設定します。
不透明度	オーバーレイの不透明度を設定します。
色	オーバーレイの色を設定します。

ウィンドウ

外観

項目	説明
閉じるボタン (X) を表示	ウィンドウに閉じるボタンを表示します。
背景色	pro版のみ
テキスト色	pro版のみ
タイトル色
枠線の色
ボーダー角丸	pro版のみ

寸法

項目	説明
幅
高さ
枠線
マージン

動作

項目	説明
Center while scrolling (always disabled on touch devices and when content, including the title, might be larger than the viewport)	コンテンツをスクロールに追従させるか設定します。
Esc キーで FancyBox を閉じる	コンテンツをEscキーで閉じられるようにするか
Scale large content down to fit in the browser viewport.
開く速度
閉じる速度
動作時間
Include the Mousewheel jQuery extension script to allow gallery browsing by mousewheel action.

その他

自動ポップアップ

項目	説明
ページロード時に開く
ミリ秒単位で遅くする
最初の訪問の後はポップアップを隠す

ブラウザーや端末の互換性

項目	説明
ブラウザー / デバイスの viewport 幅最小値
IE8 互換のスタイルルールを適用するかどうか

テーマとプラグインの互換性

項目	説明
FancyBox スクリプトの優先度
スクリプトをフッターからテーマのヘッダーへ移動
WordPress の標準の jQuery ライブラリを含めない
wp_add_inline_script/style を利用しない

上級者モード

項目	説明
Include the Metadata jQuery extension script to allow passing custom parameters via link class..
WPBakery / Visual Composer – Masonry Grid Gallery compatibility.

画像

項目	説明
自動検出
設定対象

動作

項目	説明
トランジションイン ( 出てくる時 )
イージングイン
トランジションアウト (引っ込む時)
イージングアウト
エラスティックトランジションの間、透明にフェードする。
コンテンツがクリックされたら FancyBox を閉じる

外観

項目	説明
タイトルを表示。
タイトルの位置
タイトルにサムネイルの alt 属性を許可する
上級者モード

ギャラリー

項目	説明
自動ギャラリー
ギャラリーのナビゲーション矢印を表示する
ギャラリー閲覧にキー操作を許可する
Make galleries cyclic, allowing you to keep pressing next/back.
変更速度
フェード速度
上級者モード