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

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

Мы предлагаем вам 7 крутейших, а главное бесплатных плагинов WordPress, которые помогут вам это сделать всего за пару минут.

Смотрите также:

  • Удобно ли использовать WordPress-сайт с мобильных устройств?
  • Как адаптировать WordPress веб-сайт к мобильным устройствам
  • 8 бесплатных WordPress-плагинов для адаптации веб-сайта под мобильные устройства
  • Как тестировать WordPress на планшетах и смартфонах, которых у вас нет?

Плагины для создания мобильной версии веб-сайта на WordPress

Скорее всего, термин «адаптивный дизайн» не будет для вас новым, поскольку в течение лет так 2-х он находится у всех на слуху. Но если вы ещё не знаете, то его смысл заключается в «преображении» или «адаптации» веб-сайта для мобильных устройств. То есть пользователю с любого гаджета, будь то планшет или смартфон, будет так же удобно просматривать страницы веб-сайта, как и со стационарного ПК или ноутбука.

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

1. Hammy

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

Начнем с удобного плагина Hammy для изменения размеров картинок в соответствии с разрешением экрана мобильного устройства, на котором будет отображаться веб-сайт. Он заменяет тег <img> на <figure>, а также использует код картинки версии WordPress 3.5 для изменения размера картинки.

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

2. Responsive Widgets

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

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

Чтобы использовать плагин, вам необходимо базовое представление о виджетах WordPress. Откройте страницу виджетов и вы увидите много новых виджетов для следующих девайсов и типов экранов:

  • Mobile
  • Mobile(landscape)
  • iPhones and iPods
  • Phablets
  • Tablet(portrait)
  • Tablet(landscape)
  • iPad Portrait
  • iPad Landscape
  • Nexus Tablets
  • Kindle Tablets
  • Surface Tablet
  • Nook Tablets
  • PS Vitas
  • Desktops
  • Large Monitors(1240px+ screens)
  • Print only

У многих из данных виджетов есть чекбоксы, при помощи которых можно изменить выведение виджетов на конкретных устройствах. К примеру, если вы планируете отображать виджет только на планшетах, но не на iPad, то отметьте галочкой нужный чекбокс.

3. WP Lightbox 2

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

Очень популярный «lightbox» плагин для использования всплывающих в окошке картинок и галерей с эффектами наложения. Но имейте в виду, что этот плагин не решает задачу «адаптивности», а будет сам по себе адаптивным.

Чтобы использовать плагин, надо просто его активировать. В нем есть пару параметров, типа активации Lightbox в комментариях или изменение длительности анимации. Но в общем плагин работает сразу после активации и не требует дополнительной параметра.

4. Responsible

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

Чрезвычайно полезный WordPress плагин. С его помощью вы протестируете адаптивный дизайн в браузере, не отходя от кассы. В нем используется Viewport Resizer Bookmarklet для размещения фиксированной панели вверху страницы, где вы сможете без проблем настроить размер страницы для нужных адаптивных устройств(как например, смартфоны, планшеты, экраны стационарных ПК), а также устанавливать необходимые разрешения экрана.

Чтобы начать работу с плагином, достаточно его активировать и посетить одну из страниц веб-сайта. Панель появится на каждой из них, что дает функция протестировать адаптивный дизайн без каких-либо проблем.

Плагины для создания мобильных тем

Данные плагины работают по интересному принципу: они показывает разные темы WordPress, если посетитель заходит на веб-сайт с мобильного устройства. Такая функцию особенно полезна, если у вас на веб-сайте используется тема, неадаптированная под мобильные устройства. И если у вас нет ни времени, ни желания менять тему веб-сайта под мобильный гаджет, то следующие три плагина созданы специально для таких ленивых, как вы!:-)

5. WPTouch Mobile Plugin

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

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

Но будьте осторожны! Ещё в июле 2014 года стало известно об уязвимости версии плагина WPTouch 3. Она была тут же замечена и исправлена, но успела навредить многим веб-сайтам, которые использовали данный плагин. Так что следите за обновлениями плагина и заботьтесь о безопасности веб-сайта во всех его версиях.

6. WordPress Mobile Pack

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

Ещё один лидер тем для мобильной версии веб-сайтов на WordPress. Число скачиваний плагина перевалило за 600 тысяч, а рейтинг составляет 3.8 звезд из 5 возможных. Его крутость состоит в замене классического дизайна на интерфейс мобильного приложения.

Как и предыдущий плагин WPTouch, этот нуждается только в установке и активации. При желании можете покопаться в параметрах, но это необязательно. Плагин можно без проблем использовать сразу после его активации.

7. Jetpack

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

Этот плагин занимает лидирующие позиции по популярности среди подобных ему инструментов, это подтверждается поддержкой WordPress.com и Automattic. В нем есть полезная функцию «Mobile Theme». Чтобы использовать ее, необходимо зайти на страницу параметров(Jetpack → Settings) после установки и активации плагина. Действий минимум, а функций максимум. Вы убедитесь в этом сами, если выберите этот бесплатный плагин.

Единственный совет, который мы можем вам дать – это не использовать данный плагин с плагином Disqus, поскольку они не совместимы.

Заключение

В сфере веб-дизайна важно и необходимо следить за новинками, особенно, если они действительно могут быть вам полезны. В нашем случае, «адаптивность под мобильные устройства» становится стандартной функцией, которую надо использовать всем владельцам веб-сайтов и соответствовать, так сказать, требованиям эре мобильных гаджетов.

Если вы использовали какой-либо плагин из данной серии или у вас есть вариант, которого нет в нашем списке – не жадничайте, делитесь с иными посетителями.

Источник: code.tutsplus.com

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *