スマホ用の固定フッターメニューを付ける手順【ワードプレステーマ別】

https://www.koko-de.com

Wordpress

スマホ用の固定フッターメニューを付ける手順【ワードプレステーマ別】

このページは固定のフッターメニューをスマホに付けたい方、または付けたいけど出来ない方に最適なページになっていると思います。

テーマ別に解説していますのでご覧ください。

固定フッターメニュー機能があるテーマでも、各マニュアルだけでは分かりにくいところもあります。このページではそこを中心に解説しています。
(すぐに使えるコードも用意しています!)

あとスマホ用の固定フッターメニューがないテーマはカスタマイズで実装する方法を解説しています!

参考にしてください。

各テーマはアップデート・更新を行い最新の状態にしておいてください。

SANGOに固定フッターメニューを付ける手順

SANGOのフッター

公式サイト▲でも説明がありますが、少しわかりにくい面があったり、設置を依頼されることがあるので、ここでは公式サイトよりもさらに詳しく手順を説明します。

今回は見本として以下のような表示を目指します!

SANGOに固定フッターメニューを付ける手順1

▼シェアボタンを押すと上にせりあがってきます。これでブログ記事を拡散してくれる可能性が高まります。

SANGOに固定フッターメニューを付ける手順2

▼メニューを押すと左からメニューがスライドしてきます!

SANGOに固定フッターメニューを付ける手順3

表示とタップ先の説明

  • 「HOME」はタップするとサイトのトップページに飛びます!
  • 「シェア」をタップすると下からSNSのアイコンがせりあがってきます。
  • 「メニュー」をタップすると左から設定したメニューがせり出してきます。
  • 「トップ」をタップすると閲覧しているページの一番上に戻ります。

固定フッターメニュー設置の仕方手順

step
1
新しいメニューをつくる

まず、フッターに表示するメニューを新しく作ります!

「外観」>「メニュー」

あたらしいメニューを作って「メニューを保存」。

step
2
表示内容を設定していきます!

カスタムリンクを使用します。

・固定ページでトップページを作っている場合は、「HOME」は固定ページから選ぶと簡単かも!

・カテゴリーページを表示させたい場合は<カテゴリ>のなかから選ぶとリンク先の設定が容易になります。

step
3
コピペで使えるメニュー設定!

以下のリンク先とコードをコピペするだけで見本のような固定フッターができます!

自分なりのカスタマイズは後からするようにして、とりあえず猿真似でやってみてください。

表示文字 リンク先(URL) リンク文字列(ナビゲーションラベル)
ホーム / <i class="fa fa-home"></i>ホーム
シェア #sng_share <i class="fa fa-share-alt"></i>シェア
メニュー #sng_menu <label for="drawer__input"><i class="fa fa-list-ul"></i>メニュー</label>
トップ # <i class="fa fa-arrow-circle-up"></i>トップ

step
4
チェックを入れて保存で完成!

モバイル用固定フッターメニューのところにチェックを入れて保存する!

SANGOのメニュー設定画面

左からスライドしてくるハンバーガーメニューとシェアボタンは今の段階では設定していないので正しく表示できません。

仕上げの設定

step
1
シェアボタンの設定

カスタマイザーでシェアを使えるように設定をする

「外観」>「カスタマイズ」>「SANGOオリジナル機能の管理」>「モバイルフッター固定メニュー」

モバイルフッター固定メニューの設定

▲「シェアボタン機能を使用する」にチェックを入れる。

設定後「公開」を押して設定終了。

メニューのカラーはココで設定できます。

step
2
ハンバーガーメニューの設定

「外観」>「ウィジェット」⇒「スマホ用ナビドロワー」

ハンバーガーメニューの設定の仕方!

▲「スマホ用ナビドロワー」を開いて表示させたいメニューを選択して保存、完了を押せば設定が終了します。

「表示させたいメニューの作り方」は基本操作なのでここでは割愛させていただきます。

これですべての設定が終了しました!

実際にスマホで表示させてみて各項目をタップして正しく遷移するか確認しましょう♪

アイコンの変更方法

(SANGO v1.7以上であること)

SANGOに固定フッターメニューを付ける手順1

ホームのアイコンを変えたいと思ったら。。。

ポイント

<i class="fa fa-home"></i>ホーム

赤色の部分がアイコンを表示させている部分です。ここを変更すればアイコンが切り替わります。

▲このアイコンのページでお気に入りのアイコンをみつけて選択すると 「<i class="fas fa-アイコン名"></i>」をコピーすることができます。アイコン名の部分を「home」と差し替えれば表示が変わります。

