WordPressプラグインRepeaterFieldでLightbox使用する

HOW TO
ライトボックス

WordPressプラグインAdvanced Custom Fieldの有料アドオンRepeaterFieldでサムネイル画像とクリック後の画像を2枚使わず1枚のみで、Lightboxを表示させる方法をご紹介します。

クライントが更新しやすいよに

更新

Repeater Fieldの詳しい使い方についてはWordPressプラグインACF拡張Repeater Fieldの使い方参考にしてください。

クライントが更新しやすいようにリピーターフィールドで画像を簡単に追加でき、かつクリックする画像と大きくなる画像を一緒にする方法をご紹介します。 このwebサイトの会社概要ページで使用しています。 wordpressのLightbox系プラグインは使用せずに、プラグインなしでLightboxを使用します。

lightboxを設置

イメージ

lightboxサイトよりダウンロードしjsとcssとimagesを任意のファイルに設置します。jquery.jsはwordpressのものを使用する場合は何もせず。 自分用意したjqueryを使いたい場合はfunctions.phpに記述します。

headに.jsと.cssを指定

  1. <head>
  2. <script src="js/lightbox.min.js"></script>
  3. <link href="css/lightbox.css" rel="stylesheet" />
  4. </head>

html

  1. <ul id="gallery">
  2.     <li>
  3.         <a href="../pic01jpg-500x500.jpg" rel="lightbox[imagegroup]">
  4.             <img src="../pic01jpg-500x500.jpg" alt="aタグと同じ画像" />
  5.         </a>
  6.     </li>
  7.     <li>
  8.         <a href="../pic02jpg-500x500.jpg" rel="lightbox[imagegroup]">
  9.             <img src="../pic01jpg-500x500.jpg" alt="aタグと同じ画像" />
  10.         </a>
  11.     </li>
  12.     <li>
  13.         <a href="../pic03jpg-500x500.jpg" rel="lightbox[imagegroup]">
  14.             <img src="../pic01jpg-500x500.jpg" alt="aタグと同じ画像" />
  15.         </a>
  16.     </li>
  17.     <li>
  18.         <a href="../pic04jpg-500x500.jpg" rel="lightbox[imagegroup]">
  19.             <img src="../pic01jpg-500x500.jpg" alt="aタグと同じ画像" />
  20.         </a>
  21.     </li>
  22. </ul>

css

画像のサイズをリサイズしない場合はcssでliにoverflow: hidden;などをかけて制御します。

  1. ul#gallery {
  2.     overflow: hidden;
  3.     width: 80%;
  4.     margin: 0 auto 40px auto;
  5. }
  6.  
  7. ul#gallery li{
  8.     width: 23.5%;
  9.     float: left;
  10.     margin: 0 2% 2% 0;
  11. }
  12.  
  13. ul#gallery li:nth-child(4n) {
  14.     margin: 0 0 2% 0;
  15. }
  16.  
  17. ul#gallery li img{
  18.     width: 100%;
  19. }

functions.php

functions.phpに画像のサイズを指定します。

  1. <?php
  2. //固定ページの画像サイズをリサイズ
  3. add_theme_support('post-thumbnails');
  4. add_image_size('gallry-image', 500, 500, true);
  5. ?>

php

  1. <!--gallry-->
  2. <?php if( have_rows('gallry') ): ?>
  3. <ul id="gallery">
  4. <?php while( have_rows('gallry') ): the_row();
  5.         // vars フィールド名
  6.         $gallry_img = get_sub_field('gallry_img');
  7.         // resize
  8.         $thumb = $gallry_img['sizes'][ 'gallry-image' ];
  9. ?>
  10.  
  11. <?php if( $thumb ): ?>
  12.     <li>
  13.         <a href="<?php echo $thumb; ?>" rel="lightbox[imagegroup]">
  14.             <img src="<?php echo $thumb; ?>" alt="<?php echo $gallry_img['alt'] ?>" />
  15.         </a>
  16.     </li>
  17. <?php endif; ?>
  18.  
  19. <?php endwhile; ?>
  20. </ul>
  21. <?php endif; ?>
  22. <!--/gallry-->

説明

  1.     <li>
  2.         <a href="<?php echo $thumb; ?>" rel="lightbox[imagegroup]">
  3.             <img src="<?php echo $thumb; ?>" alt="<?php echo $gallry_img['alt'] ?>" />
  4.         </a>
  5.     </li>

Repeater Fieldの詳しい使いかたはWordPressプラグインACF拡張Repeater Fieldの使い方をご参照の上今回は<a>とimgにただphpで同じ値を入れることをしました。こうすることによって1枚の画像でサムネイル画像とクリック後の画像を同じにしてクライントが一々画像をリサイズしなくていい使い方です。

この記事を書いた人

稲葉 恭平

稲葉 恭平

愛知県刈谷市・名古屋でホームページ制作をしているダブダブダブのwebデザイナーです。 デザインしたりコーディングしたりマーケティング・ コンテンツSEOだったり、wordpressの組み込みをしています。 記事が参考になったらシェアして頂けると幸いです。