スマートフォンページのフッターに固定メニューを作成してみました

前回スマートフォンページのヘッダーに検索フォームを設置する記事を書いてみたのですが、気に入らなかったのでスマートフォンページのフッターに固定式のメニューを付けてみました(検索フォームも含む)。こんな感じ。

フッターメニュー-3

設置したフッターメニューには「ホーム」「シェア」「記事のトップに戻る」「検索」という4つのボタンを装備して、ついでにTwenty Twelveでずっと気になっていたスマートフォン版の「メニューボタン」も削除してこのフッターメニューに入れ込んでみました。合計5つのフッターメニューです。

各ボタンをクリックするとポワッと中身が出現するタイプです。例えば「シェア」をクリックするとこんな感じ。

フッターメニュー-4

まあ、挙動に関しては実際にスマートフォンから見て確認して頂けたらと思います(変な挙動があれば教えて下さい)。

ただ、今回のカスタマイズは結構大変で難易度も結構高めです。カスタマイズの前にバックアップしておき、まずは記事を最後まで読んでみてからトライする事をおすすめします。

今回参考にさせて頂いたのがコチラのサイトです。非常に勉強になります。

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

私の場合はTwenty Twelveのテーマを利用していますが、これを参考に早速作業してみたいと思います。

スポンサーリンク
アフィリエイトBパートナー募集

フッターメニューの作成の手順と流れ

まずフッターのメニューに使う「アイコン」が必要なので、私の場合は「icomoon」でアイコンをダウンロードしてアップロードしておきました。

ちなみに前回自作のSNSボタンを作成した時にダウンロードしたアイコンは次の通り。

フッターメニュー-7

それで今回新たに追加したアイコンがコチラ。再度全部ダウンロードし、スタイルシートも書き換えてます。

フッターメニュー-9

icomoonについては以前もSNS用のアイコンを取得した時の記事がありますので参考に。
アイコン画像をWebフォントに変更して高速化

それからこのスマートフォンのフッターメニューに「記事の先頭に戻る」ボタンも設定します。プラグインで「記事の先頭に戻る」ボタンを設置している場合には一度外しておきます(PCでスマートフォンでも両方表示されるため)。

それでこの「記事の先頭に戻るボタン」を事前に自作しておく事をおすすめします。次の2つの記事で実装できます。

それと、スマートフォンでの条件分岐をするために「functions.php」に記述も必要になります。これも事前にやっておきます。子テーマのfunctions.phpに記述を追加するだけでOKですが、既に記述している場合にはそのままでOK(スティンガーの場合は不要)。
WordPressの条件分岐でスマートフォンとタブレットを分ける方法

さて、自作したトップに戻るボタンはPCでもスマートフォンでも表示されますが、これをPCのみで表示させるように子テーマの「footer.php」で条件分岐をしてやります。まずは自作した時に「footer.php」に追加したコード。

<div id="scroll-top"><p>▲TOP</p></div>

これを条件分岐タグ(if文)で囲ってやってスマートフォンでは表示させないようにします。

<?php if (!is_mobile()) :?>
<div id="scroll-top"><p>▲TOP</p></div>
<?php endif; ?>

それと子テーマに追加したJavascript「scroll-top.js」には次のコードも追加しておきます。

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

結局この「scroll-top.js」の中身はこんな感じになりました。

フッターメニュー-1

以上でとりあえず準備は完了。

スタイルシートの記述

先に子テーマのCSSに記述をしておきます。

/*--------------------------------
モーダルウィンドウ
---------------------------------*/

