如何在 WordPress Body Class 中添加用户浏览器和操作系统类

---

开发 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 中。最后一行使用 WordPress body_class 过滤器来添加类。

现在您需要将 body 类添加到主题的 header.php 文件中的 <body> HTML 标记中。将模板文件中的正文行替换为以下代码：

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

请注意，如果您正在使用像下划线这样的入门主题或像 Genesis 这样编码良好的主题框架，那么您的主题将已经在 body 标记中具有 body 类函数。实现代码后，您将能够在 HTML 源代码中看到带有 body 标记的浏览器和操作系统类。您还会注意到 WordPress 还会将其他类添加到 body 标记中。

现在，您可以为不同的浏览器和操作系统设置类的样式，或者将它们用作 jQuery 中的选择器。我们希望本文能帮助您在 WordPress 中检测用户的浏览器和操作系统信息。

如果您刚刚开始 WordPress 主题开发，那么您可能还想看看我们为新主题设计师介绍的 Sass 和 WordPress Body Class 101。如果您有任何反馈或问题，请在下面发表评论，让我们知道。

资料来源：贾斯汀·斯滕伯格