Останні кілька років ознаменувалися настанням мобільного ери у веб-дизайні. У цій статті ми поговоримо про те, як нам, розробникам і дизайнерам, адаптуватися до цих змін, як змусити наші WordPress-сайти виглядати і працювати добре на будь-якому пристрої.

Мобільними відвідувачами узагальнено називають тих, хто переглядає наш сайт за допомогою смартфонів або планшетів. Їх частка в загальному потоці відвідувачів поступово зростає, тому нам треба адаптувати свої сайти для мобільних пристроїв і веб-браузерів.

Але як зробити це з найменшими витратами? За допомогою плагінів, які допомагають налаштувати наш сайт для використання в мобільних пристроях. Давайте розглянемо сім таких плагінів.

Плагіни, що сприяють підвищенню адаптивності сайтів

Напевно, ви вже багато чули і знаєте про адаптивне дизайні і про створення версій сайтів, адаптованих під мобільні пристрої. Основні вектори розробки тут наступні: змусити сайт вміститися на екрані меншого дозволу і пристосувати навігацію до сенсорного екрану.

Наступні чотири плагіна можуть допомогти вам в цьому.

Hammy

Цей плагін вміє динамічно змінювати розміри вбудовані у сторінку зображень для мобільних браузерів, використовуючи код, вже наявний в ядрі WordPress версії 3.5 і вище. Він також замінює тег Сім плагінів в допомогу мобільним користувачам на семантичний елемент .

Для роботи цього плагіна в стилях вашої сторінки або теми повинні бути задані відповідні медіа-запити. Також потрібно позначити картинки в розмітці особливим класом.

Responsive Widgets

Сім плагінів в допомогу мобільним користувачам

Responsive Widgets – це плагін, що дозволяє створювати спеціальні віджети, які містять довільний текст або розмітку. Ці віджети відображаються або ховаються в залежності від параметрів екрану мобільного пристрою.

Для використання цього плагіна ви повинні вміти працювати з віджетами WordPress. Встановивши плагін, зайдіть на сторінку «Widgets», і ви побачите нові віджети для наступних пристроїв і типів екранів:

  • Смартфон (портретний режим);
  • Смартфон (пейзажний режим);
  • iPhone або iPod;
  • Фаблет (планшетофон);
  • Планшет (портретний режим);
  • Планшет (пейзажний режим);
  • iPad (портретний режим);
  • iPad (пейзажний режим);
  • Планшет Nexus;
  • Планшет Kindle;
  • Планшет Surface;
  • Планшет Nook;
  • PS Vita;
  • Десктоп;
  • Великий монітор (1240 рядків і більше);
  • Принтер/

Багато з цих віджетів мають чекбокс, що дозволяє виключати конкретний пристрій при відображенні віджета. Наприклад, якщо ви хочете, щоб якась інформація показувалася користувачам всіх планшетів, крім iPad, все, що вам потрібно зробити – це зазначити відповідні чекбокси.

WP Lightbox 2

Сім плагінів в допомогу мобільним користувачам

WP Lightbox 2 – популярний плагін, який реалізує функцію модального спливаючого вікна з ефектами затінення, або так званого лайтбоксу. Цей плагін не зробить весь ваш сайт адаптивним, але сам по собі він повністю адаптивний.

Все, що вам потрібно зробити – встановити і активувати цей плагін в панелі управління WordPress. Плагін має різні просунуті опції. Наприклад, можна заборонити його застосування в користувальницької частині сайту, або налаштувати параметри анімації спливаючого вікна. При цьому основні функції плагіна працюють «з коробки».

Responsible

Сім плагінів в допомогу мобільним користувачам

Responsible може здорово стати в нагоді в процесі тестування адаптивності сайту. Цей плагін використовує букмарклет Viewport Resizer, щоб відобразити весь контент сайту всередині панелі змінюваного розміру, щоб розмір сторінки відповідав розміру екрану пристрою з меншим дозволом.

Щоб використовувати цей плагін, вам досить встановити і активувати його, а потім відкрити будь-яку сторінку свого сайту. Розмірні маніпулятори з’являться всередині браузера.

Плагіни-мобільні теми

Ця група плагінів працює більш специфічним чином: вони відображають ваш сайт на екранах мобільних пристроїв за допомогою окремої теми. Це особливо корисно, якщо ваша основна тема поки не адаптована для мобільних пристроїв. Просто виберіть другу тему як мобільного, а плагін зробить іншу роботу.

WPTouch Mobile

Сім плагінів в допомогу мобільним користувачам

Більше 5 мільйонів завантажень і рейтинг 3,9 з 5 характеризують цей плагін як не можна краще. З його допомогою ви можете створити мобільну версію свого сайту майже миттєво.

Цей плагін починає працювати відразу після активації, але якщо ви віддаєте перевагу мати під рукою як можна більше опцій і налаштувань, то будьте впевнені: цей плагін можна налаштувати зверху донизу.

Повинен сказати, що репутація цього плагіна була трохи зіпсована, коли в липні 2014 року у нього була виявлена критична уразливість. Розробники закрили вразливість майже миттєво, але інцидент безумовно додав роботи веб-майстрам. Втім, це ще одне свідчення на користь важливості регулярних оновлень для системи безпеки сайту.

WordPress Mobile Pack

Сім плагінів в допомогу мобільним користувачам

Цей плагін дуже популярний (більше 600 тисяч завантажень, оцінка 3,8 із 5) і схожий з принципом роботи на WPTouch Mobile.

Його унікальна тема додасть вашому сайту вид і характер мобільного додатку. Цей плагін також працює «з коробки», але багато аспектів його роботи можна налаштувати панелі управління WordPress.

Jetpack від WordPress.com

Сім плагінів в допомогу мобільним користувачам

Jetpack – надпопулярне комплексне рішення від WordPress.com і Automattic, і однією з функцій цього плагіна є мобільна тема, якої я і рекомендую вам скористатися.

Щоб включити мобільний тему, необхідно після установки плагина зайти в його налаштування («Jetpack» – «Settings«) і зазначити галочка навпроти пункту «Mobile Theme». Дизайн мобільного теми простий і зручний. Я виявив у неї лише один недолік: тема погано сумісна з офіційним плагіном Disqus.

Висновок

В Інтернеті важливо стежити за модою і давати користувачам вашого блогу чи сайту те, що вони хочуть. Особливо якщо ви хочете від них чогось взамін, будь то популярність або гроші.

Адаптивний дизайн і підтримка мобільних платформ стали новим стандартом, і було б нерозумно відкидати вагому частку користувачів з-за технічної відсталості вашого сайту.

Якщо ви знаєте інші плагіни, які допомагають адаптувати WordPress до мобільних віянням часу, повідомте нам про них у коментарях. А якщо ця стаття вам сподобалася поділіться їй з колегами.

Переклад статті «Seven Plugins to Help Your Mobile Users» був підготовлений дружною командою проекту Сайтостроение від А до Я.