WordPressでブラウザごとに条件分岐をつかって表示内容を切り替える | 大阪 ホームページ制作 株式会社TREVOの技術ブログ

WordPressには、wp-includes/vars.php などで定義されているブラウザ判定用のグローバル変数（例：$is_chrome, $is_gecko）があります。
テーマやプラグインでこれらを使い、条件分岐することでブラウザ別の表示切り替えが可能です。

基本的な書き方

〇〇〇〇〇の所に指定したブラウザの変数を入れる。

<?php if ( ○○○○○ ) : ?>
  <!-- ○○○○○ で指定したブラウザの場合の表示内容 -->
<?php else: ?>
  <!-- その他のブラウザの場合の表示内容 -->
<?php endif; ?>

• ○○○○○ には、後述するブラウザ判定用の変数を入れます。
• true / false の判定で分岐するだけなので、非常にシンプルな構造です。

Chromeの場合のサンプルコード

たとえばChromeを判定する変数である $is_chrome を使う場合は、以下のようになります。

<?php if ($is_chrome) : ?>
  // ○○○○○のブラウザのみ表示
<?php else: ?>
  // その他のブラウザに表示
<?php endif; ?>

Chromeだけ特別なメッセージを出したり、スタイルを変えたりすることができます。
他のブラウザはすべて「その他のブラウザ」に該当するため、まとめて別の表示にすることも可能です。

各ブラウザの変数一覧

WordPress で使えるブラウザ判定変数の代表的な例を紹介します（バージョンや環境により存在しない場合もあるため注意してください）。

• Chrome … $is_chrome
• Firefox … $is_gecko
• Edge … $is_edge
• Safari … $is_safari
• Opera … $is_opera
• iPhone Safari … $is_iphone

補足

• 過去には $is_IE, $is_winIE, $is_macIE などがありましたが、Internet Explorer はすでにサポート終了となり、現在は Microsoft Edge に切り替わっています。
• $is_edge が利用可能かどうかは WordPress のバージョンやテーマ環境によって異なりますので、事前にご自身の環境で確認してください。

応用：複数ブラウザをまとめて条件分岐

複数のブラウザを同じ扱いにしたい場合は、OR 演算子などを使って判定することができます。

<?php
// Chrome か Safari いずれかの場合
if ( $is_chrome || $is_safari ) :
  // ChromeとSafariに表示
else :
  // それ以外のブラウザに表示
endif;
?>

また、ブラウザごとにさらに細かく条件を分けたい場合は、elseif を使って書き分けることも可能です。

<?php
if ( $is_chrome ) :
  // Chrome向けの表示
elseif ( $is_edge ) :
  // Edge向けの表示
elseif ( $is_safari ) :
  // Safari向けの表示
elseif ( $is_gecko ) :
  // Firefox向けの表示
else :
  // その他のブラウザ
endif;
?>

注意点と追加の対処方法

検出精度の問題

• $is_edge などが確実に利用できるかどうかは、WordPressのバージョンに依存します。
• また、ユーザーエージェント偽装などで正しく判定できない場合もあります。

CSS / JavaScriptでのブラウザ検出

• ブラウザ別のデザイン切り替えが主目的なら、CSSハックやJavaScriptを使った方法も一案です。
• 特にデザイン面の微調整が多いなら、サーバーサイドで切り替えるよりクライアントサイドで判定するほうが保守性が高い場合があります。
• サポートの終了しているブラウザ
• Internet Explorer（IE）系は既にサポート終了となり、今後はEdgeが主流となります。
• 依然としてIEの特定バージョンをサポートしなければいけないケースもあるかもしれませんが、その場合は $is_IE 系の変数やユーザーエージェントの直接判定を行うなど注意が必要です。

まとめ

• WordPressのブラウザ判定用変数（例：$is_chrome, $is_edge）を使うと、ブラウザごとの表示切り替えが簡単に実装できます。
• 古いブラウザ（IEなど）はすでにサポートが終了しているため、実際に必要なブラウザだけを対象に条件分岐を組むのがポイントです。
• デザインや挙動の微調整であれば、CSSやJavaScriptによるブラウザ判定の方が適していることもあります。
• $is_edge が利用可能かどうかは環境次第なので、事前にご自身のWordPressバージョンをチェックしましょう。

ブラウザ判定はユーザーエージェントに依存するため100％の精度を保証できるわけではありませんが、特定ブラウザだけに特別なコンテンツを出したい場合などには便利なテクニックです。必要に応じて活用してみてください。