WordPressで追従型のバナーを設置する「Sticky CTA」

ホームページ、サイトを運営する際、キャンペーンなどを写真付きでサイドバー（ウィジェット）や各所に設置することがあります。

縦長のページの場合、バナーがユーザーから見つけづらくなってしまうため、今回追従型のバナーをWordPress（ワードプレス）の「WordPress CTA – WordPress Call To Action, Sticky CTA, Floating Buttons, Floating Tab Plugin (Easy Sticky Sidebar)」のプラグインで対応してみます。

CTAをインストール

WordPress管理画面から、プラグインの新規追加で「CTA Floating Buttons」と検索をしてインストール、有効化します。

新規追加の検索で出てこない場合には、コチラからダウンロードし、wp-content/pluginsにインストールすることでも可能です。

CTAを使ってみよう

CATを有効化すると、WordPressの管理画面のメニューに「CTA」が追加されますので、「Add New CTA」で作成していきます。
※有償版は今回の記事では使用していません。

最初に名前を付けましょう。
CTA Name：自由な名前で大丈夫です。
CTA Settings「1.Template Layout」でテンプレートを選んでいきましょう。

1.Templete Layout

テンプレートには6種類ありますが無償の範囲で使用できるものは、3種類になります。今回は「Sticky CTA」を使用していきます。
テンプレートがどんなものあがあるか見たい方は、コチラのデモページを参照ください。

2.Page Position

ページの設置個所を選びます
Position：Right（無償版は右のみ）
Horizontal/Vertical Position：Top(上)、Center(中)、Bottom(下)から選べます。

3.Page/Post Location

ページ、投稿の場所の設定です。「Entire site(サイト全体)」、「トップページ」から選択できます。有償版ではさらに細かい設定が可能です。

4.Content

Image
使用する画像を選択しましょう。

Button Text
ボタンのテキスト。今回は「商品紹介」としてみます。

Content Text
コンテンツテキスト。今回は「オススメ商品の案内」としてみます。

Link Text
「今すぐ試す」などなどのリンクのテキストの設定です。今回は「商品紹介ページはコチラ」としてみます。

URL
リンク先のURLを設定してください。

Target Blank
リンク先を別タブで開く場合はON、そのまま別ページに移動する場合はOFF

Nofollow
アウトバウンド リンクをたどらないように検索エンジンに指示する場合はON、しない場合はOFF

5.Styling

Design Template
無償では「Fitness」と「WP CTA PRO」の2つのみ選択可能です。

CTA Scroll Options(無償版では使えません）

Page Load Options
「Collapse CTA On Page Load」がONの場合は最初はバナーが引っ込んでいる状態になります。OFFは最初からバナーが表示されている状態になります。

CTA Width(無償版では使えません）

CTA Image Options(無償版では使えません)

CTA Button Options
ボタンの字体や文字サイズ、テキストの色、背景色の変更が可能です。

CTA Content Options
先程「オススメ商品の案内」とした部分の、字体、文字サイズ、テキストの色、背景色の変更が可能です。

Line Separator Options
コンテント名とリンク先名の間の線の設定が可能です。

Link Text Options
リンク先名の部分の、字体、文字サイズ、テキストの色、背景色の変更が可能です。

Close Button Options(無償版では使えません)
閉じるボタンを設置できます。

7.CSS

カスタムCSSの設定(無償版では使用できません)

8.Live Status

Live：公開
Development：開発中（非表示状態/ワードプレスにログインしていない人には見えないがログインユーザーは見える）
Off：停止

完成すると

右下の「Save Settings」で保存が出来ます。

完成すると図の様な追従型のバナーを設置することが可能です。