リッチカラムのスライダー化機能追加(Swiper)

実装例

↓プラグイン不要で、リッチカラムがこのように化けます!

明るい自然光に照らされたミニマルなコンクリート製の階段で、シンプルなデザインと影のコントラストが特徴的。
ヒイラギやユーカリ、松の枝などの植物がコンクリート調の背景の周囲に配置され、中央が空白になっている構図。

リッチカラムにスライダー化設定を追加

WordPressブロックエディタのリッチカラム設定パネル。スタイルセクションが展開されており、デフォルトとスライダー化の2つのスタイルオプションがボタン形式で表示されている

設定欄も追加されます!

WordPressのSwiper詳細設定パネル。表示枚数のPC設定(3)、SP設定(1)、中央揃え選択肢、デザイン内の幅設定スライダー(20px)、リセットボタン、及び高さPC設定(auto)などの各項目が入力フォームで表示されている

もう、SWELLにスライダーを実装するのに難しいコーディング重いプラグイン必要ありません

目次

SWELLのリッチカラムブロックに「スライダー化」機能を追加します。

SWELLを使ってて、いつも足りないと思うのが「スライダー」機能。
頑張ってカスタムHTMLでコーディング実装するか、
スライダーのためだけにSnow Monkey Blocks(めちゃ多機能で重い)を入れるか、
使い勝手の良いプラグインを探す旅に出るか…(個人的に、良いものは皆無)

なんて悩んでいませんか!?(私はめっちゃ悩んでました。)

なぜ「リッチカラムのスライダー化」が最強なのか?

通常のスライダープラグインや、他のブロックエディタのスライダー機能には、SWELLユーザーにとって様々な「使いづらさ」がありました。

  • 中身の自由度が低い(画像しか使用できない、設定が少ない)
  • ブロックエディタで編集できない(管理画面が別)
  • 英語で分かりづらい
  • 他の一般的なブロックを網羅しているのでSWELLと重複し、重い(Snow Monkey Blocks など)

そんな不満を、SWELLユーザーに親しみのあるリッチカラムが全て解決します。

  • 何でも置ける: 画像、テキスト、ボタン、リスト、さらには別のブロックまで。
  • デザインはSWELLにお任せ: カラムごとの背景色、枠線などの設定がそのままスライダーの「1枚」になります。
  • スマホ対応も完璧: 「PCは3枚、スマホは1枚見せる」といったレスポンシブ設定も、コードをいじらず完結。

実装方法

コードスニペットを導入する

こちらのボタンをクリックしてスニペットをダウンロードします。

会員限定コンテンツ

ここは会員限定コンテンツです。

\お申込みはこちら/

コードスニペットをオンにします。
(コードスニペットが分からない方は使用方法ページをご覧ください。)

驚くほど簡単な使い方

使い方は至ってシンプル。コードを1行も書く必要はありません。

  1. リッチカラムを挿入し、好きなコンテンツを作る。
  2. 右側のサイドバーにある「ブロックスタイル」から「スライダー化」を選択。
  3. 出現した「スライダー設定」パネルで、矢印の有無や自動再生をポチポチ選ぶだけ!
WordPressブロックエディタのリッチカラム設定パネル。スタイルセクションが展開されており、デフォルトとスライダー化の2つのスタイルオプションがボタン形式で表示されている
WordPressのSwiper詳細設定パネル。表示枚数のPC設定(3)、SP設定(1)、中央揃え選択肢、デザイン内の幅設定スライダー(20px)、リセットボタン、及び高さPC設定(auto)などの各項目が入力フォームで表示されている

これまで「スライダーのためだけに重いプラグインを入れて、サイトスピードを犠牲にしていた」という方は、ぜひこの軽さを体感してください。Swiperを最小構成で読み込むため、表示速度への影響も最小限に抑えています。


このブロックスタイルでできること

今回のカスタマイズでは、以下の設定をエディター上で自由に変更できるようにしました。

設定項目内容
表示枚数(PC・SP)何枚ずつ表示されるか(小数点も可能)
中央揃え(PC・SP)基準となるスライドを中央揃えにするかどうか
(表示枚数小数点の時はオン推奨)
隙間(px)スライダー同士の隙間(gap)
高さ(PC・SP)スライダーの高さ指定
比率(PC・SP)スライダーのアスペクト比を指定
画像フィット表示領域にどのように合わせるか指定
(CSSの object-fit )
速度・待機スライドする速度・待機時間を指定(ms)
無限スライダー自動で延々とスライドし続けるかどうか
矢印を表示左右のガイド矢印を表示するかどうか
矢印を外に出すスライダーと矢印が被らないようにするかどうか
ドットを表示スライダー下のドットナビを表示するかどうか

もう、スライダーに悩む必要はありません!このアドオンは、あなたのスライダー探しの旅を終わらせ、より高次的な提案に注力できる環境を作りだします。

設定が反映されません。

コードスニペットのトグルがオンになっているか確認してください。

画像以外もスライダー化したいです。

コンテンツスライダーとして使いたい場合は、カラム項目の中の要素は、グループブロックで囲ってください。

もっとこうしてほしい…

練習と自走力アップのため、基本的には、ご自身でCSSを当ててみてください。

「頑張ったけど、どうしてもわからない」「毎回このCSSを当ててるなぁ…」という場合は、ご連絡ください。

改善・バージョンアップいたします。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次