Весной 2012 года вышла версия WordPress 3.4. В этой версии не только появились настройка темы и возможность автоматической вставки твитов, но и функция, с помощью которой разработчики могли проверить, подключается ли посетитель сайта с мобильного устройства, например, с планшета или смартфона.
Эта функция — wp_is_mobile()— появилась в то время, когда знаменитый «Retina Display», представленный Apple для своего iPhone 4, имел скудные 640 x 960 пикселей. Когда iPhone 5 появился через несколько месяцев после WordPress 3.4, дисплей телефона достигал 640 x 1136 пикселей — все еще далеко до дисплеев современных смартфонов и планшетов, которые стирают границы между мобильным и настольным экраном.
Так есть ли сегодня польза от wp_is_mobile()?
Назначение функции wp_is_mobile()
В 2012 году поддержка браузерами медиазапросов CSS, позволяющая создавать адаптивный веб-дизайн, была еще относительно новой (действительно новой для пользователей браузера Internet Explorer от Microsoft!). Но создание макетов страниц, адаптирующихся к различным размерам области просмотра, не было целью функции wp_is_mobile().
Функция не делает различий между телефонами и планшетами и совершенно не знает о доступных пикселях в браузере посетителя. Вместо этого wp_is_mobile() была задумана как инструмент, который позволил бы разработчикам оптимизировать пропускную способность при реагировании на мобильные устройства. Они часто были недостаточно мощными и, возможно, находились в руках пользователей, которые платили своим поставщикам телекоммуникационных услуг за передачу данных.
Поскольку сегодняшние телефоны и планшеты мощнее многих настольных компьютеров, доступных в 2012 году, регулирование пропускной способности может быть не столь важным, но все еще существуют варианты использования функции, которая просто делит мир на две части: мобильные устройства и все остальное.
Функция wp_is_mobile() в действии
Функция WordPress wp_is_mobile()возвращается true при выполнении запроса из браузеров большинства смартфонов и планшетов (включая Kindle). Итак, классический пример функции, генерирующей различные потоки контента в PHP, выглядит так:
Если действительно необходимо оптимизировать вывод веб-сайта для мобильных устройств (вероятно, для минимизации требований к полосе пропускания), описанную выше методику можно использовать в файлах тем для вывода совершенно разных структур для мобильных и настольных страниц.
Обнаружение устройств для точной корректировки контента
Медиа-запросы CSS и другие методы, поддерживающие адаптивный веб-дизайн, могут помочь макетам страниц адаптироваться к широкому спектру размеров и ориентаций экранов. Но они не могут помочь общаться с посетителями сайта как с мобильных устройств, так и с настольных компьютеров.
Например, вы знаете, что пользователи настольных компьютеров, вероятно, будут использовать мышь, чтобы «щелкать» по элементам сайта, в то время как пользователи мобильных устройств будут «нажимать». Пользователи настольных компьютеров могут «щелкать правой кнопкой мыши» по ссылке, чтобы открыть ссылку в новом окне браузера. В то же время пользователи мобильных устройств могут «нажать и удерживать», чтобы решить ту же задачу. Простое общение с пользователями о том, как перемещаться по вашему сайту (например, в справочной документации), может означать, что вы используете неправильную терминологию в половине случаев.
Ниже мы покажем, как можно объединить функцию wp_is_mobile() и шорткоды WordPress для поддержки детального вывода мобильного или десктопного контента в удобном для редакторов сайта виде.
Будем использовать определение мобильных/настольных компьютеров в сочетании с WordPress add_shortcode()и do_shortocde()функциями для создания инструментов шорткодов, которые редакторы могут применять в публикациях.
Сначала добавим этот код в файл темы functions.php (предварительно защитив его путем создания дочерней темы):
Это создает короткие коды [desktop] и [mobile] (и их закрывающие теги), которые мы можем использовать в любом посте или содержимом страницы, например:
<h2>Password Help</h2> To change your password, [desktop]click[/desktop][mobile]tap[/mobile] the cog icon.
На мобильном устройстве указанный выше контент будет выглядеть следующим образом:
Пользователи мобильных устройств увидят «tap» (нажать) в приведенном выше выводе.
На всех остальных устройствах посетители увидят это:
Пользователи «настольных компьютеров» увидят «click» (кликнуть) в приведенном выше выводе.
Этот метод позволяет довольно легко доставлять контент, который «знает» о том, как посетители взаимодействуют с вашим сайтом WordPress.
Функция wp_is_mobile() и кэширование WordPress
Не нужно использовать WordPress с 2012 года, чтобы знать, что кэширование страниц - один из самых эффективных способов повышения производительности. Но базовое кэширование WordPress может внести путаницу в попытки доставить различный контент при запросах на одну и ту же страницу.
Кэширование WordPress отдельной страницы инициируется клиентским запросом. Если этот первый запрос поступает с мобильного устройства, кэшированный контент будет адаптирован для мобильных пользователей, если он изменен wp_is_mobile(). И каждый последующий запрос к этой странице будет доставлять мобильное содержимое - даже пользователям настольных компьютеров - до тех пор, пока кэш не будет очищен.
Функция WordPress wp_is_mobile()может показаться пережитком прошлого, но вы можете найти применение ее определению «мобильное устройство или настольный компьютер», которая поможет создать лучший опыт для всех посетителей сайта.
Не забывайте, что тут понадобятся отдельные кэши для разного генерируемого вами контента, если нужно добиться максимальной производительности от этих мобильных и настольных каналов.
Источник: kinsta.com
Комментарии к записи: 0