【WordPress】スマホの追従フッターに複数店舗分の電話番号を「Popup Maker」で設置

スマホでよく見かける「スクロールしてもずっと画面のフッター部分に表示される電話番号やメールのリンクボタン」
複数店舗分の電話番号のリンクを1度に表示させるために、プラグイン「Popup Maker」を使用してポップアップで設置します。

プラグイン「Popup Maker」のインストール

プラグイン＞新規プラグインを追加＞プラグインの検索「Popup Maker」＞今すぐインストール＞有効化

初期設定のクラシックエディタからブロックエディタへ変更

初期設定ではポップアップ作成画面はクラッシックエディタになっているので、ブロックエディタに変更したい場合はSettingより変更。

Popup Maker＞Settings＞Enable Block Editor Supportにチェック＞Save

ポップアップ画面の作成

ポップアップ新規作成

Popup Maker＞All Popups＞Create New Popupで新規作成

ポップアップ画面を作成

ポップアップの名前をつけて表示したいポップアップ画面を作成。
今回はボタンブロックを使用して3店舗分の電話番号ボタンを縦並びに作成しました。

ポップアップのカスタマイズ

ポップアップ画面を作成したら下にスクロールしてポップアップ画面のセッティングを行います。

ポップアップ表示のトリガー設定

今回は「電話はコチラ」のボタン作成なので “Click Open” を選択。

Add New Trigger＞New Trigger＞Click Open＞Add

その後に表示される「2回目以降のクリックからのポップアップ非表示」設定を無効に。

Click Trigger Settings＞Cookie Name＞×pum-***の “×” をクリックして削除＞Add

ポップアップのデザイン設定

Display＞Display Preset＞Center Popup　ポップアップの画面上の位置

Display＞Appearance＞Popup Theme＞Content Only – For use with page builders of block editor　デザイン設定

※Customize This Themeで更に詳細設定ができます。

Display＞Size＞Large-80％　ポップアップの大きさ

Display＞Position＞Location＞Bottom Center　ポップアップの位置

ポップアップを閉じる設定

ポップアップ以外をクリックするとポップアップが閉じるように設定。

Close＞Alternate Methods＞Click Overlay to Close

右上の公開でポップアップの設定完了です。

ポップアップを表示させる為のリンクボタン設定

WordPressテーマ「SWELL」の場合「ブログパーツ」でポップアップを表示させたいボタンを作成し、Popup Controlsから作成したポップアップを選択。

ブログパーツの呼び出しコードをフッターに配置してスマホのみの表示にすれば完了です。

以上で、追従フッターに複数の電話番号ボタンを設置する方法です。