Полная мобилизация сайта

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

Основной трафик сегодня идет с мобильных устройств. Поэтому мобильная версия сайта — это не роскошь, а необходимость.

Используете смартфон или телефон для выхода в Интернет?

Раньше я использовала плагины для создания мобильной версии. Сейчас у меня крутой адаптативный шаблон от WPShop. И никаких плагинов не требуется. Подробнее о шаблоне и его преимуществах читайте в статье.

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

Чтобы сделать мобильную версию сайта не нужно обладать специальными знаниями. Вы можете сделать ее самостоятельно за пару минут с помощью плагина.

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

Настройка плагина WPSmart Mobile

Как обычно, Вы найдете плагин через админ-панель. Заходите в раздел Плагины → Добавить новый, вводите название и выбирайте нужный плагин из списка, устанавливает и активируете.

Слева в панели у Вас появится новая строчка: WPSmart

Нажимаем на нее и переходим в Настройки плагина:

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

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

Кнопочка находится справа как сверху, так и снизу. И перед Вами появится телефон с изображением Вашего блога или сайта. Вы даже можете выбрать модель телефона из 2 предложенных:

предосмотр сайта

И перейдем к настройкам. Вы можете указать название сайта, а также загрузить его логотип (рекомендуемый размер 400 на 50 пикселей)

В общих настройках (General) Вам предлагают:

  • активировать функцию поиска в шапке блога;
  • разрешить комментарии.

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

Настройки постов (Post settings)

Вы можете:

  • указать имя автора статьи и дату;
  • разрешить показ тегов при просмотре статьи;
  • разрешить отображение названия рубрики (в начале статьи перед заголовком);
  • разрешить показ миниатюр на главной страницы;
  • разрешить показ избранных изображений в статье.

Кроме этого Вы можете добавить в мобильную версию счетчик посещаемости и рекламу.

аналитика и реклама

Если у Вас есть Google Analytics, то Вам надо лишь указать свой идентификатор. Если Вы вставляете другой счетчик, то выбираете Custom и указываете код счетчика.

И тоже самое и с добавлением рекламы. Вы можете указать свой идентификатор Google Adsense, либо вставить код от Яндекс Директ, например.

Переходим к следующему разделу Темы (Themes)

По умолчанию стоит WPSmart Classic, но плагин предлагает еще 2 темы, Вы можете активировать их и посмотреть, затем выбрать самую удачную.

В разделе Внешний Вид можете поэкспериментировать с цветовой гаммой:

цвета сайта

Вы можете изменить:

  • шрифт;
  • фон сайта;
  • фон шапки;
  • цвет текста в шапке;
  • цвет верхней границы шапки.

И, наконец в разделе Меню (Menu) Вы можете активировать выпадающее меню и выбрать, какие именно рубрики будут в нем отображаться. Кнопка меню будет отображаться слева от названия сайта.

меню в мобильной версии

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

Если у Вас установлен плагин кеширования, то он может потребовать дополнительных настроек, чтобы мобильная версия отображалась, как надо. Об этом я расскажу в конце статьи.

И чтобы у Вас была возможность выбора, расскажу еще об одном плагине.

WPtouch Mobile

Плагин теперь полностью руссифицирован, что является большим преимуществом.

Устанавливаем точно так же, как и предыдущий. У Вас в панели появится строка WPtouch.

Плагин уже работает, но Вы можете откорректировать некоторые настройки.

меню wptouch

Раздел «Что нового» носит информационный характер, в нем разработчики публикуют новости о плагине.

Переходите во вкладку Базовые настройки.

Здесь Вы увидите следующие настройки:

  • Название и автор сайта: По желанию Вы можете поставить галочку и в футере будет отображаться надпись:  На платформе Wptouch;
  • Определение региона: выбираете язык Вашего сайта;
  • Режим отображения: нормальный,  предосмотр и отключен;
  • Начальная страница: Вы можете оставить по умолчанию, либо выбрать в качестве главной статическую страницу.
  • Пользовательский код: Вы можете вставить, например, код счетчика;
  • Архивировать и импортировать: функция доступна только для pro-версии;
  • Режим администратора: обычный или продвинутый.

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

В разделе «Темы и Расширения» представлен набор тем и расширений, но они доступны только для платной версии.

