【SWELL】フローティングボタンをフッターに表示｜ページごとに表示内容を動的に変更する方法

※2023年1月4日追記
SWELL最新バージョン（2.7.2.1）でも有効です。

SWELLマニアのかんた（@swell_mania）です。

フッターエリアに、フローティングボタンを設置するカスタマイズメモです。

外注制作を想定し、納品後にクライントが自由に変更できるように、表示させる要素はブログパーツで編集できる仕組みを作ってみました。

デモサイト

SWELLにフローティングボタンを設置したデモサイトです↓

※デモサイトはこちら

デモサイトにアクセス後、画面を下にスクロールするとフローティングボタンが表示されます。

フローティングボタンは、ページごとに別のものを設定できます。

例えば、先程とは違う記事ページに、別のフローティングボタンを設置してみました↓

フローティングボックスのエリアは、ブログパーツで作成する仕様です。「ふきだし」や「SWELLボタン」なんかも使えます。

フルワイドブロックを使って、背景に画像を設定するといった構成も実現できます↓

※デモサイトはこちら

カスタマイズの構成

<概要>

フックとCSSコードを追加します。

テンプレートファイルを直接編集する必要はありません。

＜テーマのバージョン＞

SWELL（2.7.2.1）

※この記事執筆時に利用可能な最新バージョンです。

＜こんなことが出来る＞

ブログパーツで作成したパーツを表示できるというのが一番のポイントです。ブロックエディター上でフローティングボックスエリアの背景色やボタンなどを直感的に編集できます。