При разработке тем WordPress иногда может понадобиться информация о браузере и операционной системе пользователя, чтобы изменить некоторые аспекты дизайна с помощью CSS или jQuery. WordPress способен сделать это за вас. В этой статье мы покажем вам, как добавить классы браузера и ОС пользователя в WordPress body class.
По умолчанию WordPress генерирует классы CSS для различных разделов вашего сайта. Он также предоставляет фильтры, чтобы разработчики тем и плагинов могли подключать свои собственные классы. Вы будете использовать фильтр body_class для добавления информации о браузере и операционной системе в качестве CSS-класса.
Первое, что вам нужно сделать, это добавить следующий код в функции вашей темы.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-тегу в заголовке вашей темы.php файл. Замените строку body в файле вашего шаблона этим кодом:
Обратите внимание, что если вы работаете со стартовой темой, такой как Undererscores, или с хорошо кодированными темами фреймворка, такими как Genesis, то ваша тема уже будет иметь функцию body class в теге body. После внедрения кода вы сможете увидеть классы браузеров и операционных систем с помощью тега body в источнике HTML. Вы также заметите, что в тег body WordPress добавлены другие классы.
Теперь вы можете стилизовать классы для различных браузеров и операционных систем или использовать их в качестве селекторов в jQuery. Надеемся, эта статья помогла вам обнаружить информацию о браузере и операционной системе пользователя в WordPress.
Если вы только начинаете разрабатывать темы WordPress, то, возможно, вам также захочется взглянуть на наше введение в Sass и WordPress Body Class 101 для новых разработчиков тем. Сообщите нам, если у вас есть отзывы или вопросы, оставив комментарий ниже.
Источник: www.wpbeginner.com