エス技研WordPress専科

WordPressの基本的な使い方から SEOの対応、プラグイン情報、カスタマイズ方法を解説します。


WordPressで WPtouchを入れてモバイルテーマを「OFF」にしたら元に戻れなくなった

      2015/12/27

WordPressの WPtouch Mobile Pluginを設置

 

WordPressの WPtouch Mobile Pluginによる不具合

 
WordPressでスマホ対応を行うため、WPtouch Mobile Pluginを設置しました。
そして、モバイルページには確認のために公開ページを表示したところ、ページの一番下には「モバイルテーマ」の「ON/OFF」を切り替えるボタンがありました。
 
ボタンがあれば押してみるのが心情だと思うのですが、私も何も考えずにその「OFF」のボタンを押してみたのです。
そうすると、モバイルページから PC用のページに切り替わり、そして....「モバイルテーマ」の切り替えスイッチが表示されなくなり、元に戻ることができなくなったのでありました。
 
テンプレートを非表示にしてみても、再度ナビゲーションを消してみても、フッターを消してみても表示されないのです。
 
最初は、Chromeの Developer Toolsで疑似的にスマホ環境を作っていましたので、ほかの環境ではどうなのか、とFireFoxの FireMobileSimulatorで表示させてみると最初はボタンは表示されるが、やはり一度「OFF」を押すと次から表示されなくなる。
実機でやってみても同じ。
そして、Mobilizerをインストールして....と徐々に表示できる環境が減っていくという恐怖...動作検証ができなくなると開発に支障が出てくる...
と思いさすがに根本的な解決策を探さないわけにはいかず、調べてみることにしました。
 
そうすると意外にあっさりと解決策が見つかりました。
下記サイトが参考になります。
 
http://9ensan.com/blog/wordpress/wptouch-pc-iphone-button/
 
それくらい同じような問題を抱えているか方が多いということですね。
 
 
——————————-

——————————-
 
この表記をフッターの下に編集すれば OKです。
 
テンプレートファイルで「get_footer();」を記述している下に編集する方法でも OKですが、この方法ではすべてのテンプレートに編集していく必要がありますので、私は「footer.php」の一番下、「</html>」タグの下に編集することで対応をしました。
 
上記サイトにも書かれていますが、「wp_footer」が存在しないと表示処理自体が実行されないので、ページの上部などに表示させるということは難しいようです。
 
 

スマホ環境を再現するシミュレーター

 
ちなみに、スマホの確認環境を構築するためのシミュレーター情報を載せておきます。
 

FireMobileSimulator

 http://firemobilesimulator.org/
 
もともとは、FireFox用のプラグインだったために Fire…という名称ですが、現在は Chrome版もあります。
非常に便利なのですが、機能を ONにすると、すべてのウインドウ、タブが共通して同様の設定した環境に代わってしまうため、これを使う場合には、確認は FireFoxを使うが、開発用のブラウザは chromeを使う、といった複数のブラウザを利用して開発を行うようなことになるでしょう。
 
 

Google Developer Tools

 http://www.submit.ne.jp/1199
 http://tech.nitoyon.com/ja/blog/2013/04/23/chrome-responsive-debug/
 
Google Chromeに標準搭載されているツールを使うという方法です。
Chromeを使っている場合は、特に新たにツールをインストールせずに使えるため、日頃開発に使っていないパソコンなどでも使える可能性が高いため、使い方を覚えておいて損はないでしょう。
また、FireMobileSimulatorと違い、タブごとに設定されますので、複数のタブごとに環境を切り替えて見比べる、といった使い方もできますので、こちらの方が重宝する場面もあるでしょう。
ただ、上記の 2つ目のサイトにもありますが、完全にエミュレートできるわけではないことには注意が必要でしょう。
 
 

Mobilizer

 http://www.springbox.com/mobilizer/
 
これは、ブラウザにプラグインを入れて使うタイプのものではなく、独立したアプリケーションのシミュレーターです。
インストールの方法も使い方も簡単ですが、インストールに際しては、「.air」拡張子の AIRのアプリケーションであるため、下記のサイトを参考にしながら AIRをインストールしてから使う必要があります。
 http://naruhiko1111.com/1635.html

 - WordPressのプラグイン

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

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

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload the CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

超簡単!Custom Field Templateでカスタムフィールドをフル活用

カスタムフィールドを簡単に設定するプラグイン。簡単にカスタムフィールドが管理で来て作業効率が数倍にアップします!

カスタムフィールド決定版!Advanced Custom Fields全項目完全解説・管理画面編

カスタムフィールドを設定する最高のプラグイン。設定できる項目を全て網羅して解説。投稿の項目だけではなく、カテゴリやユーザ情報の項目を増やすことにも使えます。

WordPressにBasic認証を設定するプラグインのまとめWP Basic Authなど

WordPressにBasic認証を設定する方法のまとめ。プラグインを使う方法と.htaccessで設定する方法を紹介。公開側、ログインページをそれぞれ設定できます。

シンタックスハイライトの5システム比較のまとめ・WordPressでも使える

シンタックスハイライト5種の比較検討のまとめ記事。WordPressで使う目的だがプラグインの比較検討ではないのでどのサイトでも導入可能。

Autoptimizeで簡単設定!HTML、JS、cssを圧縮しWordPress高速化!

Autoptimizeを使って簡単にHTML、JavaScript、CSSを圧縮しサイトの表示を高速化しよう!基本設定、拡張設定とあり柔軟な設定で多彩な環境に対応出来ます。

カテゴリ・タクソノミーのタームの順番を自由に並び替えるプラグイン・Category Order and Taxonomy Terms Order

標準機能では行えないカテゴリやタクソノミーの並び替えを行うプラグインCategory Order and Taxonomy Terms Orderの紹介です。

highlight.jsの設定方法を解説。 Syntax Highlighterから乗換え、高速化にも最適

Crayon Syntax Highlighterの代替案としてhighlight.jsを試してみた。highlight.jsは設置簡単で軽量なシンタックスハイライト。デザインもCSS変更だけの簡単変更。

WP Customer ReviewsでWordPressにオリジナルの口コミサイトを構築

口コミサイトを構築するためのプラグイン。独自フォームによるレビュー、評価点を投稿でき、入力項目の追加もできます。

Rich ReviewsでWordPressに口コミサイトを簡単に構築する方法

口コミサイトに必要なレビュー投稿機能を提供するプラグインです。独自のフォームをショートコードで編集する自由度が高い設計で、平均点の表示も用意されています。

Author hReviewでWordPressに構造化されたレビューサイトを構築

レビューサイトを構築するためのプラグイン。レビューの入力とレビュー対象のアイテムの情報を構造化データにするHTMLを編集する機能を提供します。