如何在WordPress主體類中添加用戶瀏覽器和OS類


在開發WordPress主題時,有時您可能需要用戶的瀏覽器和操作系統信息,才能使用CSS或jQuery修改設計的某些方面。 WordPress可以為您做到這一點。 在本文中,我們將向您展示如何在WordPress主體類中添加用戶的瀏覽器和OS類。

在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類添加到 您主題的HTML標籤 header.php 文件。 用以下代碼替換模板文件中的正文行:

>

請注意,如果您使用的是下劃線這樣的入門主題或諸如Genesis之類的編碼良好的主題框架,則您的主題將在body標籤中已經具有body類功能。 實施代碼後,您將能夠在HTML源代碼中看到帶有body標籤的瀏覽器和操作系統類。 您還將注意到WordPress將向body標籤添加其他類。

在WordPress主體類中添加瀏覽器和操作系統信息

現在,您可以為不同的瀏覽器和操作系統設置類的樣式,或在jQuery中將它們用作選擇器。 我們希望本文能幫助您檢測WordPress中用戶的瀏覽器和操作系統信息。

如果您剛開始使用WordPress主題開發,那麼您可能還想看看我們為新主題設計人員介紹的Sass和WordPress Body Class 101。 如果您有任何反饋或問題,請在下面留下評論,讓我們知道。

資源: 賈斯汀·斯特恩伯格