WordPressのBody Classに閲覧ブラウザを追加する

ユーザーエージェントを読み取ってブラウザを判別しbody_class()にadd_filterを使ってフックさせます。
閲覧ブラウザによってcssを変えたいときにCSSハックを使わなくても

.ie6 {
color: green;
}

などとすればIE6だけにCSSを適用するようにできます。
条件付きコメントもCSSハックも使いたくないときに使ってみてはどうでしょうか?

/**
 * Get browser_class
 */
function rye_browser_class(){
	$classes = "";
	$agent = getenv( "HTTP_USER_AGENT" );
	if(preg_match('/Trident/',$agent)){
		$classes .= "msie ";
		if(preg_match('/MSIE 6.0/',$agent)) $classes .= "ie6 lt7 lt8 lt9";
		if(preg_match('/MSIE 7.0/',$agent)) $classes .= "gt6 ie7 lt8 lt9";
		if(preg_match('/MSIE 8.0/',$agent)) $classes .= "gt6 gt7 ie8 lt9";
		if(preg_match('/MSIE 9.0/',$agent)) $classes .= "gt6 gt7 gt8 ie9";
		}
	else {
		$classes .= "noie ";
		if(preg_match('/Firefox/', $agent)){
			$classes .= "firefox";
		}
		elseif(preg_match('/Chrome/', $agent)){
			$classes .= "chrome";
		}
		elseif(preg_match('/Safari/', $agent)){
			$classes .= "safari";
		}
		elseif(preg_match('/Opera/', $agent)){
			$classes .= "opera";
		}
		elseif (preg_match('/iPhone/',$agent)) {
			$classes .= "iphone";
		}
		elseif (preg_match('/iPad/',$agent)) {
			$classes .= "ipad";
		}
		elseif (preg_match('/Android/',$agent)) {
			$classes .= "android";		
		else
		{
			//other
		}
	}
	return $classes;
}
/**
 * Add body browser class
 */
function rye_add_browser_class($classes){
	$classArr = explode(" ",rye_browser_class());
	$return = array_merge($classes,$classArr);
	return $return;
}
add_filter("body_class","rye_add_browser_class");
?>

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です