ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPress[Stinger5] スマホ固定式フッターメニューを導入

   

WordPress[Stinger5] スマホ固定式フッターメニューを導入

WordPressのテーマをStinger5に変更してからずっとやってみたかったカスタマイズのひとつでもある、スマホから見た時にブログ下部に固定式フッターメニューを表示させる方法でした。自分は元々CSSもPHPも全然わからなくてWordPressを使ったりすることで少しずつ覚えてきました。なので、1から作るとかは到底無理な訳で天下のグーグルで色々探していたんですが、自分が理想としていた固定式のフッターメニューの設置を紹介しているページがありました。

ちゅんこさんのブログで紹介していた固定式フッターメニューがかなり良かったので早速設置してみました。

スポンサーリンク

WordPress[Stinger5] スマホ固定式フッターメニューを導入

下部のメニューを押すと

WordPress[Stinger5] スマホ固定式フッターメニューを導入

こんな感じで左からメニューが出てきます。VINEでもとってみました。

こんな感じにフッター部分に固定された透過メニューが設置されています。動きもスムーズで良い感じです。スマホユーザーにはとても助かる機能だと思います。個人的にぶつかった問題点なども含めて備忘録としてここで紹介したいと思います。

今回もローカル環境に設置したWordPressに設置をして行きたいと思います。本番サーバーでカスタマイズする前にローカルサーバーで色々試行錯誤出来て便利です。設置していない方は是非。

スポンサーリンク

自身のStinger5は子テーマを作成して作業を行っています。子テーマでのカスタマイズは親テーマアップデード時などにファイルを上書きされてしまうことを防いだりしてくれます。まだの方はこちらも是非導入を検討してみてください。

子テーマのStyle.cssにデザインのコードを記述します

子テーマの一番下か任意の場所に下記のコードをコピペしてください。

子テーマのfooter.phpにもコードを記述

子テーマにfooter.phpがない方は親テーマからそのままコピーしてきてください。自身の「footer.php」は先日、

フッターにカテゴリを追加する記事で多少いじっていますが、デフォルトでも大丈夫です。自分の「footer.php」は現在こんな感じになっています。

WordPress[Stinger5] スマホ固定式フッターメニューを導入

ここの23行目

の後に下記のコードをコピペします。

WordPress[Stinger5] スマホ固定式フッターメニューを導入

最終的にこんな感じになっていれば問題ありません。

WordPress[Stinger5] スマホ固定式フッターメニューを導入

23行目以降に先程のコードがペーストされています。このままの記述だと元々Stinger5のスマホで表示されていた右下の「記事のTopへ戻るボタン」が新しいメニューと重なってしまいます。なのでそれを修正します。先程の画像の

スポンサーリンク

WordPress[Stinger5] スマホ固定式フッターメニューを導入

52行目の

の後に移動させます。最終的にこうなっているはずです。

WordPress[Stinger5] スマホ固定式フッターメニューを導入

が移動されました。これでOKです。

base.jsにコードを記述

次は親テーマの中にある「js」フォルダの中の「base.jp」にコードを記述します。こちらは子テーマで出来るように変更出来るのですが、今回は省略いたします。なので、親テーマのアップデートの時は今回編集する「base.jp」をバックアップするのを忘れないようにしましょう。それでは、「base.js」を開いて一番下に下記のコードをコピペしてください。

WordPress[Stinger5] スマホ固定式フッターメニューを導入

最終的にこんな感じでコピペ出来ていれば問題ありません。

WordPress[Stinger5] スマホ固定式フッターメニューを導入

X-Serverの方ここで注意

作業は一応ここで終わりなのですが、X-Serverの「mod_pagespeed設定」が[ON]になっていると固定式フッターメニューが上手く表示されませんでした。理由がわかる方がいたら教えて欲しいです。ってことなので、X-SERVERのページで「OFF」にして進んでください!

WordPress[Stinger5] スマホ固定式フッターメニューを導入

これで完成。確認してみましょう。

Google Chromeを使ってApple iPhone5での表示の確認をしてみましょう。自分は英語表記ですがGoogle Chromeのメニューバーから「View」を選択。一番下の「Developer」から「Developer Tool」を選択します。

WordPress[Stinger5] スマホ固定式フッターメニューを導入

するとこんな画面が表示されるので、「Device」から「Apple iPhone5」を選択します。 選択後、再読み込みをすればiPhoneで見た時のような感じで表示されます。

WordPress[Stinger5] スマホ固定式フッターメニューを導入

はてなブックマークからブログを見るとメニューが2つ重なる

ちゅんこさんのブログにも書いてあったんですが、

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

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

WordPress[Stinger5] スマホ固定式フッターメニューを導入

とのこと。ブログ下に固定式メニュー付けたから上のメニュー消しちゃえ!っと思ってたのですが、「はてなの表示問題」を考えると上部のメニューも残して置いた方がよさそうですね。しばらく現状維持で使ってみます。読んで頂いてありがとうございました。

 - WORDPRESS

Message

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

CAPTCHA


  関連記事

WordPress[nend] スマホ用広告(アフィリエイト)の導入方法
WordPress[nend] スマホ用広告(アフィリエイト)の導入方法
WordPress[Revive Old Post] アップデート後に過去記事自動ツイートが停止
WordPress[Revive Old Post] アップデート後に過去記事自動ツイートが停止
WordPress[Twitter] ツイッターのツイートをブログに載せる方法
WordPress[Twitter] ツイッターのツイートをブログに載せる方法
WordPress[Revision Control] リビジョンを制御して無駄な容量を抑える
WordPress[Revision Control] リビジョンを制御して無駄な容量を抑える
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPressテーマ「Stinger3」にプラグインなしでGoogleアナリティクスを導入する方法
WordPressテーマ「Stinger3」にプラグインなしでGoogleアナリティクスを導入する方法
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法
WordPress[XML Sitemap Generator] 時刻設定を日本時間に修正する方法
WordPress[.htaccess] 管理画面へのアクセスを日本国内限定にする
WordPress[.htaccess] 管理画面へのアクセスを日本国内限定にする
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
驚くほど効果があった無料CDNサーバー「CloudFlare」の導入
WordPressテーマ「Stinger3」記事タイトルのフォントカスタマイズ
WordPressテーマ「Stinger3」記事タイトルのフォントカスタマイズ