WordPress用の5つのベストライトボックスプラグイン

公開: 2017-08-14

サイトの訪問者が画像をクリックするとどうなりますか?

ユーザーが画像をクリックしても、それでも画像が完全に表示されない場合、または画像ファイルにリダイレクトされる場合、これはユーザーエクスペリエンスの点で非常に悪い可能性があります…

これが、ライトボックスで画像を開くことが非常に重要な問題である理由です。 ユーザーが行き止まりに達するのを防ぎます。 代わりに、訪問者が別のページに移動することなく、画像の全体像を表示します。

WordPressでライトボックスを使用する利点は次のとおりです。

  • より良いユーザーエクスペリエンス
  • 訪問者は画像を丸見えで見る
  • バウンス率の低下
  • よりパーソナライズされたインタラクティブなエンゲージメント
  • 訪問者は複数の画像をより簡単に閲覧できます

ライトボックスを介してこれらすべてのポイントを達成することは、訪問者の信頼、ブランド認知度、およびコンバージョンを高めるのにも役立ちます。

問題は、ライトボックス機能がWordPressに組み込まれていないことです。 幸いなことに、ライトボックスプラグインソリューションに関しては多くのオプションがあります。

ライトボックスとは何ですか?WordPressに追加するにはどうすればよいですか?

ライトボックスは、ユーザーが画像またはビデオをクリックすると開くポップアップウィンドウです。 このウィンドウには、画像またはビデオのフルサイズのビューが表示され、画面の残りの部分は暗くなります。

ライトボックスには主に4つのタイプがあります。

  • 画像ライトボックス
  • ギャラリーライトボックス
  • ビデオライトボックス
  • スライダーライトボックス

これらのライトボックス機能はそれぞれ、WordPressサイトに簡単に追加できます。 WordPress用の最も便利なライトボックスプラグインを見てみましょう。

Elementor Lighbox:WordPress用の無料の画像、ギャラリー、スライダー、ビデオライトボックスプラグイン

image light box-fb

ライトボックス機能は、Elementorページビルダーに組み込まれています。 Elementorページに含めるすべての画像、ビデオ、ギャラリーには、ライトボックスのポップアップが自動的に表示されます。 ライトボックス機能に関するこのプラグインの大きな利点は、ライトボックスをアクティブ化するためにセットアップが不要なことです。 プラグインをインストールしてアクティブ化すると、使用するすべての画像、ギャラリー、スライダーカルーセルがライトボックスにポップアップ表示されます。

アクティブインストール: 100,000以上

5つ星レビュー: 324

このプラグインを選択する理由:

  • 事前設定は必要ありません
  • 画像、ギャラリー、スライダー、ビデオなど、あらゆる種類のメディアで機能します
  • ライトボックスはモバイル対応
  • ライトボックスの背景色を制御する

使い方:

  1. ライトボックスの動作を確認するには、Elementorエディターに移動し、画像、ギャラリー、またはカルーセルウィジェットをドラッグして、画像に割り当てます。
  2. [画像]> [コンテンツ]で、すべての画像がメディアファイルにつながっていることを確認して保存します。
  3. ページを表示する場合は、画像をクリックするとライトボックスモーダルが開きます。
  4. ビデオの場合、ビデオウィジェットをドラッグする必要があります
  5. 次に、[ビデオ]> [コンテンツ]> [画像オーバーレイ]をクリックし、画像オーバーレイをオンにして、ライトボックスをオンにします
  6. これで、ページを表示しているときにビデオをクリックすると、ライトボックスが開きます。

シンプルなライトボックス:基本的な画像とギャラリーのライトボックス

image1

プラグインをテストしたところ、ギャラリー画像と単一画像の両方で機能しました。 このプラグインについて私が気に入ったのは、追加のCSSやショートコードの使用が不要なことです。

プラグインをアクティブにし、設定をカスタマイズすると、画像のライトボックスが自動的に取得されます。 私が気に入らなかったのは、ライトボックスが開かないことが何度かあったことです。 その原因はまだわかりません。 このプラグインが提供するもう1つのユニークな機能は、1ページのすべての画像とギャラリーを1つのライトボックススライダーにグループ化することです。これにより、ライトボックスを開くと、ページ上の単一画像とギャラリー画像のすべての画像が表示されます。

アクティブインストール: 200,000以上

5つ星レビュー: 131

