【lightbox】Easy Fancyboxを Advanced Custom Fieldsで使いたい

こんにちは！フリーランスWebディレクターののせっち@nosecchi01です。

画面をクリックしたときに画像を拡大表示してくれるlightbox。
jQueryもありますが、ワードプレスの場合はEasy Fancyboxというプラグインを使うのが便利です。

公式サイト

https://ja.wordpress.org/plugins/easy-fancybox/

基本的な使い方はとても簡単で色々なブログで紹介されています。
しかし、Advanced Custom Fields(以下ACF)で使う場合は少し工夫が必要です。

自分への備忘録も兼ねて記します。同じようにハマった人の道しるべとなれば幸いです。

やることはとても単純です。

それではいってみましょう。

Easy Fancyboxについて軽くおさらい

基本的な使い方についてはいくらでも記事がありますので、さっくりいきます。

とても簡単です。

これでクリックした画像を拡大表示してくれます。
商品一覧ページなどで、サムネイル的に小さく画像を並べる場合などに便利です。

ただし、ACFではこの方法は使えません。

ACFでは【メディアファイル】を選択できない。

ACFで画像を選択した場合メディアファイルを選択する事ができません・・・。

選択できないというか、項目自体がありませんね・・・。

では、どうすればいいのか？

答え：aタグを使うだけ【コピペOK】

とても単純です。拡大させたい画像のimgタグをaタグで囲み、メディアファイルのリンクを貼ればOKです。

以下のように記述します。

<?php 
  $photo_01 = get_field('photo_01')
  $photo_02 = get_field('photo_02');
  $photo_03 = get_field('photo_03');
?>

<?php if (!empty($photo_01)) : ?>
<div class="item-large">
  <a href="<?php echo $photo_01; ?>">
    <img src="<?php echo $photo_01; ?>" alt="photo_01">
  </a>
</div><!-- /.item-large -->
<?php endif; ?>
<?php if (!empty($photo_02)) : ?>
<div class="item-mid">
  <a href="<?php echo $photo_02; ?>">
    <img src="<?php echo $photo_02; ?>" alt="photo_02">
  </a>
</div><!-- /.item-mid -->
<?php endif; ?>
<?php if (!empty($photo_03)) : ?>
<div class="item-mid">
  <a href="<?php echo $photo_03; ?>">
    <img src="<?php echo $photo_03; ?>" alt="photo_03">
  </a>
</div><!-- /.item-mid -->
<?php endif; ?>

簡単に解説

aタグを使って、メディアファイルとリンクを紐づけます。

出力の際は自動的にclass=”fancybox image”が付きます。

こんなかんじです！

投稿画面で「メディアファイル」を選択すると、自動でaタグでimgタグが囲まれます。
それをテンプレートファイルでやっているだけです。

おまけですが、

<?php if(!empty($value)) :?>
<!--カスタムフィールドで画像が選択されていなければ表示しない-->
<?php endif; ?>

上記の記述で、画像データが選択されていない場合はimgタグを出力しないようにしています。

まとめ

・ACFでは画像のリンク先→メディアファイルを選択できない。
・ACFでEasy Fancyboxを使いたい場合はaタグで囲んであげればOK。