【WordPress】フッター固定式メニューの設置方法とメニュー項目のアイディア

 2014/12/17

以前スクロールしてもフッターで固定するメニューを設置してみたよ!というエントリーを書いたのですが、わたしが設置しているJQueryプラグインのSidrのをメニューに組み込み方がわからないとお問い合わせをいただいていました。
そういう訳でちょっと重複になってしまうのですが、私が搭載しているフッターの固定メニューの全コード晒します。それに加え、SNSのシェアボタンの搭載、検索ボタンの搭載の方法もご紹介します。盛りだくさんですw

スポンサーリンク


フッターにメニューSidrを組み込む

今現在、わたしのフッター固定式のメニューは下図のように4種類になります。
footer-menu
カテゴリはJQueryプラグインSidrを組み込み、WordPressのカスタムメニューを反映させているのです。
SidrのライセンスはMITとの事なのでコードも全部載せてしまいます。記載しているのはライト(明るい)バージョン、メニューは左から開きます。詳しくはSidrの公式サイトでご確認ください。コードは圧縮したままです。

フッターを設置する前提としてFont AwesomeのCDNとis_mobileの条件分岐は設定してあるものとします。※STINGER5は不要。

style.cssのスマホ部分に以下を記述

STINGER5ではmedia Queries タブレットサイズ@media only screen and (max-width: 780px)より前に記述です。

/*--------------------------------
スマホのフッターメニュー
---------------------------------*/
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>やwrapperなどの閉じタグの後で</body>より前に記述します。(HTML上見えないところですね)

<?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の方は

STINGER5では</div><!– /#wrapper –> という記述のすぐ下に書いてください。また、元々あったページトップへ戻るのボタンをPC表示用に利用できるので以下のようにするといいと思います。

<?php if(is_mobile()) { ?>
<ul class="footer_menu">
 ~~略~~
</div>
<?php } else { ?>
<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る 終わり -->
<?php } ?>

外部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(); 
});
Attention

フッター固定メニューはtable:sellを使用しているのですがsidrをメニュー項目に組み込むとうまく均等になりません。おそらくsidrのスタイル部分を修正する必要があるのだと思います。
そのうちチャレンジしてみますが、均等に並ばないのをご了承いただいてコードを使ってください。すみません。

フッター固定メニューについては依然詳しく書いた記事があるので参考にしてみてください。

Sidrについて詳しく書いた記事は以下になります。WordPressのカスタムメニューに対応させたやり方やメニューの頭にアイコンフォントを入れる方法をご紹介しています。


ここまでがわたしが今現在設定してあるフッター固定メニューのコードです。しかし、ご自身の好みのメニュー項目ではない方もいらっしゃると思いますので以下はメニュー項目のアイディアを載せておきます。
<li></li>の部分に追記してください。

シェアボタンを設置

フッター固定メニューのボタンをタップすると下図のようなシェアボタンが出てきます。
モーダルウィンドウ

style.cssのスマホ部分に以下を記述

スタイル部分は以前書いた下記のエントリーの【css部分】をそのままコピペしてください。モーダルウィンドウの部分とシェアボタンのスタイルです。

footer.phpへ追記

<ul class=”footer_menu”>から</ul>の間に追記します。シェアボタンですので投稿のページだけに表示されればいいので上記footer.phpの記述で14行目にある<?php } else { ?>のにコードを書いてください。
前・次の記事のボタンを設置しない場合はis_singleの分岐条件をつけ足してくださいね。

<li><a href="#modal-p01"><i class="fa fa-share-square-o"></i><br>シェア</a></li>

続いてシェアボタンの中身部分を<div id=”sidr”>~略~</div>の下へ。

<div class="modal-window" id="modal-p01">
<div class="modal-inner">
<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title());
?>
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"> 
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=●●●●● &tw_p=tweetbutton"><i class="fa fa-twitter"></i></a>
</li>
<!--Facebookいいね!/シェアボタン-->      
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"><i class="fa fa-facebook"></i></a>
</li>
<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><i class="fa fa-google-plus"></i></a>
</li>
<!--はてブボタン-->  
<li class="hatebu">       
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>"><i class="fa fa-hatena"></i></a>
</li>
<!--LINEボタン-->   
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">
LINE</a>
</li>     
<!--ポケットボタン-->      
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>">Pocket</a></li>   
</ul>      
</div>
<a href="#!" class="modal-close">&times;</a> 
</div>

※ツイッターの部分にご自身のアカウントを入力するところがあります。
これでシェアボタン追加できます。はい、さらにもう一個ご紹介!

検索ボタンを追記

こちらも同じくボタンをタップするとモーダルウィンドウが出現して検索欄がでてくるバージョンです。上記のシェアボタンを設置していない場合はこちらの記事の【CSS部分】のさらに【モーダルウィンドウ】の部分のコードをstyle.cssにコピペしておいてください。

footer.phpへ追記

<ul class=”footer_menu”>から</ul>の間に追記です。

<li><a href="#modal-p02"><i class="fa fa-search"></i><br>検索</a></li>

さらに以下を</ul>の下へ。

<div class="modal-window" id="modal-p02">
<div class="modal-inner">
<?php get_search_form(); //検索フォーム表示  ?>    
</div>
<a href="#!" class="modal-close"><i class="fa fa-times"></i></a> 
</div>

シェアボタンとはモーダルの中身の呼び出しidが異なります。こちらは【02】です。

Stinger5では

STINGER5では検索のスタイルはサイドバー用に作られているので、フッターで使いまわすとレイアウトが崩れます。style.cssの【検索フォーム】という記述を見つけ、そのすぐ下【aside #search】と書いている所を
【aside #search, #search】としてください。

<?php get_search_form(); //検索フォーム表示 ?>の代わりにgoogleのカスタム検索のコードをいれても大丈夫ですよ!

今回ご紹介したメニュー項目をすべて入れると…

footer-menu6種

6個はちょっと無理がありますねwww

何か削ってください。

再度申し上げますが、table:cellとsidrの相性が良くないようで均等にメニュー項目が並んでませんのでご理解ください。

フッター固定メニューの設置で直帰率改善!?

今後スマホからのアクセスの割合が増えていくことでしょう。操作性を改善していくことでサイトへの滞在時間も長くし、直帰率を下げるのに今回の記事が貢献できたら幸いです。

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

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

最近はヘッダー固定メニューも流行っているよう

そのことを踏まえてなのか、操作性の意味合いからなのかヘッダーに固定するタイプのメニューも最近は多く見かけます。LIGさんBLOGOSなどがそうですね。

今回ご紹介したこのコードでもstyle.cssの【スマホのフッターメニュー】の一番下【.footer_menu {】の【bottom: 0;】を【top: 0;】にするとそのままヘッダー上部へと固定します
記述自体はご紹介したとおりフッター部分でOKです。

色々いじってみてください٩(๑❛ᴗ❛๑)۶

さいごに

大変たいへん長くなってしまいました。なんと15000文字の長編大作です!しかしコードコピペしてるだけなのでそんなに時間はかけてません。
sidrのコードはインデント無視してるので見にくくなってしまいました。すみません。

なにか不具合見かけましたら教えていただくと助かります。特にiPhoneでの表示とか。。。(~_~;)

それではちゅんこ@shufulifeがお送りしましたー

STNGER5 WordPress

Please comment!

  

Messege




現在トラックバックはありません。