При разработке тем WordPress вам иногда может понадобиться информация из браузера и операционной системы пользователя, чтобы изменить некоторые аспекты их дизайна с помощью CSS или jQuery. WordPress может сделать это для вас. В этой статье мы покажем вам, как добавить пользовательский браузер и классы операционной системы в класс тела WordPress.
По умолчанию WordPress генерирует CSS-классы для разных разделов вашего сайта. Он также предоставляет фильтры для разработчиков тем и плагинов для подключения их собственных классов. Вы будете использовать фильтр body_class для добавления информации о браузере и операционной системе в виде класса CSS.
Первое, что вы должны сделать, это добавить следующий код в файл functions.php вашей темы.
Функция Mv_browser_body_class ($ classes) {
глобальный $ 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 () = ‘т.е.’;
if (preg_match (‘/ MSIE ((0-9) +) ((a-zA-Z0-9.) +) /’, $ _SERVER (‘HTTP_USER_AGENT’), $ browser_version))
$ classes () = ‘то есть’. $ 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’;
}
вернуть $ классы;
}
add_filter (‘body_class’, ‘mv_browser_body_class’);
Первая часть этого скрипта обнаруживает браузер пользователя и добавляет его в классы $. Вторая часть обнаруживает операционную систему пользователя, а также добавляет ее в классы $. Последняя строка использует фильтр WordPress body_class для добавления классов.
Теперь вам нужно добавить класс тела к
HTML-тег в файле header.php вашей темы. Замените строку тела в файле модели следующим кодом:>
Обратите внимание, что если вы работаете с начальной темой, такой как подчеркивание или хорошо закодированные рамки темы, такие как Genesis, ваша тема уже будет иметь функцию класса тела в теге body. После реализации кода вы увидите классы браузера и операционной системы с тегом body в исходном коде HTML. Вы также заметите, что WordPress добавит другие классы в тег body.
Теперь вы можете создавать классы для разных браузеров и операционных систем или использовать их как селекторы в jQuery. Мы надеемся, что эта статья помогла вам обнаружить браузер и информацию о браузере. Операционная система пользователя WordPress.
Если вы только начинаете разработку темы WordPress, вы также можете ознакомиться с нашим введением в Sass и WordPress Body Class 101 для новых дизайнеров тем. Дайте мне знать, если у вас есть какие-либо комментарии или вопросы, оставив комментарий ниже.
Источник: Джастин Штернберг
