【WordPress実装】注目キャンペーンだけをスライダーで表示する方法【ACF×Swiper】

WordPressでキャンペーン情報をスライダー表示する際、「特定の投稿（例えば注目のもの）だけを出したい」というケースは多いですよね。この記事では、
ACF（Advanced Custom Fields）とSwiperを組み合わせて、
「注目フラグが立っている投稿のみをスライダー表示」する実装方法を解説します。

完成イメージ

• campaign というカスタム投稿タイプを使用
• campaign_featured（値は 'y'）というACFフィールドで「注目」にフラグを設定
• サムネイル画像には campaign_main（画像フィールド）を使用し、無い場合はアイキャッチ、さらに無い場合はダミー画像にフォールバック
• 最大4件まで表示
• スマホでも使いやすいサムネイル連動スライダー（Swiper v11）

ACFの準備

フィールド構成

フィールド名	フィールドタイプ	用途
campaign_featured	チェックボックス or セレクト	値が 'y' の場合だけスライドに出す
campaign_main	画像（返り値は URL 推奨）	メイン画像として使用

PHPテンプレートの記述

以下のコードを template-parts/sample-campaign-slider.php に設置します。

<?php
$max_items     = 4;
$no_image_url  = get_stylesheet_directory_uri() . '/img/sample/no-image.jpg';

$args = array(
  'post_type'      => 'campaign',
  'post_status'    => 'publish',
  'posts_per_page' => $max_items,
  'orderby'        => 'date',
  'order'          => 'DESC',
  'meta_query'     => array(
    array(
      'key'     => 'campaign_featured',
      'value'   => 'y',
      'compare' => '=',
    ),
  ),
);

$q = new WP_Query($args);
$slides = [];

if ($q->have_posts()) :
  while ($q->have_posts()) : $q->the_post();
    $img = get_field('campaign_main');
    if (is_array($img) && isset($img['url'])) {
      $img = $img['url'];
    } elseif (is_numeric($img)) {
      $img = wp_get_attachment_url($img);
    }
    if (empty($img)) $img = get_the_post_thumbnail_url(null, 'large');
    if (empty($img)) $img = $no_image_url;

    $slides[] = array(
      'title' => get_the_title(),
      'link'  => get_permalink(),
      'img'   => $img,
    );
  endwhile;
endif;
wp_reset_postdata();
?>
<?php if ($slides) : ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<style>
.sample-container { margin-bottom:30px }
.sample-container img { width:100%; height:auto }
.sample-container .swiper-slide-thumb-active { opacity:0.6 }
@media(max-width:768px) {
  .sample-container { padding:0 20px }
}
</style>

<div class="sample-container">
  <div class="swiper sample-main">
    <div class="swiper-wrapper">
      <?php foreach ($slides as $s) : ?>
        <div class="swiper-slide">
          <a href="<?= esc_url($s['link']); ?>">
            <img src="<?= esc_url($s['img']); ?>" alt="<?= esc_attr($s['title']); ?>">
          </a>
        </div>
      <?php endforeach; ?>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>

  <div class="swiper sample-thumbs" style="margin-top:10px">
    <div class="swiper-wrapper">
      <?php foreach ($slides as $s) : ?>
        <div class="swiper-slide">
          <img src="<?= esc_url($s['img']); ?>" alt="<?= esc_attr($s['title']); ?>">
        </div>
      <?php endforeach; ?>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const thumbs = new Swiper('.sample-thumbs', {
    slidesPerView: 4,
    spaceBetween: 5,
    allowTouchMove: false,
    loop: false,
    watchSlidesProgress: true,
    breakpoints: {
      768: {
        allowTouchMove: true,
        freeMode: true,
      }
    }
  });

  new Swiper('.sample-main', {
    loop: true,
    spaceBetween: 4,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    thumbs: {
      swiper: thumbs
    }
  });
});
</script>
<?php endif; ?>

呼び出しコード（例：トップページなど）

<section class="top-campaigns">
  <h2>注目のキャンペーン</h2>
  <?php get_template_part('template-parts/sample-campaign-slider'); ?>
</section>

まとめ

要点	解説
meta_query で featured のみに絞り込む	ACF の条件を満たす投稿だけを取得
画像が無ければ自動で代替画像を使用	ACF > アイキャッチ > ダミー画像 の3段階
スマホでも崩れない Swiper 連動スライダー	サムネイル連動 + レスポンシブ設定済み

補足アイデア

• 表示件数を動的にしたい場合は get_field('表示数') などにすると柔軟に対応できます。
• 投稿にソート順（数値）を設けたい場合は meta_key + orderby=meta_value_num で制御可能。
• Swiper v11 の構文は v6 以前と異なるので注意してください。

おわりに

今回は 「注目投稿だけをスライダーに出す」 を
テーマに、シンプルかつ安全なサンプルコードを紹介しました。
Swiper の設定や ACF の組み合わせ次第で、スタッフ紹介や導入事例スライダーにも応用できます。

「このまま導入したい」「既存サイトに組み込んでみたい」などあれば、お気軽にご相談ください！

Favorite