WordPressのテーマを開発する際、CSSや jQueryを使ってデザインの一部を変更するために、ユーザーのブラウザーやOSの情報が必要になることがあります。WordPressでは、そのような場合でも対応することができます。この投稿では、WordPressのbodyクラスにユーザーのブラウザーとOSクラスを追加する方法を紹介します。
WordPressは初期設定で、サイトのさまざまなセクションのCSSクラスを生成します。また、テーマやプラグイン開発者が独自のクラスをフックできるように、フィルターも提供しています。ブラウザーとオペレーティングシステムの情報をCSSクラスとして追加するには、body_classフィルターを使用します。
最初にやるべきことは、テーマのfunctions.phpファイルに以下のコードを追加することです。
[cbk1］
このスクリプトの最初の部分は、ユーザーのブラウザーを検出し、それを$classesに追加します。2番目の部分はユーザーのオペレーティングシステムを検出し、同様に$classesに追加します。最後の行はWordPressのbody_classフィルターを使ってクラスを追加しています。
テーマのheader.phpファイルの<body>HTMLタグにbodyクラスを追加する必要があります。テンプレートファイルのbody行を以下のコードに置き換えてください：
[cbk2］
underscoresのようなスターターテーマやGenesisのようなよくコード化されたテーマフレームワークを使用している場合は、すでにbodyタグにbody class関数があります。コードが実装されると、HTMLソースのbodyタグにブラウザーやオペレーティングシステムのクラスが表示されるようになります。また、WordPressによってbodyタグに他のクラスが追加されていることにも気づくだろう。
これで、異なるブラウザーやオペレーティング・システム用にクラスを設定したり、jQueryのセレクタとして使用したりすることができます。この投稿がWordPressでユーザーのブラウザーやOSの情報を検出するのに役立てば幸いです。
WordPressテーマ開発を始めたばかりの方は、Sass入門や WordPressボディクラス入門もご覧ください。ご意見、ご質問がありましたら、以下にコメントをしてください。
Adam
What if the user is using Edge? The IE replacement browser.
WPBeginner Support
This is an older article but for Edge, it is: is_edge following the above formatting
管理者
Adam
Easy enough. Thanks!
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
More power!!!
WPBeginner Support
Hi Mel,
You can add
$is_edgeto the code to detect Microsoft Edge.管理者
Daniel Geiser
Is there a possibility to detect Edge?
Rehan
This is what i want exacly… thank you so much…
best ever
Bill Robbins
This is a wonderful way to tweak styling for individual browsers. The only major drawback is it can backfire when used with some caching plugins/systems. You’ll end up applying styles intended for one browser to all browsers because the body tag will be cached just like the rest of the content on the page.
WPBeginner Support
Bill, Good point. We are looking for an alternative solution and will update the article soon. Thanks for pointing this out.
管理者