WordPressテーマを開発する際、デザインの特定の側面をCSSまたはjQueryを使用して変更するために、ユーザーのブラウザとオペレーティングシステムの情報を必要とすることがあります。WordPressはそれを実行する能力があります。この記事では、WordPressのbodyクラスにユーザーのブラウザとOSのクラスを追加する方法を説明します。
デフォルトでは、WordPressはCSSクラスを生成します。ウェブサイトのさまざまなセクションに対して。また、テーマやプラグイン開発者が独自のクラスをフックできるようにフィルターも提供しています。ここではbody_classフィルターを使用して、ブラウザとオペレーティングシステムの情報をCSSクラスとして追加します。
まず最初に行う必要があるのは、以下のコードをテーマのfunctions.phpファイルに追加することです。
function mv_browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = 'lynx';
elseif($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_NS4) $classes[] = 'ns4';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) {
$classes[] = 'ie';
if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version))
$classes[] = 'ie'.$browser_version[1];
} else $classes[] = 'unknown';
if($is_iphone) $classes[] = 'iphone';
if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) {
$classes[] = 'osx';
} elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) {
$classes[] = 'linux';
} elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) {
$classes[] = 'windows';
}
return $classes;
}
add_filter('body_class','mv_browser_body_class');
このスクリプトの最初の部分は、ユーザーのブラウザを検出し、それを$classesに追加します。2番目の部分は、ユーザーのオペレーティングシステムを検出し、それも$classesに追加します。最後の行は、WordPressのbody_classフィルターを使用してクラスを追加します。
次に、テーマのheader.phpファイル内の<body> HTMLタグにbodyクラスを追加する必要があります。テンプレートファイルのbody行をこのコードに置き換えてください。
<body <?php body_class(); ?>>
underscoresのようなスターターテーマや、Genesisのような適切にコーディングされたテーマフレームワークを使用している場合、テーマのbodyタグにはすでにbodyクラス関数が含まれていることに注意してください。コードが実装されると、HTMLソースのbodyタグでブラウザとオペレーティングシステムのクラスを確認できるようになります。また、WordPressによってbodyタグに追加される他のクラスがあることにも気づくでしょう。
これで、さまざまなブラウザやオペレーティングシステム用のクラスをスタイル設定したり、jQueryのセレクターとして使用したりできます。この記事が、WordPressでユーザーのブラウザとオペレーティングシステム情報を検出するのに役立ったことを願っています。
WordPressテーマ開発を始めたばかりの場合は、Sassの紹介や、新しいテーマデザイナー向けのWordPress Body Class 101も参照することをお勧めします。フィードバックや質問があれば、下のコメントでお知らせください。
出典: Justin Sternberg
mrcio
なぜかMacのSafariでgecko linuxと表示されます
WPBeginnerサポート
セキュリティアドオンやCDNを使用している場合、適切な情報ではなく、その情報がブラウザに送信されている可能性があります。
管理者
Adam
もしユーザーがEdgeを使っていたらどうなりますか？IEの後継ブラウザです。
WPBeginnerサポート
This is an older article but for Edge, it is: is_edge following the above formatting
管理者
Adam
十分簡単です。ありがとうございます！
メル
Hi.. I’ve been a fan of this website for almost 3 years.. by the way any update on this function for edge browser? thanks
より多くのパワーを！
WPBeginnerサポート
Melさん、こんにちは。
Microsoft Edgeを検出するために、コードに
$is_edgeを追加できます。管理者
ダニエル・ガイザー
Is there a possibility to detect Edge?
Rehan
まさに私が求めていたものです…本当にありがとうございます…
best ever
Bill Robbins
これは、個々のブラウザのスタイリングを調整する素晴らしい方法です。唯一の大きな欠点は、一部のキャッシュプラグイン/システムで使用すると逆効果になる可能性があることです。ページの残りのコンテンツと同様にbodyタグがキャッシュされるため、実際にはすべてのブラウザに適用されるはずのスタイルが1つのブラウザに適用されてしまうことになります。
WPBeginnerサポート
Bill、良い点です。代替ソリューションを探しており、記事を近日中に更新します。ご指摘ありがとうございます。
管理者