MENU

SWELL│投稿リストをスライダー表示する方法│Swiper

SWELLカスタマイズ

SWELLの投稿リストブロックは超便利なのですが、縦長になるのが欠点です。

これをスライダーで表示できると、スマホは特に省スペースになっていいですよね。

SWELLにはSwipterが格納されているので、実はJavaScriptをちょっと足すだけでスライダー表示できます。

例

目次

著者

motokiのアバター motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社
カスタマイズの依頼・相談

SWELL│投稿リストをスライダー表示する方法│Swiper

やり方は簡単です。

投稿リストを作成する

投稿リストブロックを作成して追加CSSクラスにslideという名前をつけます。

これだついている投稿リストだけスライダー表示するようにします。

SwiperをONに

SWELLに格納されているSwiperをONにします。

functions.phpに下記のコードを入力しましょう。

エラーが怖い人はCode Snippetsのプラグインを入れて、そこからコードを挿入しましょう。

wp_enqueue_script('swell_swiper');
wp_enqueue_style('swell_swiper');

条件をつけたい場合は以下の通り。

特定の記事だけ読み込む

function enqueue_swell_swiper_for_specific_post() {
    if (is_single(26907)) {
        wp_enqueue_script('swell_swiper');
        wp_enqueue_style('swell_swiper');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_swell_swiper_for_specific_post');

トップページだけ読み込む

function enqueue_swell_swiper_on_front_page() {
    if (is_front_page()) {
        wp_enqueue_script('swell_swiper');
        wp_enqueue_style('swell_swiper');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_swell_swiper_on_front_page');

JavaScript

あとはJavaScriptを入力するだけです。

記事下に入れるましょう。

document.addEventListener('DOMContentLoaded', function () {
  const sliders = document.querySelectorAll('.p-postListWrap.slide');

  sliders.forEach((sliderEl, index) => {
    const ul = sliderEl.querySelector('.p-postList');
    if (!ul) return;

    const items = Array.from(ul.children);

    // liにswiper-slideクラスを付与
    items.forEach(li => li.classList.add('swiper-slide'));

    // Swiper構造を作成
    const swiperWrapper = document.createElement('div');
    swiperWrapper.classList.add('swiper-wrapper');
    items.forEach(item => swiperWrapper.appendChild(item));

    const swiperContainer = document.createElement('div');
    const swiperId = `swiper-${index}`;
    swiperContainer.classList.add('swiper');
    swiperContainer.classList.add(swiperId);

    // wrapper追加
    swiperContainer.appendChild(swiperWrapper);

    // 元のul削除してswiper追加
    ul.remove();
    sliderEl.appendChild(swiperContainer);

    // ← ここでswiperの外側にナビゲーションを追加
    const prevBtn = document.createElement('div');
    const nextBtn = document.createElement('div');
    prevBtn.className = `swiper-button-prev swiper-button-prev-${index}`;
    nextBtn.className = `swiper-button-next swiper-button-next-${index}`;

    // swiper本体の前後に挿入（=外側）
    sliderEl.insertBefore(prevBtn, swiperContainer);
    sliderEl.appendChild(nextBtn);

    // Swiper初期化（セレクタを明示）
    new Swiper(`.${swiperId}`, {
      loop: true,
      slidesPerView: 1.5,
      spaceBetween: 20,
      navigation: {
        prevEl: `.swiper-button-prev-${index}`,
        nextEl: `.swiper-button-next-${index}`,
      },
      autoplay: {
          delay: 3000, // 3秒ごとに自動スライド
          disableOnInteraction: false // ユーザー操作後も自動再開
      },
      breakpoints: {
        960: {
          slidesPerView: 3
        }
      }
    });
  });
});

functions.phpでまとめて読み込む場合

function custom_swiper_script_on_frontpage() {
    if (is_front_page()) {
        // Swiper本体のスクリプトとスタイルを読み込む（必要であれば）
        wp_enqueue_script('swell_swiper');
        wp_enqueue_style('swell_swiper');

        // 独自のJSを出力
        add_action('wp_footer', 'output_custom_swiper_script', 20);
    }
}
add_action('wp_enqueue_scripts', 'custom_swiper_script_on_frontpage');

function output_custom_swiper_script() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
      const sliders = document.querySelectorAll('.p-postListWrap.slide');

      sliders.forEach((sliderEl, index) => {
        const ul = sliderEl.querySelector('.p-postList');
        if (!ul) return;

        const items = Array.from(ul.children);

        // liにswiper-slideクラスを付与
        items.forEach(li => li.classList.add('swiper-slide'));

        // Swiper構造を作成
        const swiperWrapper = document.createElement('div');
        swiperWrapper.classList.add('swiper-wrapper');
        items.forEach(item => swiperWrapper.appendChild(item));

        const swiperContainer = document.createElement('div');
        const swiperId = `swiper-${index}`;
        swiperContainer.classList.add('swiper');
        swiperContainer.classList.add(swiperId);

        // wrapper追加
        swiperContainer.appendChild(swiperWrapper);

        // 元のul削除してswiper追加
        ul.remove();
        sliderEl.appendChild(swiperContainer);

        // ← ここでswiperの外側にナビゲーションを追加
        const prevBtn = document.createElement('div');
        const nextBtn = document.createElement('div');
        prevBtn.className = `swiper-button-prev swiper-button-prev-${index}`;
        nextBtn.className = `swiper-button-next swiper-button-next-${index}`;

        // swiper本体の前後に挿入（=外側）
        sliderEl.insertBefore(prevBtn, swiperContainer);
        sliderEl.appendChild(nextBtn);

        // Swiper初期化（セレクタを明示）
        new Swiper(`.${swiperId}`, {
          loop: true,
          slidesPerView: 1.5,
          spaceBetween: 20,
          navigation: {
            prevEl: `.swiper-button-prev-${index}`,
            nextEl: `.swiper-button-next-${index}`,
          },
          autoplay: {
            delay: 3000, // 3秒ごとに自動スライド
            disableOnInteraction: false // ユーザー操作後も自動再開
          },
          breakpoints: {
            960: {
              slidesPerView: 3
            }
          }
        });
      });
    });
    </script>
    <?php
}

以上です。

あとは確認しましょう。

おまけ

左右のボタンだけつまらないので、装飾してみました。

CSS

/* スライダーの位置を相対指定にしてボタン位置基準にする */
.p-postListWrap.slide .swiper {
  position: relative;
}

/* ナビゲーションボタン（左右）を外側に出す */
.p-postListWrap.slide .swiper-button-prev,
.p-postListWrap.slide .swiper-button-next {
  top: 37%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  background: var(--color_main);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 左ボタン：左に外出し */
.p-postListWrap.slide .swiper-button-prev {
  left: -50px;
}

/* 右ボタン：右に外出し */
.p-postListWrap.slide .swiper-button-next {
  right: -50px;
}
@media (max-width: 599px) {
    .p-postListWrap.slide .swiper-button-prev {
        left: -12px;
    }
    .p-postListWrap.slide .swiper-button-next {
        right: -12px;
    }
}

/* カスタムプロパティ */
:root {
  --swiper-nav-size: 30px;
  --swiper-nav-border-width: 3px;
  --swiper-nav-color: #fff;
}

/* 疑似要素ベースの矢印 */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--swiper-nav-size) * 0.4);
  height: calc(var(--swiper-nav-size) * 0.4);
  box-sizing: border-box;
  border-style: solid;
  border-color: var(--swiper-nav-color);
  transform: translate(-50%, -50%) rotate(45deg) skew(10deg, 10deg);
}

/* 左矢印（←） */
.swiper-button-prev::after {
  border-width: var(--swiper-nav-border-width) var(--swiper-nav-border-width) 0 0;
  transform: translate(-50%, -50%) rotate(-135deg);
}

/* 右矢印（→） */
.swiper-button-next::after {
  border-width: 0 0 var(--swiper-nav-border-width) var(--swiper-nav-border-width);
  transform: translate(-50%, -50%) rotate(-135deg);
}
SWELLカスタマイズ
  • URLをコピーしました！

WAZAの有料記事のサブスクリプションも開始しました。

あわせて読みたい
アフィリエイト付き！有料記事のサブスクリプションについて WAZAでは特に有益な記事は有料記事とさせていただいてます。 本記事では有料記事をリストでまとめました。 また有料記事の読み放題のサブスクリプション、そして有料記...

サービス

Service

WordPressサイトのカスタマイズのサービスに関心がありましたら、ぜひ詳細をご覧ください。

詳細を見る
全サービス一覧

関連記事

目次