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

Делаем ваш сайт доступнее! Сегодня вы узнаете о том, как сделать мобильную версию сайта на wordpress для пользователей, которые заходят в Интернет с мобильных устройств. Для этого мы используем сервис dudamobile.

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

Напомню, что на прошлом занятии мы с вами сделали поиск по сайту и улучшили его с помощью плагина. Заходим на сайт http://my.dudamobile.com. Можете зарегистрироваться или авторизоваться через Фэйсбук. В поле вводим адрес своего сайта (URL)и жмем на синюю кнопку Make my site mobile!

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress

В открывшемся окне вы увидите свой сайт в мобильном телефоне.

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-2

Без вашего участия автоматически запускаются настройки: Дизайн (Design), Редактировать страницы (Edit Pages)и Опубликовать свой сайт (Go live). Начнем с Дизайна.

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

1. Макет (Layout). Выбираете тип навигации: список, матрица, расширяющийся, нижний, верхний; затем стиль.

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-3

2. Стиль (Style). Здесь настраиваете цветовую палитру, выбираете фоновое изображение, настраиваете стиль шрифтов. В основе предложенных вариантов цветовой палитры всегда лежат основные цвета вашего сайта, либо гармоничные с ними цвета – более 10 вариантов. Фоновое изображение можно загрузить со своего сайта, стороннего ресурса или выбрать из предложенных. Смело экспериментируйте, потому что удалить будет просто.

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-4

3. Заголовок (Header). Автоматически подгружается эмблема сайта. Ее можно заменить другим изображением или текстом. Изображение ровняется по правому, левому краю или центру; регулируется его размер.

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-5

На изображении доска объявлений Лучшие вакансии студентам и выпускникам, ее мобильная версия. Здесь установлены:

  • Макет: список прозрачный с иконками (customize).
  • Стиль: Без фонового изображения. Стиль шрифтов – базовые настройки.
  • Заголовок: 50% от загруженного, выровнен по центру, цвет фона изменен.
Редактирование страниц – как сделать мобильную версию сайта на wordpress

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

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-6

Публикация – как сделать мобильную версию сайта на wordpress

Перед публикацией мобильной версии сайта вам предлагается тарифный план: бесплатно или за $9 в месяц. Бесплатная версия включает: загрузку 10 страниц, просмотр 500 страниц пользователями; платная: неограниченное число страниц и просмотр, круглосуточную техническую поддержку со стороны dudamobile, вызов мобильной карты, доменное имя – ваше впереди которого будет буква m. На первом этапе работы сайта эти дополнительные функции не нужны, поэтому выбираете бесплатный тарифный план и нажимаете синюю кнопку.

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-7

Открывается окно, которое предлагает вам настроить переадресацию сайта. На первом шаге скачиваете плагин, загружаете его на сайт. На 2-ом шаге – активируете. После активации нажмите синюю кнопку «Yes» Да. Ваша мобильная версия готова!

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-9

Теперь вы знаете, как сделать мобильную версию сайта и ваш сайт получит дополнительный трафик. (На миниатюре в начале статьи вы видите мобильную версию доски объявлений “Лучшие вакансии студентам и выпускникам”.

Руководство для первокурсника: как сделать мобильную версию сайта на wordpress

Оцените статью
Дом нашей мечты
Добавить комментарий