アイコンは濃い黒色のみ、すぐに使えます。半透明は無料ではありません。

SANGO公式マニュアル;https://saruwakakun.com/sango/mb_footer

アフィンガー5(WING)に固定フッターメニューを付ける手順

アフィンガーには標準でスマホ用フッターメニューがあります。

今回は以下、当サイトのフッターメニューを例にとって解説していきます。

アフィンガーに固定フッターをスマホに表示してみよう

▲こんな感じでフッターにメニューを4つ付けています。(見る時期によって異なります)

設定手順

「外観」>「メニュ」

フッターメニューの内容を設定します。

アフィンガーにフッターを設置手順

★あたらしいメニューを作って「スマホ用固定フッター」などの名前を付けましょう。

あたらしいメニューを作成アイコンも一緒に付ける

▲リンク先は、固定ページ、投稿ページ、カテゴリーページ、カスタムを利用して設定します。「トップへ戻る」のリンク先は「#」です。これで閲覧中のページの一番上に戻ることができます。

フッターに見本のようなアイコンをつけるには上記のようなナビゲーションラベルの記述が必要です。

下記にコピペできるナビゲーションラベルをおいときます。ご自由にお使いください。

HOME <i class="fa fa-home" aria-hidden="true"></i><br/>ホーム
パソコン <i class="fa fa-laptop" aria-hidden="true"></i><br/>Drs
WordPress <i class="fa fa-wordpress" aria-hidden="true"></i><br/>WP
上へ戻る <i class="fa fa-angle-double-up" aria-hidden="true"></i><br/>TOP

※赤い字の部分は任意の文字列に変更できます。

そのほかのアイコンを探す場合はコチラから。

WINGで使えるアイコン

アイコンの変更は、一つ上の章の<SANGOの「アイコンの変更方法」>を参考にしてください。

次にフッターメニューの位置を設定します。

アフィンガーのフッターメニュー設定位置

 スマートフォンフッター用メニューにチェックを入れる

最後にアフィンガー設定で表示を確定させる

「AFFINGER5管理」>「メニュー」 スマホ用フッターメニューを表示するにチェックを入れる。

アフィンガー管理のフッターメニュー管理方法

最後に「save」を忘れずに押して完了です!

あとはスマートフォンでご確認ください。

アフィリエイトの成果を加速させるワードプレステーマ
アフィリエイトにおすすめワードプレステーマ(成果アップ編)

アフィリエイト成果をアップしたい!に応えてくれるワードプレスのテーマがある! アフィリエイトをやってるけどなかなか成果が伸びない・・・ SEOも行いアクセスはあるんだけど、なぜか思った以上の成果が出せ ...

続きを見る

JINに固定フッターメニューを付ける手順

JINには標準でスマホ用のフッター機能が付いています。

JINのスマホ用フッター見本。

▲JINのスマホ用フッター見本。アイコンコードはコピペできるモノを下の方に用意しています。

設定手順

設定の仕方はアフィンガーとほぼ同じです。

「外観」>「メニュー」の画面で設定すれば完結します。

大まかな手順

  1. 表示オプションをクリック!「説明」にチェックを入れる
  2. あたらしいメニュー名を設定
  3. メニュー内容を設定・入力
  4. 変更を保存

JINフッター設定の解説

右上の「表示オプション」から「説明」にチェックを入れます。

「説明」内にアイコンのみのコードを記述します。このあたりがアフィンガーと若干違う箇所です。

▲「説明」内にアイコンのみのコードを記述します。このあたりがアフィンガーと若干違う箇所です。最後は「スマホ固定フッターメニュー」にチェックを入れてメニュー位置を決定して「保存」で完了です。

▼見本のように表現したい場合のアイコンコード!コピペして使ってください。
HOME fa fa-home
掲示板 fa fa-list-ul
プライバシーポリシー fas fa-user-shield
上へ戻る fas fa-angle-double-up

JINの場合は、アフィンガーのように別画面で「スマホ用フッターメニューを表示するにチェックを入れる」という作業がありません。

JINで使えるアイコンはコチラから選べます。

ストークに固定フッターメニューを付ける手順

ストークには固定フッターメニューを付ける設定が標準では用意されていません。なので自分でカスタマイズするしか方法がありません。

ストークにスマホ用メニューをカスタマイズで作ってみた!

▲ストークにスマホ用メニューをカスタマイズで作ってみた!

カスタマイズ設定手順

カスタマイズをする前に必ずバックアップを取ってください。

  1. 子テーマを用意します。
  2. スタイルシートに追加CSSを記述
  3. フッターPHPを用意して追加コードを記述
  4. フッターメニューの内容を作成
  5. ハンバーガーメニューをウィジェットで設定

