WordPressで追従型のボタンを設置する「Buttonizer」

ホームページ、サイトを運営する際、問い合わせページや広告ページへのリンクボタンを設置することは良くあります。

縦長のページの場合、ボタンがユーザーから見つけづらくなってしまうため、今回追従型のボタンをWordPress（ワードプレス）の「Buttonizer（Smart Floating / Sticky Buttons – Call, Sharing, Chat Widgets & More – Buttonizer）」のプラグインで対応してみます。

▲プラグインの説明ページの動画を共有しました。

Buttonizerをインストール

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

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

Buttonizerを使ってみよう

Buttonizerを有効化すると、WordPressの管理画面のメニューに「Buttonizer」が追加されます。

「Buttonizer」の中にある、「Buttonizer」から設定をしていきます。

インストール完了画面が出てきたら「START USING BUTTONIZER」を選択し始めていきましょう。

「START USING BUTTONIZER」を選択後、アカウントがあるかの確認画面が出てきますので、今回はじめて「I don't have an account yet（まだアカウントを持っていません）」を選択します。

「Welcome to the club!」画面で、「First name」「E-mail」を設定していきます。「Last name」は任意になります。

入力できたら、「CONFIRM」で次のステップに進みましょう。

「Hello there,○○」の画面でサイト名称・ドメインの欄が自動で入力されます。

下部の英語は、下記のような内容になっています。

ここは特に指定しないのであれば、変更しなくて問題ありませんので、問題なければ「FINISH ONBOARDING」を選択し次のステップへ進みましょう。

初期設定がおわると、先程の「WordPress管理画面＞Buttonizer＞Buttonizer」が、このような画面になりますので、「EDIT BUTTONS」を押して作っていきます。

ボタンの種類が選べる画面が出てきますので、好きなものを選択してください。
真ん中のものは、無料ですとWhatsApp、Facebook Messengerを利用する場合に使えます。
今回は一番右の「Multiple buttons」を使っていきます。

このように豊富なテンプレートから選ぶことが出来ます。

問い合わせフォームへのリンクボタンを作ることを想定して、今回は「Number of buttons」の「1」、「Mail action」を使ってみます。

ボタンを選ぶと設定画面になります。
左側の画面で設定をしていき、右側の画面でプレビューが出ます。
※図はサイトイメージをあえて表示していませんが、本来はご自身のサイトイメージと照らし合わせながら設定が可能です。

このままの設定ですと、直接メールを送信する形になってしまうので、問合せページへのリンクに変更します。

GENERAL＞BUTTON ACTION
・Button actionを「Page」
・Pageでリンク先を設定します
・Open URL inで飛ばし方を指定します。

GENERAL＞LABEL
・LABELで「Email us!」の文字を変更できます。今回は「お問合せはコチラ」にしてみます。

表示の仕方も色々変えれます。

STYLE＞BTTON＞NORMAL
・BACKGROUND＞Color（背景の色）
・BACKGROUND＞Use background image（背景に画像を使いたい場合）
・BUTTON STYLE＞Border radius（アイコンの四方の丸さ調整）
・BUTTON STYLE＞Box shadow（アイコンの影）

右側にある、STYLE＞BTTON＞HOVERは、ホバー（上にマウスカーソルがのったとき）の変化の仕方になります。

STYLE＞ICON（アイコンで作る場合）
・Type（なし、アイコン、イメージから選択できます※イメージの場合も設定は同じようにできます）
・Icon（たくさんアイコンから好きなもの選択できます）
・Color（アイコンの色）
・Icon size（アイコン大きさ）

STYLE＞LABEL（アイコンの横のラベルの設定）
・Label text（文字の内容）
・STYLE＞Place label inside button（アイコンの中にラベルを入れるかONにするとSet height same as the button'sからPOSITIONの上まで設定できなくなります。※今回はこちらを選択していきます）
・STYLE＞Set height same as the button's（ラベルの高さを大きくするか）
・STYLE＞Label Spacing（アイコンとラベルの距離）
・VISIBILITY＞Desktop（LABELをPCで常に表示、ホバー時に表示、なしから選べます）
・VISIBILITY＞Mobile（LABELをスマホでに常に表示、なしから選べます）
・POSITION＞Label position（LABELをアイコンの左右選択できます）

・TEXT＞Color（LABELの文字の色）
・TEXT＞Font size（LABELの文字の大きさ）
・TEXT＞Font family（LABELの字体/日本語の場合選択肢は少ないです）
・BACKGROUND＞Color（LABELの背景）
・BACKGROUND＞Border radius（LABELの背景の四方の丸さ調整）
・BACKGROUND＞Margin（LABELの背景の外側の空間調整）
・BACKGROUND＞Padding（LABELの背景の内側の空間調整）
・BACKGROUND＞Box shadow（LABELの影）
・CUSTOM ID & CUSTOM CLASS（class、idを設定する場合）

VISIBILITY
・DEVICE VISIBILITY（スマホ・PCでの表示/非表示）
・TIME SCHEDULES（無料版使用不可）
・PAGE RULES（無料版使用不可）

設定が完了したら、右下の「PUBLISH」を選択し完成です。

なお、「グループ」の設定をすると表示位置を自由に設定できたり、ボタンサイズの調整やVISIBILITYでアニメーションの設定、スクロールされてから表示させるなど、結構自由度高く設定が可能です。

今回、図のようにカスタマイズしてみました。左が通常時、右がマウスカーソルをのせたホバー時になります。横長にして上部や下部にボタンとして固定することも可能です。

Buttonizerを使ってみて

「Blog Floating Button」というPHPバージョン7.4以上で使えるがありますが、「Buttonizer」はPHPバージョンが7.0以上で使えるため、サーバーのPHPバージョンがあげられない場合に代替のプラグインとして導入することが出来ます。

「Buttonizer」は、2023年2月現在では、設定画面での日本語表示はありませんが、ブログなどでSNSボタンを多用したい場合など表示方法がポップであったり、カラフルにできたり、複数のボタンを設置できたり、位置調整が柔軟であったりと、結構楽しく有能なプラグインです。

別のプラグインですが「Sticky CTA」というのも結構使いやすいです、以下の記事にて取り上げていますので、ご参考になりましたら幸いです。

2023.03.02

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

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