В разделе «Параметры темы/Общие» Вы можете настроить отображение постов. Плагин уже указал необходимые настройки, но Вы можете что-то изменить по собственному желанию.

В этом разделе Вы можете:

  • указать количество отображаемых постов;
  • указать, где отображать эскизы. По умолчанию выбраны: список статей на главной, статьи и страницы. Предлагаю так и оставить.
  • разрешить показ тегов, рубрик, имени автора, даты;
  • разрешить отображение количества комментариев к каждой статье;
  • вставить строку поиска в шапку блога;
  • разрешить отображать комментарии на страницах;
  • включить форму оперативного входа.

В разделе «Фирменная символика» Вы можете выбрать цвета темы: цвета фона, заголовка и меню, цвет ссылок и колонтитулов.

Для этого нажимаете на кружок в нужном разделе и выбираете цвет из предложенных. Если ни один цвет не устраивает, то нажимаете на «Палитра» и выбираете свой цвет.

выбор цвета

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

Если Вы хотите, чтобы в начале каждой статьи отображались кнопки соц. сетей: твиттера, фейсбука и гугл+, то поставьте галочку в строчке Общий доступ и укажите цвета для кнопок: цвета темы или социальной сети.

В разделе Закладки пиктограмм Вы можете загрузить иконки для закладок для Андроид и Айфон.

Разделы Реклама и Режим веб-приложения доступны для платной версии.

И, наконец, в разделе Меню/Тематические меню Вы можете выбрать меню, которое будет отображаться в шапке.

тематические меню

Во вкладке «Настройка меню» Вы можете подобрать свою иконку для каждой рубрики:

иконки для меню

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

Если есть желание, то Вы можете приобрести платную версию плагина, которая обладает более широкими возможностями, например, Вы сможете размещать код рекламы.

Посмотреть, как будет выглядеть мобильная версия плагина Вы можете, нажав на «Просмотреть тему» внизу страницы:

предосмотр wptouch

Если Вы используете плагин кеширования Hyper Cache, то после установки Wptouch он потребует дополнительных настроек для нормальной работы Вашего сайта.

И плагин Wptouch предупредит Вас об этом. В правом верхнем углу Вы увидите уведомление:

настройка кеша

Вам надо будет перейти в настройки плагина Hyper Cache, выбрать раздел «Конфигурация для мобильных устройств»:

конфигурация Hyper Cache

Поставить галочку «Определять мобильные устройства» и прописать список мобильных агентов.

Где взять данный список? Перейдите по ссылке в уведомлении о дополнительных настройках Hyper Cache и Вы увидите следующую страницу:

мобильные агенты

Еще раз переходите по ссылке и Вы увидите список мобильных агентов:

агенты

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

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

