Весною 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