SWELLでスライダーを表示するには
SWELLでスライダーを使って表示する方法としては、以下の方法があります。
Swiper.jsでカスタマイズ
SWELLではメインビジュアルなどのスライド表示に「Swiper.js」というプラグインを使用しています。
このプラグインを使用して、任意の場所に画像スライダーを実装できますが、ひと手間必要です。
詳しくは、しらこさんの記事をご参照ください。
XO Sliderプラグイン
あるいは、画像、動画および YouTubeのスライド表示を簡単に実装できる「XO Slider」プラグインもあります。
※このプラグインもSwiper.jsを使用しています。
使い方としては、公式ディレクトリからプラグインをダウンロードして有効化し、「スライダー」メニューから新規でスライダーを作成、生成されたショートコードを記事あるいは固定ページの任意の場所に埋め込むだけです。
見せ方のバリエーションもテンプレート化されていて、使い勝手もよくオススメです。
例えば、以下のような見せ方もできます。
SWELL標準「記事スライダー」
上記のような画像などのメディアのスライダーではなく、投稿記事をスライド表示したい場合は、SWELL標準機能の「記事スライダー」が利用できます。
基本的には「トップページの決められた場所」にしか挿入できませんが、トップページ以外で表示する方法をかんたさんが解説されていますので、そちらの記事もご参照ください。
スライダー表示プラグイン「Flickity」
上記のように、スライダーを表示するカスタマイズ方法はくつかあります。
当ブログでは、画像だけでなく「投稿リスト」ブロックや「リッチカラム」ブロック自体をスライド表示できたらいいなということで、「Flickity」プラグインを導入してカスタマイズしました。
トップページの「投稿リスト」ブロックをスライダー表示
投稿記事ページの「リッチカラム」ブロックをスライダー表示
「Flickity」とは
「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」でスライダー表示する方法
今回のカスタマイズ内容は、
- 「投稿リスト」ブロックを任意の場所でスライダー表示したい
- 「リッチカラム」ブロックをスライダー表示させたい
- 「画像ギャラリー」をスライダー表示させたい
要するに、HTMLコーディングせずに「ブロック要素もスライダー表示させちゃおう」という時に使えるカスタマイズです。
それでは、Flickityの導入方法から各ブロック毎のカスタマイズ方法についてご説明します。
※基本コピペで実装できるようにまとめています。
「Flickity」導入の基本
以下の手順でFlickityを使えるようにします。
パッケージをダウンロードしてサーバーにアップする方法もありますが、必要ソースはUNPKGでCDN提供されていますのでこちらを読み込む設定を行います。
※2021年12月1日時点の最新バージョンは「2.2.2」です
以下のスクリプトを、子テーマの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>内で読み込ませています。
アクションフックの使用について、以下の記事にも目を通しておいてくださいね。
スライド表示させたいブロックにクラス名を設定します。
詳しくは、各ブロックでご説明しますね。
以下の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のオプションを設定します。
上記でスライド表示されますが、ブロックの種類ごとにCSSで調整します。
詳しくは、各ブロックでご説明しますね。
以上が、カスタマイズの基本的な流れです。
それでは、各ブロック毎のカスタマイズ方法についてご説明します。
「投稿リスト」ブロックをスライダー表示
以下は「投稿リスト」ブロックをFlickityでスライダー表示させた例です。
「投稿リスト」ブロック設定
- 表示する投稿数： 4
- レイアウト： カード型
- 最大カラム数： 1
Flickityオプション設定
- cellAlign: ‘left’
- pageDots: false
- prevNextButtons: false
- autoPlay: 3000
このように、<ul>タグでレンダリングされる「投稿リスト」ブロックにも適用できるので、最新記事一覧などを好きな位置にスライダー表示させることができます。
「投稿リスト」ブロックのどのレイアウト（カード型など）でもスライダー表示できます。
「Flickity」導入の基本：STEP1 を参照
最低限必要な設定のみ記載します。
- 表示する投稿数： 1以上
- レイアウトを選択： 任意のレイアウト
- 最大カラム数： 1列 ※指定した数値で表示されます
スライダー表示させたい「投稿リスト」ブロックを選択し、 「高度な設定＞追加CSSクラス」 に、以下のクラス名を入力します。
- クラス名：
flickity-parent※任意名
以下の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スライダーのオプションを設定します。
「投稿リスト」用の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行は不要です。
「リッチカラム」ブロックをスライダー表示
以下は「リッチカラム」ブロックをFlickityでスライダー表示させた例です。
「リックカラム」ブロックの列数を「3」にすると、3列で表示・１つずつスライドします。
カスタマイズ方法は「投稿リスト」ブロックとほぼ同じです。
「Flickity」導入の基本：STEP1 を参照
最低限必要な設定のみ記載します。
- 列数： 3 ※指定した数値で表示されます
スライダー表示させたい「投稿リスト」ブロックを選択し、 「高度な設定＞追加CSSクラス」 に、以下のクラス名を入力します。
- クラス名：
flickity-parent※任意名
以下の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スライダーのオプションを設定します。
「投稿リスト」用の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行目 ：ページ送りボタンの設定
カラムのサイズにあわせて、ページ送りボタンのサイズと位置を変更しています。
「画像ギャラリー」ブロックをスライダー表示
画像をスライダー表示するには、先述の「XO Slider」が便利ですが、通常の「画像ギャラリー」ブロックにもFlickityスライダーを簡単に適用できます。
注意点としては、「画像ギャラリー」ブロックの場合、Flickiyが画像の高さを取得できないため、CSSで高さを指定する必要があります。
「Flickity」導入の基本：STEP1 を参照
最低限必要な設定のみ記載します。
- カラム数： 1以上 ※指定した数値で表示されます
スライダー表示させたい「投稿リスト」ブロックを選択し、 「高度な設定＞追加CSSクラス」 に、以下のクラス名を入力します。
- クラス名：
flickity-parent※任意名
以下の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にします。
「投稿リスト」用の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行目 ：ページ送りボタンの設定
カラムのサイズにあわせて、ページ送りボタンのサイズと位置を変更しています。
同じブロックの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}
}