step
1
子テーマを用意する

ストーク公式サイトで子テーマを下記よりダウンロードできます。

「ダウンロード」<「インストール」<「有効化」

step
2
CSS記述

「外観」>「テーマエディター」から子テーマのスタイルシートに以下を記述

+ クリックして下さい

/*-----------------------------------------------
フッターメニューを固定する
-----------------------------------------------*/

@media only screen and (max-width: 767px) {
#container{
padding-bottom:50px;/*フッターの高さだけコンテンツを上げる*/
}
#fixed_footer {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color:#7fbae9;/*メニューの背景色*/
z-index:99;
}
#fixed_footer .fa {
font-size:24px;/*アイコンフォントのサイズ*/
}
#fixed_footer ul {
margin:5px 0;
display: table;
table-layout: fixed;
text-align: center;
width: 100%;
}
#fixed_footer ul li {
display: table-cell;
vertical-align: middle;
font-size:10px;/*文字サイズ*/
margin:auto;
}
#fixed_footer ul li a{
color:#fff;/*文字色*/
text-decoration:none;
}
#page-top{
display:none;/*デフォルトのトップへ戻るボタンを消す*/
}
}

”りら”さんのブログが大変参考になりました。このコードもほぼほぼ「りら」さんのコードです。

step
2
フッターPHPを用意して追加コードを記述する

ストーク公式の子テーマにはフッターPHPがないのでページ自体を子テーマに追加します。その子テーマに以下のコードを記述ください。

+ クリックして下さい

★こちらも”りら”さんのブログを参考にしています。このコードもほぼほぼ「りら」さんのコードですが、下記記載のコードは「URLアドレス」「Twitterユーザー」の改変なしで使えます。フッターPHPページを新しく作る方法は「りら」さんのページを参考にしてください。

<!--フッター固定メニュー-->
<?php if(is_mobile()):?>
<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>
<!--ポケットボタン-->
<li class="pocket">
<a href="https://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>"><i class="fa fa-get-pocket"></i></a></li>
<!--LINEボタン-->
<li class="line">
<a href="https://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">
<i class="fa fa-comment" aria-hidden="true"></i><BR><span>LINE</span></a>
</li>
</ul>
</div>
<a href="#!" class="modal-close">&times;</a>
</div>
<div id="fixed_footer">
<ul>
<li><a href="/"><i class="fa fa-home" aria-hidden="true"></i><BR>ホーム</a></li>
<li><a href="#spnavi" data-remodal-target="spnavi"><i class="fa fa-bars" aria-hidden="true"></i><BR>メニュー</a></li>
<li><a href="#modal-p01"><i class="fa fa-share-alt" aria-hidden="true"></i><BR>シェア</a></li>
<li><a href="#top"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i><BR>トップ</a></li>
</ul>
</div>
<?php endif;?>

▼プラグインで子テーマを作ってフッターPHPのファイルを追加する場合はこちらのページを参考にしてください。

WordPress初期設定5 もしもに備えて子テーマを作ろう!
WordPress初期設定5 もしもに備えて子テーマを作ろう!

子テーマがあると便利! ワードプレスには定期的に更新(アップデート)があります。 このとき、アップデートしたタイミングで追加CSSやアナリティクスタグなどが消えてしまうことがあります。これは新しいバー ...

続きを見る

step
3
ハンバーガーメニューに表示するメニューをつくる

「外観」>「メニュー」から作成。

これは通常メニューをつくる要領で作れば大丈夫です。

step
4
ハンバーガーメニューを設定

「外観」>「ウィジェット」で設定。

「ハンバーガーメニュー」の中に「ナビゲーションメニュー」をドラッグ&ドロップで設置

▲簡単です。「ハンバーガーメニュー」の中に「ナビゲーションメニュー」をドラッグ&ドロップで設置。内容を先ほどつくったメニューにするように、プルダウンから選択すればOK!

ストーク公式マニュアル;https://open-cage.com/stork/document/headermenu/

コード参考「リラさんのブログ」;https://setsuyaku-rich.com/stork-footer-2/

 

スマホ用フッターを標準装備した子テーマを作りました!

ダウンロード>インストール>有効化。するだけでスマホ固定フッターメニューが出現します。

上記で説明したコードやphpページを揃えた子テーマになっています。

ウィジェットでのハンバーガーメニューの設定は必要です。

※子テーマを使うにはストークの親テーマが必要です。

持ってない方はコチラで購入してから子テーマをご活用ください。

