高機能テーマ「SANGO」みたいなフッター固定メニューを実装してみたよ!

ねこもりやが使ってるテーマは、「BOSTON」。

クールでねこもりや好みで、気に入ってるんだけど

カスタマイズは結構大変、、、

なので、「SANGO」に乗り換えようかと思って、

実験サイトで「SANGO」でクールにカスタマイズするための検証中ではあるのだけど。

 

なのに、何を血迷ったか、「BOSTON」に「SANGO」みたいな、

フッター固定メニューを追加してみようと思って

取り組んで二日。

ついに、なんとかカタチになったっぽいのでご紹介。

12/29(土)メニューの項目をちょっぴり変更!

完成形

 

ねこもりやは、すべての作業を子テーマで行っています。

親テーマは一切、触らないようにカスタマイズしています。

加えて、管理画面の外観から、ファイルは触りません。ローカルで作業し、ftpソフトでアップロードしています。

 

メニュー項目はシングルページ以外は

ホーム メニューフォロー人気トップ

シングルページやアタッチメントページではシェアあり

比較

そして、それぞれのメニューをタップした場合。

ホームはトップページへ遷移。

メニューはナビドロワーが開き、フォローはフォロー一覧、シェアはシェア一覧を表示。

ナビドロワー&フォロー&シェア

人気はプラグインWordPress Popular Posts WPP Plus Widget でサイドバーに表示しているランキングに遷移させてます。

populerpost

トップはそのページの最上部へ。

設定するファイル一覧

├functions.php(追記)
├header.php(追記)
├footer.php(追記)
├fixed_menu.php(新規作成)
├navsocial.php(新規作成)
├navfollow.php(新規作成)
├sidebar-navdrawer.php(新規作成)
└style.css(追記)

注意!!:すべてのファイルは文字コード”UTF-8N(ボムなし)で保存

下準備

スマホを定義

まずは、スマホのみで表示させるためにスマホを定義します。

functions.phpに追記します。

注意!!:functions.phpを編集するときは必ずバックアップをとっておき、不具合が出たらすぐ元に戻せるようにしておいてください。このカスタマイズを行って不具合が生じても責任は負いかねます。自己責任で行ってください。特に最後尾に不要なスペースや改行が入ったりすると、ホームページが真っ白になったりすることがあるので気を付けて。

以下を追記します。

すでに、設定済みの場合は省略。

functions.php

↑のように、最後尾の印の前に、空白スペースなどが無いように。

ナビドロワー用サイドバー追加導入

メニューをタップしたら表示されるナビドロワー用のサイドバーを追加で導入します。

スマホを定義同様、functions.phpに追記します。

アイコンフォントを導入

このメニューのアイコンにアイコンフォントFont Awesome Iconsを使用しています。

header.phpの</head>より前に以下を追記。

導入済みなら、省略。

フッターに固定メニューを表示するよう記述

以下をfooter.phpに追記</body>タグより前に。

フッター固定メニュー用のファイルを作成

fixed_menu.phpを新規作成します。

2行目で下準備で定義した「スマホの定義」を利用して、スマホだけに表示するように。

さらに、24行目で、シングルページのみで、「シェア」を表示させるように条件分岐しています。

34行目は人気ランキングにリンクしていますが、「#wpppw-6」はご自身のウィジェットIDに書き換えてくださいね。

35行目は、ページのトップへ戻るリンクです。こちらも、ご自身の環境に書き換えてください。

12行目の<?php get_sidebar(‘navdrawer’); ?>、20行目の<?php get_template_part( ‘navfollow’); ?>、30行目の<?php get_template_part(‘navshare’); ?>の部分で呼び出すファイルは以下で作成します。
※すべてを「fixed_menu.php」に記述すると、ごちゃごちゃしてしまい、管理が煩雑になるので別ファイルにしています。

ナビドロワーを呼び出すファイルを作成

以下を「sidebar-navdrawer.php」という名前で作成します。

下準備で作成したサイドバーがアクティブなら、サイドバーを表示。

管理画面の外観→ウイジェットのスマホ用ナビドロワー(ハンバーガーメニュー)にウイジェットを入れないと表示されません。

ねこもりやは、検索とタグクラウドと人気ランキングを入れています。

カテゴリや最新情報などを入れるといいかもね。

フォローをタップした時に呼び出すファイルを作成

以下を「navfollow.php」という名前で作成します。

注意!!:2~4行目のリンク先、「href=”○○○○”」はご自身のアカウントに変更

必要ないSNSは<li>~</li>をまるっと削除。

シェアをタップした時に呼び出すファイルを作成

以下を「navshare.php」という名前で作成します。

スタイルシートへ追記

見た目を整えます。

ねこもりやは、かぎりなく「SANGO」を真似してます笑

だって、とっても素敵なんだもーん♪

204~218行部分が抜けていました。ごめんなさい、、、

ねこもりやの環境でのスタイルシートですが参考にしてください。

あとがき

ほとんど、コピペでイケルと思いますが、一部セレクタID等、書き換えなくてはいけないかもしれません。

SANGO」と違うのは、閉じるときはボタン以外の黒カバー部分をタップすること。

ほんとは、違うメニューをタップしたら、開いているメニューが閉じられ、かつ違うメニューが開くのが理想ですが

ねこもりやの器量ではムリムリです、、、

ナビドロワーと黒カバーなどはサルワカさんの記事を参考にしました。

どこか、挙動がおかしいとかあったら教えてくださーい!

変なところを見つけた方も教えてくださいねー

フッター固定メニュー

後日メニュー項目を修正

12/29(土)メニューの項目をちょっぴり変更!

シングルページでは、前後の記事へのリンクを表示させるように・・・など諸々。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA