WordPressでブラウザごとに条件分岐をつかって表示内容を切り替える

執筆・編集 板浪 雅樹2005年から WEB 業界一筋。500サイト超を手がける SEO・WordPress のエキスパート。「公開後こそ本番」を掲げ、データ分析とユーザー視点で成果を引き出す運用を提案。

2005年に制作会社へ入社後、プログラマーからキャリアをスタート。サーバー構築・データベース設計で培った技術を強みに、WordPress テーマ/プラグイン開発やサイト移行の難案件を多数担当してきました。
2010年以降は SEO エンジニアとしても活動領域を拡大。コンテンツ設計・内部リンク最適化・高速化チューニングにより、競合の激しいビッグキーワードで上位獲得を実現してきました。
現在は TREVO のウェブディレクターとして、要件定義から運用改善まで一気通貫でリード。AI ライティングや GA4/Looker Studio を活用したレポーティング手法を開発し、「数字で説明できるサイト運用」をポリシーにクライアントの ROI 最大化を支援しています。
趣味/強み:筋トレとランニングで日々の集中力をキープ。複雑な課題を“仕組み”で解決するのが得意。
モットー:「サイトは資産。改善を止めた瞬間から価値は目減りする」
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%の精度を保証できるわけではありませんが、特定ブラウザだけに特別なコンテンツを出したい場合などには便利なテクニックです。必要に応じて活用してみてください。
関連の記事
-
板浪雅樹
-
TREVOスタッフ
-
板浪雅樹
-
1,300年前の琵琶とルイビトンの柄
TREVOスタッフ
-
衣川知秀
-
TREVOスタッフ