/ Сайтостроение / Плагины / Отделяем планшет от телефона

Отделяем планшет от телефона

23.04.2017

805

Как известно функция wordpress wp_is_mobile() определяет мобильные устройства без разбора: телефон или планшет данная функция не распознает. Более точную идентификацию устройства можно делать с помощью плагина WP Mobile Detect. С такой технологией распознавания устройств в нашем арсенале разработчика добавляется мощный инструмент. Можно избирательно (более тонко) настраивать видимость различного контента или элементов сайта для различных устройств.

WP Mobile Detect

Данный плагин после установки не имеет никаких настроек, он по сути добавляет набор новых функций-проверок:

wpmd_is_notphone() — на всех устройствах, кроме телефонов
wpmd_is_nottab() — на всех устройствах, кроме планшетов
wpmd_is_notdevice() — только на компьютере
wpmd_is_phone() — только на телефоне
wpmd_is_tablet() — только на планшете
wpmd_is_device() — только на мобильных устройствах (телефон и планшет)

wpmd_is_ios() — только когда ОС iOS
wpmd_is_iphone() — только на iPhones
wpmd_is_ipad() — только на iPads
wpmd_is_android() — только на ОС Android
wpmd_is_windows_mobile() — только на ОС Windows Mobile
wpmd_is_blackberry() — только на Blackberry

wpmd_is_chrome_browser() — только для браузера Chrome
wpmd_is_safari_browser() — только для браузера Safari
wpmd_is_opera_browser() — только для браузера Opera
wpmd_is_ie_browser() — только для браузера Internet Explorer
wpmd_is_firefox_browser() — только для браузера Firefox

У данных функций есть аналоги в виде шорткодов, что позволяет делать проверки прямо в записи
[phone][/phone]
[tablet][/tablet]
[device][/device]
[notphone][/notphone]
[nottab][/nottab]
[notdevice][/notdevice]

[ios][/ios]
[iPhone][/iPhone]
[iPad][/iPad]
[android][/android]
[windowsmobile][/windowsmobile]
[blackberry][/blackberry]

[chrome][/chrome]
[safari][/safari]
[opera][/opera]
[firefox][/Firefox]
[ie][/ie]

При использовании данных проверок в плагинах (внутри плагина) происходит фатальная ошибка. Необходимо функции которые нужно проверить переносить в файл functions.php

Отдельная версия сайта для мобильного телефона

Можно создать абсолютно разные шаблоны для компьютерной версии и версии для мобильного телефона. Для этого в шаблоне Главной страницы создаем вот такое условие:

<?php if (wpmd_is_phone()) { 
  
get_template_part( 'mobile' ); 
  
} else {
 
get_template_part( 'desktop' );   
  
} ?>

Не принципиально где будут вызовы get_header(); и get_footer(); Хоть в самом шаблоне Главной страницы, хоть в выбранном шаблоне

При этом подключение разных стилей делаем по этому же условию

function header_enqueue_style() {
wp_enqueue_style( 'style', get_template_directory_uri() . '/style.css' , array( ), '1.0' , 'screen' );	
  
if (wpmd_is_phone()) { 
wp_enqueue_style( 'mobile', get_template_directory_uri() . '/mobile.css' , array( ), '1.0' , 'screen' ); 
} else { 
wp_enqueue_style( 'desktop', get_template_directory_uri() . '/desktop.css' , array( ), '1.0' , 'screen' );  
}
  
}
add_action( 'wp_print_styles', 'header_enqueue_style' );

Функции определения браузера WordPress

Функции определения браузера плагина WP Mobile Detect работают не всегда корректно. При этом у wordpress есть родная функция проверки браузера, которая работает более стабильно.

<?php global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
if(!$is_IE): ?>

Все браузеры, кроме Internet Explorer

<?php endif; ?>

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Мобильное меню типа mmenu

Мобильное меню типа mmenu

Адаптируем меню под мобильную версию сайта. При этом необходимо учитывать особенности небольших экранов и конфигурировать под них структуру и стили меню. Функционал mmenu.js Подключаем стили и скрипты: <link rel="stylesheet" href="http://opttour.ru/wp-content/themes/tester/jquery.mmenu.css" Читать далее »

/
Мобильная версия сайта

Мобильная версия сайта

По современным меркам, мобильная вевия сайта — это стандарт. Есть несколько способов создать адаптивность сайта для различных устройств и размеров экрана. Медиазапросы CSS @media (max-width: 1440px) { .with-right-sidebar {width: 21%;} Читать далее »

Меню для мобильной версии

Меню для мобильной версии

Делаем простую адаптацию меню под мобильную версию, превращая в иконку, при нажатии на которую меню раскрывается. Трансформируем меню в иконку Стандартный код вывода меню <nav id="topmenu" role="navigation"> <?php wp_nav_menu( array( Читать далее »

/

Добавить комментарий

Пока нет комментариев. Будь первым!

Отделяем планшет от телефона
Циклы wordpress (основа основ)
Рекомендации для васЦиклы wordpress (основа основ)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.