ストーク公式サイト

注意事項

  • 必ずバックアップを取ってからお試しください。
  • テーマエディターで中身をご確認ください。ベースは公式 子テーマです。それにこのページで説明したコードをすべて追記しています。
  • 有効化は自己責任でお願いします。いかなる損害にも対処いたしません。
  • すでにカスタマイズした子テーマを実装している場合は、この子テーマにカスタマイズしたコードを追記しないと今のデザインが崩れます。
  • ファイル編集ができない場合はサーバー側で親テーマを参考にパーミッションを最適な数字に変更ください。
  • KUSANAGIをお使いの方は必ずバックアップを取ってから実装ください。

Cocoonに固定フッターメニューを付ける手順

Cocoonにはスマホ用の固定フッターメニューが標準で装備されています。

Cocoonに固定フッターメニュー

▲Cocoonのスマホ用固定フッターメニュー

左から順番に表示を確認してみましょう

  • 「メニュー」を押すと「外観」>「メニュー」で作成した「フッターメニュー」が表示されます。
  • 「ホーム」を押すとサイトのトップページに飛びます。
  • 「検索」を押すとサイト内検索ができるようになります。
  • 「トップ」を押すとそのページの一番上に戻ります。
  • 「サイドバー」を押すとウィジェットで設定したサイドバーが表示されます。他のテーマではあまり見かけることがないのでCocoonの特徴といえます。

設定手順

Cocoonでは、標準でスマホ用の固定フッターメニューが表示されるようになっています。

表示設定

フッターメニューの表示種類変更はココから!

コクーンのフッター表示設定

「Cocoon設定」>「モバイル」

  1. 「ボタンを表示しない」にするとフッターメニューがなくなります。
  2. 「トップボタン」にすると右下にトップへ戻るボタンが単発で表示されます。
  3. 「スライドインボタン」を選択すると上の見本のようなスマホ用固定フッターメニューがあらわれます。

メニューボタンを押したときに展開されるフッターメニューの設定

「外観」>「メニュー」

メニューを押して展開される部分のメニューを設定する

第二階層は表示されないので注意しましょう。

Cocoon公式マニュアル;https://wp-cocoon.com/footer-menu-setting/

さいごに

スマホ用のフッターメニューはパソコン用のフッターメニューよりも大事な存在です。スマホ閲覧が多いサイトでは、フッターメニューがあるのとないのとでは、直帰率、セッション数、滞在時間に影響が出ます。「フッターがある」と多くの数値が上向きに変化します。

スマホのフッターメニューはパソコンのフッターメニューよりも利便性が確実に高いものです。自分のサイトを自分のスマホで見て利便性をアップしていきましょう。

自分が本当にみて欲しい記事はカテゴリに「ピックアップ」などをつくって、フッターに押すと展開するメニューボタンにピックアップ記事が表示されるようにするといいですよ。

これで大事な記事や見て欲しい記事が多数の記事のなかに埋もれなくなります。

ココがポイント

まずは、アクセス解析でパソコンとスマホの直帰率、セッション数、滞在時間を確認してスマホ用フッターメニューを作る目的を明確にしましょう!

各内容は実際に検証を行ってから掲載をしていますが、各テーマの更新や機能追加によりうまく作動しない可能性もあることをご了承ください。実装前にはバックアップや子テーマを活用してから実行ください。

このテーマがおすすめです!

「WING」アフィンガー5

アフィリエイトの成果をアップさせるワードプレステーマ

★アフィリエイトに特化したワードプレステーマ!

WINGはこんな方におすすめ!

アフィリエイトを本気で取り組みたい !

アドセンスブログに本気で挑戦したい!

ドロップシッピングに本気で取り組みたい!

新規ホームページ制作

ホームページ制作サービス

司法書士・行政書士・コンサルティング業を新しく立ち上げるにあたり、専用のホームページが欲しい!必要!という方にピッタリのホームページ制作サービスがあります!これで早く!低価格でホームページが持てます!開設できます!

ブログ開設サービスあり!

ブログ開設を受け付け中

ブログを始めたいけどよく分からない。自分だけの趣味のブログを持ちたい!アフィリエイト、アドセンス、副業などにも使えるブログを開設したい!ワードプレスでブログを作っていきたい!自分だけのドメイン(URL)を設定したブログを持ちたい!「WordpressでBLOGを開設します!ブログを始めたい人に最適!後は記事を入れるだけ!」はそんな夢を叶えるサービスです。

Copyright© WEBデザイナーブログ!ホームページ制作・ネットビジネス! , 2019 All Rights Reserved.