Flickityでブロック要素をスライダー表示 – SWELLカスタマイズ

2021 12/01

2021.12.01 2021.12.01

あらすじ

SWELLでスライダーを表示するには

SWELLでスライダーを使って表示する方法としては、以下の方法があります。

Swiper.jsでカスタマイズ

SWELLではメインビジュアルなどのスライド表示に「Swiper.js」というプラグインを使用しています。

このプラグインを使用して、任意の場所に画像スライダーを実装できますが、ひと手間必要です。

詳しくは、しらこさんの記事をご参照ください。

非公式 SWELL TIPS

SWELLの任意の場所へスライダー（スライドショー）の実装方法【Swiper】（SWELL 2.5.3以降対応版） | 非公… SWELLにSwiperを使ってスライダー（スライドショー）を実装する元祖の記事（？）を書いたのは私ですが、その内容をSWELL 2.5.3以降対応版に更新しました。 WordPressテーマ…

XO Sliderプラグイン

あるいは、画像、動画および YouTubeのスライド表示を簡単に実装できる「XO Slider」プラグインもあります。

Xakuro

XO Slider プラグイン XO Slider (旧名 XO Liteslider) プラグインは、スライダーを簡単に作成できるプラグインです。

※このプラグインもSwiper.jsを使用しています。

使い方としては、公式ディレクトリからプラグインをダウンロードして有効化し、「スライダー」メニューから新規でスライダーを作成、生成されたショートコードを記事あるいは固定ページの任意の場所に埋め込むだけです。

見せ方のバリエーションもテンプレート化されていて、使い勝手もよくオススメです。

例えば、以下のような見せ方もできます。

SWELL標準「記事スライダー」

上記のような画像などのメディアのスライダーではなく、投稿記事をスライド表示したい場合は、SWELL標準機能の「記事スライダー」が利用できます。

基本的には「トップページの決められた場所」にしか挿入できませんが、トップページ以外で表示する方法をかんたさんが解説されていますので、そちらの記事もご参照ください。

SWELLマニア

SWELLの記事スライダーを記事・固定ページなどの下層ページに表示するカスタマイズ | SWELLマニア記事スライダーって、トップページにしか表示されないの？固定ページや投稿記事にも表示する方法ってないの？そんな人向けにSWELLの記事スライダーを記事と固定ページで表…

スライダー表示プラグイン「Flickity」

上記のように、スライダーを表示するカスタマイズ方法はくつかあります。

当ブログでは、画像だけでなく「投稿リスト」ブロックや「リッチカラム」ブロック自体をスライド表示できたらいいなということで、「Flickity」プラグインを導入してカスタマイズしました。

トップページの「投稿リスト」ブロックをスライダー表示

トップページ：投稿リスト

投稿記事ページの「リッチカラム」ブロックをスライダー表示

投稿記事：リッチカラムブロック

「Flickity」とは

Flickity

Flickity v2 · Touch, responsive, flickable carousels Touch, responsive, flickable carousels

「Flickity」プラグインの主な特徴としては

jQueryに依存せず、単体のスクリプトで動作可能

フリック操作の反応がスムーズ

レスポンシブ対応

が挙げられます。

参考までに、「カスタムHTML」ブロックなどで、HTMLコーディングにて使用する場合は以下のようなコードになります。

<div class="main-carousel">
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  ...
</div>

また、通常この類のプラグインはJavaScriptでインスタンス化（new）するのですが、以下のようにHTML5のデータ属性にパラメータを追記して生成することもできます。※今回は使用しませんが

<div class="main-carousel" data-flickity='{ "cellAlign": "left", "contain": true }'>
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  <div class="carousel-cell">...</div>
  ...
</div>

「Flickity」のオプション

スライダー表示の見た目や機能のオプションも豊富です。詳しくは公式サイトをご参照ください。

Flickity – Options

Flickity v2 · Options Touch, responsive, flickable carousels

「Flickity」でスライダー表示する方法

今回のカスタマイズ内容は、

「投稿リスト」ブロックを任意の場所でスライダー表示したい

「リッチカラム」ブロックをスライダー表示させたい

「画像ギャラリー」をスライダー表示させたい

要するに、HTMLコーディングせずに「ブロック要素もスライダー表示させちゃおう」という時に使えるカスタマイズです。

それでは、Flickityの導入方法から各ブロック毎のカスタマイズ方法についてご説明します。

※基本コピペで実装できるようにまとめています。

「Flickity」導入の基本

以下の手順でFlickityを使えるようにします。

STEP

functions.phpから必要ファイルの読み込み設定

パッケージをダウンロードしてサーバーにアップする方法もありますが、必要ソースはUNPKGでCDN提供されていますのでこちらを読み込む設定を行います。

