WPtouch

  • 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/