Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressのBodyクラスにユーザーブラウザーとOSクラスを追加する方法

WordPressのテーマを開発する際、CSSや jQueryを使ってデザインの一部を変更するために、ユーザーのブラウザーやOSの情報が必要になることがあります。WordPressでは、そのような場合でも対応することができます。この投稿では、WordPressのbodyクラスにユーザーのブラウザーとOSクラスを追加する方法を紹介します。

Detecting user platform and browser in WordPress

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タグに他のクラスが追加されていることにも気づくだろう。

Adding browser and OS information in WordPress body class

これで、異なるブラウザーやオペレーティング・システム用にクラスを設定したり、jQueryのセレクタとして使用したりすることができます。この投稿がWordPressでユーザーのブラウザーやOSの情報を検出するのに役立てば幸いです。

WordPressテーマ開発を始めたばかりの方は、Sass入門や WordPressボディクラス入門もご覧ください。ご意見、ご質問がありましたら、以下にコメントをしてください。

ソースJustin Sternberg

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

10件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. 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!

  3. 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!!!

  4. Daniel Geiser

    Is there a possibility to detect Edge? ;)

  5. Rehan

    This is what i want exacly… thank you so much…

    best ever :)

  6. 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.

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。