アピールエリアにサムネイル画像付きのスライドを追加する方法

はじめに

以下をCocoonで実現します。

【SWELL】メインビジュアルのスライド画像の下にサムネイル画像を表示するカスタマイズ｜かんた🌊SWELLマニア

※2023年12月更新 WordPressテーマSWELLのカスタマイズ作業メモです。 メインビジュアルのスライドにサムネイル画像を表示してみました！ SWELLの標準仕様として、カスタマイザーのメインビジュアルで「画像」を選択し、複数の画...

note.com

フロントページのとき、カルーセル機能（Slick.js）を用い、スライド表示するヘッダーをアピールエリアの前に追加します。

この記事では、この方法について説明します。

完成イメージ

本ページに完成イメージを反映させます。

実装手順

以下のコードをfunctions.phpに追加します。

// テンプレート（アピールエリア）の直前に追加
add_action('cocoon_part_before__tmp/appeal', function () {
  if (!is_front_top_page()) {
    return;
  }

  // スライド画像
  $images = [
    '画像URL',
    '画像URL',
    '画像URL',
  ];

  if (empty($images)) {
    return;
  }

  ?>
  <div class="hero-slider">
    <ul class="hero-slider__main">
      <?php foreach ($images as $img) : ?>
        <li>
          <img class="hero-slider__image" src="<?= esc_url($img); ?>" alt="">
        </li>
      <?php endforeach; ?>
    </ul>

    <ul class="hero-slider__thumbs">
      <?php foreach ($images as $img) : ?>
        <li class="hero-slider__thumb">
          <img class="hero-slider__thumb-image" src="<?= esc_url($img); ?>" alt="">
        </li>
      <?php endforeach; ?>
    </ul>
  </div>
  <?php
});


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  if (!is_front_top_page()) {
    return;
  }

  // カルーセル表示がない場合
  if (!is_carousel_visible()) {
    wp_enqueue_style('slick-theme-style', get_template_directory_uri() . '/plugins/slick/slick-theme.css');
    wp_enqueue_script('slick-js', get_template_directory_uri() . '/plugins/slick/slick.min.js', ['jquery'], false, true);
  }

  ob_start();
  ?>
  .hero-slider ul {
    margin: 0;
    padding: 0;
  }

  /* スライド画像 */
  .hero-slider__image {
    height: calc(100vh - var(--slide-top));
    object-fit: cover;
    object-position: top center;
    width: 100%;
  }

  /* サムネイル */
  .hero-slider__thumbs {
    bottom: 0;
    position: absolute;
    width: 100%;
  }

  .hero-slider__thumb {
    background-color: #fff;
    width: 200px !important;
  }

  /* サムネイルのスライド禁止 */
  .hero-slider__thumbs .slick-track {
    display: flex;
    justify-content: center;
    transform: unset !important;
  }

  .hero-slider__thumb-image {
    opacity: 0.3;
    transition: opacity 0.3s linear;
    width: 100%;
  }

  .hero-slider__thumbs .slick-current .hero-slider__thumb-image {
    opacity: 1;
  }
  <?php
   $handle = 'hero-slider';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());

  ob_start();
  ?>
  jQuery(function ($) {
    $('.hero-slider__main').slick({
      autoplay: true,
      arrows: false,
      autoplaySpeed: 5000,
      fade: true,
      pauseOnHover: false,
      pauseOnFocus: false,
      asNavFor: '.hero-slider__thumbs',
    });

    $('.hero-slider__thumbs').slick({
      slidesToShow: 3,
      asNavFor: '.hero-slider__main',
      focusOnSelect: true,
    });

    function updateSlickPosition() {
      const target = $('.hero-slider__main');

      if (target.length) {
        const slideTop = target.offset().top;

        $('html').css('--slide-top', slideTop + 'px');
      }
    }

    updateSlickPosition();

    $(window).on('resize', updateSlickPosition);
  });
  <?php
  wp_add_inline_script('slick-js', ob_get_clean(), 'after');
}, 20);

さいごに

今回紹介した方法を使えば、Cocoonテーマでも簡単にサムネイル付きのスライドショーを実装することができます。
スライドとサムネイルを連携させることで、ユーザーに視覚的にわかりやすいインターフェースを提供できます。