在开发 WordPress 主题时，有时您可能需要用户的浏览器和操作系统信息来使用CSS或jQuery修改设计的某些方面。WordPress 能够为您做到这一点。在本文中，我们将向您展示如何在WordPress 正文类中添加用户的浏览器和操作系统类。
默认情况下， WordPress会为您网站的不同部分生成 CSS 类。它还提供过滤器，以便主题和插件开发人员可以挂钩自己的类。您将使用body_class过滤器将浏览器和操作系统信息添加为 CSS 类。
您需要做的第一件事是在主题的functions.php文件中添加以下代码。
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’);
该脚本的第一部分检测用户的浏览器并将其添加到$classes. 第二部分检测用户的操作系统并将其添加到其中$classes。最后一行使用 WordPressbody_class过滤器添加类。
现在您需要将 body 类添加到主题文件中的
HTML 标记中。header.php用以下代码替换模板文件中的正文行： >请注意，如果您正在使用像下划线这样的入门主题或像 Genesis 这样编码良好的主题框架，那么您的主题将已经在 body 标记中具有 body 类功能。实现代码后，您将能够在 HTML 源代码中看到带有 body 标记的浏览器和操作系统类。您还会注意到，WordPress 还会将其他类添加到 body 标记中。
现在，您可以为不同的浏览器和操作系统设置类的样式，或者将它们用作 jQuery 中的选择器。我们希望本文能帮助您在 WordPress 中检测用户的浏览器和操作系统信息。
如果您刚刚开始 WordPress 主题开发，那么您可能还想看看我们为新主题设计师介绍的 Sass和WordPress Body Class 101 。如果您有任何反馈或问题，请在下方发表评论，让我们知道。
资料来源：贾斯汀·斯腾伯格