WordPress個別サポート

スマホ画面のフッター固定メニューを表示したいという要望は多いです。画面がスクロールしても消えずに固定で表示されるメニューです。footer.phpを修正してフローティングメニューを表示する方法もありますが、Really Simple Click To Call Barプラグインを使うと、テンプレートを修正せずに「お問い合わせはこちら」のようなフッター固定メニューを表示することができます。

フッター固定メニューを表示したい

フッター固定メニューを表示したい

以下、Really Simple Click To Call Barプラグインの使い方を紹介します。

テンプレートをカスタマイズしてフッターにフローティングメニューを表示する方法について詳しくは以下のページも参考にしてください。

フローティングメニューをフッターに表示する

スポンサーリンク

フッター固定メニューの表示

「プラグイン」‐「新規追加」メニューからReally Simple Click To Call Barプラグインをインストール、有効化します。

Really Simple Click To Call Barプラグインのインストール

Really Simple Click To Call Barプラグインのインストール

「設定」‐「Really Simple Click to Call Bar」メニューを開いてリンクの文字や色、電話番号などを設定します。

設定項目の内容
  • Enable Click to Call --- 固定メニューが表示されるようになる
  • Your Click to Call Message --- リンクの文字
  • Your Click to Call Number --- 電話番号(ハイフンの有無はどちらでも)
  • Click to Call Text Color --- リンクテキストの色
  • Click to Call Background Color --- 背景色

リンクを表示するには「Enable Click to Call」をチェックします。

設定イメージは次のようになります。

フッターメニューの設定

フッターメニューの設定

「変更を保存」ボタンをクリックすると設定完了です。これで、幅736pxまでの端末にフッター固定メニューが表示されるようになります。

フッター固定メニューが表示される

フッター固定メニューが表示される

フッター固定メニューのカスタマイズ

カスタマイズ方法はアイデア次第ですがCSSを記述してボタン風に加工することもできます。

フッター固定メニューをボタン風にカスタマイズ

フッター固定メニューをボタン風にカスタマイズ

使用したCSSは次のとおりです。子テーマのstyle.cssまたは「CSSカスタマイズ」などのメニューに入力してください。

/* フッター固定メニューのスタイル */
body #click_to_call_bar {
    width: auto;
    left: 50%;
    bottom: 5px;
    transform: translate(-50%);
    white-space: nowrap;
    padding: 0 10px;
    border: 4px double #fff;
    border-radius: 8px;
    font-weight:bold;
}
この記事をSNSで共有する
スポンサーリンク
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・ログインできない・サーバー移転 ... )
マンツーマンなので相談内容は自由です。いただいた課題を迅速に解決、CSSやPHPの修正にも対応します。気軽にご相談ください。
現在までの対応件数:1806件
WordPress講座の問い合わせ先
wordpress講座受講予約

関連記事

スポンサーリンク