LityとAdvanced Custom Fieldsを組み合わせてポップアップ表示させてみた

Lityとは

ポップアップ表示できるjQueryプラグイン

Lityとは、Webサイト上で画像や動画、インラインコンテンツ、Googleマップ、YouTubeなどをポップアップ表示させることができるjQueryプラグインです。

特に難しい設定やオプションなどもなく、シンプルで軽量な設計となっています。レスポンシブ対応もしています。

Advanced Custom Fieldsについて

Advanced Custom Fieldsとは

WordPress（ワードプレス）の投稿やカスタム投稿、固定ページなどにカスタムフィールドを追加して入力項目をカスタマイズできるプラグインです。

200万以上のWebサイトで利用されているプラグインで、評価の平均値も最大の5つ星と、非常に多くのユーザーに信頼されていることが分かります。

Advanced Custom Fieldsの基本的な使い方と全フィールドタイプの紹介

LityとAdvanced Custom Fieldsでポップアップ表示させる方法

それでは、LityとAdvanced Custom Fieldsを組み合わせてポップアップ表示させる方法を紹介していきます。

Lityの実装

まずはjQueryプラグインLityの実装から始めていきます。Lityの提供元からダウンロードしていただくか、CDNから読み込みをお願いします。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lity/2.4.1/lity.min.js"></script>

header.phpなどでLityとjQueryを読み込みます。

<a href="https://source.unsplash.com/random/" data-lity="data-lity">Click</a>

次にポップアップ表示させるための記述を行います。aタグで「data-lity」属性を記述するだけでポップアップ表示が可能になります。※「data-lity=”data-lity”」ではなく、「data-lity」と省略して記述することも可能です。

上記は海外のフリー素材サイトUnsplash（アンスプラッシュ）からランダムで画像を取得するリンクを設置しています。

フィールドタイプ別の実装

続いて、Advanced Custom Fieldsのフィールドタイプ別にポップアップ表示させる方法を紹介します。

画像フィールドでポップアップ表示させる方法

おそらくLityと組み合わせる場合に最も利用シーンが多い画像フィールドで登録した画像をポップアップ表示させる方法を紹介します。

Advanced Custom Fieldsの画像フィールドの使い方

画像フィールドを出力させる際に、Lityの属性を付与したaタグを記述します。

<?php if(get_field('profile_image')): ?>
  <a href="<?php the_field('profile_image'); ?>" data-lity="data-lity">
    <img src="<?php the_field('profile_image'); ?>" >
  </a>
<?php endif; ?>

戻り値の形式を「画像URL」にしたシンプルな記述方法です。画像フィールドで登録した画像のURLをaタグに指定しています。

imgタグを囲み、画像をクリックした際に、画像がポップアップ表示されます。

YouTubeやGoogleマップをポップアップ表示させる場合

YouTubeやGoogleマップについては、URLフィールドやテキストフィールドに該当のURLを登録しておくことで、サイト上に出力させてポップアップ表示させることができます。※URLフィールドの使い方については省略させていただきます。

<?php if(get_field('youtube_url')): ?>
  <a href="<?php the_field('youtube_url'); ?>" data-lity="data-lity">
    YouTubeを表示
  </a>
<?php endif; ?>

aタグ内のテキストをクリックすると、URLフィールドやテキストフィールドで登録したYouTubeのURLを元に、YouTube動画がポップアップ表示されます。

ページ内に多くの画像や埋め込み要素をそのまま設置してページの表示速度が遅くなってしまっている場合、ポップアップを活かしてユーザーに必要なタイミングでコンテンツを読み込ませることで、ページを表示させる際の処理を軽減することができます。

まとめ

今回は、LityとAdvanced Custom Fieldsを組み合わせてポップアップ表示させる方法を紹介させていただきました。

WordPressのテンプレートファイルなどに直接記述すれば、ACFを使用することなくポップアップ表示させることは可能ですが、PHPファイルの操作やHTMLなどを編集することができない人でも、WordPressのダッシュボード（管理画面）でポップアップ表示させたいコンテンツの管理が手軽にできるようになります。

本サイトでは引き続き、Advanced Custom Fields関連の記事を発信し続けていきますので、今後ともよろしくお願いします。