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

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

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に追加することで、ブラウザ毎にスタイルを指定することが簡単にできますね。ブラウザによってスタイルを変更したい際は、ぜひ参考にしていただければと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

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