7 плагінів WordPress для адаптації сайту під мобільні пристрої

Зробіть це нарешті! Створіть мобільну версію свого сайту на WordPress і позбавте кожного відвідувача з мобільного пристрою від незручності постійно збільшувати масштаб сторінок для читабельності тексту і виконувати N-ну кількість зайвих рухів.

Ми пропонуємо вам 7 найкрутіших, а головне безкоштовних плагінів WordPress, які допоможуть вам це зробити лише за кілька хвилин.

Дивіться також:

• Чи зручно використовувати ваш WordPress сайт з мобільних пристроїв?
• Як адаптувати WordPress сайт до мобільних пристроїв
• 8 безкоштовних WordPress-плагінів для адаптації сайту під мобільні пристрої
• Як тестувати WordPress на планшетах та смартфонах, яких у вас немає?

Плагіни для створення мобільної версії вашого сайту на WordPress

Швидше за все, термін «адаптивний дизайн» не є для вас новим, тому що вже протягом років так двох він знаходиться у всіх на слуху. Але якщо ви ще не знаєте, його зміст полягає в «перетворенні» або «адаптації» сайту для мобільних пристроїв. Тобто відвідувачеві з будь-якого гаджета, будь то планшет чи смартфон, так само зручно переглядатиме сторінки вашого сайту, як і зі стаціонарного ПК або ноутбука.

Нижче наведено чотири плагіни, які 100% допоможуть вирішити це завдання - зробити мобільну версію вашого сайту на WordPress.

1. неприродний

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

Для використання плагіна необхідно встановити деякі точки зупинки та вибрати елемент HTML контейнера. Таким чином, за допомогою вибраних вами брейкпоінтів, плагін змінює розмір зображення, коли ширина екрану досягає точки зупинки. Можна також встановити певні класи, щоб ігнорувати деякі зображення.

2. Responsive Widgets

Цей плагін пропонує нові текстові/HTML віджети WordPress, доступні лише на гаджетах типу iPad, Nook, PlayStation Vita та інших загальних пристроях – планшетах та смартфонах.

Щоб використовувати плагін, вам потрібне базове уявлення про віджети WordPress. Відкрийте сторінку віджетів і ви побачите багато нових віджетів для наступних девайсів та типів екранів:

• Mobile
• Mobile (landscape)
• iPhones and iPods
• Фабет
• Tablet (Portrait)
• Tablet (landscape)
• iPad Portrait
• iPad Landscape
• Nexus Tablets
• Kindle Tablets
• Поверхневий планшет
• Таблетки Nook
• PS Vitas
• Настільні комп'ютери
• Large Monitors (1240px+ screens)
• Лише друк

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

3. WP Lightbox 2

Дуже популярний «lightbox» плагін для використання зображень і галерей, що спливають у віконці, з ефектами накладання. Але майте на увазі, що цей плагін не вирішує завдання «адаптивності», а є сам по собі адаптивним.

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

4. Відповідальний

Надзвичайно корисний WordPress плагін. За його допомогою ви протестуєте адаптивний дизайн у своєму браузері, не відходячи від каси. У ньому використовується Viewport Resizer Bookmarklet для розміщення фіксованої панелі вгорі сторінки, де ви зможете змінити розмір сторінки для потрібних адаптивних пристроїв (наприклад, смартфони, планшети, екрани стаціонарних ПК), а також встановлювати необхідні дозволи екрану.

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

Плагіни для створення мобільних тем

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

5. WPTouch Mobile Plugin

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

Але будьте обережні! Ще в липні 2014 року стало відомо про вразливість версії плагіна WPTouch 3. Вона була відразу помічена і виправлена, але встигла нашкодити багатьом сайтам, які використовували цей плагін. Тому завжди слідкуйте за оновленнями плагіна і дбайте про безпеку вашого сайту у всіх його версіях.

6. Мобільний пакет WordPress

Ще один лідер тем для мобільної версії сайтів WordPress. Кількість завантажень плагіна перевалила за 600 тисяч, а рейтинг складає 3.8 зірок із 5 можливих. Його крутість полягає у заміні класичного дизайну на інтерфейс мобільного додатка.

Як і попередній плагін WPTouch, цей потребує лише встановлення та активації. За бажанням можете покопатися в налаштуваннях, але це необов'язково. Плагін можна використовувати відразу після його активації.

7. Jetpack

Цей плагін займає лідируючі позиції з популярності серед подібних до нього інструментів, це підтверджується підтримкою WordPress.com і Automattic. У ньому є дуже корисна функція Mobile Theme. Щоб використовувати її, потрібно зайти на сторінку налаштувань (Jetpack → Settings) після встановлення та активації плагіна. Дій мінімум, а можливостей максимум. Ви переконаєтеся в цьому самі, якщо оберіть цей безкоштовний плагін.

Єдина порада, яку ми можемо вам дати – це не використовувати цей плагін з плагіном Disqus, оскільки вони не дуже сумісні.

Висновок

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

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

Джерело: code.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/