首页 » 博文 » wpbeginner » 最佳主题 » 如何在 WordPress Body Class 中添加用户浏览器和操作系统类

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

开发 WordPress 主题时,有时您可能需要用户的浏览器和操作系统信息来使用CSSjQuery修改设计的某些方面。WordPress 能够为您做到这一点。在本文中,我们将向您展示如何在WordPress 主体类中添加用户的浏览器和操作系统类。

在 WordPress 中检测用户平台和浏览器

默认情况下,WordPress 会为网站的不同部分生成 CSS 类。它还提供过滤器,以便主题和插件开发人员可以挂钩自己的类。您将使用body_class过滤器将浏览器和操作系统信息添加为 CSS 类。

您需要做的第一件事是将以下代码添加到主题的functions.php文件中。

1234567891011121314151617 号18192021222324functionmv_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');

WPCode与 ❤️ 主办

在 WordPress 中一键使用

该脚本的第一部分检测用户的浏览器并将其添加到$classes. 第二部分检测用户的操作系统并将其添加到其中$classes。最后一行使用 WordPressbody_class过滤器添加类。

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

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

WPCode与 ❤️ 主办

在 WordPress 中一键使用

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

在 WordPress 主体类中添加浏览器和操作系统信息

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

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top