ГлавнаяWordpressАдаптация wordpress под мобильные устройства

Самый простой вариант адаптации сайта под мобильные устройства. Адаптация wordpress под мобильные устройства


» Мобильные WordPress темы и плагины или Как адаптировать WordPress темы под мобильные устройства?

Мобильные WordPress темы и плагины или Как адаптировать WordPress темы под мобильные устройства?

мобильные темы wordpress

Мобильные WordPress темы в последнее время стали весьма популярны. И это вполне объяснимо, так как технологии не стоят на месте. Многие пользователи сменяют свой десктоп на более компактные и современные мобильные устройства IPADS, iPhone, смартфоны и другие навороченные «таблетки». Требования к современным веб-сайтам расширились. Сайт (блог) должен выглядеть идеально независимо от того, с помощью стационарного компьютера или мобильного устройства пользователь заходит на него.

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

Почему именно Вордпресс?  WordPress является самой доминирующей CMS, и недавно созданные темы требуют адаптации под мобильные устройства, другими словами любая WordPress тема должна хорошо смотреться на любом устройстве в т.ч. и мобильном.Этот вопрос можно решить благодаря плодотворной работе многих WordPress разработчиков, разработавших мобильные темы WordPress и плагины. Благодаря их усилиям, вы можете легко создать свой ​​собственный мобильный WordPress сайт или же модифицировать имеющийся, добавив свежий дизайн и много других современных примочек.

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

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

Разделы статьи

Список Мобильных WordPress Тем

 

TOUCH Light Mobile WP Theme

touch a clean design and a feature rich solution - wp mobile theme

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

BRAVE – A Dark Responsive Mobile Theme

Brave - A Dark Responsive Mobile Theme with awesome features

Судя по отзывам, многим нравится эта тема. Она имеет чистый дизайн. Особенности: установка Web App, галереи, возможность выбора несколько цветов и т.д.

Ultimate And Slate Mobile WordPress

Get two popular mobile themes - Utimate and Slate with a lot of gallery options, page templates and shortcodes plus tons of useful features.

Этот пакет состоит из двух популярных мобильных темы Utimate и Slate. У них есть много вариантов показа галереи, разнообразные шаблоны страниц и тонны другие не менее полезные функции.

HERO Mobile Theme And Web App

hero is a powerful mobil theme with Web App feature

Это мощная тема и мне очень нравится функция, которая позволяет посетителям добавлять значок веб-приложение (web app ) на своем iPhone. Мобильная версия будет идеально работать вместе с Вашей WordPress темой. Простой дизайн и много полезных функций.

Resans WP Mobile Portfolio Theme

resans feature rich wp mobile theme with awesome menu

Эта тема полна функций, которые позволят вам создать сайт на любой вкус. Она имеет прекрасную постраничную навигацию и секторный макет (лейаут).

Spartan WP Theme For Mobile

spartan

Полнофункциональная тема, которая приобщит ваш сайт к мобильной среде. Также в настройка Вы всегда сможете унифицировать свой сайт.

Provocateur WordPress Theme For Mobile Devices

provocateur[1]

Provocateur — Вордпресс тема для мобильных устройств в использованием JQuery Mobile, HTML5 и CSS3 технологий. Выглядит идеально на мобильных устройствах.

Troller Mobile WordPress Theme

troller[1]

Это тема имеет чистый дизайн и легка в использовании. Мобильная Вордпресс Тема имеет красивый ретро / винтажный вид.

Mobit Mobile WordPress Template

mobit-mobile-template[3]

Mobit — хорошая мобильная тема с большим количеством страниц и возможности индивидуальной настройки.

Metro Mobile WordPress Mobile Theme

metro-mobile-theme

Метро полностью резиновая с Bootstrap 2.1, созданная с помощью HTML5 и CSS3. Она имеет полезные функции, имеет 13 бесплатных приложений. 24 цветная цветовая гамма, а также Контактный формуляр, 7 Плагинов и несколько фото галерей и т.д.

Tiger Mobile Template WordPress Version

tiger-mobile-theme

Тигр — WordPress тема для мобильных устройств с Retina дисплеем, созданная на базе HTML5. Она имеет различные готовые страницы и множество других удивительных особенностей.

Mobilize – jQuery Mobile WordPress Theme

mobilize[1]

Mobilize (с анг. Мобилизация)- является мобильной Вордпресс темой с широким набором функций. Домашняя страница имеет сенсорный слайдер, социальные иконки, галереи, контактную форму, блог с картинками и лучшими видео, много коротких кодов (шоткодов) и много других наворотов.

Side Mobile Retina | WordPress Version

