【WordPress】Advanced Custom Fieldsで出力した画像にlightboxが効かない場合の対処法

Advanced Custom Fieldsで画像投稿フィールドを追加して、拡大表示ができるようにリンク付きでページに出力したのですが、画像をクリックして拡大表示した際に「lightbox」のエフェクトがかかりませんでした。

使用しているlightboxプラグインは、「wp-jquery-lightbox」です。

ということで色々原因を調べてみました。

問題なくエフェクトがかかる画像のaタグをよく見てみると、aタグに「rel=”lightbox”」が付与されていました。

ということで、Advanced Custom Fieldsでの入力内容を出力するコードに、この記述を追加してみました。

※デフォルト

          <?php if(get_field( "photo" )): ?>
          <a href="<?php the_field( "photo" ); ?>"><img src="<?php the_field( "photo" ); ?>"/></a>
          <?php endif; ?>

↓

※以下に変更（aタグに「rel=”lightbox”」を追加）

          <?php if(get_field( "photo" )): ?>
          <a href="<?php the_field( "photo" ); ?>" rel="lightbox"><img src="<?php the_field( "photo" ); ?>"/></a>
          <?php endif; ?>

これでエフェクトがかかるようになりました。

タグ: | 2016年7月25日

« »

関連記事