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

あらすじ

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

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

Swiper.jsでカスタマイズ

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

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

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

XO Sliderプラグイン

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

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

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

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

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

alt代替テキスト

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

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

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

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

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

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

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

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

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

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

「Flickity」とは

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

  1. 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」でスライダー表示する方法

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

  • 「投稿リスト」ブロックを任意の場所でスライダー表示したい
  • 「リッチカラム」ブロックをスライダー表示させたい
  • 画像ギャラリー」をスライダー表示させたい

要するに、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>内で読み込ませています。

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

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でスライダー表示させた例です。

このように、<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調べ)
¥28,380 (2021/11/25 21:43時点 | Amazon調べ)
¥15,999 (2021/11/25 21:45時点 | Amazon調べ)
¥11,105 (2021/11/25 21:47時点 | Amazon調べ)
¥12,980 (2021/11/26 17:46時点 | Amazon調べ)

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

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

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テーマ。ブロックエディター完全対応!

CUSTOMIZE
+PLUGIN
KNOWLEDGE
シェアしていただけるとうれしいです^^
あらすじ
あらすじ
閉じる