お問い合わせや資料請求への導線として使われる追従してくるボタン。
WordPressテーマ「GENESIS」にプラグインで実装した例
大事なボタンなので、常にユーザーの目に入るように追従させているわけです。
当記事では、このような追従ボタンをWordPressサイトに簡単に実装できるプラグイン「Buttonizer」をご紹介いたします。
目次
Buttonizerの機能概要
Buttonizerは、追従型ボタンを簡単に設定できるプラグインです。機能概要は次の通り。
- 月間5000pvまで無料で使える（アカウント登録は必要）。
- ボタンのラベル、色、サイズ、形、表示位置のカスタマイズ。
- 表示デバイスの指定（PCのみ表示、スマホのみなど）。
- 表示されるタイミングの指定（ページをスクロール後に表示など）。
- 「問い合わせフォーム」や「タップで電話ボタン」も設置可。
- メールやSNS（Facebook,X）と連携するボタンも設置可。
目的に合わせた追従ボタンをかんたんに作成できます。
プラグインのインストール
管理画面から「Buttonizer」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。
プラグインのインストールにつきましてはこちらで詳しく解説しています。
WordPressで制作したサイトは、プラグインを使って簡単に機能を拡張することができますよね。当記事では、プラグインのインストール方法について解説してきます。 おすすめプラグインを見る プラグインのインストール方法は2つ プラグインのインストール方法は、下記の2つになります。基本的には、...
アカウントの作成
Buttonizerを使うには、まずアカウント作成が必要です。とはいっても、利用するサイトのドメインやメールアドレスを入力するだけなので、5分以内で済みます。
プラグインを有効化したらダッシュボード内の「Buttonizer」より次の画面を開きます。
「START USING BUTTONIZER」を押して次の画面に進みます。
WordPressサイトのユーザー名が表示されますので、始めての方は、「I don’t have an account yet」を選択して次の画面に進みましょう。
上記箇所にメールアドレスを入力して、「Confirm」します。
サイト名とそのドメイン名が表示されればOKです。「Finish onboarding」を押します。
あとは、お手元にメールが届くので、そこから「Confirm your email」に進みます。
次のページが開いたら、パスワードを設定して「Set password」を押します。
次のように「Account activated!」と表示されれば、アカウント作成完了です。
追従ボタンのつくり方
アカウント作成が済んだら、早速ボタンをつくっていきましょう。追従ボタンは、ダッシュボードの「Buttonizer」から作成できます。
順に設定していけば完成まで10分とかかりません。今回は「任意のURLを設定したシンプルな追従ボタン」を1つ設定する例で解説いたします。
Button type（ボタンのタイプ）
まずはボタンのタイプを選択します。シンプルなボタンをつくるので、左側の「One button」を選びます。
問い合わせフォームを表示したい場合は、真ん中。複数の出したい場合は、右側を選択します。
Button action（ボタンのアクション）
次にボタンのアクションを選択します。今回はシンプルにURLを設定するタイプをつくるので、「Website URL」を選びます。
選択肢に応じて右側の設定項目も変わります。
よく使われそうな選択肢をこちらにピックアップしておきます。ボタンの目的に合わせて変更してみてください。
| 目的 | 選択肢 |
| タップで電話できるようにしたい。 | Call action (phone number) |
| メールが開くようにしたい。 | Mail action (email address) |
| 問い合わせフォームを表示したい。 | Contact form widget |
| SNSアカウントに連携させたい。 | Facebook, X (Twitter) |
Label（ボタンの見出し）
ボタンの見出しを設定します。左側で見た目を決めて、右側で見出しを入力します。
リアルタイムプレビューで確認できます。
Style（ボタンのスタイル）
ボタンのスタイルを決めます。形や色、アイコンの有無など。
こちらもプレビューしながら設定します。
Position（ボタンの表示位置）
ボタンの表示位置を決めます。
画面上のどこに表示するかを選択します（上記は右下に表示する場合の例）。
Display（PC、スマホ時の表示）
PCでのみ表示する、スマホでのみ表示するといった設定を行います。
右側の「Device visibility」と書いてある箇所です。
そのほか、次のような表示設定も用意されています。
| Show on timeout | 「5秒後に表示する」などが実現できます。 |
| Show on scroll | 「ページトップから200pxスクロールしたら表示する」などが実現できます。 |
残念ながら、ページごとに表示を制限する設定は有料プランしかできないようです。無料版では、追従ボタンは全ページ共通で表示されます。
Save（保存）
最後にプレビューを確認して、ボタンの名前を決めて保存すればOKです。
管理用の名前なので、わかりやすければ何でもいいと思います。右下の「Finish」から保存できます。
Publish（公開）
正しく保存されると、あなたのサイトのトップページにボタンが表示されたプレビューを確認できます。
※この例では、サブディレクトリにサイトを設置しているため、エックスサーバーの画面が表示されています。
プレビューを確認できたら、右上の「Publish」から公開してサイトに反映できます。
サイトを確認してみましょう。
WordPressテーマ「GENESIS」に表示した例
右下にボタンが表示されていることが確認できますね。
なおTCDテーマをお使いの場合、右下に表示すると「ページトップに戻るボタン」と干渉してしまうかもしれません。
その場合は、カスタムCSSに以下のような記述を追加して「ページトップに戻るボタン」を非表示にして対応するといいでしょう。
/* ページトップへ戻るボタンを非表示に。*/
#return_top a {
display: none;
}デザインを調整したい場合は？
いざボタンを表示してみてから「もう少しサイズを大きくしたい」などの調整が必要なケースもあると思います。その場合は、画面右側の「Style」タブから詳細に調整可能です。
以下のような項目が用意されていますので、お好みで調整可能です。
- ボタンのカラー
- ボタンの四隅の角度
- ボタンのパディング
- ボタンのボックスシャドウ
- ボタンのアイコン
- ラベルの文字色、文字サイズ、フォント、整列（左寄せ、中央寄せ、右寄せ）
まとめ
追従ボタンを設置できるWordPressプラグイン「Buttonizer」をご紹介しました。
資料請求やお問い合わせなどに繋げるボタンを設置したい際に使えます。無料版では月間5000pvまでの利用制限がありますが、ボタンのカスタマイズ性は高いです。手軽に追従ボタンを実装したいなら使ってみるのもおもしろいかもしれません。
ヘッダーメニューに導線を追加できるテーマ
資料請求やお問い合わせへの導線は、追従ボタン以外にもつくれます。例えばサイトのヘッダーなどです。サイトヘッダーに重要な導線を設置できるTCDテーマをいくつかピックアップしておきます。
コメント