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

Hinzufügen von Benutzer-Browser- und OS-Klassen in WordPress Body Class

Bei der Entwicklung von WordPress-Themes benötigen Sie manchmal Informationen über den Browser und das Betriebssystem des Benutzers, um bestimmte Aspekte Ihres Designs mit CSS oder jQuery zu ändern. WordPress ist in der Lage, dies für Sie zu tun. In diesem Artikel zeigen wir Ihnen, wie Sie die Browser- und Betriebssystemklassen des Benutzers in die WordPress-Body-Klasse einfügen können.

Detecting user platform and browser in WordPress

WordPress generiert standardmäßig CSS-Klassen für verschiedene Abschnitte Ihrer Website. Es bietet auch Filter, so dass Theme- und Plugin-Entwickler ihre eigenen Klassen einbinden können. Sie werden den body_class-Filter verwenden, um Browser- und Betriebssysteminformationen als CSS-Klasse hinzuzufügen.

Als Erstes müssen Sie den folgenden Code in die Datei functions.php Ihres Themes einfügen.

        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');

Der erste Teil dieses Skripts erkennt den Browser des Benutzers und fügt ihn zu $classes hinzu. Der zweite Teil erkennt das Betriebssystem des Benutzers und fügt es ebenfalls zu $classes hinzu. Die letzte Zeile verwendet den WordPress-Filter body_class, um Klassen hinzuzufügen.

Nun müssen Sie die body-Klasse zum HTML-Tag <body> in der Datei header.php Ihres Themas hinzufügen. Ersetzen Sie die body-Zeile in Ihrer Template-Datei durch diesen Code:

<body <?php body_class(); ?>>

Wenn Sie mit einem Einsteiger-Theme wie Underscores oder gut programmierten Theme-Frameworks wie Genesis arbeiten, verfügt Ihr Theme bereits über die Funktion body class im body-Tag. Sobald der Code implementiert ist, werden Sie in der Lage sein, Browser- und Betriebssystemklassen mit dem body-Tag im HTML-Quelltext zu sehen. Sie werden auch feststellen, dass WordPress dem body-Tag weitere Klassen hinzufügt.

Adding browser and OS information in WordPress body class

Jetzt können Sie die Klassen für verschiedene Browser und Betriebssysteme stylen oder sie als Selektoren in jQuery verwenden. Wir hoffen, dass dieser Artikel Ihnen geholfen hat, den Browser und das Betriebssystem des Benutzers in WordPress zu erkennen.

Wenn Sie gerade erst mit der Entwicklung von WordPress-Themes beginnen, sollten Sie auch einen Blick auf unsere Einführung in Sass und WordPress Body Class 101 für neue Theme-Designer werfen. Lassen Sie uns wissen, wenn Sie Feedback oder Fragen haben, indem Sie unten einen Kommentar hinterlassen.

Quelle: Justin Sternberg

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

10 KommentareEine Antwort hinterlassen

  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 :)

      Admin

  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.

      Admin

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.