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

2013/08/22 2017/03/11

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/
　
それくらい同じような問題を抱えているか方が多いということですね。
　
　
——————————-

<?php 
if (function_exists('wptouch_switch')) {
  wptouch_switch();
  remove_action( 'wp_footer', 'wptouch_switch' );
}
?>

<?php

if (function_exists('wptouch_switch')) {

wptouch_switch();

remove_action( 'wp_footer', 'wptouch_switch' );

}

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

エンジニアのためのWordPress開発入門 (Engineer's Library)

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

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

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

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

Message コメントをキャンセル

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

: WordPress初心者向け講座・詳細解説データベースとは何か？

データベースとは何か？を言葉の意味の説明なども含めエクセルと比較しながら説明しています。

: WordPressのカスタムフィールド、カスタム投稿、カスタムタクソノミーとは？

WordPressのカスタムフィールド、カスタム投稿、カスタムタクソノミーの基本的な内容を解説。お薦めのプラグインと編集方法も解説しサンプルソースなども紹介。

: Captchaを使って WordPressのコメントスパム対策をする

コメントスパム対策として入力させない対策の一つとしてCAPTCHAという方法がありそれを簡単に実装できるプラグインCaptchaの解説です。

: Comment Rating FieldでWordPressのコメントに口コミサイト機能を追加

口コミサイトを構築するためのプラグイン。評価点を投票する仕組みをコメント投稿機能に追加する方法で実現。口コミサイトを構築するには十分な機能を提供。

: WordPressのプラグイン WP-DBMANAGERを使って PHP、CakePHP、baserCMSなどで作った Webサービスのデータベースも自動バックアップ

WP-DBMANAGERを使って WordPress以外の PHP、CakePHP、baserCMSなどで作った Webサービスのデータベースも自動バックアップする方法を解説。

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

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

: WordPressで WPtouchを入れたら「このウェブページにはリダイレクトループが含まれています」と表示されてページが表示されなくなった

WPtouchを入れたら「このウェブページにはリダイレクトループが含まれています」のエラーでページが表示されない。その解決法の解説です。

: Custom Post Type UIでカスタムタクソノミーを設定し編集する方法解説

カスタムタクソノミーを追加、管理するプラグインCustom Post Type UIの使い方の解説。プラグインの解説ではあるものの、カスタムタクソノミーの仕様の解説でもある。

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

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

: Advanced Custom Fieldsのカスタムフィールドの登録上限が max_input_varsに影響する問題の対処方法

Advanced custom Fieldsには登録できるフィールド数に上限があります。php.iniのmax_input_varsによる制限ですが、フィールドグループを分割することで解決できます。