Gebruikersbrowser en OS-klassen toevoegen in WordPress Body Class

Bij het ontwikkelen van WordPress-thema's heeft u soms gebruikersbrowser- en besturingssysteeminformatie nodig om bepaalde aspecten van uw ontwerp aan te passen met behulp van CSS of jQuery. WordPress kan dat voor u doen. In dit artikel laten we u zien hoe u browser- en besturingssysteemklassen van gebruikers kunt toevoegen in de lichaamsklasse van WordPress.

Standaard genereert WordPress CSS-klassen voor verschillende delen van uw website. Het biedt ook filters, zodat ontwikkelaars van thema's en plug-ins hun eigen klassen kunnen koppelen. Je zult de gebruiken body_class filter om browser- en besturingssysteeminformatie toe te voegen als CSS-klasse.

Het eerste wat u hoeft te doen is de volgende code toe te voegen aan het function.php bestand van uw thema.

 functie mv_browser_body_class ($ klassen) 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) $ klassen [] = 'gekko'; elseif ($ is_opera) $ classes [] = 'opera'; elseif ($ is_NS4) $ klassen [] = 'ns4'; elseif ($ is_safari) $ klassen [] = '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) $ klassen [] = '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';  retourneer $ klassen;  add_filter ('body_class', 'mv_browser_body_class'); 

Het eerste deel van dit script detecteert de browser van de gebruiker en voegt deze toe $ klassen. Het tweede deel detecteert het besturingssysteem van de gebruiker en voegt het toe aan $ klassen ook. De laatste regel gebruikt de WordPress body_class filter om klassen toe te voegen.

Nu moet je de body class toevoegen aan de HTML-tag in uw thema's header.php het dossier. Vervang de hoofdtekst in uw sjabloonbestand met deze code:

Merk op dat als u werkt met een startthema zoals underscores of goed gecodeerde themakaders zoals Genesis, uw thema dan al de bodyclass-functie in de body-tag zal hebben. Nadat de code is geïmplementeerd, ziet u de klassen van de browsers en besturingssystemen met de body-tag in de HTML-bron. Je zult ook merken dat er andere klassen door WordPress aan de body-tag zullen worden toegevoegd.

Nu kunt u de klassen opmaken voor verschillende browsers en het besturingssysteem of ze gebruiken als selectors in jQuery. We hopen dat dit artikel u heeft geholpen bij het detecteren van de browser- en besturingssysteeminformatie van gebruikers in WordPress.

Als je net begint met het ontwikkelen van WordPress-thema's, wil je misschien ook een kijkje nemen bij onze introductie van Sass en WordPress Body Class 101 voor nieuwe thema-ontwerpers. Laat het ons weten als je feedback of vragen hebt door hieronder een reactie achter te laten.

Bron: Justin Sternberg