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 dazu in der Lage. In diesem Artikel zeigen wir Ihnen, wie Sie Browser- und Betriebssystemklassen des Benutzers zur WordPress Body Class hinzufügen.
Standardmäßig generiert WordPress CSS-Klassen für verschiedene Bereiche Ihrer Website. Es bietet auch Filter, damit Theme- und Plugin-Entwickler ihre eigenen Klassen hinzufügen können. Sie verwenden den body_class-Filter, um Browser- und Betriebssysteminformationen als CSS-Klasse hinzuzufügen.
Als Erstes müssen Sie den folgenden Code in die functions.php-Datei 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 body_class Filter, um Klassen hinzuzufügen.
Jetzt müssen Sie die Body-Klasse zum HTML-Tag <body> in der header.php-Datei Ihres Themes hinzufügen. Ersetzen Sie die Body-Zeile in Ihrer Vorlagendatei durch diesen Code:
<body <?php body_class(); ?>>
Beachten Sie, dass Ihr Theme bereits die body_class-Funktion im body-Tag hat, wenn Sie mit einem Starter-Theme wie underscores oder gut codierten Theme-Frameworks wie Genesis arbeiten. Sobald der Code implementiert ist, können Sie Browser- und Betriebssystemklassen mit dem body-Tag im HTML-Quellcode sehen. Sie werden auch feststellen, dass WordPress weitere Klassen zum body-Tag hinzufügt.
Jetzt können Sie die Klassen für verschiedene Browser und Betriebssysteme stylen oder sie als Selektoren in jQuery verwenden. Wir hoffen, dieser Artikel hat Ihnen geholfen, die Browser- und Betriebssysteminformationen des Benutzers in WordPress zu erkennen.
Wenn Sie gerade erst mit der Entwicklung von WordPress-Themes beginnen, sollten Sie sich auch unsere Einführung in Sass und WordPress Body Class 101 für neue Theme-Designer ansehen. Lassen Sie uns wissen, wenn Sie Feedback oder Fragen haben, indem Sie unten einen Kommentar hinterlassen.
Quelle: Justin Sternberg
mrcio
Aus irgendeinem Grund zeigt Safari auf einem Mac Gecko Linux an
WPBeginner Support
Wenn Sie ein Sicherheits-Addon oder ein CDN haben, sendet dieses möglicherweise diese Informationen an den Browser anstelle der richtigen Informationen.
Admin
Adam
Was ist, wenn der Benutzer Edge verwendet? Der IE-Ersatzbrowser.
WPBeginner Support
This is an older article but for Edge, it is: is_edge following the above formatting
Admin
Adam
Leicht genug. Danke!
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
Mehr Power!!!
WPBeginner Support
Hallo Mel,
Sie können
$is_edgezum Code hinzufügen, um Microsoft Edge zu erkennen.Admin
Daniel Geiser
Is there a possibility to detect Edge?
Rehan
Das ist genau das, was ich will... vielen Dank...
best ever
Bill Robbins
Dies ist eine wunderbare Möglichkeit, das Styling für einzelne Browser anzupassen. Der einzige große Nachteil ist, dass es bei Verwendung mit einigen Caching-Plugins/-Systemen nach hinten losgehen kann. Sie wenden Stile an, die für einen Browser bestimmt sind, auf alle Browser an, da das Body-Tag wie der Rest des Seiteninhalts zwischengespeichert wird.
WPBeginner Support
Bill, Guter Punkt. Wir suchen nach einer alternativen Lösung und werden den Artikel bald aktualisieren. Danke, dass Sie darauf hingewiesen haben.
Admin