投稿（記事）で複数の画像を登録し、WEBサイトで作ったサムネイルスライダーを表示するにはどうすればいいでしょうか？

Question

前提・実現したいこと

WEBサイトで作ったサムネイルスライダーをwordpressの投稿詳細ページに表示したいのですが
どのように設置するのでしょうか？
single-works.phpのテンプレートを使い詳細3ページによってサムネイルスライダー画像が切り替わるイメージの作り方です。

このようなサムネイルスライダーを表示させたいです。

投稿ページでHTMLとして編集でソースコードを流し込みました。

single-works.phpのソースコード

<?php get_header(); ?>
    <main id="works_detail-bg" class="works_detail-container">
      <div class="works_detail-contents">
        <section class="works_detail-blc clearfix">
          
        <?php if(have_posts()): ?>

        <?php while(have_posts()): the_post(); ?>

          <div class="works_detail-left">
            <div id="wrap">
              <ul id="slider">
                <li class="slide-item"><img data-lazy="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list01.jpg" alt="画像"></li>
                <li class="slide-item"><img data-lazy="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list02.jpg" alt="画像"></li>
                <li class="slide-item"><img data-lazy="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list03.jpg" alt="画像"></li>
                <li class="slide-item"><img data-lazy="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list01.jpg" alt="画像"></li>
                <li class="slide-item"><img data-lazy="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list02.jpg" alt="画像"></li>
                <li class="slide-item"><img data-lazy="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list03.jpg" alt="画像"></li>
              </ul>
              <ul id="thumbnail-list">
                <li class="thumbnail-item"><img src="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list01.jpg" alt="画像"></li>
                <li class="thumbnail-item"><img src="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list02.jpg" alt="画像"></li>
                <li class="thumbnail-item"><img src="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list03.jpg" alt="画像"></li>
                <li class="thumbnail-item"><img src="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list01.jpg" alt="画像"></li>
                <li class="thumbnail-item"><img src="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list02.jpg" alt="画像"></li>
                <li class="thumbnail-item"><img src="<?php echo get_template_directory_uri(); ?>/images/works_list/works_list03.jpg" alt="画像"></li>
              </ul>
            </div>
          </div>
          <div class="works_detail-right">

            <h2 class="title"><?php the_title(); ?></h2>
            <span class="txt"><?php the_content(); ?></span>
            <p class="content">
            </p>
          </div>

          <?php endwhile; ?>

          <?php endif; ?>

        </section>

      </div>
    </main>
<?php get_footer(); ?>

Answer 1

ACFのリピーターフィールドを使うのが旧来の一般的な対応方法だろうけど
スライドショーのブロックのプラグインぐらいそろそろ出てるだろう

検索したらすぐ出た

しかしプラグインで追加したブロックはカスマイズはほぼできない
思い通りのスライドショーにカスタマイズとかはまず諦めることになるかも

オリジナルにこだわるならブロックを自作するのも選択肢
ただしスライドショーのブロックは初めての自作ブロックとしては
かなりハードルが高いので簡単なところから順番に作っていこう

Comments

[oyu]

お聞きしたいのですが、
プラグインを使いサムネイルスライダーは設置はできないのでしょうか？

[KazuhiroHatano]

すでにあるスライドショーをなんとかそのまま流用したいとか
オリジナルのデザインのスライドショーにしたいならACFで対応するのが現実的

オリジナルに拘らないなら管理画面でプラグイン検索して適当なの探せばよし
旧来のプラグインのスライダーはまあだいたい
jqueryのライブラリ使ってるのでカスタマイズの自由度も大体その範囲

使われてるのは大体slick、bxslider、nivosliderとかあたり
slickが比較的柔軟でレスポンシブ
nivosliderはトランジションが壮麗ではあるけど柔軟性はない