※2021年12月1日時点の最新バージョンは「2.2.2」です

※ここからは、子テーマ「SWELL CHILD」を使用している前提での説明です

以下のスクリプトを、子テーマのfunctions.phpにコピペします。

add_action('wp_enqueue_scripts', function() {
  if (is_home() || is_front_page()) {
    wp_enqueue_style('flickity-css', 'https://unpkg.com/flickity@2/dist/flickity.min.css', '', '', false);
    wp_enqueue_script('flickity', 'https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js', '', '', false);
  }
});

1行目：add_action('wp_enqueue_scripts', function() {
アクションフックでwp_enqueue_scriptsフックを実行します。

2行目：if (is_home() || is_front_page()) {
Flickityを使用するページを指定します。※上記の例はトップページで使用する例です。

3行目：wp_enqueue_style(～)
wp_enqueue_style()関数で、flickity.min.cssを追加します。
パラメータにfalseを追加し<head>内で読み込ませています。

4行目：wp_enqueue_script(～)
wp_enqueue_script()関数で、flickity.pkgd.min.jsを追加します。
パラメータにfalseを追加し<head>内で読み込ませています。

アクションフックの使用について、以下の記事にも目を通しておいてくださいね。

②アクションフックで読み込ませる

SWELLでjQueryを使う方法 – POINT OF VIEW　略して、ポイビュー。 SWELLでjQueryの使用方法について解説しています。SWELLは「脱jQuery」のテーマとして軽量化に配慮されています。SWELLでjQueryを使うには、CWVへの影響も十分考慮して使用…

STEP

ブロック要素にクラス名を設定

スライド表示させたいブロックにクラス名を設定します。
詳しくは、各ブロックでご説明しますね。

STEP

JavaScriptでflickityを生成

以下のJavaScriptを、当該ページの「カスタムCSS＆JS＞JS」にコピペし、Flickityスライダーを生成します。

const elmParent = document.querySelector('ブロック要素に指定したクラス名');
let elmFlkty = elmParent.firstElementChild;
elmFlkty.classList.add('flickity-carousel');
let flkty = new Flickity( elmFlkty, {
  cellAlign:'left',pageDots:false,prevNextButtons:false,autoPlay:5000
});

1行目：const elmParent
クラス名を指定したブロック要素を「親要素」として定義しています。

2行目：elmParent.firstElementChild;
ブロック要素の最初の子要素を取得しています。※これをFlickityでスライド化します。

3行目：elmFlkty.classList.add('flickity-carousel');
子要素に flickity-carousel というクラス名（任意名）を追記しています。

4行目：let flkty = new Flickity( elmFlkty
Flickityスライダーをインスタンス化します。

5行目：cellAlign:'left',～
Flickityのオプションを設定します。

STEP

スライド表示されたブロックをCSSで調整

上記でスライド表示されますが、ブロックの種類ごとにCSSで調整します。
詳しくは、各ブロックでご説明しますね。

STEP

完成

以上が、カスタマイズの基本的な流れです。

それでは、各ブロック毎のカスタマイズ方法についてご説明します。

「投稿リスト」ブロックをスライダー表示

以下は「投稿リスト」ブロックをFlickityでスライダー表示させた例です。

「投稿リスト」ブロック設定

表示する投稿数： 4
レイアウト：カード型
最大カラム数： 1

Flickityオプション設定

cellAlign: ‘left’
pageDots: false
prevNextButtons: false
autoPlay: 3000

このように、<ul>タグでレンダリングされる「投稿リスト」ブロックにも適用できるので、最新記事一覧などを好きな位置にスライダー表示させることができます。

「投稿リスト」ブロックのどのレイアウト（カード型など）でもスライダー表示できます。

STEP

functions.phpから必要ファイルの読み込み設定

「Flickity」導入の基本：STEP1 を参照

STEP

「投稿リスト」ブロックの設定

最低限必要な設定のみ記載します。

表示する投稿数： 1以上
レイアウトを選択： 任意のレイアウト
最大カラム数： 1列　※指定した数値で表示されます

STEP

「投稿リスト」ブロックにクラス名を設定

スライダー表示させたい「投稿リスト」ブロックを選択し、 「高度な設定＞追加CSSクラス」 に、以下のクラス名を入力します。

クラス名：　flickity-parent　※任意名

STEP

JavaScriptをコピペ

以下のJavaScriptを、当該ページの「カスタムCSS＆JS＞JS」にコピペします。

let elmParent = document.querySelector('.flickity-parent');
let elmFlkty = elmParent.firstElementChild;
elmFlkty.classList.add('flickity-carousel');
let flkty = new Flickity( elmFlkty, {
  cellAlign:'left',pageDots:false,prevNextButtons:false,autoPlay:3000
});

5行目：cellAlign:'left',～
Flickityスライダーのオプションを設定します。

STEP

CSSをコピペ

「投稿リスト」用のCSSを、当該ページの「カスタムCSS＆JS＞CS」にコピペします。

.flickity-carousel.p-postList.-type-card, .flickity-carousel.p-postList.-type-thumb {
  display:block;
}
.flickity-carousel li {
  width: 100%;
  list-style-type:none;
}

1行目 ：カード型・サムネイル型の設定
カード型・サムネイル型以外のレイアウトの場合は、この3行は不要です。

STEP

完成

「リッチカラム」ブロックをスライダー表示

以下は「リッチカラム」ブロックをFlickityでスライダー表示させた例です。

無印良品体にフィットするソファ

¥10,980 （2021/11/25 21:39時点 | Amazon調べ）

Amazon

ポチップ

Yogibo Pod ヨギボーポッド

¥28,380 （2021/11/25 21:43時点 | Amazon調べ）

Amazon

ポチップ

ニトリ　ビーズソファ大

ポチップ

LUCKYSAC 魔法のビーズクッション

¥15,999 （2021/11/25 21:45時点 | Amazon調べ）

Amazon

ポチップ

フレックス販売ビーズクッション

¥11,105 （2021/11/25 21:47時点 | Amazon調べ）

Amazon

ポチップ

SIGOYI ビーズクッション特大

¥12,980 （2021/11/26 17:46時点 | Amazon調べ）

Amazon

ポチップ

「リックカラム」ブロックの列数を「3」にすると、3列で表示・１つずつスライドします。

カスタマイズ方法は「投稿リスト」ブロックとほぼ同じです。

STEP

functions.phpから必要ファイルの読み込み設定

「Flickity」導入の基本：STEP1 を参照

STEP

「リッチカラム」ブロックの設定

最低限必要な設定のみ記載します。

列数： 3　※指定した数値で表示されます

STEP

「リッチカラム」ブロックにクラス名を設定

スライダー表示させたい「投稿リスト」ブロックを選択し、 「高度な設定＞追加CSSクラス」 に、以下のクラス名を入力します。

クラス名：　flickity-parent　※任意名

STEP

JavaScriptをコピペ

以下のJavaScriptを、当該ページの「カスタムCSS＆JS＞JS」にコピペします。

let elmParent = document.querySelector('.flickity-parent');
let elmFlkty = elmParent.firstElementChild;
elmFlkty.classList.add('flickity-carousel');
let flkty = new Flickity( elmFlkty, {
  cellAlign:'center',pageDots:true,prevNextButtons:true,autoPlay:3000,wrapAround:true
});

5行目：cellAlign:'left',～
Flickityスライダーのオプションを設定します。

STEP

CSSをコピペ

「投稿リスト」用のCSSを、当該ページの「カスタムCSS＆JS＞CS」にコピペします。

.flickity-carousel-2.swell-block-columns__inner {
  display:block;
}
.flickity-prev-next-button {
    top: 20%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translateY(-20%);
}
.flickity-prev-next-button.next {
    right: 15px;
}
.flickity-prev-next-button.previous {
    left: 15px;
}

4、11、14行目 ：ページ送りボタンの設定
カラムのサイズにあわせて、ページ送りボタンのサイズと位置を変更しています。

STEP

完成

「画像ギャラリー」ブロックをスライダー表示

画像をスライダー表示するには、先述の「XO Slider」が便利ですが、通常の「画像ギャラリー」ブロックにもFlickityスライダーを簡単に適用できます。

注意点としては、「画像ギャラリー」ブロックの場合、Flickiyが画像の高さを取得できないため、CSSで高さを指定する必要があります。

STEP

functions.phpから必要ファイルの読み込み設定

「Flickity」導入の基本：STEP1 を参照

STEP

「ギャラリー」ブロックの設定

最低限必要な設定のみ記載します。

カラム数： 1以上　※指定した数値で表示されます

STEP

「ギャラリー」ブロックにクラス名を設定

スライダー表示させたい「投稿リスト」ブロックを選択し、 「高度な設定＞追加CSSクラス」 に、以下のクラス名を入力します。

クラス名：　flickity-parent　※任意名

STEP

JavaScriptをコピペ

以下のJavaScriptを、当該ページの「カスタムCSS＆JS＞JS」にコピペします。

let elmParent = document.querySelector('.flickity-parent');
let elmFlkty = elmParent.firstElementChild;
elmFlkty.classList.add('flickity-carousel');
let flkty = new Flickity( elmFlkty, {
  cellAlign:'center',pageDots:true,prevNextButtons:true,autoPlay:3000,setGallerySize:false
});

5行目：cellAlign:'left',～
Flickityスライダーのオプションを設定します。
CSSで画像サイズを指定するために、setGallerySize:false にします。

STEP

CSSをコピペ

「投稿リスト」用のCSSを、当該ページの「カスタムCSS＆JS＞CS」にコピペします。

.flickity-carousel {
  height:310px;
  width: 100%;
}
.flickity-carousel div {
  width: 100%;
  height:100%;
}
.flickity-carousel .flickity-prev-next-button {
    top: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    transform: translateY(-50%);
}
.flickity-carousel .flickity-prev-next-button.next {
    right: 15px;
}
.flickity-carousel .flickity-prev-next-button.previous {
    left: 15px;
}

2、7行目 ：height:310px;　height:100%;
画像の高さを指定しています。

9、16、19行目 ：ページ送りボタンの設定
カラムのサイズにあわせて、ページ送りボタンのサイズと位置を変更しています。

STEP

完成

同じブロックのFlickityスライダーを複数設置する

例えば、上記のパターンでいうと、ポチップを配置した「リッチカラム」ブロックのスライダー表示のように、同じブロックをページ内で複数表示させたい場合は、JavaScriptを以下のように変更します。

let elmParents = document.querySelectorAll('.flickity-parent');
for(let i = 0; i < elmParents.length; i++){
  let elmFlkty = elmParents[i].firstElementChild;
  elmFlkty.className = 'flickity-carousel-' + i;
  let flkty = new Flickity( elmFlkty, {
    cellAlign:'center',pageDots:true,prevNextButtons:true,autoPlay:3000,wrapAround:true
  });
}

こうするこで、同じクラス名を設定したブロック要素に、Flickityスライダーを適用できます。

スクロールにあわせてFlickityスライダーを表示する

「投稿リスト」ブロックで「新着記事順」で設定した場合など、画面に表示されたタイミングで1番目からスタートさせたいですよね。

その場合は、スクロールによりブロックが表示されたタイミングでFlickityスライダーを生成させるために、JavaScriptを以下のように変更します。

const elmParent = document.querySelector('.flickity-parent');
var callback = function (entries, observer) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      let elmFlkty = elmParent.firstElementChild;
      elmFlkty.classList.add('flickity-carousel');
      var flkty = new Flickity( elmFlkty, {
        cellAlign:'left',pageDots:false,prevNextButtons:false,autoPlay:5000
      });
      elmParent.classList.add('fade');
      observer.unobserve(entry.elmParent);
    }
  });
};
var observer = new IntersectionObserver(callback);
observer.observe(elmParent);