side-mobile-wordpress-theme

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

AxiaMobile WordPress HTML5 Theme

äxiamobile-WP-theme

AxiaMobile — мобильная тема сделанная в HTML5 и CSS3. Он создана для мобильных устройств. Имеет приятный чистый дизайн!

WOW! mySite WordPress Mobile Theme

wow-my-site-wp-theme

WOW! MySite это WordPress тема оптимизировано для мобильных устройств. Удивительные возможности, легка в обращении и настройке. Идеально подойдет для корпоративного и персонального использования.Продолжение следует! Подпишись на обновления блога …

petralex.net

Как быстро адаптировать сайт под мобильные устройства и проверить адаптацию

Гугл декларирует, что учитывает в своем поиске оптимизацию сайта для мобильных устройств. Если вы добавили свой ресурс в google webmasters, то возможно у него появилась пометка «Сайт не оптимизирован для мобильных устройств». Это означает, что нужно провести работу по улучшению видимости ресурса в глазах google и адаптировать сайт под мобильные устройства. Нижеприведенные инструкции применимы не только для WordPress ресурсов, но и для любых других движков.

Для проверки отображения сайта на адаптивность будем пользоваться сервисом google https://developers.google.com/speed/pagespeed/insights.

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

Ниже видна детализация проблем и ссылки на инструкции по их устранению.

Поставим себе цель оптимизировать сайт и улучшить показатель хотя бы до 90%, что в глазах гугла считается хорошим.

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

Нажимаем ссылку «Как исправить» и видим следующий текст о необходимости указания тега viewport.google - оптимизация для мобильных

По ссылке «Настройте область просмотра» приведена статья, разъясняющая, как использовать этот тег. Детально разбираться с ним не будем. Просто воспользуемся указанием google о том, что на сайте в блоке head нужно указать инструкцию:

<meta name=viewport content="width=device-width, initial-scale=1">

<meta name=viewport content="width=device-width, initial-scale=1">

Добавляем тег на сайт и ради интереса проверяем после этого, как изменился показатель удобства для мобильных пользователей.google3Видим рост с 69 до 80%.

Если у вас на сайте включено кэширование, то надо перед проверкой либо отключать кэш или удалять кэшированные файлы, иначе проверка может осуществляться по старым файлам.

Далее смотрим проблему в красной зоне «Адаптируйте размер контента для области просмотра». Проблема заключается в том, что гугл делает проверку для устройства шириной в 375 пикселов, а размер некоторых элементов сайта превышает этот показатель.

Дело в том, что многие шаблоны, сделанные ранее, содержат абсолютные размеры элементов сайта. Например, в файле style.css могут быть инструкции такого вида

#wrapper { width: 1000px; }

#wrapper {

    width: 1000px;

}

wrapper — в данном случае это основной контейнер страницы сайта. Такой элемент, естественно, не помещается на экран шириной 375 пикселов. Также можно обнаружить и другие подобные инструкции для других элементов сайта.

Мы будем исправлять эту проблему с помощью следующего приема. Перепишем приведенные выше стили следующим образом:

#wrapper { max-width: 1000px; width: 100%; }

#wrapper {

    max-width: 1000px;

    width: 100%;

}

Броузер при формировании страницы в качестве ширины элемента будет использовать минимальное значение из двух: max-width и width. В этом случае, если ширина экрана пользователя превышает 1000px, то будет использоваться значение 1000, а если ширина экрана меньше 1000px, будет использоваться значение, равное ширине экрана (100%).

Находим и переписываем таким образом все инструкции в наших стилях, где размер элементов превышает проверяемый google — 375x.

После внесения всех изменений проверяем сайтgoogle4и видим, что показать удобства стал 94%. Цель достигнута. Сайт будет восприниматься гуглом, как удобный для мобильных пользователей.

Рекомендую добавить еще 1 инструкцию в файл style.css

img, iframe { max-width:100% !important; }

img, iframe {

    max-width:100% !important;

}

Это для того, чтобы картинка и фрейм всегда помещались на экране.

delaemsait.info

Самый простой вариант адаптации сайта под мобильные устройства

data-ad-client="ca-pub-9038233983914754"data-ad-slot="5706208564">

гугл о мобильных

Вот такое предупреждение получил я недавно от поискового робота:Честно сказать, проблему эту я знал изначально, но все как-то руки не доходили. Первое, конечно, что приходило в голову это поменять Тему на уже адаптированную под мобильные устройства, но такие изменения требуют тщательного подхода, а это все время, которого всегда не хватает. Короче, как говорится, пока гром не грянет... Вот и дождался... полетели первые ласточки.

