カルーセルの表示枚数、最大枚数を変更する方法

はじめに

カルーセルの表示にはライブラリ「Slick.js」を使用しています。
これにより、画面幅に応じて表示するカードの枚数や、一度にスライドするカードの枚数が固定されています。
また、最小表示枚数はCocoon設定→カルーセル→最大表示数で12枚となっています。

そこで、スライドするカードの枚数などの固定設定を変更します（表1参照）。

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

実装手順

以下のコードをfunctions.phpに追加します。
ここでは、slidesToShowとslidesToScrollを全て1枚に変更する例を示します。

add_filter('script_loader_tag', function ($tag, $handle, $src) {
  if ($handle !== 'slick-js') {
    return $tag;
  }

  $rules = [
    [
      // スライド表示数
      'search'  => '/slidesToShow:\s*\d/',
      'replace' => 'slidesToShow: 1',
    ],
    [
      // スライドスクロール数
      'search'  => '/slidesToScroll:\s*\d/',
      'replace' => 'slidesToScroll: 1',
    ],
  ];

  foreach ($rules as $rule) {
    $tag = preg_replace($rule['search'], $rule['replace'], $tag);
  }

  return $tag;
}, 10, 3);

参考：従来の方法からの変更

以下のように wp_enqueue_slick()関数を子テーマのfunctions.phpにコピーして上書きする方法は、現在では推奨されません。

WordPress 4.1以降では<script>タグをフィルターする仕組みが導入されており、より柔軟かつ安全にスクリプトの変更を行えます。
さらにWordPress 6.9では、Cocoonの最終HTML出力制御フックと同等の機能を持つフィルターが標準で追加されました。

これらの標準機能を活用する方法が推奨されます。

【Cocoon】カルーセルの表示数を変更する方法【2023年最新】 | フロントエンドRPG

WordPressの無料テーマ「Cocoon」でカルーセルの表示件数を変更する方法を紹介します。この記事の具体的な解説手順はこちらです。カルーセルの設定方法カルーセルの表示件数の変更方法では、早速本題に入ってい

www.frontend-rpg.com

参考：カルーセルを無限ループスライドさせる方法

Cocoon標準のカルーセルはオートプレイ時に6枚単位で一度停止します。

そこで、より滑らかで切れ目なく流れる無限ループスライドに変更します（表2参照）。

実装手順

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

add_filter('script_loader_tag', function ($tag, $handle, $src) {
  if ($handle !== 'slick-js') {
    return $tag;
  }

  $rules = [
    [
      // スクロール数
      'search'  => '/slidesToScroll:\s*\d+/',
      'replace' => 'slidesToScroll: 1',
    ],
    [
      // 待ち時間
      'search'  => '/autoplaySpeed:\s*\d+/',
      'replace' => 'autoplaySpeed: 0',
    ],
    [
      // ドットを非表示
      'search'  => '/dots:\s*true/',
      'replace' => 'dots: false',
    ],
    [
      // infiniteの後に設定を追加
      'search'  => '/infinite:\s*true\s*,?/',
      'replace' => 'infinite: true, arrows: false, cssEase: "linear", speed: 5000, pauseOnHover: false, pauseOnFocus: false,',
    ],
  ];

  foreach ($rules as $rule) {
    $tag = preg_replace($rule['search'], $rule['replace'], $tag);
  }

  return $tag;
}, 10, 3);

さいごに

今回紹介した方法を使えば、Slick.jsを用いたカルーセルの表示枚数やスライドの挙動を柔軟にカスタマイズできます。
これにより、サイトのデザインや要件に合わせたカスタマイズが簡単に実現できるでしょう。