web-dev-qa-db-ja.com

モバイルデバイスを検出して特定のテーマを提示する方法

IPhone、Androidなどのハンドヘルドデバイスからサイトを訪問していることを検出した場合、訪問者に提示するために私のテーマの新しい修正バージョンを作成します（必要に応じてプロフィールを確認します）.

  1. モバイルデバイス/ブラウザからのリクエストかどうかを検出する方法
  2. 専用のテーマを読み込んで表示するにはどうすればよいですか。

詳細情報 ：私のテーマは流動的ではありません。それは約976pxの固定幅を持ちます（676pxのコンテンツ+残りは左側のサイドバーです）。私はテーマに革命を起こしたくはありませんが、私はそれが320x480と800x480の電話には大きすぎると感じます。おそらくサイドバーを外すか、少なくとも右に動かして他の小さな調整をします。

theme-developmentmobile
31
Drake

他のほとんどの場合と同様に、WPTouchを使用することを強くお勧めします。ただし、他のWebサイト形式よりもブログをサポートするために構築されているため、モバイルソリューションの万能薬ではないことがわかります（ポートフォリオはWordPressおよびブログで実行し、ポートフォリオは**** in WPTouch）。

そのため、モバイルブラウザの検出を複製するために使用する必要がある関連部分を見つけるために、コードを調べました。まず、Jan Fabryが述べたように、モバイルブラウザユーザーエージェントのリストです。 WPTouchには既定のリストが含まれていますが、設定またはwptouch_user_agentsというフィルターを使用してカスタムユーザーエージェントを追加することもできます。

function bnc_wptouch_get_user_agents() {
    $useragents = array(           
        "iPhone",                                // Apple iPhone
        "iPod",                                  // Apple iPod touch
        "Android",                               // 1.5+ Android
        "dream",                                 // Pre 1.5 Android
        "CUPCAKE",                               // 1.5+ Android
        "blackberry9500",                        // Storm
        "blackberry9530",                        // Storm
        "blackberry9520",                        // Storm v2
        "blackberry9550",                        // Storm v2
        "blackberry9800",                        // Torch
        "webOS",                                 // Palm Pre Experimental
        "incognito",                             // Other iPhone browser
        "webmate",                               // Other iPhone browser
        "s8000",                                 // Samsung Dolphin browser
        "bada"                                   // Samsung Dolphin browser
    );

    $settings = bnc_wptouch_get_settings();
    if ( isset( $settings['custom-user-agents'] ) ) {
        foreach( $settings['custom-user-agents'] as $agent ) {
            if ( !strlen( $agent ) ) continue;

            $useragents[] = $agent; 
        }       
    }

    asort( $useragents );

    // WPtouch User Agent Filter
    $useragents = apply_filters( 'wptouch_user_agents', $useragents );

    return $useragents;
}

ただし、プラグインの中核はクラスです：

class WPtouchPlugin {
    var $applemobile;
    var $desired_view;
    var $output_started;
    var $prowl_output;
    var $prowl_success;

    ...

プラグインのコンストラクター（function WPtouchPlugin()）は、最初にplugins_loadedフックにアクションを追加して、モバイルブラウザーのユーザーエージェントを検出し、$applemobileをtrueに設定します。具体的な機能は次のとおりです。

function detectAppleMobile($query = '') {
    $container = $_SERVER['HTTP_USER_AGENT'];

    $this->applemobile = false;
    $useragents = bnc_wptouch_get_user_agents();
    $devfile =  compat_get_plugin_dir( 'wptouch' ) . '/include/developer.mode';
    foreach ( $useragents as $useragent ) {
        if ( preg_match( "#$useragent#i", $container ) || file_exists( $devfile ) ) {
            $this->applemobile = true;
        }       
    }
}

これで、プラグインは、モバイルブラウザを使用していることを認識します（ブラウザのユーザーエージェントによる）。プラグインの次の肉の部分はフィルターのセットです：

if ( strpos( $_SERVER['REQUEST_URI'], '/wp-admin' ) === false ) {
    add_filter( 'stylesheet', array(&$this, 'get_stylesheet') );
    add_filter( 'theme_root', array(&$this, 'theme_root') );
    add_filter( 'theme_root_uri', array(&$this, 'theme_root_uri') );
    add_filter( 'template', array(&$this, 'get_template') );       
}

これらの各フィルターは、$applemobleがtrueに設定されているかどうかを確認するメソッドを呼び出します。そうである場合、WordPressは、テーマのデフォルトのものではなく、モバイルスタイルシート、モバイルテーマ、およびモバイル投稿/ページテンプレートを使用します。基本的に、使用しているブラウザに「モバイルブラウザ」のリストに一致するユーザーエージェントがあるかどうかに基づいて、WordPressのデフォルトの動作をオーバーライドします。

WPTouchにはモバイルテーマをオフにする機能も含まれています。iPhoneのWPTouchサイトにアクセスすると、下部にボタンがあり、通常どおりサイトを表示できます。独自のソリューションを構築する際に、これを検討することをお勧めします。

免責事項：上記のコードはすべてソースからコピーされました WPTouchバージョン1.9.19.4 であり、GPLで保護されています。コードを再利用する場合、システムはGPLの条件にも準拠する必要があります。このコードは作成しませんでした。

19
EAMann

非常にポピュラーなWPtouchプラグイン がこれをどのように行うかを見たいと思うかもしれません。 "iPhone、iPod touch、Android、Opera Mini、Palm Pre、Samsung touch、BlackBerry Storm/Torchモバイルデバイス" というテーマは異なります。 ソースコードにユーザーエージェントのリストがあります 、それがおそらく鍵です。

別のプラグイン、 WP-Wurfled は、広範な ワイヤレスユニバーサルリソースファイル データベースを使用します。モバイルデバイスのこの絶えず更新されているデータベースはまた多くの ケーパビリティ情報 を含んでいます、それであなたはそれがフラッシュをサポートするかどうか、デバイス側のサーバー側のスクリーン解像度を知っています...

template_redirectアクションフック は、実際のテンプレートファイルがインクルードされる直前のほとんどの時点でカスタムテーマをロードするためによく使用されます（template_includeは最後のフックですが、これはフィルタです）。

8
Jan Fabry

質問に答えないという危険を冒して、私はそうしないことをお勧めします。

私は何ヶ月もiOSデバイスを使ってきましたが、私がiPadを購入したときに最初にしたことの1つは、使用するデバイスに基づいて動作を変更したCSSレイアウトを考え出すことでした。 ）.

これを書いている時点では、私の開発者向けサイト（http://dev.semiologic.com/）で実行されています。 iOSデバイスでテストすると、レイアウトがiPadのサイドバー付きの列からiPhoneベースの単一の列付きの列に切り替わることに気付くでしょう。 （サイドバーは2列に配置され、下部のボックスは2列に配置されます。）ブラウザの幅を縮小することで、Safariを使用して効果を再現できます。

とにかく、プログラミングするのと同じぐらい楽しいのですが、少なくともiOSデバイスでは、モバイルに最適化されたレイアウトによって物事が悪化し、悪くなることは最終的には起こりませんでした。 Safariモバイルの内蔵ズームは、メインコラムの幅が480ピクセルである限り、あなたのサイトはすでにモバイル用途に最適化されています。幅720pxのレイアウトに幅240pxのサイドバーを追加すると、サイトのサイズに合わせて見栄えがよくなります。