詳しく説明はしませんが、Intersection Observer APIを使用して、ブロック要素が表示領域に入ってくるまで表示遅延を設定しています。

表示領域に入ったら、Flickityスライダーを生成し、CSSアニメーションでフェードインさせます。

フェードイン用のCSSを追加します。

.flickity-parent {
  opacity:0;
}
.fade{
  animation: fadeIn 0.5s ease 1s 1 forwards;
}
@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

くれぐれもカスタマイズは「自己責任」でお願いします^^;

当ブログでご紹介しているようなカスタマイズ（←本来の意味での）をしなくても、SWELLの基本機能だけで十分オシャレなブログ・サイトが構築できます。

テーマ選びに迷ったらSWELLを選んでおけば間違いないです！

（カスタマイズ沼にハマらないようご注意ください^^;）

WordPressテーマ「SWELL」

17,600円（税込）

シンプル美と機能性の両立。圧倒的な使い心地を追求するWordPressテーマ。ブロックエディター完全対応！

ご購入はこちら

デモサイトを見る

シェアしていただけるとうれしいです^^

URL Copied!

URL Copied!

Flickityでブロック要素をスライダー表示 – SWELLカスタマイズ

SWELLでスライダーを表示するには

Swiper.jsでカスタマイズ

XO Sliderプラグイン

SWELL標準「記事スライダー」

スライダー表示プラグイン「Flickity」

トップページの「投稿リスト」ブロックをスライダー表示

投稿記事ページの「リッチカラム」ブロックをスライダー表示

「Flickity」とは

「Flickity」のオプション

「Flickity」でスライダー表示する方法

「Flickity」導入の基本

「投稿リスト」ブロックをスライダー表示

ポイビュー開設から6ヶ月。ブログを始めた理由とこれからについてつらつらと。

ぼくらが富士山に登る理由。10年前のジブンに贈るメッセージ。

私をダメ人間にした「人をダメにするソファ」絶対に買ってはいけません！

冬眠に入りますので長期休暇いただきます。イシ夫とのしばしの別れ。

「リッチカラム」ブロックをスライダー表示

「画像ギャラリー」ブロックをスライダー表示

同じブロックのFlickityスライダーを複数設置する

スクロールにあわせてFlickityスライダーを表示する

くれぐれもカスタマイズは「自己責任」でお願いします^^;