.modal-window {
-webkit-transform: translate(0, 100%);
-moz-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
transform: translate(0, 100%);
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
opacity: 0;
line-height: 1.3;
display: none9;
}
.modal-window:target {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
opacity: 1;
}
.is-active.modal-window {
display: block9;
}
.modal-window:target {
display: block9;
}
.modal-window .modal-inner {
position: absolute;
top: 100px;
left: 5%;
z-index: 20;
padding:5%;
margin:0 auto;
width: 80%;
overflow-x: hidden;
border-radius: 6px;
background: #fff;
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

.modal-window .modal-close {
display: block;
text-indent: -100px;
overflow: hidden;
}
.modal-window .modal-close:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background: #333;
	-moz-opacity: 0.7;
	opacity: 0.7;
}
.modal-window .modal-close:after {
content: '\00d7';
position: absolute;
top: 70px;
right:15%;
z-index: 20;
margin:0 auto;
background: #fff;
border-radius: 2px;
padding: 10px 10px;
text-decoration: none;
text-indent: 0;
}

.modal-window {
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}



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

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

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

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

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


/*--------------------------------
SNSの部分
---------------------------------*/


.modal-window .modal-inner.sns{
	margin:0 auto;
	text-align:center;
}
.modal-inner ul {
	list-style:none;
}
.modal-inner li {
	list-style:none;
	float:left;
	width:25%;
	margin:3%;
}
.modal-inner li a {
	font-size:150%;
	position:relative;
	display:block;
	padding:10px;
	color:#fff;
	border-radius:6px;
	text-align:center;
	text-decoration: none;
}
.modal-inner li a:hover {
	box-shadow:none;
}


.share li a {display : block;
    padding : 10px 5px;
    color : #fff;
    font-size : 14px;
    text-decoration : none;
    text-align : center;}
