WordPress[Stinger5] スマホ固定式フッターメニューを導入

2015/02/192018/09/22

WordPressのテーマをStinger5に変更してからずっとやってみたかったカスタマイズのひとつでもある、スマホから見た時にブログ下部に固定式フッターメニューを表示させる方法でした。自分は元々CSSもPHPも全然わからなくてWordPressを使ったりすることで少しずつ覚えてきました。なので、１から作るとかは到底無理な訳で天下のグーグルで色々探していたんですが、自分が理想としていた固定式のフッターメニューの設置を紹介しているページがありました。

ちゅんこさんのブログで紹介していた固定式フッターメニューがかなり良かったので早速設置してみました。

[adsense]

下部のメニューを押すと

こんな感じで左からメニューが出てきます。VINEでもとってみました。

こんな感じにフッター部分に固定された透過メニューが設置されています。動きもスムーズで良い感じです。スマホユーザーにはとても助かる機能だと思います。個人的にぶつかった問題点なども含めて備忘録としてここで紹介したいと思います。

今回もローカル環境に設置したWordPressに設置をして行きたいと思います。本番サーバーでカスタマイズする前にローカルサーバーで色々試行錯誤出来て便利です。設置していない方は是非。

[adsense]

自身のStinger5は子テーマを作成して作業を行っています。子テーマでのカスタマイズは親テーマアップデード時などにファイルを上書きされてしまうことを防いだりしてくれます。まだの方はこちらも是非導入を検討してみてください。

子テーマの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;
}

/*--------------------------------
Sidr (light)
---------------------------------*/

.sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;width:260px;overflow-x:none;overflow-y:auto;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;font-size:15px;background:#f8f8f8;color:#333;-webkit-box-shadow:inset 0 0 5px 5px #ebebeb;-moz-box-shadow:inset 0 0 5px 5px #ebebeb;box-shadow:inset 0 0 5px 5px #ebebeb}.sidr .sidr-inner{padding:0 0 15px}.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}.sidr.right{left:auto;right:-260px}.sidr.left{left:-260px;right:auto}.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6{font-size:11px;font-weight:normal;padding:0 15px;margin:0 0 5px;color:#333;line-height:24px;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));background-image:-webkit-linear-gradient(#ffffff,#dfdfdf);background-image:-moz-linear-gradient(#ffffff,#dfdfdf);background-image:-o-linear-gradient(#ffffff,#dfdfdf);background-image:linear-gradient(#ffffff,#dfdfdf);-webkit-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);box-shadow:0 5px 5px 3px rgba(0,0,0,0.2)}.sidr p{font-size:13px;margin:0 0 12px}.sidr p a{color:rgba(51,51,51,0.9)}.sidr>p{margin-left:15px;margin-right:15px}.sidr ul{display:block;margin:0 0 15px;padding:0;border-top:1px solid #dfdfdf;border-bottom:1px solid #fff}.sidr ul li{display:block;margin:0;line-height:48px;border-top:1px solid #fff;border-bottom:1px solid #dfdfdf}.sidr ul li:hover,.sidr ul li.active,.sidr ul li.sidr-class-active{border-top:none;line-height:49px}.sidr ul li:hover>a,.sidr ul li:hover>span,.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #ebebeb;-moz-box-shadow:inset 0 0 15px 3px #ebebeb;box-shadow:inset 0 0 15px 3px #ebebeb}.sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;color:#333}.sidr ul li ul{border-bottom:none;margin:0}.sidr ul li ul li{line-height:40px;font-size:13px}.sidr ul li ul li:last-child{border-bottom:none}.sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active{border-top:none;line-height:41px}.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span,.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #ebebeb;-moz-box-shadow:inset 0 0 15px 3px #ebebeb;box-shadow:inset 0 0 15px 3px #ebebeb}.sidr ul li ul li a,.sidr ul li ul li span{color:rgba(51,51,51,0.8);padding-left:30px}.sidr form{margin:0 15px}.sidr label{font-size:13px}.sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select{width:100%;font-size:13px;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:none;background:rgba(0,0,0,0.1);color:rgba(51,51,51,0.6);display:block;clear:both}.sidr input[type=checkbox]{width:auto;display:inline;clear:none}.sidr input[type=button],.sidr input[type=submit]{color:#f8f8f8;background:#333}.sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(51,51,51,0.9)}

子テーマのfooter.phpにもコードを記述

子テーマにfooter.phpがない方は親テーマからそのままコピーしてきてください。自身の「footer.php」は先日、

フッターにカテゴリを追加する記事で多少いじっていますが、デフォルトでも大丈夫です。自分の「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 class="simple-menu" href="#sidr"><i class="fa fa-bars"></i><br>カテゴリ</a></li>
<li><a href="#header" id="mobile-top"><i class="fa fa-chevron-circle-up"></i><br>TOP</a></li>
</ul>   
 <div id="sidr">
<?php wp_nav_menu(
    array(
        'container' => false ,
        'items_wrap' => '<ul>%3$s<li class="close"><a class="simple-menu" href="#sidr"><i class="fa fa-times-circle"></i>メニューを閉じる</a></li>
<li>&nbsp;</li></ul>'
    )
); ?>
</div>
<?php } else { ?>
<?php } ?>

最終的にこんな感じになっていれば問題ありません。

２３行目以降に先程のコードがペーストされています。このままの記述だと元々Stinger5のスマホで表示されていた右下の「記事のTopへ戻るボタン」が新しいメニューと重なってしまいます。なのでそれを修正します。先程の画像の

[adsense]

５２行目の

<?php } ?>

を

<!-- ページトップへ戻る　終わり -->

の後に移動させます。最終的にこうなっているはずです。

<?php } ?>

が移動されました。これでOKです。

base.jsにコードを記述

次は親テーマの中にある「js」フォルダの中の「base.jp」にコードを記述します。こちらは子テーマで出来るように変更出来るのですが、今回は省略いたします。なので、親テーマのアップデートの時は今回編集する「base.jp」をバックアップするのを忘れないようにしましょう。それでは、「base.js」を開いて一番下に下記のコードをコピペしてください。

/*---------------------------
ページスクロール　スマホ
------------------------------*/

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

/*! Sidr - v1.2.1 - 2013-11-06
 * https://github.com/artberri/sidr
 * Copyright (c) 2013 Alberto Varela; Licensed MIT */
