読者です 読者をやめる 読者になる 読者になる

ショウジンブログ

Learn as if you will live forever, Live as if you will die tomorrow.

スマートフォン向けに表示内容を出し分ける@WordPress

Sponsored Links

WordPressにはバージョンが3.4から用意されている「wp_is_mobile」っていう関数があって、これを使えば簡単、お手軽にPC向け、スマフォ(スマートデバイス)向けにコンテンツの出し分けが出来ます。

<?php if (wp_is_mobile()) :?>
/* スマートフォン向けの内容 */
<?php else: ?>
/* PC向けの内容 */
<?php endif; ?>

が、これだとタブレットデバイスのiPadもスマートフォン扱いになってしまうので、いやそうじゃなくてiPadは表示領域がそれなりに広いんだからPC向けのものを表示してもいいじゃない、っていうような場合。

実装したいテーマのfunctions.php(ない場合は用意します)に以下を記述。

/** PCとスマフォ向けの出し分け **/
function is_mobile(){
    $useragents = array(
        'iPhone',          // iPhone
        'iPod',            // 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
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

あとはテンプレート側で以下の記述をすればオーケー。

<?php if (is_mobile()) :?>
/* スマートフォン向けの内容 */
<?php else: ?>
/* PC向けの内容 */
<?php endif; ?>

レスポンシブで作られているWordPressのデフォルトテーマ「twentytwelve」とか使ってて、AdSenseなんかも設置している場合とか、これで簡単に広告内容を分けられてスマートに出来ますね。もちろん、その他にもいろいろたくさん使えて大変便利、ありがたいです。

以下の記事が大変わかりやすく参考になりました。 ありがとうございます。

Web サイトのスマートフォン最適化: UA 判別篇 · terkel.jp

www.nxworld.net

もっと あの世に聞いた、この世の仕組み

もっと あの世に聞いた、この世の仕組み