Теперь Вы знаете, как сделать мобильную версию сайта. Расскажите, а как Вы сделали Ваш сайт мобильным?

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

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

  1. Zindows

    Я думаю, что за 2014 год цифра 30% выросла в разы.
    За этот год нереально выросла популярность планшетов, а большинство из них именно мобильную версию используют.
    Ведь планшетов много дешевых появилось, они стали в разы доступнее + тарифы безлимитные интернет для планшетов.

    Ответить
    1. seomodern

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

  2. Сергей

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

    Ответить
    1. Zindows

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

    2. Евгения Куварина автор

      Вот именно :). А я вообще в Интернете через мобильный не захожу, совсем отстала от жизни 🙂

    3. Наташа Давыдова

      Согласна, мобильная версия лишней не будет.

    4. Надежда

      😉 Согласна, на моем сайте по статистике от Яндекса половина посетителей по мобильникам заходят, обязательно поставлю этот плагин

  3. Марат

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

    Ответить
    1. Юрий Йосифович

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

  4. Азик

    Я, наоборот, всегда с айфона сижу))
    Конечно, веб-версии не так удобно читать как мобильные, но можно))
    Так что я полностью за мобильные версии)
    Кстати, wp-touch я пользовался, мне не очень понравился, как он выглядит на телефоне)

    Ответить
  5. Kozak

    Почему вы выбрали первый вариант?

    Ответить
    1. Евгения Куварина автор

      Мне он больше понравился, проще в настройках и во втором у меня меню не полностью отображалось

    2. Наташа Давыдова

      А у меня почему то в первом не получается меню создать.

    3. Артём

      Помогите прошу, у меня с меню так и не получилось у wpsmart mobile(

    4. Евгения Куварина автор

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

    5. Наташа Давыдова

      Разобралась с меню. Понравилось то что можно выбрать отдельные пункты.

  6. Аянбек

    Я раньше задумовался о том, как сделать свой сайт для телефонов, чтобы читателям было удобно читать и предполагал, что на это надо будет затратить определенную сумму денег! А оказывается, все делается лишь одним плагином. Обязательно попробую применить это на своем блоге.

    Ответить
    1. Zindows

      Раньше именно так и было — для телефонов делали специальные сайты.
      Помню, мой товарищ с таких начинал, начинались они wap.

  7. Бурул

    Для владельцев сайтов очень актуальна тема привлечения трафика и мобильного в том числе. Ваша подсказка про то как сделать мобильную версию сайта очень поможет.

    Ответить
  8. Kozak

    Не проверяли, скорость загрузки увеличилась?

    Ответить
    1. Евгения Куварина автор

      Скорость не изменилась, а вот удобство для пользователей было оценено page google insights 99 из 100

    2. Kozak

      А до этого? 😯

    3. Евгения Куварина автор

      а до этого где-то 50 с чем-то

    4. Наташа Давыдова

      А у меня этот показатель не изменился, хотя page google insights показывает наличие мобильной версии 🙁

  9. Наташа Давыдова

    Вроде создала все верно, но когда с мобильного захожу, то открывается полная версия. Что не так?

    Ответить
    1. Евгения Куварина автор

      Наташ, возможно из-за плагина кеширования. Если он есть отключи и посмотри, что получается

    2. Наташа Давыдова

      Его вроде у меня нет. Спасибо за совет, пойду проверю 🙂

  10. Kozak

    То-то последнее время с телефона ваш сайт постоянно по разному отображался. 🙁

    Ответить
  11. Kozak

    Что-то не то. Я оставил комментарий от имени другого человека.

    Ответить
    1. Евгения Куварина автор

      У меня скрипт стоит maxcache, это из-за него такое иногда случается

    2. Kozak

      А что дает этот плагин?

    3. Евгения Куварина автор

      Это скрипт кеширования, что-то вроде hyper cache только лучше

  12. Kozak

    Переключаться на полную версию не совсем удобно. По крайней мере у меня.

    Ответить
  13. Kozak

    Надо попробовать. А то гипер кеш стоит. А в Гугл аналитикс пишет Включительно кеш браузера. Не могу понять, как это сделать. 😐

    Ответить
    1. Евгения Куварина автор

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

  14. Kozak

    Пробовал вставлять код, не помогает. Может, не подходит? Своим кодом для включения кеша не поделитесь?

    Ответить
    1. Евгения Куварина автор

      Я пользуюсь кодом, о котором писала в статье об ускорении сайта

  15. Денис Скрипник

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

    Ответить
  16. Юрий Йосифович

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

    Ответить
    1. Kozak

      У вас в метро интернет есть? Где этот счастливый город?
      Юрий, как скажете, на старом блоге стоит заморачиваться и ставить адаптивную тему. Может оставить как есть и ограничиться плагином.

    2. Юрий Йосифович

      Василий, Я могу сказать то, что чтобы сделать сайт адаптивным достаточно просто:
      1. Изменить свойства CSS из width:980px; на {max-width:980px; width:90%;}
      2. Все пиксели перевести в проценты или em (о других единицах измерений молчу) — это касается и шрифтов.
      3. Для рисунков установить свойство img {max-width:100%; height:auto;}

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

      После прочтения книги Итана Маркотта «Отзывчивый веб-дизайн» я все же принял то, что сейчас что старые, что новые сайты должны быть с адаптивным дизайном.

      Тем более зачем себя ограничивать от трафика с телефонов, планшетов, телевизоров???

    3. Kozak

      «зачем себя ограничивать от трафика с телефонов, планшетов, телевизоров» — ведь это не значит, что без мобильной версии или адаптивного дизайна не будет мобильного трафика?

    4. Евгения Куварина автор

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

    5. Юрий Йосифович

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

  17. дмитрий

    Хорошее решение. Лучше, конечно сразу ставить адаптивный шаблон, но как вариант беру на заметку.

    Ответить
    1. Евгения Куварина автор

      Да, адаптативный шаблон — это лучший вариант, но для тех, кто не готов менять шаблон плагин — тоже неплохой вариант

    2. Юрий Йосифович

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

  18. Kozak

    Спасибо. Вы меня заинтересовали. Прочитаю книгу, и позкспериментирую. Тем более, давно собирался код подправить.

    Ответить
  19. Kozak

    Что плохо в этой мобильной версии — нельзя оставлять ответы на комментарии.
    А на компьютерную переключается как-то странно. Нажимаю «компьютерная», страница остаётся мобильной. Зато следующая страница открывается полностью. ❓

    Ответить
    1. Евгения Куварина автор

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

  20. Kozak

    Оставить комментарии можно, ответить на чей-то комментарий нельзя. Нет кнопки «ответить» в мобильной версии.

    Ответить
    1. Евгения Куварина автор

      Это потому, что я отключила replytocom и они работают только в полной версии, так как там есть java-script. Борюсь с дублями 🙂

    2. Юрий Йосифович

      А что так много дублей нашли у себя, что решили так решительно с ними вести борьбу?

  21. Denis

    Женя я неузнал ваш блог, из за мобильного плагина у меня почему то загружается мобильная версия блога 😯 и лишь оставив коментарий меня перебросило на нормальную версию.Может в настройках нужно что то подкрутить? или ну его это плагин?

    Ответить
    1. Евгения Куварина автор

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

  22. Юлия

    Я тоже за присутствие мобильной версии, так как судя по статистике примерно третья часть пользователей заходят через мобильные гаджеты. Это я наблюдаю на своем сайте. Думаю, что со временем количество «мобильных» посетителей будет увеличиваться. Так что к этому нужно быть готовым. 😈

    Ответить
  23. Георгий Савин

    А у меня как-то не срослось с этим плагином! Наверно не подходит к моему шаблону! Может кто подскажет альтернативу этому???? заранее Благодарю!!!

    Ответить
    1. Евгения Куварина автор

      Георгий, альтернативой будет заказать мобильную версию или адаптативный шаблон, я как раз выбрала второй вариант и теперь не пользуюсь плагином

  24. Анна

    Я тоже за адаптивный шаблон. со временм хочу и старые сайты на них перевести. Как то пробовала ставить плагин с мобильной версией — конфликтовал с шаблоном темы.

    Ответить
  25. Александр

    Евгения, спасибо, всё получилось с 1м плагином.
    Вот только, как сделать чтобы видна была не только статья, но и сайдбар, который у меня слева?
    Там форма подписки, и другие важные вещи…

    И ещё вопросик — поделись пожалуйста, где и как заказывала адаптивный шаблон?

    Ответить
    1. Евгения Куварина автор

      Александр, про сайдбар не знаю. Шаблон я покупала у Гудвина Goodwinpress.ru

  26. Александр

    Я когда то пытался сделать свой сайт мобильным с помощью плагина, но у меня так и не получилось. Я думаю, что под определённые темы ещё нужно подбирать плагин. Евгения, а Вы этот плагин на разных темах тестировали?

    Ответить
    1. Евгения Куварина автор

      Александр, я тестировала на 2. Но недочеты все же были, поэтому и сменила дизайн на адаптативный

  27. Александр

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

    Ответить
    1. Евгения Куварина автор

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

    2. Руслан

      Пр помощи плагинов вообще можно всё сделать за пять минут, если сильно в настройках не ковыряться )))

  28. Руслан

    Плагин wptouch и сейчас стоит на одном моем старом блоге, который я забросил. Плагин хороший — со своей задачей справляется.
    Для своего текущего блога я решил не использовать плагины, прибегнул к помощи верстальщика, который сделал мне адаптивную верстку.

    Ответить
  29. Роман

    Подскажите как в плагине WPSmart Mobile правильно вставить статистику от Яндекса, а то вставил скопировав код счетчика, тот. который на веб версии, но он не отображает. Возможно редактировать как-то нужно код?

    Ответить
    1. Евгения Куварина автор

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