WePOP – Gutenberg Gallery & Video Lightbox

説明

1ページに複数のギャラリーを設置して、スライドショーですべての画像が混ざってしまった経験はありませんか?

多くのライトボックスプラグインは、ページ上のすべての画像をひとつの大きなグループとして扱います。それらを分けるには、ショートコードの追加、属性の手動設定、あるいは複雑なプラグイン設定が必要です。動作はしますが、非常に手間がかかります。

WePOPはこれを自動で解決します。

通常通りWordPressのギャラリーブロックを配置してください。WePOPは各ギャラリーを個別に検出し、それぞれ独立したスライドショーを作成します。余計な手順は不要です。設定画面でワンクリックするだけでグループ化モードを切り替えられます。

このプラグインは、23年のサイト制作経験を持つプロフェッショナルによって開発されました。すべての機能は、実際の制作現場での必要性に基づいて作られています。

WePOPが解決する課題

例えば、1ページに「料理」「内装」「スタッフ」の3つのギャラリーがある飲食店のサイトを想像してください。多くのライトボックスプラグインでは、画像をクリックすると3つのグループがすべて混ざったスライドショーになってしまいます。

通常、これを解決するには以下の作業が必要です:
すべての画像に rel 属性を手作業で追加する
* ギャラリーごとにショートコードを書く
* Installing a separate gallery management plugin
* 別のギャラリー管理プラグインをインストールする

WePOPを使えば、そのような作業は一切不要です。すでに作成したギャラリーブロックの構造をそのまま利用します。

WePOPの特徴

Gutenbergネイティブのグループ化 — 手作業不要
WePOPはギャラリーブロックを個別のグループとして読み取ります。各ギャラリーに自動で専用のスライドショーが作成されます。設定画面で3つのモードをワンクリックで切り替えられます:
Gallery Blocks Mode — ギャラリーブロックごとに独立したスライドショー(推奨)
All Images Mode — ページ内のすべての画像をひとつのスライドショーに連結
No Grouping Mode — すべての画像を1枚ずつ個別に表示

MP4動画ポップアップ — YouTubeアカウント不要
製品デモ、物件紹介、会社紹介などの動画を自社で管理できます。WePOPはMP4ファイルをオーバーレイで直接再生するため、YouTubeやVimeoにアップロードする必要がなく、埋め込み制限や外部ブランドの表示もありません。必要に応じてYouTubeやVimeoももちろん利用可能です。

メディアのリンクにだけ反応する
WePOPは画像や動画ファイルへのリンクにのみ反応します。ナビゲーション、ボタン、ロゴなどは完全に無視されるため、誤作動の心配がなく、手動で除外設定をする手間もありません。

キャプションが写真を隠さない
代替テキスト(Alt)のキャプションは画像の上に重ねるのではなく、画像の下の専用エリアに表示します。縦長の写真でも、写真全体が隠れることなく表示されます。スライドショーモードでは、キャプションも画像と一緒にスライドします。

画像ごとのポップアップ無効化切り替え
特定の画像だけをポップアップさせず、新しいタブで開きたいですか?その場合は、画像ブロックのサイドバーにあるトグルを切り替えるだけです。コードを書いたり、クラス名を覚えたりする必要はありません。

キーボード操作とアクセシビリティに対応
Escキーでポップアップを閉じ、矢印キーでギャラリーを操作できます。すべての操作ボタンにはスクリーンリーダー用の適切なラベルが付与されています。企業サイトや官公庁、アクセシビリティを重視するプロジェクトに最適です。

対応メディア

  • 画像ファイル: jpg, jpeg, png, gif, webp, svg
  • 動画サービス: YouTube, Vimeo
  • 直接動画ファイル:MP4

こんな方におすすめ

  • カメラマン・フォトスタジオ — 1ページに複数のシリーズを掲載しても、それぞれが独立したスライドショーになります
  • 飲食・カフェ・サロン — 料理・内装・客室など、混ざることのないギャラリー展示
  • ビジネスサイト・コーポレートサイト — 自社サーバーで配信する製品やサービスの紹介動画
  • Web制作会社・デザイン事務所 — クライアントのサイトで競合が起きにくく、メンテナンス性に優れた信頼できるライトボックス

軽量設計

フロントエンドフレームワークではjQueryは不要です。WePOPはバニラJavaScriptで動作するため、テーマや他のプラグインとの競合が起きにくく、サイトの表示速度も低下させません。コアウェブバイタルへの影響も最小限です。

ドキュメント&サポート

ポップアップの動作条件

