在开发 WordPress主题的时候，我们都要考虑各种系统和浏览器的兼容性，比较常用的方法是根据不同的系统和浏览器来添加不同的css样式或js代码。具体说来，就是将检测到的用户（访客）的浏览器和系统信息添加到 WordPress 的 Body Class 中，作为当中的一个 类，然后我们就可以为这些不同的类添加不同的css样式，从而达到兼容效果。
首先，我们要了解一下 wordpress 的 body_class() filter钩子，比较规范的WordPress主题，一般都会在 <body> 标记中添加这个钩子，具体如下：
1 | <body <?php body_class(); ?>> |
<body <?php body_class(); ?>>
然后，当你访问某个页面的时候，WordPress自己会根据实际情况，添加css类，比如首页就显示：
1 | <body class="home blog"> |
<body class="home blog">
单篇文章页面就显示：
1 | <body class="single single-post postid-5186 single-format-standard"> |
<body class="single single-post postid-5186 single-format-standard">
这样一来，如果我们将检测到的用户的浏览器和系统信息也添加到这个 Body Class 中，就可以达到我们前面所说的效果了。实现起来也比较简单，将下面的代码添加到主题的 functions.php 即可：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /** * 为 WordPress 的 Body Class 添加用户浏览器和系统的类 * https://www.wpdaxue.com/add-user-browser-and-os-classes-to-wordpress-body-class.html */ function mv_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) { $classes[] = 'ie'; if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version)) $classes[] = 'ie'.$browser_version[1]; } else $classes[] = 'unknown'; if($is_iphone) $classes[] = 'iphone'; if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) { $classes[] = 'osx'; } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) { $classes[] = 'linux'; } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) { $classes[] = 'windows'; } return $classes; } add_filter('body_class','mv_browser_body_class'); |
/** * 为 WordPress 的 Body Class 添加用户浏览器和系统的类 * https://www.wpdaxue.com/add-user-browser-and-os-classes-to-wordpress-body-class.html */ function mv_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) { $classes[] = 'ie'; if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version)) $classes[] = 'ie'.$browser_version[1]; } else $classes[] = 'unknown'; if($is_iphone) $classes[] = 'iphone'; if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) { $classes[] = 'osx'; } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) { $classes[] = 'linux'; } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) { $classes[] = 'windows'; } return $classes; } add_filter('body_class','mv_browser_body_class');
这时候，假设你在 Windows 系统中使用 chrome 浏览器访问网站首页，那么 Body Class 中将输出为：
1 | <body class="home blog chrome windows"> |
<body class="home blog chrome windows">
好了，通过CSS来自定义 .chrome 和 .windows 这两个类吧！
参考资料：wpbeginner.com
到此这篇关于为 WordPress 的 Body Class 添加用户浏览器和系统的类就介绍到这了。我怀疑你的脑子是不是进过水，游过鱼，跳过蛤蟆，走过驴啊!更多相关为 WordPress 的 Body Class 添加用户浏览器和系统的类内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
