Wordpress: Как добавить браузер и ОС в атрибут class тега body

При создании тем WordPress, вам может понадобится определять какие-либо стили css или действия jQuery в зависимости от того, с какого браузера или операционной системы (ОС) зашел пользователь. WordPress может сделать это за вас. В этой статье будет показано, как добавить название браузера и ОС в WordPress body class.

По умолчанию WP создает разные классы для разных страниц вашего сайта. Также в системе имеется фильтр (хук), позволяющий темам и плагинам добавлять свои собственные классы к тегу boby. Для этого нужно использовать фильтр body_class, через который можно добавить свои классы.

Первое что нужно для этого сделать — добавить следующий код в файл темы 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. Вторая часть определяет ОС пользователя и также добавляет его в массив $slasses. Последняя строка — это использование фильтра body_class, к которому прикрепляется функция.

На этом по идее все. Еще один момент который вам нужно проверить, у тега body должна вызываться функция body_class(), выглядит это так:

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

Если вы работаете с готовым правильно-созданным шаблоном или со стартовой темой (фреймворком) вроде: Whiteboard, то вам не нужно беспокоиться о наличии функции в boby теге — она там уже есть.

После того, как код установлен вы должны увидеть браузер и ОС в атрибуте class тега body, для этого откройте исходный код и попробуйте найти там подобную строку. Имейте ввиду, что браузер и ОС это не единственные классы, которые будут показаны:

Теперь вы можете стилизовать контент под разные браузеры и операционные системы или использовать их как селекторы в jQuery коде. Надеюсь эта статья поможет вам в определении браузера и ОС.

Также хочу обратить ваше внимание, что в WordPress (как мы видим по коду) есть глобальные переменные, которые определяются в зависимости от того с какого браузера или устройства идет просмотр сайта: $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;. Эти переменные можно использовать и в других функция и целях.

GINW.ru

WordPress: Как добавить браузер и ОС в атрибут class тега body