Как добавить классы браузера и ОС в класс Body в WordPress

Опубликовано: ADv Дата 19.03.2014 в рубрике Своя тема Комментировать

При разработке тем WordPress иногда может понадобиться информация о браузере и операционной системе пользователя для модификации определенных элементов дизайна при использовании CSS или jQuery. WordPress в состоянии предоставить вам такую информацию. В этой статье мы покажем вам как добавить классы браузера и операционной системы пользователя в класс body в 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 < body> в файл header.php вашей темы. Замените строку body в файле шаблона на следующую:

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

Обратите внимание, что если вы используете тему типа underscores или фреймвор типа Genesis, то ваша тема уже содержит класс body в теге body. После того, как вы интегрируете этот код, вы сможете увидеть классы браузера и операционной системы в теге body в исходном коде HTML. Также вы заметите, что там появятся и другие классы, добавляемые WordPress.

Теперь вы можете стилизировать эти классы для различных браузеров и операционных систем или же использовать их в качестве селекторов в jQuery. Мы надеемся, что статья помогла вам определять пользовательские браузеры и операционные системы в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

Rating: 0.0/5 (0 votes cast)