WordPressでiPadをPC表示する方法

この記事がお役にたちましたらシェアをお願いします

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
  • 2

url
WordPressでブログを始めるのに、Simplicityというテーマをカスタマイズして使うことにしました。
Simplicityはシンプルなデザインで、カスタマイズもしやすく、レスポンシブ対応という至れり尽くせりなテーマです。
ちなみに、レスポンシブ対応とは画面サイズによって表示デザインを変えることです。

WordPressでのモバイル判定は

今回、カスタマイズする課程で初めて知ったことに、WordPressではPC(パソコン)とモバイル(スマートフォン)を判別するのにwp_is_mobileという関数を使うということ。

<?php if ( wp_is_mobile() ) : ?>
  // モバイル用コンテンツ
<?php else: ?>
  // PC用コンテンツ
<?php endif; ?>

このようにif文を使って、モバイル用コンテンツPC用コンテンツを書き分けていきます。

iPadはモバイルなのか

しかし、wp_is_mobile関数ではiPadをモバイルとして認識するのです。

なんてこったい!!
異論もあるでしょうが、私の感覚ではiPadではPC用コンテンツを表示してほしいのです。
なぜだろう??と調べてみると、
WordPressの「wp-includes」フォルダの中の、vars.phpファイルの下の方に、以下のようなコードがあることが解りました。

function wp_is_mobile() {
    static $is_mobile;
 
    if ( isset($is_mobile) )
        return $is_mobile;
 
    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
        $is_mobile = false;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false ) {
            $is_mobile = true;
    } else {
        $is_mobile = false;
    }
 
    return $is_mobile;
}

このコードのこの部分を見て下さい。

    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
        $is_mobile = false;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)

strpos($_SERVER['HTTP_USER_AGENT'], ‘Mobile‘の部分。
ユーザーエージェントにMobileという文字列が入っていたら、モバイル用コンテンツを表示という命令文です。

ユーザーエージェントとは

ユーザーエージェントとは簡単に理解すると、各種端末が持っている識別子みたいなものらしいです。
以下のような文字列です。

[iPhone]

Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A334 Safari/7534.48.3

[iPad]

Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3

iPhoneとiPad両方のユーザーエージェントにMobileの文字列が入っています。
それでiPadでもモバイル表示になってしまっていたのです。

wp_is_mobile関数をカスタマイズ

原因が解れば、解決方法は簡単です。
iPhoneはモバイル表示、iPadはPC表示にするのですから、MobileiPhoneに変えてしまえばいいのです。
こんな感じです。

function wp_is_mobile() {
    static $is_mobile;
 
    if ( isset($is_mobile) )
        return $is_mobile;
 
    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
        $is_mobile = false;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone') !== false // many mobile devices (all iPhone)
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false ) {
            $is_mobile = true;
    } else {
        $is_mobile = false;
    }
 
    return $is_mobile;
}

少々力技ですが、これで解決。vars.phpをサーバーにコピーすれば終わりです。
気を付けなければならないのは、WordPressをバージョンアップすると、ファイルが上書きされて効果が消えてしまうことです。
バージョンアップしたら、もう1度、vars.phpを書き換えましょう。

この記事がお役にたちましたらシェアをお願いします

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

ブログをフォローする