WordPressサイトでbodyにブラウザ名のクラスを追加する方法

WordPressのbodyに閲覧しているブラウザ名のクラスを追加する方法をご紹介いたします。

WordPressサイトでbodyにブラウザ名のクラスを追加する方法

functions.phpに以下のコードを追加することで、bodyにブラウザ名のクラスが追加されます。

function add_body_browser($classes) {
 global $is_lynx, $is_chrome, $is_safari, $is_opera, $is_IE, $is_NS4, $is_gecko, $is_iphone;
 if($is_lynx) $classes[] = 'lynx';
 elseif($is_chrome) $classes[] = 'chrome';
 elseif($is_safari) $classes[] = 'safari';
 elseif($is_opera) $classes[] = 'opera';
 elseif($is_IE) $classes[] = 'ie';
 elseif($is_NS4) $classes[] = 'ns4';
 elseif($is_gecko) $classes[] = 'gecko';
 else $classes[] = 'unknown';
 
 if($is_iphone) $classes[] = 'iphone';
 return $classes;
}
add_filter('body_class','add_body_browser');

例えば、Google Chromeでアクセスした場合は「chrome」、Safariの場合は「safari」といったクラスがbodyに追加されます。

あとがき

ブラウザ名のクラスをbodyに追加することで、ブラウザ毎にスタイルを指定することが簡単にできますね。ブラウザによってスタイルを変更したい際は、ぜひ参考にしていただければと思います。