Как создать мобильную версию сайта на WordPress с помощью плагина. Мобильная версия wordpress сайта
Мобильная версия сайта wordpress - как сделать
Аль Капоне, Миша Япончик или ребята из Острых Козырьков примерно 100 лет назад вряд ли задавались вопросом что такое мобильная версия сайта wordpress. Скорее всего, их интересовала мобильная версия ограбления.
В наши дни для доблестных воинов интернета часто приходится решать подобные задания.
Коль вы столкнулись с такой задачей, уважаемый читатель, то давайте же рассмотрим варианты решений.
Мобильная версия сайта wordpress – как сделать свой сайт адаптивным
Мобильный сайт – какой должен быть?
Очевидно, что быстрый, удобный для просмотра на мобильных телефонах, планшетах, ноутбуках, стационарных компьютерах и телевизорах.
Мобильная версия сайта wordpress – что такое мобильный сайт?
Адаптивная верстка
Если известно, что верстка сайта – это написание первичного кода, который в дальнейшем становится базовым шаблоном сайта – html-корсет, так сказать, то адаптивная верстка – соответственно такая, которая адаптирует ваши страницы сайта под различные размеры экранов всевозможных устройств.
Будь то Ipod, Iphone, Android или телевизор Samsung, ваш сайт должен выглядеть опрятным везде и всегда.
Мобильная версия сайта wordpress – адаптивная верстка
Адаптивный дизайн
Судя по всему, адаптивный дизайн сайта относится к факторам первостепенной важности.
Ведь в 2018 году мало кому будет приятно зайти в своем телефоне на какой-то сайт и увидеть там микроскопическую картинку вместо приемлемого стандартами размеров шрифтов информативно полезного текста.
Также, иногда есть возможность обнаружить на экране мобильного браузера вместо сайта одну большую букву на весь экран, и то, которая не влезла полностью.
Если парадоксы, конечно, радуют, то, при наличии своего сайта, явно приходится заботится о его адаптации под мобильные устройства.
Адаптивный дизайн – Мобильная версия сайта wordpress
Адаптация сайта под мобильные устройства
Этот вопрос был хитом еще, наверное, лет 5 назад. Сейчас адаптировать сайт, особенно на WordPress, не сможет только полный профан.
Для этого, всего-то-навсего, нужно зайти на пару-тройку сайтов и получить исчерпывающие ответы из статей и видео.
Мобильная версия сайта – адаптация сайта под мобильные устройства
Как сделать мобильную версию сайта
Давайте начнем по порядку.
Прежде всего, чтобы представлять приемлемый вариант мобильного дизайна, достаточно посмотреть, например, как это выглядит у лидеров.
Наверняка, они знают свое дело на приличном уровне.
Мобильная версия сайта wordpress – как сделать
Мобильная версия Яндекс и Вконтакте
Рассмотрите внимательно эти сайты:
мобильная версия вк – https://m.vk.com
мобильная версия яндекс – https://mobile.yandex.ru
Проинспектируйте код, отметьте для себя принципы адаптивного дизайна у лучших.
Вконтакте и Яндекс – Мобильные версии
Проверить мобильную версию сайта
Оптимизирована ли ваша страница для мобильных устройств?
Ответьте на этот вопрос, перейдя по ссылкам на следующие ресурсы от главных Грандов Интернет-индустрии:
Google Search Console
Яндекс Вебмастер
Bing Mobile Test
ВебМарк
Как выглядит Ваш сайт на мобильных устройствах можно также проанализировать на сайте Вебмарк.В простом мобильном иммитаторе вы сразу увидите ваш результат.
Проверка мобильной версии сайта – регулярный подход.
В зависимости от ритма жизни вашего сайта, наверняка будут присутствовать изменения в дизайне, обновления различных плагинов, добавление скриптов.
Поэтому проверять мобильную версию сайта желательно постоянно. Особенно при внесении правок в код и установке новых функциональных модулей.
Сервисы для проверки мобильной версии сайта
Мобильная версия сайта для wordpress
Мобильная версия сайта предлагается практически в каждой теме wordpress.
Разработчики шаблонов заинтересованы предоставить качаственный дизайн с заранее адаптированным интерфейсом под все мобильные и десктопные устройства.
А если самописная или древняя тема, то мобильную версию WordPress можно организовать так:
Плагин
Используйте популярные и с постоянной адекватной поддержкой плагины.
Среди них могу выделить Jetpack и WPtouch.
Видео об этих 2-х плагинах смотрите ниже.
Без плагина
Если решили сделать без плагина, то отлично. Профессиональный подход.Добавьте в файл стилей несколько незамысловатых строк медиа-запросов (типа, @media screen and (max-width: 768px){…}), и будет вам счастье.
Или подключите свой mystyle.css в файле шаблона и спокойно контролируйте адаптивность через FTP.
Только не забывайте учитывать моменты обновлений движка WordPress.
Как поступить лучше, – вам виднее.
На поддомене
Можно сделать на поддомене отдельную быструю легкую версию сайта.
Мобильная версия сайта для wordpress – варианты
Настройка мобильной версии сайта
WordPress
В WordPress адаптация настроена со старта.
О, мой уважаемый читатель!
Разработчики WordPress понимают, как никто иной, что нужно всегда следовать в ногу со временем.
Поэтому, все последние версии платформы в обязательном порядке адаптированы под основные размеры экранов наиболее популярных девайсов.
Устанавливаете понравившуюся вам тему, которая подходит под ваш бизнес, и вы сразу можете созерцать ту красоту, которая появляется, когда вы заходите на свой сайт с мобильного телефона.
Сегодня, как говориться, – в Вордпресс все включено.
Не скрою, что под личные нужды иногда приходится подправить код.
Мобильная версия сайта wordpress – как настроить
Jetpack настройка мобильной версии
Мощный плагин Jetpack, помимо более 30 различных полезных функций по оптимизации и ускорению, предлагает еще и мобильую версию для вашего сайта.
Ответ по настройке можно найти в следующем плейлисте:
Мобильная версия сайта wordpress – плагин Jetpack
Woocommerce мобильная версия
Обычно, Woocommerce сам автоматически подстраивается под текущую тему WordPess, которая должна быть адаптивной.
Но если у вас какие-то свои интересы по мобильности Woocommerce, тогда взгляните на следующий плейлист:
Мобильная версия сайта wordpress – woocommerce
Wptouch
Пожалуй, самый популярный плагин для реализации мобильной версии сайта на WordPress – плагин WPtouch.
В следующей подборке видео дан обзор, рассмотрена установка и настройка плагина WPtouch.
Мобильная версия сайта wordpress – плагин WPtouch
WordPress мобильная версия на поддомене
На поддомене мобильную версию делают, как правило, крупные сайты – социальные сети, интернет-гипермаркеты, веб-порталы, поисковые системы. Им выгодно разделять мобильный и основной функционалы, так как из-за того, что основной код сайта огромный, мобильный модуль они размещают независимо на поддомене или в подкаталоге.
Для крупных команд разработчиков такое распределение имеет отдельный смысл.
Для среднестатистического сайта на WordPress с головой хватает обычного хорошо настроенного адаптивного шаблона.
А если у вас wordpress-сайт с посещаемостью 20 000 или более человек в сутки, то вы бы врядли чиали эти строки.
Мобильная версия сайта wordpress на поддомене
Как отключить мобильную версию сайта wordpress
Такой вопрос иногда проскакивает тоже.
Ну… Смысл отключить?.. Взять и отключить. Как включали, так и отключите.
Или скажите тому, кто включал. Он все отключит.
И зачем тогда было настраивать…
Да и вообще – странный вопрос. Почему то таких аж 15 раз в месяц фигурирует в вордстате.
Может не нужно было и затрагивать?..
Ладно, проехали.
Идем далее.
Мобильная версия сайта wordpress – как отключить?
Программа для создания мобильной версии сайта Adobe Muse
Adobe Muse – удивительная разработка корпорации Adobe для создания сайтов любой сложности и любого назнаения.
В этом видео рассмотрено создание мобильной версии сайта в программе Adobe Muse.
Мобильная версия сайта – программа Adobe Muse
Если у вас Не WordPress
Что касается других платформ и сайтов, то всегда есть подходящий ответ от людей, которые от чистой души публикуют свои видео.
Возможно, в ультра-мега-видео-подборке, которая заключает сие писание, вы и найдете подходящее решение.
На этом завершаю.
Удачных событий и свершений.
И, как всегда, – задавайте побольше правильных вопросов и находите правильные ответы.
Смотреть видео – мобильная версия сайта wordpress
Мобильная версия сайта – плейлист 67 видео
Мобильная версия сайта wordpress на Бизнес на WordPress
Нажмите на кнопку из предложенных ниже и кого-то вы точно обрадуете:
Просмотры 35, за сегодня 1
Похожее
Плагины для создания мобильной версии WordPress сайта
Сейчас почти у каждого веб-сайта имеется мобильная версия. Это неудивительно, ведь количество пользователей интернета, которые выходят в него через смартфоны/планшеты, уже превысило число юзеров, подключающихся с компьютеров или ноутбуков.
При всем при этом сейчас разработчикам очень легко сделать мобильную версию своего сайта. Для этого можно, например, воспользоваться специальными плагинами для Wordrpess, которые легко возможно найти в официальном репозитории этого движка.
WP Touch Mobile Plugin
Данный плагин является одним из самых популярных из тех, которые предназначены специально для настройки мобильной версии сайта. С его помощью быстро и без специальных знаний возможно создать красивый и современный дизайн.
WP Touch Mobile Plugin позволяет создавать полноценные темы практически любой сложности. Через интерфейс панели управления плагина возможно настроить и создать:
— основное и дополнительные меню ресурса;
— указать Homepage;
— разрешить или запретить масштабирование;
— настроить расположение блоков и т.д.
У этого плагина очень много положительных отзывов. Ссылка на скачивание WPTouch Mobile Plugin.
WP Mobile Plugin
Те разработчики, которые не хотят менять текущую тему сайта на адаптивную, могут воспользоваться плагином WP Mobile. Это особое расширение, которое добавляет на ресурс второй шаблон, который будет отображаться исключительно тем пользователям, которые посетили ресурс с какого-нибудь мобильного устройства.
Плагин поддерживает большое количество настроек. Через его панель настроек возможно гибко сконфигурировать интерфейс буквально за 10-15 минут. А те, кто знают CSS и HTML, при помощи данного расширения сумеют сделать дизайн любой сложности.
Также через панели настроек плагина возможно добавлять на страницы сайта кнопки, по нажатию на которые будет происходить переключение темы с мобильной на десктопную и наоборот.
Загрузить плагин WP Mobile Plugin можно по ссылке.
Jetpack
Jetpack – это одно из самых популярных расширений для WordPress. Уже на протяжении нескольких лет оно занимает лидирующие позиции в категории «Топ» репозитория WP.
Jeckpack – это своего рода комбайн, в котором присутствует большое количество функций. Так, помимо всего прочего, в нем реализована и возможность быстрого создания мобильной темы.
Используя этот плагин, можно создавать привлекательные шаблоны. Через него возможно указать почти любые параметры элементов интерфейса:
— шрифты;
— цвета;
— анимации;
— расположение блоков и полей и т.д.
Это очень мощный инструмент, при помощи которого возможно за считанные минуты создать интересную и уникальную тему. А главное – данный плагин регулярно обновляется, в виду чего его пользователи имеют возможность пользоваться всеми актуальными фишками дизайна.
Ссылка на плагин в репозитории WP.
Существуют и другие расширения, однако именно перечисленные являются наиболее функциональными, удобными, а поэтому – популярными.
Вам понравилось? >>> Почему надо подписаться на обновления?Буду благодарен за ретвит и клацанье по кнопочкам. Спасибо :)
Tweet
Есть вопросы? Напишите в комментариях, всем отвечу :)
www.kolobochek.ru
Как сделать мобильную версию сайта Wordpress
Мобильная версия сайта, зачем её делать? Заинтересовался этим вопросом буквально на днях и сделал для себя открытие. Посмотрел рейтинги различных инструментов и плагинов для решения данной задачи, остановился на WPTouch. Организовал мгновенно для одного из своих проектов мобильную версию WordPress сайта. И ликовал – версия сайта для мобильных устройств стала приносить существенную прибыль, с мобильного трафика.
Мобильную упрощённую версию должен иметь любой более-менее посещаемый сайт на WordPress. Она улучшит поведенческие факторы юзеров, заходящих с мобильных устройств + серьёзно повысит CTR рекламных объявлений. Почему?
Поведенческие – потому, что читать содержимое сайта становится удобнее мобильным юзерам в разы. Кликабельность по рекламным блокам – потому, что блоки становятся значительно заметнее и лучше вписываются в контент. Зацените скриншот рандомной статьи с мобильного устройства, как отображается реклама Яндекс Директа:
Без мобильной версии сайта, рекламные блоки казались маленькими и убогими, при заходе с того же Iphone – чтобы клацнуть по рекламе, нужно было увеличить масштаб и прокрутить страницу вниз. С мобильных юзеров я имел ранее совсем небольшой профит. Теперь же вижу, что после создания мобильной версии сайта, доход с проекта может увеличиться на 10-15% – мобильные юзеры клацают отлично как на блоки Adsense, так и на РСЯ. Проект, на котором я опробовал WPTouch, имеет львиную долю мобильного трафика – 24% от всех посетителей.
Проверяйте статистику посещений с мобильных устройств, и если процент таких пользователей превышает хотя бы 5% – имеет смысл заняться созданием мобильной версии вашего сайта. Сначала я был в замешательстве – как отнесутся поисковые системы к подмене шаблона, не будет ли негативной реакции? Ведь я не собирался выносить мобильную версию на поддомен или создавать альтернативу в папке wap. Проконсультировался с представителем Яндекса и узнал, что и Google, и Yandex – отлично относятся к сайтам, имеющим мобильную версию для посетителей, работающую по принципу WPTouch: при заходе посетителя, определяется User-agent, и если информация в нём говорит о том, что пользователь с мобильного устройства – подгружается мобильный шаблон. Если юзер зашёл с обычного компьютера – грузится стандарт.
Скачать WPTouch можно с официальной странички плагина на сайте WordPress, вот здесь. WPTouch имеет бесплатную стартовую мобильную тему, дизайн которой можно настроить самостоятельно, как угодно. Установка простая – ставим плагин, активируем – мобильная версия сайта готова. В настройках плагина, нужно включить предспросмотр только для авторизованных администраторов и заняться редактированием шаблона. Редактировать тему конечно частично можно и в настройках, с чего собвстенно и нужно начать. Но поработать придётся и ручками.
Путь к нужной теме для редактирования, находится по адресу WPTouch -> Themes -> Bauhaus -> Default. Меняем, что нужно, заливаем с заменой через FTP. Самый основной и нужный шаблон – single.php – однако для полного фэн-шуя, придётся редактировать практически каждый файл, чтобы оформить всё достойно. Лично я убрал с топового меню выдвигающееся меню страниц, поставил свои социальные кнопки, русифицировал форму комментариев + добавил несколько разных мелочей. Также, придётся редактировать много чего по адресу WPTouch -> Themes -> Foundation -> Default. Разумеется, плагин будет исправно работать и без каких-либо вмешательств в шаблоны. Но, я настоятельно рекомендую хотя бы перевести фразы шаблона с английского на русский + обязательно добавить в single.php несколько рекламных блоков.
Не забудьте поставить срезы для Яндекс Директа и создать новые рекламные блоки в Adsense, для отслеживания эффективности монетизации мобильного трафа 
beaseee.ru
Мобильная версия сайта на wordpress
Мобильная версия сайта для wordpress. В данной статье я расскажу вам как устанавливается и настраивается мобильная версия сайта на wordpress. Ранее время от времени мне на e-mail приходили письма со следующим вопросом: установлена ли у вас мобильная версия сайта. Я как-то поначалу не придавал этому значения, но после прочтения горы информации, о плюсах этой версии, решился, и установил себе такую вот понимаете мобильную версию :-).
Это оказалось проще чем отобрать конфету у младенца (хотя конфеты у детей я никогда не отбирал) , ну главное смысл выражения. Короче говоря, хочу я сейчас, поделится с вами способом установки версии сайта для мобильных телефонов.
Все-таки, сейчас, все больше и больше людей используют телефон для входа в интернет. Я так представил, если у меня 1-2 человека с десяти, используют телефон для подключению к интернет, то сколько же таких любителей в странах СНГ. Да, таких оооочень много, и по этому, мобильная версия нужна для сайта.
Как устанавливается и настраивается мобильная версия сайта
Нам понадобится установить плагин wptouch. Для установки заходим в административную панель своего сайта →плагины → добавить новый → добавляем и активируем плагин wptouch. После активации его необходимо настроить.
Для настройки, в меню боковой панели «параметры», ищем wptouch и открываем его. Ниже показано окно настроек, на котором Вы окажетесь, его нужно настроить следующим образом.
Я свой сайт настроил, так как показано на скриншотах ниже.
Общие настройки:
Дополнительные параметры:
Настройка уведомлений и настройка цвета:
Под настройками уведомлений и цвета у вас будет отображаться настройка контекстной рекламы и аналитики. Но так как они не являются принципиальными настройками, я с вашего позволения их пропустил, так же пропустил пункт иконок, которые будут отображаться в мобильной версии сайта, они не влияют на его отображение, и по этому, их менять или редактировать не нужно.
И последний пункт настроек, вы можете подредактировать, так, как вам нравиться, но это так же не принципиально.
Нажимая на стрелочку (показано на скриншоте ниже), появляется выпадающий список, с названиями вышеупомянутых иконок, и для того, что бы выбрать подходящую иконку к редактируемому пункту, достаточно нажать на ее имя в выпадающем списке.
На этом наши настройки подошли к концу, нажмите на кнопку «параметры сохранения», для сохранения изменений и можете просмотреть отображение вашего сайта на мобильном телефоне. Даже не так, просмотрите отображение сайта до изменений, и после их сохранения.
Ну что, мобильная версия сайта у вас, теперь настроена. Примите мои поздравления ➡ .
Воспользуйтесь комментариями для мнения о статье, и расскажите о ней своим друзьям.
«Хочешь быстро стартовать в Интернете?»
Смотри как это делать
«Есть еще! Смотрите»
vi-internet.ru
как сделать с помощью плагина JetPack?
Адаптировать сайт под небольшие сенсорные экраны сейчас более чем актуально, ведь рынок настольных ПК и ноутбуков сокращается, в то время как аудитория, бороздящая Интернет с планшетов и смартфонов, стремительно растёт.
Разработчики об этом осведомлены не хуже, а может даже лучше других, и поэтому вариант заказать платный дизайн или профессиональную адаптацию — не единственный способ оптимизировать тему оформления под мобильные устройства.
Итак, кроме заказной адаптации или создания кода собственными руками можно либо сразу выбрать подходящую под все устройства тему оформления, либо решить проблему с помощью плагинов. Как всегда, под WordPress справляющихся с этой задачей расширений написано очень много. Проблему решает JetPack — достаточно просто активировать в нём мобильную тему, быстро и без программирования создать мобильный сайт позволяет плагин WPTouch, меняет и подгружает подходящее под устройство оформление WP Mobile Detector. Как видите, выбор огромен, — что для вас лучше, то и используйте.
Однако прежде, чем что-либо предпринимать, убедитесь, что ваш сайт под мобильные устройства не оптимизирован. Это можно сделать, например, с помощью сервиса Google.
Просто перейдите по ссылке, введите адрес сайта в единственное на странице поле и нажмите кнопку Анализировать. Например, мой тестовый сайт под смартфоны и планшеты не адаптирован вообще.
Но если тему сменить на стандартную, то картина сразу меняется и Google сообщает, что под мобильные сайт оптимизирован отлично.
Понятно, что стандартную тему хотят использовать далеко не все, и поэтому имеет смысл выбрать что-то из коллекции WordPress. Благо, она большая.
1. В панели управления сайтом откройте Внешний вид -> Темы.
2. На появившейся странице щёлкните Добавить новую.
3. Нажмите Фильтр характеристик, в области Разметка установите флажок Адаптивный дизайн, при желании настройте другие параметры и щёлкните Применить фильтры.
4. Из предложенных тем (на момент создания статьи их 1614) выберите и установите любую, активируйте её и снова проверьте сайт сервисом Google.
5. Если всё нормально, то установка дополнительных плагинов вам не нужна, тем более что появляться адаптивных тем со временем будет всё больше и больше — спрос порождает предложение.
www.seostop.ru
Делаем мобильную версию сайта на WordPress › Блог Интернет Технологий
Актуальность создания мобильной версии сайта просто колоссальна. Это объяснимо по многим причинам, я приведу некоторые из них:
- Мобильный интернет серфинг растет в 8 раз быстрее, чем компьютерный на основе использования WEB;
- 70% населения планеты имеет мобильный аппарат;
- В 2010 году абонентов мобильной связи превысило 5 миллиардов;
- У 85% детей есть собственный телефон, в то время как только у 73% есть книги в домашних условиях;
- Android растет в размере 886% — 160 000 телефонов Android активизируются ежедневно;
- 1000000 смартфонов активизируются каждую неделю;
- Google сообщает, что объем мобильного поиска составляет до 130% по сравнению с аналогичным года;
- К 2014 году он предсказал, что использование мобильного интернета обгонит настольный использования Интернета.
На собственном примере я бы хотел поделиться с Вами опытом, как сделать собственную мобильную версию сайта на CMS WordPress.Отдыхая летом на море, у меня не было под рукой ноутбука и просматривать дела в интернете пришлось через мобильный телефон. После того, как я его удачно утопил, мне пришлось пользоваться не столь хорошим мобильным телефоном (SE K750i) у которого не такой большой и удобный экран, на котором отлично отображаются сайты. Я просто был в приятном удивлении, когда у того или иного сайта присутствует мобильная версия, которая загружается автоматически, когда удачно проходит идентификация мобильного устройства и сайт «понимает», что Вы зашли с помощью мобильного телефона и мобильную версию сайта Вам куда лучше просмотреть нежели традиционную.
Сегодня я расскажу как на WordPress CMS сделать мобильную версию сайта: какие плагины и некоторые настройки, которые будут полезны при редактировании внешнего вида мобильной версии.
Существует около 10-15 различных плагинов, которые предоставляют возможность сделать версию сайта для мобильных устройств и ныне популярных планшетов. Попробовав каждый из плагинов я остановился на плагине — WordPress Mobile Pack.
WordPress Mobile Pack — это полный набор инструментов с помощью которых Вы легко сделаете мобильную версию сайта. Пакет включает в себя: мобильный переключатель, мобильные виджеты, и содержание адаптации для мобильных характеристик устройства. Сайт отлично работает во всех популярных мобильных ОС (iOS, Android, Palm). Так же, в WP Mobile Pack существует внутренняя статистика по мобильным устройствам (в Инструменты-Mobile Analytics), однако для более точной статистики советую зарегистрироваться и повесить (на мобильную версию) счетчик WapLog.
Итак, загружаем плагин себе на сайт.
Вообщем то мобильная версия сайта уже будет работать! Как проверить? — спросите Вы. Качаем Opera Mobile Emulator — эмулятор браузеров различным мобильных телефонов и планшетов. Около 35 мобелей мобильных телефонов, планшетов и КПК будут в вашем распоряжении через одну программу 
Вводим в адресную строку адрес блог и вуаля — мобильная версия сайта готова
Как мы видим через телефон блог стал смотрется куда более компактно и читабельно. Давайте теперь как следует настроем отображение мобильной версии нашего сайта.
Заходим в Дизайн — Mobile Switcher
Напротив Mobile theme выбираем тему которая вам больше по душе. Остальные настройки я оставил по умолчанию, потому что они меня целиком и полностью удовлетворяют. Хоть плагин и не имеет русифицированную версию — вы методом тыка сможете все настроить, что необходимо.
Мобильные версии шаблонов сайта лежат в wp-content/themes, если вы используете WP Super Cache то вам необходимо обновить правило для модуля mod_rewrite. Для этого просто зайдите на страницу плагина на нажмите на соответствующую кнопку.
Это необходимо для того, чтобы в обновился файл htaccess которые и будет перенаправлять мобильных посетителей на мобильную версию
Отредактируйте файлы шаблона по своему усмотрению, так же после активации в footer'e сайта появится «переключалка» между обычной и мобильной версией сайта, которую вы так же с помощью не сложный преобразований сможете вынести в любое удобное Вам место. Мобильную версию сайта так же можно вынести на поддомен, это делается и настраивается в графе Mobile Switcher.
Поставив WapLog счетчик и отписав в Support Яндекса с вопрос все ли сделано без проблем и ошибок, они дали положительный вариант моей мобильной версии сайта!
С Уважением, VanoID С уважением, Vasilenko Ivan!bitby.net
7 плагинов WordPress для адаптации сайта под мобильные устройства
Сделайте это наконец! Создайте мобильную версию своего сайта на WordPress и избавьте каждого посетителя с мобильного устройства от неудобства все время увеличивать масштаб страниц для читабельности текста и выполнять N-ное количество лишних движений.
Мы предлагаем вам 7 крутейших, а главное бесплатных плагинов WordPress, которые помогут вам это сделать всего за несколько минут.
Смотрите также:
Плагины для создания мобильной версии вашего сайта на WordPress
Скорее всего, термин «адаптивный дизайн» не является для вас новым, так как уже в течение лет так 2-х он находится у всех на слуху. Но если вы еще не знаете, то его смысл заключается в «преображении» или «адаптации» сайта для мобильных устройств. То есть посетителю с любого гаджета, будь то планшет или смартфон, будет так же удобно просматривать страницы вашего сайта, как и со стационарного ПК или ноутбука.
Ниже приведены четыре плагина, которые 100% помогут решить эту задачу — сделать мобильную версию вашего сайта на WordPress.
Начнем с очень удобного плагина Hammy для изменения размеров изображений в соответствии с разрешением экрана мобильного устройства, на котором будет выводиться сайт. Он заменяет тег <img> на <figure>, а также использует код изображения версии WordPress 3.5 для изменения размера изображения.
Для использования плагина необходимо установить некоторые точки останова и выбрать элемент HTML контейнера. Таким образом, с помощью выбранных вами брейкпоинтов, плагин меняет размер изображения, когда ширина экрана достигает точки останова. Можно также задать определенные классы, чтобы игнорировать некоторые изображения.
2. Responsive Widgets
Этот плагин предлагает новые текстовые/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
Очень популярный «lightbox» плагин для использования всплывающих в окошке изображений и галерей с эффектами наложения. Но имейте в виду, что этот плагин не решает задачу «адаптивности», а является сам по себе адаптивным.
Чтобы использовать плагин, необходимо просто его активировать. В нем есть несколько настроек, типа активации Lightbox в комментариях или изменение длительности анимации. Но в общем плагин работает сразу же после активации и не требует дополнительной настройки.
4. Responsible
Чрезвычайно полезный WordPress плагин. С его помощью вы протестируете адаптивный дизайн в своем браузере, не отходя от кассы. В нем используется Viewport Resizer Bookmarklet для размещения фиксированной панели вверху страницы, где вы сможете изменить размер страницы для нужных адаптивных устройств (как например, смартфоны, планшеты, экраны стационарных ПК), а также устанавливать необходимые разрешения экрана.
Чтобы начать работу с плагином, достаточно его активировать и посетить одну из страниц сайта. Панель появится на каждой из них, что дает возможность протестировать адаптивный дизайн без каких-либо проблем.
Плагины для создания мобильных тем
Эти плагины работают по очень интересному принципу: они показывает различные темы WordPress, если пользователь заходит на ваш сайт с мобильного устройства. Такая функция особенно полезна, если у вас на сайте используется тема, неадаптированная под мобильные устройства. И если у вас нет ни времени, ни желания менять тему сайта под мобильный гаджет, то следующие три плагина созданы специально для таких ленивых, как вы! :-)
5. WPTouch Mobile Plugin
Это, пожалуй, один из самых популярных бесплатных плагинов для создания привлекательного сайта в мобильной версии. На сегодняшний день его рейтинг составляет 3,9 из возможных 5 звезд. После установки и активации плагина вам будет доступна куча всяких классных функций, хотя многие пользователи могут ограничиться стандартным набором для создания мобильной версии сайта.
Но будьте осторожны! Еще в июле 2014 года стало известно об уязвимости версии плагина WPTouch 3. Она была тут же замечена и исправлена, но успела навредить многим сайтам, которые использовали данный плагин. Поэтому всегда следите за обновлениями плагина и заботьтесь о безопасности вашего сайта во всех его версиях.
6. WordPress Mobile Pack
Еще один лидер тем для мобильной версии сайтов на WordPress. Количество скачиваний плагина перевалило за 600 тысяч, а рейтинг составляет 3.8 звезд из 5 возможных. Его крутость состоит в замене классического дизайна на интерфейс мобильного приложения.
Как и предыдущий плагин WPTouch, этот нуждается только в установке и активации. При желании можете покопаться в настройках, но это необязательно. Плагин можно использовать сразу же после его активации.
7. Jetpack
Этот плагин занимает лидирующие позиции по популярности среди подобных ему инструментов, это подтверждается поддержкой WordPress.com и Automattic. В нем есть очень полезная функция «Mobile Theme». Чтобы использовать ее, нужно зайти на страницу настроек (Jetpack → Settings) после установки и активации плагина. Действий минимум, а возможностей максимум. Вы убедитесь в этом сами, если выберите этот бесплатный плагин.
Единственный совет, который мы можем вам дать – это не использовать данный плагин с плагином Disqus, так как они не очень совместимы.
Заключение
В сфере веб-дизайна важно и нужно всегда следить за новинками, особенно, если они действительно могут быть вам полезны. В нашем случае, «адаптивность под мобильные устройства» уже становится стандартной функцией, которую необходимо использовать всем владельцам сайтов и соответствовать, так сказать, требованиям эре мобильных гаджетов.
Если вы уже использовали какой-либо плагин из этой серии или у вас есть свой вариант, которого нет в нашем списке – не жадничайте, делитесь с другими пользователями.
Источник: code.tutsplus.com 
hostenko.com
