【Cocoonカスタマイズ】簡単に、ブロックをスライド表示する方法

はじめに
完成イメージ
実装手順
- 解説
さいごに

はじめに

「新着記事」などの横並び表示を実現するために、ライブラリ「Swiper.js」を利用してスライド表示を行っています。

この仕組みを取り入れることで、「新着記事」だけでなく他のブロックでも手軽にスライド表示を実現できるようになります。

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

完成イメージ

みんな偉い夢持ってていいなア！！じゃあ夢バトルしようぜ！夢バトル！！

デンジ君はさ、田舎のネズミと都会のネズミ、どっちがいい？

おうおう！ひれ伏せ人間！！ワシの名はパワー！バディとやらはウヌか！？

実装手順

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定
Gutenbergエディター

以下の手順で設定します。
1. スライドとするブロックを配置し、それぞれの高度な設定→追加CSSクラスにswiper-slideと入力します。
2. これらをグループにし、高度な設定→追加CSSクラスにswiper-wrapperと入力します。
3. 「カスタムHTML」ブロックを配置し、ボタン表示のために以下のコードを入力します。
```
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
```
1. 全てのブロックを縦積みとし、高度な設定→追加CSSクラスにswiper is-list-horizontalと入力します。
ラベル
PHPを追加
以下のコードをfunctions.phpに追加します。
```
global $_IS_SWIPER_ENABLE;

$_IS_SWIPER_ENABLE = true;
```

解説

Gutenbergエディターでの設定
ライブラリ「Swiper.js」を利用するため、各ブロックにCSSクラスを設定します。
以下のような構造になります。
また、JavaScriptが正しく動作するように、CSSクラスis-list-horizontalを追加する必要があります。

<div class="swiper is-list-horizontal">
  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  <div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

PHPを追加
ページ内に「新着記事」など横並び表示が設定されていない場合、ライブラリ「Swiper.js」は読み込まれません。
そのため、PHPでライブラリ「Swiper.js」を読み込む設定を行います。

さいごに

今回紹介した方法を使えば、Gutenbergエディターの設定だけで簡単にブロックを横にスライド表示させることができます。