【WordPress】スマホ画面でフッターに固定メニューを作る【CSS】

スマホ用フッターメニューの設置

色々なブログを訪れていると、サイトのいちばん下にメニューが固定されているサイトがあります。
フッターに固定されたメニューがあることによって、TOPに戻るなどの記事からの移動が簡単になりますし、押しやすい位置になるので回遊率をアップさせたり、離脱率を減らすことも期待できます。
よりサイトを見てもらうために効果的な方法と思えます。

設置方法

テーマによっては外観→メニュー内の「メニューの位置」にフッターメニューがあり、メニューを登録して選べば固定メニューが出来ますが、実装されていない場合はfunctions.phpにコード追加して設置できる位置を増やさないとメニューからは作れません。
今回実装してみた方法はプラグイン等も使わず、functions.phpも触らず、フッターに直接設置する方法です。

追加するコード

装飾や形・大きさの設定はCSS、リンクや画像などは実際設置する場所（フッター）にコードを追加します。

CSSに（色や大きさの設定）

#footerFloatingMenu {
    display: block;
    width: 100%;
    background-color: #000;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999;
    text-align: center;
}

ヘッダーの設置したい位置に

<div id="footerFloatingMenu">
<div class="footermenu"><a href="リンク"><img src="画像"></a></div>
<div class="footermenu"><a href="リンク"><img src="画像"></a></div>
<div class="footermenu"><a href="リンク"><img src="画像"></a></div>
（…好きな個数）
</div>

CSSにはスマホサイズ時に画面下に固定するコードを入れます

@media only screen and (max-width: 899px)
#footerFloatingMenu {
    display: block;
    width: 100%;
    background-color: #000;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999;
    text-align: center;
}

まとめ

これで難しい場所は触らずに簡単に固定メニューがサイトに設置できます！
色んなページへのアクセスがとてもしやすくなると思いますので是非試してみてください！