WordPress個別サポート

WordPressサイトのフッターにメニューを表示したいという要望をよく聞きます。このフッターメニューは単なる本文下の「フッター」ではなく、画面の一番下に固定で表示される「フローティングメニュー」のことを指していることが多いです。

フッターに固定表示されるフローティングメニューのイメージ

フッターに固定表示されるフローティングメニューのイメージ

ここでは、フッターに連絡先画像やアイコンを使ったフローティングメニューを表示する方法を紹介します。

テーマを変えても良いのであれば、Lightning Proが便利です。管理画面でフッター固定メニューをメンテナンスできます。

Lightning Proのフッター固定メニュー

Lightning Proのフッター固定メニュー

スポンサーリンク

フッターに「お問い合わせはこちら」を表示

フッターに次のような連絡先画像を固定で表示したいこともあります。

フッターに表示したい連絡先画像

フッターに表示したい連絡先画像

次のようなHTMLをフッター（footer.php）の適当な場所、たとえばwp_footer()とbodyタグの間に入力すれば、画面の一番下に表示されるようになります。

パーツ1：フローティングメニューのHTML（footer.phpなどに入力）
1
2
3
<div id="footerFloatingMenu">
<a href="#"><img src="http://…略…/contact.png"></a>
</div>
リンク先や画像パスは修正してください。

合わせて画面の一番下に固定して表示するため、次のCSSをテーマ（子テーマ）のstyle.cssなどに入力します。

パーツ2：フローティングメニューのCSS（style.cssなどに入力）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#footerFloatingMenu {
    display: block;
    width: 100%;
    position: fixed;
    left: 0px;
    bottom: 2px;
    z-index: 9999;
    text-align: center;
    padding: 0 auto;
}
 
#footerFloatingMenu img {
    max-width: 99%;
}

表示結果は次のようになります。常に画面の一番下に固定で連絡先画像が表示されるようになります。

表示されるフローティングメニュー

表示されるフローティングメニュー

ある程度スクロールしてから表示する

画面表示の直後ではなく、ある程度スクロールしてからフローティングメニューを表示したい場合は、次のようなjQueryをfooter.phpなどに入力（上記のHTMLの下あたりに）します。

パーツ3：ある程度スクロールしてから表示（footer.phpなどに入力）
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
jQuery(function() {
    var topBtn = jQuery('#footerFloatingMenu');
    topBtn.hide();
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 200) { // 200pxで表示
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
});
</script>
このコードは以下のサイトを参考にさせていただきました。ありがとうございます！
スクロールしたらフェイドインで表示される「TOPへ戻る」ボタンをjQueryで

PCでは表示しない場合

上記のフローティングメニューをPCでは表示せずタブレットやスマホのみで表示したい場合は、表示するdivタグ全体をifブロックで囲みます。

1
2
3
4
5
<?php if(wp_is_mobile()) : ?>
<div id="footerFloatingMenu">
<a href="#"><img src="http://…略…/contact.png"></a>
</div>
<?php endif ?>

wp_is_mobileによって「モバイルの場合はdivタグを表示する」になります。「モバイル」にはスマホ・タブレット・携帯が含まれます。

スマホのみで表示する場合

スマホのみで表示したい場合はCSSで「画面の幅が大きいときは消す」を指定する方法があります。

スマホ以外ではフローティングメニューを非表示に
1
2
3
4
5
@media (min-width: 481px) {
    #footerFloatingMenu {
        display: none;
    }
}

モバイルでは「Click to Call」として表示

スマホなどで画像をクリックしたときに電話をかけられる「Click to Call」にするには、パーツ1を次のように変更します。

モバイルでは「Click to Call」として機能させる
1
2
3
4
5
6
7
<div id="footerFloatingMenu">
<?php if(wp_is_mobile()) : ?>
<a href="tel:0399999999"><img src="http://…略…/contact.png"></a>
<?php else : ?>
<img src="http://…略…/contact.png">
<?php endif ?>
</div>
実際に使うときは「tel:0399999999」の電話番号（0399999999）を修正してください。

これで、PCではリンクなしの画像、モバイルではクリックすると指定の電話番号にダイヤルできるClick to Callとして機能します。

アイコンを使ったフローティングメニュー

フローティングメニューのdivには1つの画像を表示するだけでなく、メニュー項目をレイアウトしてフッターメニューとしても機能させることもできます。

以下は4項目のメニューを作成した例です。

フッターメニュー（footer.phpに入力）
1
2
3
4
5
6
<div id="footerFloatingMenu">
<a href="#"><img src="http://…略…/email.png"></a>
<a href="#"><img src="http://…略…/phone.png"></a>
<a href="#"><img src="http://…略…/save.png"></a>
<a href="#"><img src="http://…略…/search.png"></a>
</div>

アイコンの色に合わせてメニューの背景色を指定すれば、フッターメニューらしく見えるでしょう。あまりに大きな面積だったり色や動きによっては不快に思うユーザーもいるので注意が必要です。

フッターメニューのCSS（style.cssなどに入力）
1
2
3
4
5
6
7
8
9
10
#footerFloatingMenu {
    display: block;
    width: 100%;
    background-color: #000;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999;
    text-align: center;
}

表示結果は次のようになります。

アイコンを使ったフッターメニュー

アイコンを使ったフッターメニュー

アイコンは以下のサイトからダウンロードさせていただきました。ありがとうございます。

gCons: Free All-Purpose Icons for Designers and Developers

アイコンフォントFont Awesome版

BizVektorなどのテーマで使用可能になっているアイコンフォントFont Awesomeを使ったフッターメニューも紹介しておきます。

フッターメニュー（footer.phpに入力）
<div id="footerFloatingMenu">
<a href="#"><i class="fa fa-envelope-o"></i></a>
<a href="#"><i class="fa fa-phone"></i></a>
<a href="#"><i class="fa fa-floppy-o"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
</div>

使いたいアイコンは次のサイトから選んでください。

Font Awesomeアイコン

CSSの例は次のようになります。

フッターメニューのCSS（style.cssなどに入力）
#footerFloatingMenu {
    display: block;
    width: 100%;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999;
    text-align: center;
    padding: 0 auto;
    background-color: #060;
}
 
#footerFloatingMenu .fa {
    font-size: 3em;
    color: #fff;
    padding: 10px;
}

表示結果は次のようになります。

Font Awesomeを使ったフッターメニュー

Font Awesomeを使ったフッターメニュー

まとめ

このようにフッターに画像やメニューを表示してCSSやjQueryで制御することで、フッターに固定するフローティングメニューを作成できます。テーマによっては「外観」-「メニュー」からフッターメニューを設定できない場合もあるでしょうから、このように表示場所を柔軟に指定できるフローティングメニューを設置する方法を覚えておけば役立ちます。あとは試行錯誤していきましょう。

この記事をSNSで共有する
FacebookTwittergoogle_plusLine
WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください（相談・見積もり無料）
  • サイトのデザインをカスタマイズしたい
  • CSS・PHPのカスタマイズがうまくいかない
  • 引っ越し（サーバー移転）したい
  • サイトをSSL対応（https://）したい
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク
投稿タグ
,