このプラグインを選択する理由:

  • ライトボックスは自動的に機能します(手動コーディングは必要ありません)
  • ライトボックスにメディアメタデータ(キャプション、説明など)を表示します
  • ページ上の画像とギャラリーをグループ化します

使い方:

  1. プラグインをアクティブ化する
  2. 新しいページを作成する
  3. 中に画像を挿入します
  4. 画像がメディアファイルにリンクしていることを確認してください。
  5. ページをプレビューすると、ライトボックスがポップアップ表示されます。

WordPressからダウンロード

WPビデオライトボックス:WordPressにビデオライトボックスを追加

image2

これは、ビデオ用の高度にカスタマイズ可能なライトボックスプラグインです。 私が見つけた最大の欠点は、ショートコードを使用していることでした。つまり、将来、オフにしたい場合は、サイト全体を調べてショートコードを変更する必要があります。

アクティブインストール: 70,000以上

5つ星レビュー: 38

このプラグインを選択する理由:

  • 関連する動画をオフにする
  • Xを押したときにのみ閉じるライトボックスのオプション
  • ライトボックスオーバーレイに画像、フラッシュ、YouTube、Vimeo、iFrameなどを表示する

使い方:

  1. プラグインをアクティブ化する
  2. ショートコードをエディターに配置します:[video_lightbox_youtube video_id =” G7z74BvLWUg&rel = 0” width =” 640” height =” 480”アンカー=”クリックしてください”]

WordPressからダウンロード

dFactoryによるレスポンシブライトボックス:最もカスタマイズ可能なライトボックスプラグイン

image6

あなたが多様性が好きな人なら、このライトボックスプラグインはライトボックススタイリングの必要性に答えるかもしれません。 SwipeBox、prettyPhoto、FancyBox、Nivo Lightbox、Image Lightbox、Tos“ R” Us、Featherlightの7種類のライトボックススクリプトを備えています。

アクティブインストール: 200,000以上

5つ星レビュー: 321

このプラグインを選択する理由:

  • 7つの異なるライトボックススクリプト:SwipeBox、prettyPhoto、FancyBox、Nivo Lightbox、Image Lightbox、Tos“ R” Us、Featherlight
  • 画像、ギャラリー、ビデオライトボックスで動作します
  • WooCommerce製品ギャラリーのサポート
  • 多くのアドオンと拡張機能
  • 各ライトボックススタイルごとの広大なカスタマイズ
  • 単一の投稿画像をギャラリーにグループ化する
  • 画像のタイトル、説明、キャプション、代替テキストまたは説明を表示する

使い方:

  1. プラグインをアクティブにしてライトボックスをアクティブにします
  2. 7つのライトボックススクリプトから1つを選択します
  3. 自動的にすべての画像とギャラリーがライトボックスポップアップとして開きます。

WordPressからダウンロード

ポップアップメーカー:他の状況のた​​めのライトボックス

image3

ビデオ、テキスト、ボタンセクションを含むElementorテンプレートを追加するなど、ライトボックスポップアップにさらに多様性が必要な場合は、ポップアップメーカープラグインを使用して、より複雑なライトボックスポップアップを作成できます。

アクティブインストール: 100,000以上

5つ星レビュー: 1,201

このプラグインを選択する理由:

  • ポップアップライトボックスのコンテンツを完全に制御する
  • スライドアウト、バナーバー、フローティングスティッキー、通知、ロード画面、ビデオライトボックス、オプトインフォームを作成します
  • Elementorテンプレートの埋め込みで完全に機能します
  • 高度なトリガー設定

使い方:

  1. プラグインをアクティブ化する
  2. 新しいポップアップを追加します(これはカスタム投稿タイプです)
  3. Elementorでポップアップコンテンツを作成する
  4. ライブラリに保存します
  5. テンプレートのショートコードをコンテンツボックスに貼り付けます
  6. 必要に応じてポップアップのスタイルを設定します

WordPressからダウンロード

結論

WordPressにライトボックス機能を追加する5つの異なる方法を見てきました。

Elementor:追加のプラグインを必要とせずに、ページビルダー内で作成したウィジェットにライトボックスを追加する場合

シンプルなライトボックス:使いやすいシンプルなソリューションが必要な場合

WPビデオライトボックス:ビデオのその他のカスタマイズオプション

レスポンシブライトボックス:高度なカスタマイズオプション用

ポップアップメーカー:要素が混在するポップアップライトボックス用

WordPressでライトボックスポップアップを設定する方法についてお聞かせください。 以下のコメントであなたの考えを共有してください。