(function(e){var t=!1,i=!1,n={isUrl:function(e){var t=RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i");return t.test(e)?!0:!1},loadContent:function(e,t){e.html(t)},addPrefix:function(e){var t=e.attr("id"),i=e.attr("class");"string"==typeof t&&""!==t&&e.attr("id",t.replace(/([A-Za-z0-9_.\-]+)/g,"sidr-id-$1")),"string"==typeof i&&""!==i&&"sidr-inner"!==i&&e.attr("class",i.replace(/([A-Za-z0-9_.\-]+)/g,"sidr-class-$1")),e.removeAttr("style")},execute:function(n,s,a){"function"==typeof s?(a=s,s="sidr"):s||(s="sidr");var r,d,l,c=e("#"+s),u=e(c.data("body")),f=e("html"),p=c.outerWidth(!0),g=c.data("speed"),h=c.data("side"),m=c.data("displace"),v=c.data("onOpen"),y=c.data("onClose"),x="sidr"===s?"sidr-open":"sidr-open "+s+"-open";if("open"===n||"toggle"===n&&!c.is(":visible")){if(c.is(":visible")||t)return;if(i!==!1)return o.close(i,function(){o.open(s)}),void 0;t=!0,"left"===h?(r={left:p+"px"},d={left:"0px"}):(r={right:p+"px"},d={right:"0px"}),u.is("body")&&(l=f.scrollTop(),f.css("overflow-x","hidden").scrollTop(l)),m?u.addClass("sidr-animating").css({width:u.width(),position:"absolute"}).animate(r,g,function(){e(this).addClass(x)}):setTimeout(function(){e(this).addClass(x)},g),c.css("display","block").animate(d,g,function(){t=!1,i=s,"function"==typeof a&&a(s),u.removeClass("sidr-animating")}),v()}else{if(!c.is(":visible")||t)return;t=!0,"left"===h?(r={left:0},d={left:"-"+p+"px"}):(r={right:0},d={right:"-"+p+"px"}),u.is("body")&&(l=f.scrollTop(),f.removeAttr("style").scrollTop(l)),u.addClass("sidr-animating").animate(r,g).removeClass(x),c.animate(d,g,function(){c.removeAttr("style").hide(),u.removeAttr("style"),e("html").removeAttr("style"),t=!1,i=!1,"function"==typeof a&&a(s),u.removeClass("sidr-animating")}),y()}}},o={open:function(e,t){n.execute("open",e,t)},close:function(e,t){n.execute("close",e,t)},toggle:function(e,t){n.execute("toggle",e,t)},toogle:function(e,t){n.execute("toggle",e,t)}};e.sidr=function(t){return o[t]?o[t].apply(this,Array.prototype.slice.call(arguments,1)):"function"!=typeof t&&"string"!=typeof t&&t?(e.error("Method "+t+" does not exist on jQuery.sidr"),void 0):o.toggle.apply(this,arguments)},e.fn.sidr=function(t){var i=e.extend({name:"sidr",speed:200,side:"left",source:null,renaming:!0,body:"body",displace:!0,onOpen:function(){},onClose:function(){}},t),s=i.name,a=e("#"+s);if(0===a.length&&(a=e("<div />").attr("id",s).appendTo(e("body"))),a.addClass("sidr").addClass(i.side).data({speed:i.speed,side:i.side,body:i.body,displace:i.displace,onOpen:i.onOpen,onClose:i.onClose}),"function"==typeof i.source){var r=i.source(s);n.loadContent(a,r)}else if("string"==typeof i.source&&n.isUrl(i.source))e.get(i.source,function(e){n.loadContent(a,e)});else if("string"==typeof i.source){var d="",l=i.source.split(",");if(e.each(l,function(t,i){d+='<div class="sidr-inner">'+e(i).html()+"</div>"}),i.renaming){var c=e("<div />").html(d);c.find("*").each(function(t,i){var o=e(i);n.addPrefix(o)}),d=c.html()}n.loadContent(a,d)}else null!==i.source&&e.error("Invalid Sidr Source");return this.each(function(){var t=e(this),i=t.data("sidr");i||(t.data("sidr",s),"ontouchstart"in document.documentElement?(t.bind("touchstart",function(e){e.originalEvent.touches[0],this.touched=e.timeStamp}),t.bind("touchend",function(e){var t=Math.abs(e.timeStamp-this.touched);200>t&&(e.preventDefault(),o.toggle(s))})):t.click(function(e){e.preventDefault(),o.toggle(s)}))})}})(jQuery);
/*---------------------------
Sidr呼び出し
------------------------------*/
$(document).ready(function() {
  $('.simple-menu').sidr(); 

});

最終的にこんな感じでコピペ出来ていれば問題ありません。

X-Serverの方ここで注意

作業は一応ここで終わりなのですが、X-Serverの「mod_pagespeed設定」が[ON]になっていると固定式フッターメニューが上手く表示されませんでした。理由がわかる方がいたら教えて欲しいです。ってことなので、X-SERVERのページで「OFF」にして進んでください！

これで完成。確認してみましょう。

Google Chromeを使ってApple iPhone5での表示の確認をしてみましょう。自分は英語表記ですがGoogle Chromeのメニューバーから「View」を選択。一番下の「Developer」から「Developer Tool」を選択します。

するとこんな画面が表示されるので、「Device」から「Apple iPhone5」を選択します。　選択後、再読み込みをすればiPhoneで見た時のような感じで表示されます。

はてなブックマークからブログを見るとメニューが２つ重なる

ちゅんこさんのブログにも書いてあったんですが、

フッター固定メニューには注意も必要

このメニューをつけたからといって、スマホの表示でかぶっている項目を外してしまうと大変なことになります。たとえばはてなブックマークのアプリ、グノシーのアプリなどは同じようなフッター固定式のメニューを搭載しておりそれらを経由して読まれた記事はそのアプリのフッター固定メニューに重なってしまい操作できなくなるのです！
ですので、補助的な意味合いで設置していただくとよいのかと思われます

とのこと。ブログ下に固定式メニュー付けたから上のメニュー消しちゃえ！っと思ってたのですが、「はてなの表示問題」を考えると上部のメニューも残して置いた方がよさそうですね。しばらく現状維持で使ってみます。読んで頂いてありがとうございました。