WPtouchを導入したWordPressサイトをiPhone用cssに固定する方法

投稿者: | 2009年1月13日

WPtouchはiPhoneやiPodからのアクセスの場合WordpressをiPhone向けのCSSにするプラグインだが、PC上でiPhoneで見た時のレイアウトのプレビューを確認したい時や、PCからのアクセスを含めてiPhone用ページの表示に統一したい時がある。

確認だけならブラウザの自称名の変更によって済ませられるが、外部からパソコンでアクセスされた場合にもiPhone用デザインにしたい場合は、サンプルに従い以下のファイルを変更する。

変更するのは、導入時プラグインフォルダに入れたwptouch.php

95行目あたり
function detectAppleMobile($query = ”) {
    $container = $_SERVER[‘HTTP_USER_AGENT’];
    //print_r($container); //this prints out the user agent array. uncomment to see it shown on page.
    // Add whatever user agents you want here if you want to make this show on a Blackberry or something. No guarantees it’ll look pretty, though!
    $useragents = array(“iphone”, “ipod”, “aspen”, “dream”);
        $this->applemobile = false;
            foreach ($useragents as $useragent) {
            if (eregi($useragent, $container)) {
        $this->applemobile = true;
        }
    }
}

↑この部分で $_SERVER[‘HTTP_USER_AGENT’] を取得し、iphone、ipod、aspen、dreamからのアクセスの場合にapplemobile を true にしている。

変更は以下のようにする。

function detectAppleMobile($query = ”) {
    $container = $_SERVER[‘HTTP_USER_AGENT’];
    //print_r($container); //this prints out the user agent array. uncomment to see it shown on page.
    // Add whatever user agents you want here if you want to make this show on a Blackberry or something. No guarantees it’ll look pretty, though!
    $useragents = array(“iphone”, “ipod”, “aspen”, “dream”);
        $this->applemobile = false;
            foreach ($useragents as $useragent) {
            if (eregi($useragent, $container)) {
        $this->applemobile = true;
        }
    }
    $this->applemobile = true;
}

敢えて元のスクリプトは生かしたままにしてあるが、$this->applemobile = true;
となるようにしてあれば、余分な部分は削除しても構わない。

あとはプラグインフォルダに置いたwptouch.phpをwptouch_old.phpにでもリネームしてwptouch.phpをアップすればいい。

これで、iPhone、iPodはもちろん、PCからのアクセスでもiPhone版のレイアウトで表示されるようになる。
もどしたければ、wptouch.phpを削除し、wptouch_old.phpをwptouch.phpに戻す。

サンプルページ
http://iphone.03style.com/