ディーエムガジェット

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[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
OSXローカル環境にwordpressをインストールする方法
OSXローカル環境にwordpressをインストールする方法
WordPress Backup to Dropbox
バックアップ命「WordPress Backup to Dropbox」を導入
WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法
WordPressとGoogleChromeでリンクをスクリーンショットと共に綺麗に載せる方法
WordPressテーマ「Stinger3」に子テーマを導入する方法
WordPressテーマ「Stinger3」に子テーマを導入する方法
WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPress 蛍光ペン風テキスト装飾をCSSに設定
WordPress 投稿一覧にタイトル文字数と本文文字数を表示させる
WordPress 投稿一覧にタイトル文字数と本文文字数を表示させる
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ
WordPress[Limit Login Attempts] ログイン試行回数を制限してブルートフォースアタックを防ぐ