性价比最高的香港ASP、PHP主机提供商
做网站,就上凡科建站

为 WordPress 的 Body Class 添加用户浏览器和系统的类

Loading
0
Comodo SLL证书促销 - 免费ssl证书申请_ssl证书购买_ev ssl证书_https证书购买 - GDCA_数安时代

在开发 WordPress主题的时候,我们都要考虑各种系统和浏览器的兼容性,比较常用的方法是根据不同的系统和浏览器来添加不同的css样式或js代码。具体说来,就是将检测到的用户(访客)的浏览器和系统信息添加到 WordPress 的 Body Class 中,作为当中的一个 类,然后我们就可以为这些不同的类添加不同的css样式,从而达到兼容效果。

首先,我们要了解一下 wordpress 的 body_class() filter钩子,比较规范的WordPress主题,一般都会在 <body> 标记中添加这个钩子,具体如下:

1
<body <?php body_class(); ?>>

然后,当你访问某个页面的时候,WordPress自己会根据实际情况,添加css类,比如首页就显示:

1
<body class="home blog">

单篇文章页面就显示:

1
<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');

这时候,假设你在 Windows 系统中使用 chrome 浏览器访问网站首页,那么 Body Class 中将输出为:

1
<body class="home blog chrome windows">

好了,通过CSS来自定义 .chrome 和 .windows 这两个类吧!

参考资料:wpbeginner.com

支付宝扫码打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

MetInfo | 最适合企业网站建设的cms系统

关于 倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

精彩推荐

掌握 WP_User_Query

掌握 WP_User_Query

WordPress Settings API 指南:菜单相关知识

WordPress Settings API 指南:菜单相关知识

发表评论