So erstellen Sie eine Website oder ein Blog im Jahr 2020 - Kostenlose und einfache Anleitung zum Erstellen einer Website

Hinzuf├╝gen von Benutzerbrowser- und Betriebssystemklassen in WordPress Body Class

Bei der Entwicklung von WordPress-Designs ben├Âtigen Sie manchmal Informationen aus dem Browser und dem Betriebssystem des Benutzers, um bestimmte Aspekte Ihres Designs mithilfe von CSS oder jQuery zu ├Ąndern. WordPress kann das f├╝r Sie tun. In diesem Artikel zeigen wir Ihnen, wie Sie Benutzer-Browser- und Betriebssystemklassen in die WordPress-Body-Klasse einf├╝gen.

Erkennung von Benutzerplattform und Browser in WordPress

Standardm├Ą├čig generiert WordPress CSS-Klassen f├╝r verschiedene Bereiche Ihrer Website. Es bietet auch Filter, damit Theme- und Plugin-Entwickler ihre eigenen Klassen verbinden k├Ânnen. Mit dem Filter body_class k├Ânnen Sie Browser- und Betriebssysteminformationen als CSS-Klasse hinzuf├╝gen.

Als erstes f├╝gen Sie den folgenden Code in die Datei functions.php Ihres Themas ein.

        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 $ classes hinzu. Der zweite Teil erkennt das Betriebssystem des Benutzers und f├╝gt es $ Klassen hinzu. In der letzten Zeile wird der WordPress-Filter body_class verwendet, um Klassen hinzuzuf├╝gen.

Jetzt m├╝ssen Sie die K├Ârperklasse zum hinzuf├╝gen

HTML-Tag in der Datei header.php Ihres Themas. Ersetzen Sie die Textzeile in Ihrer Vorlagendatei durch diesen Code:

>

Beachten Sie, dass wenn Sie mit einem Starter-Thema wie Unterstrichen oder gut codierten Themenrahmen wie Genesis arbeiten, Ihr Thema bereits die Body-Class-Funktion im Body-Tag hat. Sobald der Code implementiert ist, k├Ânnen Sie die Browser- und Betriebssystemklassen mit dem Body-Tag in der HTML-Quelle anzeigen. Sie werden auch feststellen, dass WordPress dem Body-Tag weitere Klassen hinzuf├╝gt.

F├╝gen Sie Browser- und Betriebssysteminformationen zur WordPress-Body-Klasse hinzu

Jetzt k├Ânnen Sie die Klassen f├╝r verschiedene Browser und Betriebssysteme entwerfen oder sie als Selektoren in jQuery verwenden. Wir hoffen, dieser Artikel hat Ihnen geholfen, Informationen aus dem Browser und dem Betriebssystem des Benutzers in WordPress zu erkennen.

Wenn Sie gerade erst mit der Entwicklung von WordPress-Designs beginnen, k├Ânnen Sie auch unsere Einf├╝hrung in Sass und WordPress Body Class 101 f├╝r neue Designdesigner lesen. Bitte lassen Sie uns wissen, wenn Sie Kommentare oder Fragen haben, indem Sie unten einen Kommentar hinterlassen.

Quelle: Justin Sternberg