【STINGER5】スクロールしてもフッターで固定するメニューを設置してみたよ！

スマホでの操作性をもう少し良くしてみたくなり、フェイスブックのようなスクロールしてもフッター部分でずっとついてくるメニューを装備しました。CSSだけで作ったのであっという間に設置できますよ！

こちらの記事は公開時より年月が経過しており内容が古くなっている可能性があります。この記事で紹介しているソースコードの使用や、phpコードの書き換えは自己責任でお願いします。

コピペでOK！スマホの固定式フッターメニューのコード

まずはstyle.cssに以下を記述します。場所は/*レイアウト スマートフォンより前の部分です。

/*--------------------------------
スマホのフッターメニュー
---------------------------------*/
ul.footer_menu {
	margin: 0 auto;
	padding: 3px 0;
	width: 100%;
	overflow: hidden;
	display: table;
}

ul.footer_menu li {
	margin: 0;
	padding: 0;
	display: table-cell;
	vertical-align:middle;
	list-style-type: none;
	font-size: 10px;
}

ul.footer_menu li a i{
	font-size: 24px;
}

ul.footer_menu li a {
	border: none;
	display: block;
	color: #666;
	text-align: center;
	text-decoration: none;
}

.footer_menu {
	position: fixed;
	bottom: 0;
	left:0;
	background: #fff;
	z-index: 9999999999;
	-moz-opacity: 0.9;
	opacity: 0.9;
}

次にfooter.phpの＜!– /#wrapper –＞の下に記述します。

 <?php if(is_mobile()) { ?>

     <ul class="footer_menu">
      <?php if(is_single()) { ?>
 <?php
        $prev_post = get_previous_post();
        if (!empty( $prev_post )): ?>
  <li><a href="<?php echo get_permalink( $prev_post->ID ); ?>"><i class="fa fa-chevron-circle-left"></i><br>前の記事</a></li>
   <?php endif; ?>
   <?php
        $next_post = get_next_post();
        if (!empty( $next_post )): ?>
  <li><a href="<?php echo get_permalink( $next_post->ID ); ?>"><i class="fa fa-chevron-circle-right"></i><br>次の記事</a></li>
     <?php endif; ?>
  <?php } else { ?>          
     <?php } ?>
<li><a href="<?php echo home_url(); ?>/"><i class="fa fa-home"></i><br>ホーム</a></li>
	</ul>
<?php } else { ?> <?php } ?>

コードの説明

style.css

position: fixedとbottom: 0で一番下にDIV要素を固定させました。STINGER5のデフォルトの状態だとこれで問題ないみたいです。また、display: tableで横に均等になるようにしているので、メニューの項目が減ったりしてもうまく並ぶようにしています。

footer.php

スマホでしか表示させないのでis_mobileで分岐させています。（※STINGER5ではis_mobileの関数は実装済み）また、前の記事と次の記事は投稿ページにしか必要ないのでこれもis_singleで分岐させています。

前の記事と次の記事

この部分はSTINGERに元々あったのをちょっと変更して使いました。一番古い記事には『前の記事』というのは非表示に、また一番最新記事には『次の記事』は必要ないので非表示になります。

中間の記事

これには前の記事、次の記事どちらも表示されます。

投稿以外のページ

これには前の記事、次の記事どちらも表示されません。

トップへ戻るボタンを実装したいときは

footer.phpの＜/ul＞の前に以下を追記

<li><a id="mobile-top" href="#wrapper"><i class="fa fa-chevron-circle-up"></i><br>TOP</a></li>

js/base.jsへ追記

jQuery(function() {
    var pageTop = jQuery('#mobile-top');
       //スクロールしてトップ
        pageTop.click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
        });
  });

もともとあるページトップのJqueryはある程度スクロール後ぽわっと表示される仕様になっているため、こちらに変更してみました。

当ブログではJqueryプラグイン『Sidr』でメニューを表示しています。『Sidr』の設置については前日エントリーを書いています。

まとめ

スマホのスライド式のフッターメニューにしたのはウェブさえさんの直帰率の改善にウフフ！スマホサイトのメニューをアプリっぽくしてみたらというエントリーを拝見したのがきっかけでした。わたしもウフフ！ってしたい！