SWELL│ギャラリー･投稿リスト･リッチカラムブロックをスライダー化する方法

2024.06.112026.10.12

SWELLのギャラリー・投稿リスト・リッチカラムを、Flickityで横に送れる表示へ変更する方法です。

ブロックのまま編集し、公開画面で専用クラスを付けた部分だけをスライダーにします。

表示幅に合わせた高さをFlickityに計算させ、画像の読み込み後にも再計算します。

自動再生とループは使わず、前後ボタンで操作します。

動く見本：ギャラリー

画像を1枚ずつ表示します。

最後の画像では「次へ」が無効になります。

画像の縦横比が違う場合は、最も高さのあるセルに合わせた余白が残る仕様です。

動く見本：投稿リスト

通常の投稿リストブロックを使う見本です。

画面幅600px未満では1枚と次のカードの一部、600px以上では2枚、960px以上では3枚を表示します。

動く見本：リッチカラム

画像と文章をまとめたカラムを1枚として送ります。

3つの見本は独立して操作できます。

画像と文章を同じカラムに入れた見本です。

画像と文章を同じカラムに入れた見本です。

画像と文章を同じカラムに入れた見本です。

画像と文章を同じカラムに入れた見本です。

画像と文章を同じカラムに入れた見本です。

追加CSSクラスを付けるブロック

ブロックを選択し、「高度な設定」の「追加CSSクラス」へ入力します。

先頭のドットは不要です。

個別の画像やカラム内の段落ではなく、親ブロックを選びます。

対象	クラス
ギャラリーブロック全体	`flickity-parent-gallery`
投稿リストブロック全体	`flickity-parent-postlist`
リッチカラムブロック全体	`flickity-parent-column`

1．Flickityを読み込むPHPを登録

PHPをCode Snippetsか子テーマのfunctions.phpのどちらか1か所へ登録します。

25516は設置先の記事IDへ変更してください。

すでにFlickityを読み込んでいる場合は、重複登録せず既存の対象ページ指定を確認します。

ライブラリは外部CDNから読み込みます。

add_action('wp_enqueue_scripts', function () {
    // 25516 は設置先の投稿IDへ置き換えます。固定ページなら is_page を使います。
    if (!is_single(array(25516))) return;
    wp_enqueue_style('flickity-css', 'https://unpkg.com/flickity@2/dist/flickity.min.css', array(), null);
    wp_enqueue_script('flickity', 'https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js', array(), null, true);
});

2．専用CSSと共通JavaScriptを登録

CSSは追加CSSまたは設置先の記事CSS欄へ、JavaScriptは記事JS欄へ貼り付けます。

JSにscriptタグは付けません。

3種類のブロックに共通のコードなので、ブロックの数だけ登録する必要はありません。

.waza-flickity-track { display:block; width:100%; min-width:0; }
.waza-flickity-track .waza-flickity-cell { box-sizing:border-box; width:82%; margin-right:16px; }
.flickity-parent-gallery .waza-flickity-cell { width:100%; margin-right:0; }
.waza-flickity-cell > .wp-block-image,
.waza-flickity-cell > .swell-block-column { width:100%!important; margin:0!important; }
.waza-flickity-cell img { max-width:100%; }
.flickity-parent-gallery .waza-flickity-cell .wp-block-image img { display:block; width:100%; height:auto!important; aspect-ratio:auto!important; }
.waza-flickity-track .flickity-prev-next-button { width:44px; height:44px; }
.waza-flickity-track :is(a,button):focus-visible { outline:3px solid #0969da; outline-offset:-3px; }
@media(min-width:600px) {
  .flickity-parent-postlist .waza-flickity-cell,
  .flickity-parent-column .waza-flickity-cell { width:calc((100% - 16px) / 2); }
}
@media(min-width:960px) {
  .flickity-parent-postlist .waza-flickity-cell,
  .flickity-parent-column .waza-flickity-cell { width:calc((100% - 32px) / 3); }
}

/* 縦長画像の見本では、高さを制限して比率を保ちます。 */
.waza-flickity-mixed .waza-flickity-cell .wp-block-image img { width:auto!important; max-width:100%; max-height:480px; margin-inline:auto; }

function wazaInitFlickity() {
  if (typeof Flickity === 'undefined') return;
  const definitions = [
    ['.flickity-parent-gallery', null, '.wp-block-image'],
    ['.flickity-parent-postlist', '.p-postList', '.p-postList__item'],
    ['.flickity-parent-column', '.swell-block-columns__inner', '.swell-block-column']
  ];
  definitions.forEach(([selector, innerSelector, cellSelector]) => {
    document.querySelectorAll(selector).forEach(root => {
      if (root.dataset.wazaFlickityReady) return;
      const inner = innerSelector ? root.querySelector(innerSelector) : root;
      if (!inner) return;
      const children = Array.from(inner.children).filter(child => child.matches(cellSelector));
      if (children.length < 2) return;
      const track = document.createElement('div');
      track.className = 'waza-flickity-track';
      track.setAttribute('aria-label', '横に送れるコンテンツ');
      const cells = children.map(child => {
        const cell = document.createElement('div');
        cell.className = 'waza-flickity-cell';
        // li を ul の外へ移さず、中身を専用の div に移します。
        if (child.tagName === 'LI') {
          cell.append(...Array.from(child.childNodes));
          child.remove();
        } else cell.append(child);
        track.append(cell);
        return cell;
      });
      if (inner === root) root.prepend(track);
      else inner.replaceWith(track);
      root.dataset.wazaFlickityReady = '1';
      const carousel = new Flickity(track, {
        cellSelector: '.waza-flickity-cell', cellAlign: 'left', contain: true,
        setGallerySize: true, adaptiveHeight: false, imagesLoaded: true,
        autoPlay: false, wrapAround: false, pageDots: false,
        prevNextButtons: true, accessibility: true
      });
      track.querySelector('.previous')?.setAttribute('aria-label', '前へ');
      track.querySelector('.next')?.setAttribute('aria-label', '次へ');
      const refresh = () => requestAnimationFrame(() => carousel.resize());
      track.querySelectorAll('img').forEach(img => {
        if (!img.complete) { img.addEventListener('load', refresh, {once:true}); img.addEventListener('error', refresh, {once:true}); }
      });
      cells.forEach((cell, index) => {
        cell.querySelectorAll('a,button,input,select,textarea').forEach(control => {
          control.addEventListener('focus', () => carousel.select(index, false, true));
        });
      });
      if (document.fonts) document.fonts.ready.then(refresh);
      window.addEventListener('load', refresh, {once:true});
    });
  });
}
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", wazaInitFlickity, { once: true });
else wazaInitFlickity();