WePOPは、対応しているメディアファイルや動画URLに直接リンクしている場合にのみ動作します。通常のリンクやナビゲーション、メディア以外の要素には影響しません。

サポートされているメディア形式:
Image files: jpg, jpeg, png, gif, webp, svg
画像ファイル: jpg, jpeg, png, gif, webp, svg
Video services: YouTube, Vimeo
動画サービス: YouTube, Vimeo
Direct video files: MP4
直接動画ファイル: MP4

リンクの検出範囲について:
* 標準(デフォルト):投稿および固定ページにおいて、WePOPはメインコンテンツエリアのみ(<main>.entry-content、または#content)を検出します。ヘッダー、フッター、サイドバーは含まれません。
* 拡張設定:設定でフロントページ & ブログホームを有効にすると、フロントページやブログのインデックスでも読み込まれるようになり、投稿や固定ページ内の全域からリンクを検出します。
* 手動での除外:リンクまたは親要素にwepop-disableクラスを追加することで、その要素をスキップできます。

ポップアップモード設定

  • Gallery Blocks Mode — 各ギャラリーブロック内の画像が、それぞれ独立したスライドショーを形成します。ギャラリーブロックの外にある画像は個別に開きます。ほとんどのサイトで推奨される設定です。
  • All Images Mode — 検出範囲内のすべての対応画像がひとつのスライドショーにグループ化されます。
  • No Grouping Mode — すべての画像がナビゲーションなしで個別にポップアップ表示されます。

言語サポート

管理画面は以下の言語に対応しています:日本語、英語、スペイン語、フランス語、ドイツ語、中国語(簡体字)、イタリア語、韓国語、ポルトガル語(ブラジル)。

フィードバック

もしWePOPがプロジェクトの効率化に役立ちましたら、WordPress.org で評価をいただけますと幸いです。他のサイトオーナーがこのプラグインを見つける助けとなり、継続的な開発の支えになります。ありがとうございます。

スクリーンショット

インストール

  1. WordPress管理画面の プラグイン 新規追加 へ移動してください。
  2. WePOPを検索します。
  3. 今すぐインストールをクリックし、続けて有効化してください。
  4. 設定 WePOP に移動して、ポップアップモードや各種設定を選択してください。

これだけで完了です。WePOPが自動的にメディアリンクを検出し、動作を開始します。

FAQ

1ページに複数のギャラリーがある場合、画像が混ざってしまうことはありますか?

いいえ。「ギャラリーブロックモード」(初期設定)では、各ギャラリーブロックがそれぞれ独立したスライドショーになります。異なるギャラリーの画像が混ざることはありません。

ギャラリーを分けるために、ショートコードや属性を追加する必要はありますか?

いいえ。WePOPはギャラリーブロックの構造を自動的に読み取ります。ギャラリーごとに特別なマークアップや設定を追加する必要はありません。

WePOP に jQuery は必要ですか ?

いいえ。WePOPはバニラJavaScriptで構築されており、外部ライブラリへの依存はありません。

自社サーバーにある動画でも使えますか?

はい。WePOPはMP4への直接リンクに対応しています。動画ファイルにリンクするだけでポップアップ表示されます。YouTubeやVimeoのアカウントは不要です。

ブロックエディタ(Gutenberg)でも動作しますか?

はい。グループ化とスライドショーの挙動は、特にギャラリーブロックに合わせて構築されています。

Classic Editor でも使用できますか ?

はい。コンテンツ内の対応しているメディアリンクがポップアップを起動させます。画像のグループ化は、ギャラリーのマークアップが標準的なWordPressの構造に従っている場合に最適に動作します。

特定の画像だけポップアップさせないようにするにはどうすればよいですか?

ブロックエディターの画像ブロックサイドバーにある「ポップアップ無効」トグルを使用してください。コードは不要です。

フロントページやブログのインデックス(記事一覧)でポップアップを使うにはどうすればいいですか?

設定 WePOP にある フロントページとブログのインデックス を有効にしてください。これにより、それらのページでスクリプトが有効になり、投稿や固定ページでのリンク検出もページ全体が対象になります。

YouTubeやVimeoの動画が「再生できません」と表示されるのはなぜですか?

動画の所有者が外部サイトでの埋め込みを無効にしています。これは動画投稿者による制限であり、WePOPの問題ではありません。

サイトでポップアップが動作しないのはなぜですか?

最も多い原因は、キャッシュや最適化(ミニファイ)プラグインによるJavaScriptの変更です。最適化設定からWePOPのスクリプトを除外してみてください。

Elementorなどのページビルダーでも動作しますか?

基本的には可能です(ビルダーがメディアファイルへの標準的なリンクを出力している場合に限ります)。標準的ではないギャラリーウィジェットでは、自動グループ化がサポートされない場合があります。

WePOPを他のライトボックスプラグインと併用できますか?

同じリンクに対して2つのライトボックスプラグインが動くと競合します。予期しない動作が発生した場合は、他のライトボックスプラグインを無効化してください。

評価

このプラグインにはレビューがありません。

貢献者と開発者

WePOP – Gutenberg Gallery & Video Lightbox はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“WePOP – Gutenberg Gallery & Video Lightbox” は1ロケールに翻訳されています。 翻訳者のみなさん、翻訳へのご協力ありがとうございます。

“WePOP – Gutenberg Gallery & Video Lightbox” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

1.6.5

  • Updated plugin listing title, tags, and short description.
  • Removed deprecated gallery_only_grouping from settings save logic.
  • Validate popup mode (group_mode) against allowed values on save.

1.6.4

  • Tested up to WordPress 7.0.
  • Added minified front-end and editor assets (popup-min.js, popup-min.css, editor-min.js) for smaller file sizes in production.
  • Production loads minified assets by default; unminified sources load when SCRIPT_DEBUG is enabled.
  • Settings: Added a brief note inviting honest reviews and feedback on WordPress.org.
  • Updated translations for the settings screen (including the new review message).

1.6.3

  • 修正:画像ポップアップを閉じたとき、ドキュメントの keydown リスナーを解除(Escape に限らず、あらゆる閉じ方で)。
  • 動画ポップアップ:Escape キーで MP4・YouTube・Vimeo のオーバーレイを閉じる。
  • 設定:フロントページとブログ投稿一覧でもポップアップを有効化(初期値オフ)。
  • フロント/ホーム オフ:リンク検出を投稿と固定ページのメインコンテンツエリアのみに制限。
  • フロント/ホーム オン:フロントページとブログのインデックスで読み込み、ページ全体のリンク検出を有効化。
  • 修正:フロント/ホーム設定がオフの場合、固定フロントページで不要なスクリプトを読み込まないように改善。
  • Data-wepop のコンテンツフィルターに svg を追加。
  • スクリプト・スタイル・エディタ用スクリプトを WEPOP_VERSION で読み込み。
  • REST POST /wepop/v1/disable:引数スキーマとサニタイズを追加し、レスポンス形式を更新。
  • アクセシビリティ:閉じるボタンやナビゲーションに、ローカライズされた aria-label を追加。
  • 画像ライトボックス:Altキャプションがスライドショーの画像と一緒に横にスライドするように修正。
  • Altキャプション:画像の下に専用の行を使用し、縦長の写真でも重ならないように修正。
  • スタイリング:キャプションの背景バーを削除。コントラスト確保のため影付きの白文字を採用。
  • 翻訳の更新と設定画面のテキスト修正。

1.6.2

  • サイズの異なる画像でもスムーズに切り替わるよう、スライドショーの動作を改善。
  • グループ化されたギャラリーのスライドアニメーションを改善。
  • Altテキストの表示位置とスタイリングを更新。
  • Altテキストが空の場合は非表示にするよう変更。
  • マスクエリア(背景)クリック時のポップアップ終了動作を修正。

1.6.1

  • YouTube、Vimeo、MP4動画のポップアップ対応を追加。
  • エディターのサイドバーに、画像ごとの「ポップアップ無効」設定を追加。
  • ファイル形式判定とポップアップ起動ロジックを改善。
  • グループ化有効時のスライドショー遷移を改善。
  • 設定画面に基本情報セクションを追加。

1.6.0

  • ポップアップモード設定を追加 (ギャラリー / すべて / なし)。
  • スマートフォンでのスワイプ操作によるナビゲーションを追加。
  • ポップアップ表示中は背景のスクロールを無効化。
  • イタリア語、韓国語、ポルトガル語 (ブラジル) の 3 言語を追加。

1.5.4

  • 「グループ化しない」モードの文言を更新。
  • 不足していた gettext ラッパーを追加。
  • .pot および ja_JP 翻訳ファイルを更新。

1.5.3

  • 画像のグループ化モード設定を追加。
  • ギャラリーモード時、単体画像は個別に表示。
  • 多言語読み込みシステムを改善。
  • 翻訳を更新。

1.5.2

  • 属性の命名を data-wepop に修正。
  • ドキュメントと翻訳の改善。

1.5.1

  • 多言語インターフェースを改善。
  • 設定画面の UI を更新。

1.5

  • 初回公開リリース。