WordPressテーマを開発する際、デザインの特定の側面をCSSまたはjQueryを使用して変更するために、ユーザーのブラウザとオペレーティングシステムの情報が必要になる場合があります。WordPressはそれを実行できます。この記事では、WordPressのbodyクラスにユーザーのブラウザとOSのクラスを追加する方法を紹介します。
デフォルトでは、WordPressはウェブサイトのさまざまなセクションにCSSクラスを生成します。また、テーマやプラグイン開発者が独自のクラスを追加できるようにフィルターも提供しています。ブラウザとオペレーティングシステム情報をCSSクラスとして追加するには、body_classフィルターを使用します。
まず、次のコードをテーマの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 classが含まれていることに注意してください。コードが実装されると、HTMLソースのbodyタグでブラウザとオペレーティングシステムのクラスを確認できるようになります。また、WordPressによってbodyタグに追加される他のクラスがあることにも気づくでしょう。
これで、さまざまなブラウザやオペレーティングシステム用のクラスをスタイル設定したり、jQueryのセレクターとして使用したりできます。この記事が、WordPressでユーザーのブラウザとオペレーティングシステム情報を検出するのに役立ったことを願っています。
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
十分簡単です。ありがとうございます！
Mel
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を追加できます。管理者
Daniel Geiser
Is there a possibility to detect Edge?
Rehan
まさに私が求めていたものです…本当にありがとうございます…
best ever
Bill Robbins
これは、個々のブラウザのスタイリングを調整する素晴らしい方法です。唯一の大きな欠点は、一部のキャッシュプラグイン/システムで使用すると逆効果になる可能性があることです。ページの残りのコンテンツと同様にbodyタグがキャッシュされるため、実際にはすべてのブラウザに適用されるはずのスタイルが1つのブラウザに適用されてしまうことになります。
WPBeginnerサポート
Bill、良い点です。代替ソリューションを探しており、記事を近日中に更新します。ご指摘ありがとうございます。
管理者