С другой стороны, все что ни делается, делается, к лучшему. Зато сейчас мой сайт просто замечательно отображается на мобильных устройствах, хотя я еще не произвел до конца все настройки, которые предлагает мне плагин, которым я решил воспользоваться, чтобы не тянуть время. И надо сказать, я очень рад этому простому решению. 

 

Плагинов для адаптации сайта под мобильные устройства в репозитарии WP хватает, штук 15 наверное, точно есть: JetPack, WPtouch, WP Mobile Detector, WordPress Mobile Pack, Wapple Architect Mobile Plugin, MobilePress  (это только некоторые их них), при желании, можно опробовать их все. Но я вам хочу посоветовать один плагин, который меня, лично, устроил на все 100%.

 

Это плагин  WP Mobile Edition. Во-первых, несмотря на то, что он бесплатный, его функционал достаточно полный, чтобы отобразить весь ваш сайт, включая логотипы, миниатюры, картинки, рубрики, комментарии, RSS ленту, рубрики, обратную связь, и пр. на мобильном устройстве. Кроме того, вы можете выбрать цвет отображения мобильной версии, наиболее приближенный к реальному цвету вашего сайта.

 

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

 

Я пошел по пути наименьшего сопротивления и пока, настроил плагин для отображения  своего основного сайта на мобильных устройствах. Настройки очень просты и не представляют затруднений. 

 

Для вас я приготовил своего рода тренажер для того, чтобы вы могли посмотреть, как будет выглядеть ваш сайт на смартфоне. Картинка активная, вы можете опробовать все функции, как на настоящем мобильном устройстве.

 

 

 

--------------- 

 --------------

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Для ознакомления с настройками, я все же публикую скриншот, чтобы вы немного имели представление где и какие галочки нужно проставить. Я пользуюсь браузером Гугл Хром, поэтому у меня автоматически страницы переводятся на русский язык. У кого-то возможно настройки плагина останутся на английском языке. В таком случае, вы можете сверить с моим скриншотом и  настроить так же, как у меня, или добавить какие то свои настройки.

data-ad-client="ca-pub-9038233983914754"data-ad-slot="5706208564">

 

 

Далее, переходим в раздел основные настройки: Здесь мы должны решить, будем мы показывать кнопку переключения между мобильной версией и стандартной или нет. Я использовал все предлагаемые варианты. Вы можете поэкспериментировать со своей темой, как вам больше понравится.

 

 

В разделе Панель приборов указаны шорткоды для создания мобильных страниц. Раздел Мобильные страницы появилась у нас в панели администратора. Я пока ничего там не создал, но планирую опробовать и эту функцию плагина.

 

В разделе Виджеты появился виджет: QR-code|Switcher-Linc . При заполнении указывается название виджета и можно изменить размер под свой сайдбар. Ниже есть раздел Видимость. При желании, можно выбрать какие страницы, например, или рубрики и т. д. скрыть от показа.(нажмите, чтобы просмотреть)   QR-code|Switcher-Linc

 

Выглядит виджет на сайте вот таким вот образом.

 

Плагин для мобилы 6

Если посетители вашего сайта имеют на своих мобильных устройствах программы просмотра QR-кодов, то им этот виджет окажется очень полезным. Наиболее популярные программы просмотра QR-кодов поддерживают такие форматы данных: URL, Закладка в браузер, Email (с темой письма), SMS на номер (c темой), географические координаты.

 

Сохраняем все изменения, которые мы сделали и идем смотреть мобильную версию своего сайта на смартфоне.

 

ВНИМАНИЕ  Возможно, придется сделать еще кое-что:

 

Дело в том, что после установки Плагина я решил проверить, насколько теперь мой сайт оптимизирован для просмотра с мобильный устройств.  Результат оказался не совсем таким, каким я его себе представлял. Точнее, Гугл выдал мне свой вердикт: Сайт ссылается на мобильную версию ?fdx_switcher=true, просмотр которой запрещен в файле robots.txt. Пришлось внести поправки в вышеуказанный файл. Кто не знает, что такое файл robots.txt, смотрите здесь:http://www.zhakanov.com/tag/fayl-robots-txt/.

К мобильным приложениям

 

В итоге, после небольших изменений в файле robots.txt результат удовлетворил меня полностью. Если кто хочет проверить свой сайт, даю ссылку на сервис Google: https://www.google.com/webmasters/tools/mobile-friendly/

 

 Анализ сайта

 

 

data-ad-client="ca-pub-9038233983914754"data-ad-slot="5706208564">

www.zhakanov.com

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

Prostoy-Site | Все права защищены © 2018 | Карта сайта