Как выглядел сайт после установки wpTouch

Как сделать мобильную версию сайта на wordpress без знаний

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

Так как же сделать адаптивную версию сайта? Можно конечно заказать у специалистов. Но услуги вебмастеров стоят немало. А если брать кого-то не опытного, то могут испортить много чего. (Совет: всегда делайте бекапы) Что же делать в таком случае? 

Можно воспользоваться плагинами. Их есть очень много, но для wordpress-сайтов  я посоветую WpTouch. Я выбирал между им и WP Mobile Detector. У обеих есть простой режим и платный, но по второму пишут, что часто выдает много ошибок. По этому установил WpTouch. Он имеет много настроек, можно отключить какие-то функции (например, показ рекламы), можно наоборот дописать какой-то код (только для мобильных), можно изменить цветовую гамму, количество записей, иконки меню, выбрать какое именно меню отображать.

Вот вам пример одного из моих сайтов. Как выглядел он до и после установки плагина WpTouch:

Как выглядел сайт до установки wpTouch
Как выглядел сайт до установки wpTouch
Как выглядел сайт после установки wpTouch
Как выглядел сайт после установки wpTouch

Как видите, удобство на лицо. А теперь детальнее о настройках пла

Например, в Общих настройках можно убрать показ автора, категории и даты поста:

Как настроить WpTouch
Как настроить WpTouch

Кроме того, есть выбор разных тем (правда, большинство только при оплате PRO-версии плагина):

Темы WpTouch
Темы WpTouch

Есть настройки цветовой гаммы сайта для мобильных девайсов:

Как настроить цвета WpTouch
Как настроить цвета WpTouch

Также вы можете выбрать какое меню отображать по умолчанию и задать пунктам свои иконки. Все это делается в Настройках Меню — значки меню.

Как задать иконки пунктам меню в wptouch
Как задать иконки пунктам меню в wptouch

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

А проверить свой сайт для мобильных устройств можно на сайте у гугла — https://www.google.com/webmasters/tools/mobile-friendly/

Мой сайт они похвалили :)

Как выглядит сайт на мобильном (сервис google)
Как выглядит сайт на мобильном (сервис google)

А как вы делали мобильную версию сайта? Или вы не делали? о_0

  • Вот теперь буду знать как это делается. а то все думал как это сложно, вы описали все досконально, думаю что научусь.

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

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

четырнадцать − девять =

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">