[SWELL]フッター上に全幅CTAを作ってみた(“THE THOR”のようなCTA)

『THE THORからSWELLへ乗り換えする全手順と経過』の一環です。“SWELL” にはトールに付いていたフッターCTA パーツが無いので、テーマ変更すると当然消えてしまいます。

今回は、テーマをSWELL に乗り換えても、なるべく同じようなテンプレートにしてみようという企画として「THE THOR のフッターCTAみたいなもの」を付けてみました。

SWELL のフッターにCTA(コール トゥ アクション)をつける方法

この”THE THOR”時代のフッター上CTAを

“SWELL”にも付けています

やり方

方法はいくつかあります。が、設置する場所は「外観」→「ウィジェット」の「フッター直前」バーツ。

1. ブロックウィジェットを使用

このブロックウィジェットというのは、いわゆる「カスタムHTMLブロック」なんですね。

つまり、ただHTMLを貼り付けるだけのウィジェットです。

当方は記事エディターで全幅ワイドのHTMLを作って、それをそのままこのウィジェットに貼り付けました。

こんな感じです。

よく考えないで作ってしまい、別にこれでも不正解ではないのですが、SWELL には「フルワイドコンテンツ」を作るためのショートコードというものがありました。

[full_wide_content]

ここにコンテンツを自由に配置

[/full_wide_content]

SWELL

フルワイドコンテンツ用ショートコードの使い方 | WordPressテーマ SWELL このページでは、WordPressテーマ『SWELL』でのフルワイドコンテンツ用ショートコードの使い方を解説していきます。 フルワイドコンテンツがどういうものかは、ブロックエ…

なので、これを使用すれば、ウィジェットをフルワイドにするための徒労は必要ないと思います。

しかし、記事をわざわざ使ってHTMLを作って試してみるなどという方法よりも、もっと簡単な方法がありました。

2. ブログパーツを使用

SWELLには「ブログパーツ」というツールが用意されているので、それで作成すればよかったのです。

「新規作成」をクリックすれば普通の記事エディターが立ち上がるので、そこで作成して、出来上がったショートコードを「フッター直前」バーツに入れ込めば完成です。

簡単ですね。

フッターと「直前ウィジェット」の余白を埋める

このままで終わらせると、フッターとフッター上の間になぜか余白が出来ます。

これを埋めるためにCSSなど書かなくても済むのがSWELL の素晴らしいところ。

「カスタマイズ」を立ち上げる

「外観」→「カスタマイズ」→「フッター」を開き、

「「フッター」と「フッター直前ウィジェット」の間の余白をなくす」にチェックします。

記事によって、入れたり入れなかったりしたい場合は、作りこんで再利用ブロックに登録するという手もありますね。何にせよ、美しく出来上がるのでありがたいです。