Hinzufügen von Benutzerbrowsern und Betriebssystemklassen in WordPress Body Class

Bei der Entwicklung von WordPress-Themes benötigen Sie manchmal Informationen zum Browser und zum Betriebssystem 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 OS-Klassen des Benutzers in die WordPress-Body-Klasse einfügen.

Standardmäßig generiert WordPress CSS-Klassen für verschiedene Bereiche Ihrer Website. Es bietet auch Filter, damit Entwickler von Designs und Plugins ihre eigenen Klassen einbinden können. Sie werden das 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.

 Funktion 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 [] = 'dh'; if (preg_match ('/ MSIE ([0-9] +) ([a-zA-Z0-9.] +) /', $ _SERVER ['HTTP_USER_AGENT'], $ browser_version)) $ classes [] = 'dh '. $ browser_version [1];  else $ classes [] = 'unbekannt'; 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';  $ -Klassen zurückgeben;  add_filter ('body_class', 'mv_browser_body_class'); 

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

Jetzt müssen Sie die Body-Klasse zum hinzufügen HTML-Tag in Ihrem Theme header.php Datei. Ersetzen Sie die Textzeile in Ihrer Vorlagendatei durch folgenden Code:

Wenn Sie mit einem Starter-Theme wie Unterstrichen oder gut codierten Theme-Frameworks wie Genesis arbeiten, hat Ihr Theme bereits die Body-Class-Funktion im Body-Tag. Sobald der Code implementiert ist, können Sie Browser- und Betriebssystemklassen mit dem body-Tag in der HTML-Quelle anzeigen. Sie werden auch bemerken, dass durch WordPress weitere Klassen zum body-Tag hinzugefügt werden.

Jetzt können Sie die Klassen für verschiedene Browser und Betriebssysteme formatieren oder als Selektoren in jQuery verwenden. Wir hoffen, dass dieser Artikel Ihnen geholfen hat, die Browser- und Betriebssysteminformationen von Benutzern in WordPress zu ermitteln.

Wenn Sie gerade erst mit der WordPress-Theme-Entwicklung beginnen, möchten Sie vielleicht auch unsere Einführung in Sass und WordPress Body Class 101 für neue Designdesigner betrachten. Teilen Sie uns mit, ob Sie Feedback oder Fragen haben, indem Sie unten einen Kommentar hinterlassen.

Quelle: Justin Sternberg