3テラバイト

プログラム関連備忘録サイト。主にゲーム。

WordPress

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

投稿日:2020年6月18日 更新日:

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

確認環境

WordPress 5.3.4

インストール方法

プラグインの新規追加メニューで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.
変更速度
フェード速度
上級者モード

-WordPress


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

WordPressカテゴリとタームのフィルターフック一覧

こんにちは、今日はWordPressカテゴリとタームのフィルターフックについてまとめていきます。 確認環境 WordPress 5.5.1 フィルターフック一覧 フック名説明category_desc …

no image

WordPressで投稿の更新時に表示されるメッセージのフィルターフックpost_updated_messagesの使い方

こんにちは、今日はWordPressで投稿の更新時に表示されるメッセージのフィルターフック、post_updated_messagesの使い方についてまとめていきます。 確認環境 使い方 以下の公式マ …

no image

WordPress投稿リスト列のフィルターフックmanage_{$post_type}_posts_columnsの使い方

こんにちは、今日はWordPressで投稿リスト列のフィルターフック、manage_{$post_type}_posts_columnsの使い方についてまとめていきます。 確認環境 WordPress …

no image

WordPressコメント、トラックバック、ピングのフィルターフック一覧

こんにちは、今日はWordPressでコメント、トラックバック、ピングのフィルターフックについてまとめていきます。 確認環境 WordPress 5.5.1 フィルターフック一覧 フック名説明comm …

no image

WordPressショートコードの作り方

こんにちは、今日はWordPressのショートコードの作り方についてまとめていきます。 確認環境 WordPress 5.5.1 作り方 ショートコードの追加にはadd_shortcodeという関数を …