  • 1024×768（iPadの風景）
  • 768x1024（iPadのポートレート）
  • 800×600（視力の弱いユーザー）
  • 480×320（iPhoneの風景）
  • 320x480（iPhoneのポートレート、オートズーム機能付き）

あなたがSafariモバイルの内蔵ズームを考慮に入れるならば、あなたがむしろ750pxとなる何かを持っていたいならば500px + 250pxはまた働きます。このサイトは、横長モードと縦長モードのどちらでも、見栄えがよく、iPhoneで完全に読みやすくなります。

いずれにせよ、あなたの質問に戻ると、テストはあなたがすべきではないことの一つは柔軟な幅のレイアウトを使うことであることを明らかにしました。 （ちなみに、WP-touchは私が間違えない限りそれをするでしょう。）そうすることは最適以下のズーミングをもたらします。 iPadでは、480px幅の列に制限されたものを拡大して、テキストサイズを大きくすることができます。画面の幅に合わせて調整すると、小さなテキストを読む必要があります。小さい場合は横スクロールして、快適に読むことができません。

7
Denis de Bernardy

シンプル： wp_is_mobile() を使ってテストしてください - それは all モバイル機器（スマートフォン、タブレットなど）のtrueをトリガーします。

更新

しないでください しないでください。信頼できません。

3
kaiser

あなたがそれをカスタマイズしたい、ワードプレスに統合するのが簡単であるなら、これは本当に素晴らしいスクリプトです。 http://detectmobilebrowsers.mobi/ /

注目すべき1つのことは、ネイティブブラウザをサポートしているほとんどのiphone、andriod、または携帯電話のユーザーが自動的にリダイレクトされることを望まないことです。

これは悪い習慣です。モバイル版へのリンクを介してそれらにオプションを与え、モバイル版では元のサイトに戻るためのオプションをそれらに与えます。

繰り返しますが、モバイル用に特別なものを構築しているか、ネイティブのブラウザをサポートしていない古い電話からトラフィックがある場合を除き、ユーザーに自動的にリダイレクトしないでください。

  • 追加することを望んだ、これがどれほど重要であるかを知るための1つの簡単な方法はあなたのサーバーログを通してです。
2
Wyck

別の方法を追加します。

たぶんあなたは非常に特定の必要性に従ってすべてのスタイルと行動を手作りして微調整したいです。

私は最近しなければなりませんでした：IE9の場合は1つ、iPhoneの場合は2つ目、iPadの場合は3つ目など...そしてChris Schuldの Browser.php クラスを使用して素晴らしい結果を得ました。

私が思いついた機能と使用例：

require_once('Browser.php');
$browser_check = new Browser();
$browser_agent = $browser_check->getBrowser();
$browser_version = $browser_check->getVersion();

function browser_check($what) {
    global $browser_agent, $browser_version;
    switch ($what) {
        case 'version':
            return $browser_version;
        break;
        case 'ie':
            if ($browser_agent==Browser::BROWSER_IE) return true;
            else return false;
        break;
        case 'mobile':
            if ($browser_agent==Browser::BROWSER_Android || $browser_agent==Browser::BROWSER_iPod || $browser_agent==Browser::BROWSER_IPHONE) return true;
            else return false;          
        break;
        case 'ipad':
            if ($browser_agent==Browser::BROWSER_IPAD) return true;
            else return false;          
        break;
        default:
            return false;
        break;
    }
}

echo "Browser Version: " . browser_check('version');

if ( browser_check('ie') ) echo "Using Internet Explorer - print proper CSS";

if ( browser_check('mobile') ) echo "Using iPhone, iPod or Android - print proper JAVASCRIPT";

if ( browser_check('ipad') ) echo "Using iPad - print proper PHP";
2
brasofilo