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

WordPressの始め方や使い方まとめ

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

フッターメニュー-3

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

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

フッターメニュー-4

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

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

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

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

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

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

まずフッターのメニューに使う「アイコン」が必要なので、私の場合は「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: '
/*--------------------------------
モーダルウィンドウ
---------------------------------*/

.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;  /* メニュー文字サイズ */
}
d7'; 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」の部分を削除しておきました。

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

コメント

  1. しんの より:

    しげぞう様

    はじめまして、しんのと申します。
    自分ははてなブログを運営しているのですが、こちらのコードを参考にはてなブログ用に少々改変して実装することが出来ました。
    可能であれば、私のブログにて改変の手順を備忘録を兼ねて記事にしようかと考えているのですが、こちらのページのURL、及びコードを使用させていただいてもよろしいでしょうか?
    勝手なお願いですがよろしくおねがいします。

  2. るー より:

    しげぞう様

    お世話になっております。
    いつも私からの質問に迅速に対応していただき大変助かっております。返信が遅くなりましたが、しげぞう様のアドバイス通りに対処した結果、全てが解決いたしました。ナビゲーションメニューにいたしましても中央に寄ってしまってはいますが、今後、カテゴリーは増える予定ですので現状で確定せずに今後調整していきます。スッキリしました。本当にしげぞう様のおかげです。ありがとうございます。感謝しかありません。

  3. しげぞう より:

    るーさん様

    コメントありがとうございます。自力でやって考えてみる事に意味あると思いますし、まずは挑戦してみるのは素晴らしいと思います。

    ちょっと順番前後しますが回答します。

    ■見出しの装飾が残っている問題について

    これは▼の部分のCSSが残っているのが原因になります。CSSの中から「h4:after」という部分を見つけて一度削除すれば解決するかと思います。

    ■ブログタイトル上に見出しの装飾が出てきている

    これはブログタイトルではなくて「ブログの説明文(description)」がh2なのでh2の装飾(h2:beforeでコードが書いてありますね)が出てきてしまう感じですね。header.phpを見てみれば「h2 class=”site-description”」という部分の「h2」と「/h2」をそれぞれ「p」「/p」に変更する方法や、CSSでスマホの時だけ説明文を非表示にする事も可能です。

    @media screen and (max-width: 599px) {
    h2.site-description {
        display: none;
    }
    }

    別の方法が良ければCSSは後から書いたもの(下に書いたもの)が優先的に反映されるので、通常のh2と「.site-description 」両方の装飾コードを書いて、前後させてみると上手くいくような気もします

    ■フッターのシェアボタンについて

    これはfooter.phpに追加されているコードの部分ですが、Facebookのコード(li class=”facebook”)の部分に半角のスペース(もしくはnbspみたいなのが)が3つくらい?入ってますので、これを削除すれば上手く行きます。

    ■ナビゲーションメニューについて

    これは私の書いたコードが階層を考えてなかったため横に並んでしまいます。原因としてはCSSの「.main-navigation li」の部分の「display: table-cell;」という部分なのでこれを削除したらOKなんですが、それ以外にも以下のコードがあるため、メニュー文字が中央に寄る感じになってしまいます。

    .main-navigation ul.nav-menu {
        display: table !important;
        table-layout: fixed;
        text-align: center;
    }

    なので、位置を調整する上記コードなどを一旦消してみて、改めてpaddingなどで文字の位置調整してみると良いかもしれません。paddinは時計回りに上、右、下、左に余白を作れますので、試してみて下さい。

  4. るーさん より:

    しげぞう様

    お世話になっております。お陰様でおおよそのカスタマイズが終了し、見た目もなんとかサイトらしくなってきました。(かな?www)ホントにしげぞう様のお陰です。
    サイトをカスタマイズしている過程で、うまくいかないこと沢山ありました。出来る限り自力で解決できるよう努めてきたのですが、どうしても解決できないことが3つ残りましたのでお力添え頂きたく思います。

    ①ナビゲーションメニューについて
    タイトルにカーソルを合わせた際に階層メニューが表示されると思うのですが、この階層メニューを縦に並べるにはどうしたらいいでしょうか?右端のタイトルにカーソルを合わせた時に、複数ある階層メニューが横に見切れてしまい、一つしか表示されなくなってしまっています。

    ②サイトのトップページ ブログタイトルスマホで見ていただければわかりやすいのですが。過去に見出しの装飾のカスタマイズする際入力した、見出しの装飾の一部が残っています。目次のあたり(しげぞう様が使われている吹き出し型の下の▼の部分)また、ブログタイトルの上にも現在h2タグに設定中の装飾の一部が出てきてしまっています。カスタマイズする際h1タグについて触れた記憶がないのですが。どこかで誤って入力してしまったのかもしれません。h2-h4のスタイル編集も自分が見ても問題があるのかどうかわかりません。修正箇所を特定するにも特定の仕方がわからず困っています。
    それに合わせて、hタグを整理したいと思っています。現在、

    h1ブログタイトル
    h2見出し
    h3サイドバー見出し?
    h4見出し

    となっていて
    SEO対策でhタグは数字が上位のものが有利と聞きました(プラグインの目次の自動生成の表示も《1.0.1》などとなってしまうので)。認識が間違っていなければサイドバー見出しとh4の見出しを入れ替えh3に設定したいのですが、見出しの装飾の修正がうまく反映されません。あれこれと修正していたら上記の症状が発生してしまったという経緯です。どこをどのように修正すればよいのでしょうか?

    ③フッターメニューのシェアボタンについて
    配置がずれてしまっています。Facebookのアイコンを外せば綺麗に並ぶのですが、 Facebookのアイコンを入れた途端に配置がずれてしまいます。アイコンをインポートした際のグリッドは16で、全てのアイコン同一なんですが何が原因でしょうか?しげぞう様のサイトのソーシャルボタンと比較しても、アイコンの大きさが問題ではなさそうなのですが、いかがでしょうか?

    以上3点が自力で解決できなかった問題点です。大変恐縮ですがそれぞれの解決策を教えていただけると助かります。

    私のサイト
    よろしくお願いします!!

  5. 佐々木 より:

    お早い回答、感謝いたします!
    とても簡単に出来るのですね。
    お忙しい中、本当に有難うございました。

  6. しげぞう より:

    佐々木様

    コメントありがとうございます。まず、サイドバーの各部分(カテゴリーとか人気記事とか最近の記事など)にはそれぞれidというか名前がつけられてます。サイドバーに追加されたテキストウィジェットは「text-1」とか「text-2」という感じで順番に数値が割当てられてます。それを調べる必要があります。

    調べるにはPCのでサイトを開き、飛ばしたいサイドバーのタイトル部分にカーソルを合わせて右クリック⇒検証をクリックします。するとその部分のHTMLとかCSSなどが表示されますので以下のような記述(aside id)を探します。私の人気記事のidは「text-3」になってました。

    aside idが見つかったらfooter.phpのメニューを書いてる部分に以下のようにリストタグ(li)を追加します。飛び先のIDに#をつけて記述。


  7. 人気記事
  8. 上記は私のサイトのやつなので#text-3となっている所を自分のものに変更してください(#id名)。

タイトルとURLをコピーしました