如何在 WordPress Body Class 中添加用戶瀏覽器和操作系統分類

更新日期：2014年3月11日作者：編輯團隊 | 審核者：Syed Balkhi

當開發 WordPress 主題時，有時候您可能需要用戶的瀏覽器和操作系統資訊，以便透過 CSS 或 jQuery 修改設計的某些內容。WordPress 能夠為您做到這一點。在本文中，我們將向您展示如何在 WordPress body class 中添加用戶的瀏覽器和操作系統分類。

WordPress 預設會為網站的不同部分生成 CSS 類別。它還提供過濾器，因此主題和插件開發者可以掛鉤他們自己的類別。您將使用 body_class 過濾器來添加瀏覽器和操作系統資訊作為 CSS 類別。

第一步：在 functions.php 文件中添加代碼

第一件事，您需要在主題的 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 過濾器來添加類別。

第二步：在 `header.php` 文件中添加 body class

現在，您需要在主題的 header.php 文件中的 HTML 標籤中添加 body class。將主題文件中的 body 行替換為以下代碼：

<body >

注意，如果您正在使用像 underscores 這樣的啟動主題或像 Genesis 這樣的已編碼良好的主題框架，那麼您的主題將已經在 body 標籤中包含 body class 函數。實施代碼後，您將能夠在 HTML 源碼中的 body 標籤中看到瀏覽器和操作系統類別。您還會注意到，WordPress 還會添加其他類別到 body 標籤。