WEB制作、マーケティングに関する情報をお届けします。

ブラウザによって動かない処理、ブラウザによって特定の処理に時間がかかる場合などそのブラウザ用に処理を適用させる際に役立つ、『WordPressでブラウザごとに処理を分ける方法』について紹介します。

本記事ではGoogleが廃止を決めたUSER AGENTの代替であるUser-Agent Client Hintsも組み込んだ方法になっています。尚且つ、PHP8以降でエラーの出やすい『Warning: Undefined array key』への対応しております。

UserAgent(ユーザーエージェント)は、インターネット閲覧時の利用者のデバイス、OS、ブラウザなども文字情報のことです。例えばmacの場合は以下のようなものが文字列が吐き出されます。

コードを紹介

functions.phpにフックを追加する

// ブラウザを判別するための関数を定義
function is_chrome() {
    if( isset($_SERVER['HTTP_SEC_CH_UA']) ) {
        $ua = $_SERVER['HTTP_SEC_CH_UA'];
    }elseif( isset($_SERVER['HTTP_USER_AGENT']) ) {
        $ua = $_SERVER['HTTP_USER_AGENT'];
    }
    return strpos($ua, 'Chrome') !== false && strpos($ua, 'Edge') === false && strpos($ua, 'OPR') === false;
}
function is_safari() {
    if( isset($_SERVER['HTTP_SEC_CH_UA']) ) {
        $ua = $_SERVER['HTTP_SEC_CH_UA'];
    }elseif( isset($_SERVER['HTTP_USER_AGENT']) ) {
        $ua = $_SERVER['HTTP_USER_AGENT'];
    }
    return strpos($ua, 'Safari') !== false && strpos($ua, 'Chrome') === false;
}
function is_firefox() {
    if( isset($_SERVER['HTTP_SEC_CH_UA']) ) {
        $ua = $_SERVER['HTTP_SEC_CH_UA'];
    }elseif( isset($_SERVER['HTTP_USER_AGENT']) ) {
        $ua = $_SERVER['HTTP_USER_AGENT'];
    }
    return strpos($ua, 'Firefox') !== false;
}
function is_edge() {
    if( isset($_SERVER['HTTP_SEC_CH_UA']) ) {
        $ua = $_SERVER['HTTP_SEC_CH_UA'];
    }elseif( isset($_SERVER['HTTP_USER_AGENT']) ) {
        $ua = $_SERVER['HTTP_USER_AGENT'];
    }
    return strpos($ua, 'Edge') !== false || strpos($ua, 'Edg') !== false;
}
function is_ie() {
    if( isset($_SERVER['HTTP_SEC_CH_UA']) ) {
        $ua = $_SERVER['HTTP_SEC_CH_UA'];
    }elseif( isset($_SERVER['HTTP_USER_AGENT']) ) {
        $ua = $_SERVER['HTTP_USER_AGENT'];
    }
    return strpos($ua, 'MSIE') !== false || strpos($ua, 'Trident') !== false;
}

表示したいところに以下を記載する

<?php
if (is_chrome()) {
    echo 'This is Chrome';
    // Chrome用の処理をここに追加
} elseif (is_safari()) {
    echo 'This is Safari';
    // Safari用の処理をここに追加
} elseif (is_firefox()) {
    echo 'This is Firefox';
    // Firefox用の処理をここに追加
} elseif (is_edge()) {
    echo 'This is Edge';
    // Edge用の処理をここに追加
} elseif (is_ie()) {
    echo 'This is Internet Explorer';
    // Internet Explorer用の処理をここに追加
} else {
    echo 'This is an unknown browser';
    // その他のブラウザ用の処理をここに追加
}
?>

コードの解説

まずはUserAgentとClient HIntsについて少し解説します。
PHPでは『$_SERVER[‘HTTP_USER_AGENT’]』を使用するとUserAgentが取得できます。
UserAgentはブラウザの環境を取得できます。Chromeの場合は以下のようなものが取得できます。

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

二つの目のスラッシュ以降に『Chrome』という記述がありますが、これがブラウザの種類です。

次にClientHintsのブラウザ情報は『$_SERVER[‘HTTP_SEC_CH_UA’]』で取得できます。
以下のようなデータが返ってきます。

Sec-CH-UA: "Chromium";v="101", "Google Chrome";v="101", " Not;A Brand";v="99"

いずれにも共通するのはブラウザ名である『Chrome』が含まれるということです。
これを条件分岐に使用します。
それぞれのブラウザ用の処理をfunctions.phpに記載していきます。
今回はChromeのみ解説します。

function is_chrome() {
    if( isset($_SERVER['HTTP_SEC_CH_UA']) ) {
        $ua = $_SERVER['HTTP_SEC_CH_UA'];
    }elseif( isset($_SERVER['HTTP_USER_AGENT']) ) {
        $ua = $_SERVER['HTTP_USER_AGENT'];
    }
    return strpos($ua, 'Chrome') !== false && strpos($ua, 'Edge') === false && strpos($ua, 'OPR') === false;
}

まず『function is_chrome() {}』で関数を登録します。
『if( isset($_SERVER[‘HTTP_SEC_CH_UA’]) ) {}』でClient Hintsを取得しますが、safariなどでは2024年8月の段階ではClient Hintsを提供していないためエラーが出てしまいますので『isset()』でパラメーターがセットされているかを確認しています。Client Hintsが提供されていなければUserAgentを取得します。
それぞれの処理の中にはClientHintsを取得する『$ua = $_SERVER[‘HTTP_SEC_CH_UA’];』、ClientHintsを取得する『$ua = $_SERVER[‘HTTP_USER_AGENT’];』が設置してあります。

最後に『return strpos($ua, ‘Chrome’) !== false && strpos($ua, ‘Edge’) === false && strpos($ua, ‘OPR’) === false;』でtrue or falseを返します。
この時、注意が必要なのは判定の順番です。
Google ChromeのUserAgentの中にはSafariの文字列が含まれる場合があります。
そのため、Chromeを優先的に判定する必要があります。

この関数を呼び出したい箇所に以下を配置して関数を呼び出します。

if (is_chrome()) {
        echo 'This is Chrome';
        // Chrome用の処理をここに追加
    } else {
    echo 'This is an unknown browser';
    // その他のブラウザ用の処理をここに追加
}

まとめ

以上が解説でした。
ブラウザによっては得意不得意な処理があります。
特定のブラウザによって動きが悪い時などはその機能自体を除外する、もしくは他の処理に置き換えるなども必要になります。その際に活躍してくれるTipsだと思います。ぜひ参考にしてください。