Bei der Entwicklung von WordPress-Themes benötigen Sie manchmal die Browser- und Betriebssysteminformationen des Benutzers, um bestimmte Aspekte Ihres Designs mit CSS oder jQuery zu ändern. WordPress kann das für Sie tun. In diesem Artikel zeigen wir Ihnen, wie Sie die Browser- und Betriebssystemklassen des Benutzers in der WordPress-Body-Klasse 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 einhaken können. Sie werden die verwenden body_class
Filter, 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 hinzu $classes
. Der zweite Teil erkennt das Betriebssystem des Benutzers und fügt es hinzu $classes
sowie. Die letzte Zeile verwendet das WordPress body_class
filtern, um Klassen hinzuzufügen.
Jetzt müssen Sie die Body-Klasse zum hinzufügen <body>
HTML-Tag in deinem Theme header.php
Datei. Ersetzen Sie die Textzeile in Ihrer Vorlagendatei durch diesen Code:
<body <?php body_class(); ?>>
Beachten Sie, dass, wenn Sie mit einem Starter-Theme wie Unterstrichen oder gut codierten Themen-Frameworks wie Genesis arbeiten, Ihr Thema bereits die body-Klassenfunktion im body-Tag hat. Sobald der Code implementiert ist, können Sie Browser- und Betriebssystemklassen mit dem body-Tag in der HTML-Quelle sehen. Sie werden auch feststellen, dass dem Body-Tag von WordPress weitere Klassen hinzugefügt werden.
Jetzt können Sie die Klassen für verschiedene Browser und Betriebssysteme stylen oder 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.