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