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

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

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

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

今現在、わたしのフッター固定式のメニューは下図のように4種類になります。

カテゴリはJQueryプラグインSidrを組み込み、WordPressのカスタムメニューを反映させているのです。
SidrのライセンスはMITとの事なのでコードも全部載せてしまいます。記載しているのはライト（明るい）バージョン、メニューは左から開きます。詳しくはSidrの公式サイトでご確認ください。コードは圧縮したままです。

[browser-shot url=”//www.berriart.com/sidr/” width=”150″]

Sidr – A jQuery plugin for creating side menus

フッターを設置する前提として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のスタイル部分を修正する必要があるのだと思います。
そのうちチャレンジしてみますが、均等に並ばないのをご了承いただいてコードを使ってください。すみません。

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

[thumbnail

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

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

[thumbnail

JQuery『Sidr』をWordPressのカスタムメニューに対応させ設置する方法

[thumbnail

【WordPress】カスタムメニューの項目ごと別々のアイコンフォントを設置する方法

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

シェアボタンを設置

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

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

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

[thumbnail

【WordPress】CSSのモーダルでSNSシェアボタン表示させるコードを紹介します！

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="https://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="https://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="https://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="https://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">
   LINE</a>
  </li>     
<!--ポケットボタン-->      
<li class="pocket">
<a href="https://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のカスタム検索のコードをいれても大丈夫ですよ！

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

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

何か削ってください。

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

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

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

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

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

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

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

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

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

さいごに

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

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

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

footer.phpへ記述

STINGER5の方は

外部Jsファイルに以下を追記

シェアボタンを設置

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

footer.phpへ追記

検索ボタンを追記

footer.phpへ追記

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

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

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

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

さいごに

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル