添加当前用户使用的浏览器信息到 Body 标签的 CSS 类中

文 / @WordPress主题

如何将当前用户使用的浏览器版本写入body的css类

在之前的文章中,我介绍了判断WordPress用户浏览器的全局变量和判断IE浏览器版本的方法。而现在,我将这个方法转化为了函数,以便在WordPress主题开发时更方便地使用,使得当前用户使用的浏览器信息可以直接写入body的css类中。

function wizhi_browser_body_class($classes){
    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)
        $classes[] = 'gecko';
    elseif($is_opera)
        $classes[] = 'opera';
    elseif($is_NS4)
        $classes[] = 'ns4';
    elseif($is_safari)
        $classes[] = 'safari';
    elseif($is_chrome)
        $classes[] = 'chrome';
    elseif($is_IE){
        $browser = $_SERVER['HTTP_USER_AGENT'];
        $browser = substr("$browser", 25, 8);
        if($browser == "MSIE7.0"){
            $classes[] = 'ie7';
            $classes[] = 'ie';
        }elseif($browser == "MSIE6.0"){
            $classes[] = 'ie6';
            $classes[] = 'ie';
        }elseif($browser == "MSIE8.0"){
            $classes[] = 'ie8';
            $classes[] = 'ie';
        }elseif($browser == "MSIE9.0"){
            $classes[] = 'ie9';
            $classes[] = 'ie';
        }else{
            $classes[] = 'ie';
        }
    }else
        $classes[] = 'unknown';

    if($is_iphone)
        $classes[] = 'iphone';

    return $classes;
}
add_filter('body_class', 'wizhi_browser_body_class');

只需要将以上代码加到当前主题的functions.php文件中,我们就能在body中看到当前浏览器的css类了。这样,我们就可以写出一些特殊的样式,解决一些兼容性问题,或是为某个浏览器单独编写样式。

.ie6.tips{display:inline}
.chrome.tips{color:#333;}

总的来说,这个功能能够帮助我们更好地实现WordPress主题开发,让我们更加专注于设计与细节,提高工作效率,也让用户获得更好的使用体验。

添加UTHEME为好友
扫码添加UTHEME微信为好友
· 分享WordPress相关技术文章,主题上新与优惠动态早知道。
· 微信端最大WordPress社群,限时免费入群。