Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@yumayamada1029

wordpressでスマホブラウザ別に表示を分岐する方法

wordpressでスマートフォンとPC、ブラウザ別に表示を分ける方法などはよく載っているのですが(例えばhttp://millkeyweb.com/if-mobile/)
スマホブラウザ別に条件を分岐する方法は調べてもなかなか出てこなかったのでメモ。

今回表示を分岐したのはSafariとLINEブラウザ、Facebookブラウザの3つです。
Safariでは通常のスマホサイトを表示し、LINEとFacebookからリンクを踏んだ際はSafariでの閲覧を促す別ページへ分岐させました。

まず、それぞれのブラウザのユーザーエージェントを調べます。
私はここのサイトを使用しました。http://www.openspc2.org/JavaScript/library/system/useragent/

以下それぞれのユーザーエージェント

Safari
Mozilla/5.0 (iPhone; CPU iPhone OS 9_2_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13D15 Safari/601.1

LINE
Mozilla/5.0 (iPhone; CPU iPhone OS 9_2_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13D15 Safari Line/5.10.0

Facebook
Mozilla/5.0 (iPhone; CPU iPhone OS 9_2_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Mobile/13D15 [FBAN/FBIOS;FBAV/47.0.0.43.396;FBBV/20481971;FBDV/iPhone8,1;FBMD/iPhone;FBSN/iPhone OS;FBSV/9.2.1;FBSS/2; FBCR/ソフトバンク;FBID/phone;FBLC/ja_JP;FBOP/5]

この中にある特定の文字列(LINEなら「Line」、Facebookなら「FB」)を含む場合は別のhtmlを表示するという条件文を書きます。

関数はwordpressの中にあるfunctions.phpに書き込んでいきます。

functions.php
function is_line() {
    $is_line = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Line');
    if ($is_line) {
        return true;
    } else {
        return false;
    }
}

function is_facebook() {
    $is_facebook = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'FB');
    if ($is_facebook) {
        return true;
    } else {
        return false;
    }
}

その後分岐を行うブラウザに(例えばpage.php)に以下のように書き込みます。

page.php
<?php if (is_line() and is_facebook()) : ?>
//LINEブラウザとFaebookブラウザで見たときの表示
<?php else: ?>
//それ以外での表示
<?php endif; ?>
8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
8
Help us understand the problem. What is going on with this article?