【Easy FancyBox】
ポップアップに便利なプラグイン
「Easy FancyBox」はユーザーフレンドリーなポップアッププラグインで、これをWordPressサイトに導入すると、画像やメディアのリンクをクリックするとポップアップが表示されるようになります。このプラグインを活用することで、商品画像の詳細表示や、地図の拡大表示など、さまざまな場面での視覚的なアピールが可能です。設定はとても簡単で、プラグインをインストールして有効化した後、画像にメディアファイルへのリンクを設定するだけです。使い勝手が良いため、ぜひ一度お試しをお勧めします。
Easy FancyBox
同プラグインでできることは以下のような内容です。
動画のサイトはこちらです。
このプラグインは、画像、PDF、Flash ファイルなどのメディアを、シンプルでエレガントなオーバーレイ（モーダルウィンドウ）で表示する機能を提供します。ユーザーがリンクをクリックすると、そのコンテンツはページの背後を暗くしながら前面にポップアップ表示され、ユーザー体験を向上させることができます。また、画像ギャラリーでグループを組めば、動画のようにスライドすることも簡単にできます。
プラグインの導入
上記プラグインを検索し、有効化してください。
ポップアップの実装
メディアファイルのリンクがトリガーとなる
各ブロックに画像を配置し、その画像にメディアファイルのリンクを紐付けることで、その画像をクリックすると対応するメディアファイルがポップアップで開きます。ただし、単に画像をアップロードして設定するだけでは不十分です。ポップアップ機能を正しく動作させるためには、リンク先としてメディアファイルの正しいURL（アドレス、パス）を指定することが必要です。この点を忘れずに設定してください。
ギャラリーの実装
WordPressのグーテンベルクエディタに組み込まれている「ギャラリー」機能を使用すると、複数の画像をひとつのまとまりとして表示することができます。画像を選択してギャラリーを作成したら、そのギャラリーにメディアファイルへのリンクを設定します。この設定を行うと、画像をクリックした時にポップアップが開き、さらにページネーションが表示されるので、ユーザーがスライドショーのように画像を次々に見ていくことができます。
実装の応用
「Easy FancyBox」プラグインをHTMLコードやクラッシックエディタに適用することも可能です。もしHTMLコードを編集する必要がある場合、たとえばテキストウィジェットやカスタムHTMLブロックに、またはテーマのファイルに直接コードを追加することができます。クラッシックエディタを使用している時も、同様にプラグインの機能を有効化するためのコードを投稿やページに挿入することで、Easy FancyBoxの機能を利用することが可能です。
aタグの導入
ポップアップさせたい画像をメディアファイルにダウンロードします。そしてメディアを選択し画像のURLをクリップボードにコピーします。
そして画像をaタグで囲み、リンクを設定すればポップアップが実装されます。
スライドの実装
グーテンベルクでギャラリーを選択すると以下のクラスが親要素に設定されます。
.wp-block-gallery
特定のクラス名を持つ要素は、「Easy FancyBox」プラグインが反応するトリガーとして機能します。上記のクラスを親要素に設定し、その中の子要素である画像にリンクを指定することで、画像がスライドする機能を実現できます。
- 商品の紹介や、道案内等様々な用途に使用できる
- プラグインを有効化し、画像をメディアファイルに設定するだけで高度なホップアップが実現できる
- 画像をメディアファイルにすることがポイントである
- ギャラリー機能の使ってグループ化し、リンク先をメディアファイルに設定することでスライドが実現できる
- HTMLのimgタグにaタグを設定し、リンクをメディアファイルのURLに設定することでポップアップが可能
- ギャラリーのクラス「.wp-block-gallery」を親要素に設定。子要素のリンクを設定すればスライドが可能