При создании тем 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, для этого откройте исходный код и попробуйте найти там подобную строку. Имейте ввиду, что браузер и ОС это не единственные классы, которые будут показаны:
<boby class="home blog full-width chrome windows">
Теперь вы можете стилизовать контент под разные браузеры и операционные системы или использовать их как селекторы в jQuery коде. Надеюсь эта статья поможет вам в определении браузера и ОС.
Также хочу обратить ваше внимание, что в WordPress (как мы видим по коду) есть глобальные переменные, которые определяются в зависимости от того с какого браузера или устройства идет просмотр сайта: $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;. Эти переменные можно использовать и в других функция и целях.