10. Juli 2014

WordPress:
Browser und OS als CSS-Klassen im Body-Tag

Zum Glück benötigt man als Web-Entwickler Browser-Weichen mittlerweile nicht mehr so oft wie früher. Trotzdem kommt es immer noch vor, dass Darstellungsunterschiede angepasst werden müssen. Mit diesen beiden Funktionen in der functions.php lassen sich die wichtigsten Browser und Betriebssysteme als CSS-Klassen in den Body-Tag einbinden:

// Client-Eigenschaften bestimmen
function detect_client_properties()
{
	// Client: Browser
	if(!isset($_SESSION['CLIENT_BROWSER']))
	{
		if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 7')) $browser='ie_7';
		elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 8')) $browser='ie_8';
		elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 9')) $browser='ie_9';
		elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE 10')) $browser='ie_10';
		elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Trident') and strpos($_SERVER['HTTP_USER_AGENT'], 'rv:11')) $browser='ie_11';
		elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Chrome')) $browser='chrome';
		elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Safari')) $browser='safari';
		elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox')) $browser='firefox';
		else $browser=false;

		if($browser) $_SESSION['CLIENT_BROWSER']=$browser;
		else $_SESSION['CLIENT_BROWSER']=false;
	}		

	// Client: Betriebssystem
	if(!isset($_SESSION['CLIENT_OS']))
	{
		if(strpos($_SERVER['HTTP_USER_AGENT'], 'Macintosh')) $os='mac';
		elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'Windows')) $os='win';
		elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')) $os='ios';
		elseif(strpos($_SERVER['HTTP_USER_AGENT'], 'iPad')) $os='ios';
		else $os=false;

		if($os) $_SESSION['CLIENT_OS']=$os;
		else $_SESSION['CLIENT_OS']=false;
	}

	// Client: Mobile
	if(!isset($_SESSION['CLIENT_IS_MOBILE']))
	{
		if(wp_is_mobile()) $_SESSION['CLIENT_IS_MOBILE']=true;
		else $_SESSION['CLIENT_IS_MOBILE']=false;
	}
}
add_action('init', 'detect_client_properties', 0);

// Body-CSS-Klassen ergänzen
function additional_body_classes($classes)
{
	// Browser
	if($_SESSION['CLIENT_BROWSER']) $classes[]=$_SESSION['CLIENT_BROWSER'];

	// Betriebssystem
	if($_SESSION['CLIENT_OS']) $classes[]=$_SESSION['CLIENT_OS'];

	// Mobile
	if($_SESSION['CLIENT_IS_MOBILE']) $classes[]='mobile';

	return $classes;
}
add_filter('body_class', 'additional_body_classes', 99);

Auf ähnliche Weise lassen sich auch weitere CSS-Klassen im Body-Tag einfügen, zum Beispiel die aktuelle Sprache bei mehrsprachigen Websites oder aktuelle Kategorien, Templates, Parent-Seite usw.