.share li a:hover {opacity :0.8;
    color : #fff;}
.share li a:visited{ color: #fff;}

.tweet a{background-color : #55acee;}
.facebook a{background-color : #315096;}
.googleplus a{background-color : #dd4b39;}
.hatena a{background-color : #008fde;}
.line a{background-color: #00c300;}
.pocket a{background-color :#f03e51;}
.rss a {background-color: #ff8c00;}
.feedly a {background-color: #6cc655;}

.share-sm {margin:0;}
.share-sm ul:after {content : "";
    display : block;
    clear : both;}

/*--------------------------------
メニューの部分
---------------------------------*/

.mod li{
  float:none;
  display:block;
  width:100%;}

.mod li a {
  text-align: left;  /* メニューを左寄せ */
  font-weight: bold;  /* メニューを太字に */
  background: #000;  /* メニューの背景色 */
  margin: 2%;
font-size: 14px;  /* メニュー文字サイズ */
}

以上がCSSです。後で少し補足の説明をします。

フッターメニュー設置

CSSができたら今度は子テーマの「footer.php」にフッターメニューを追加していきます。「footer.php」の一番最後の方に「/body」というタグがあるのでその直前に次のコードを入れます。

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

<ul class="footer_menu">
<li><a href="<?php echo home_url(); ?>/"><span class="icon-home" style="font-size:16px"></span><br>ホーム</a></li>
<li><a href="#modal-p01"><span class="icon-share2" style="font-size:16px"></span><br>シェア</a></li>
<li><a href="#modal-p02"><span class="icon-search" style="font-size:16px"></span><br>検索</a></li>
<li><a href="#modal-p03"><span class="icon-menu"></span><br>menu</a></li>
<li><a id="mobile-top" href="#wrapper"><span class="icon-circle-up" style="font-size:16px"></span><br>TOP</a></li>
</ul>

<?php } else { ?> <?php } ?>

この時点で「ホーム」と「TOP」ボタンは機能すると思いますが、「シェア(#modal-p01)」「検索(#modal-p02)」「メニュー(#modal-p03)」の3つはまだ機能しません。

これから中身を追加しますが、この部分をちょっと解説しておきます。

「span class=○○」「/span」という部分がicoMoonから取得したアイコンの呼び出しコードです。私と同じアイコンを取得している方は同じコードなのでこれでOKですが、違うアイコンを利用する場合にはこの「span class=○○」を書き換える必要があります。これは以下シェアボタンの時にも使ってますので確認しておいて下さい。

それでは更に追加作業です。先ほど「footer.php」に追加したコードの最後の部分を確認してください。

<?php } else { ?> <?php } ?>

これの直前に次のコードを入れます。

<!--modal-p01の中身-->
<div class="modal-window" id="modal-p01">
<div class="modal-inner">
<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'|'.get_bloginfo('name');
?>
   <ul class="share-sm">
<!--ツイートボタン-->
      <li class="tweet"> 
       <a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton"><span class="icon-twitter"></span></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;?>"><span class="icon-facebook"></span></i></a>
      </li>
<!--Google+1ボタン-->
       <li class="googleplus">
  <a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><span class="icon-google-plus"></span></a>
      </li>
<!--はてブボタン-->  
      <li class="hatena">       
      <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>"><span class="icon-hatebu"></span></a>
      </li>
<!--LINEボタン-->   
      <li class="line">
  <a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><span class="icon-line"></span></a>
  </li>     
<!--ポケットボタン-->      
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><span class="icon-pocket"></span></a></li>   
    </ul>      
</div>
 <a href="#!" class="modal-close">&times;</a> 
 </div>


<!--modal-p02の中身-->
<div class="modal-window" id="modal-p02">
<div class="modal-inner">
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url('/'); ?>">
  <div>
    
    <input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="検索" />
  </div>
</form>
</div>
<a href="#!" class="modal-close">&times;</a> 
</div>


<!--modal-p03の中身-->
<div class="modal-window" id="modal-p03">
<div class="modal-inner">

<ul class="mod">
<li><a href="#">タイトル1</a></li>
<li><a href="#">タイトル2</a></li>
<li><a href="#">タイトル3</a></li>
<li><a href="#">タイトル4</a></li>
<li><a href="#">タイトル5</a></li>
<li><a href="#">タイトル6</a></li>
</ul>

</div>
<a href="#!" class="modal-close">&times;</a> 
</div>

こんな感じになります。

フッターメニュー-2

後は最後に追加した「メニュー(modal-p03の中身)」を編集して表示させたい記事のタイトルとURLを入れます。「#」の部分だけを消してURLを入れます。それでタイトル1から6までの部分にその記事のタイトルを入力。

ただし、タイトルが長すぎると入りきれないのでちょっと短めのタイトルが良いかもしれません。全部できたら保存します。

実際にスマートフォンで確認する場合には一度WordPressのキャッシュとか削除しないと以前のままのデータが表示されますので、キャッシュ系のプラグイン等を利用している場合にはキャッシュを削除もしくはプラグインを停止してから確認がいいと思われます。

Twenty Twelveのメニューを削除

これはずっと気になっていたんですよ。これね。

フッターメニュー-5

今回フッターメニューにこのメニューの中身を入れたのでこのボタンは削除することにしました。

子テーマの「header.php」のこの部分を探します。

<nav id="site-navigation" class="main-navigation" role="navigation">

この記述の下のまとまりの一部を削除するのですが、このまとまりの部分を全部削除するとPCページのナビゲーションメニュ-まで消えるので注意です。削除するのはこの部分です。

フッターメニュー-6

「button」~「/button」それと「a class=”assistive-text”」~「/a」の部分を削除しておきました。

以上フッターメニューを設置するカスタマイズでした。

アフィリエイトBパートナー募集
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

スマートフォンページのフッターに固定メニューを作成してみました”に43件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. ひとし

    しげぞう様

    退院おめでとうございます。前回の件なんですがなんとか自力で解決する事が出来ました。どうもありがとうございました。

  2. しげぞう 投稿作成者

    ひとし様

    時間が空いてしまってすみません。もしまだ解決していない場合には再度ブログのURLを教えて下さい。改めてチェックしてみますね!どうぞよろしくお願いいたします。

  3. ひとし

    しげぞう様

    やっとこさ時間ができたので戻るボタンに挑戦してみたのですがやはり表示されませんでした、我ながら情けない限りです…

    戻るプラグインを停止したのですが…

    ちなみに下記の記述はあっていますか?
    子テーマと戻るボタンを同じ

    ククルのか悩んでます、相変わらずの初心者丸出しの質問ですみません。

    「function.php」