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

kak-sdelat-mobilnuyu-versiyu-sajta-na-wordpress-11Делаем ваш сайт доступнее! Сегодня вы узнаете о том, как сделать мобильную версию сайта на 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

Марина Белоусова

Преподаватель-эксперт в области прикладных социально-экономических программ Центра компьютерного обучения «Специалист» при МГТУ им. Н.Э. Баумана. Директор специальных и краудфандинговых проектов Российского агентства развития информационного общества. Владелец интернет-проектов под брендом Эксперт BTL.

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

  1. Андрей says:

    Здравствуйте.
    Подскажите пожалуйста, как мне сделать сайт объявлений на вордпресс. Нужно чтобы можно было настроить поддомены для регионов. (чтобы присвоить в яндексе регион). Вот нашел одну доску объявлений http://moskva.biglus.com/ с регионами, подскажите какой шаблон или плагин тут используется, нужно именно, чтобы поддомены работали как в указанном сайте. Я находил плагин для создания поддоменов, но там только для категорий, тоесть из категорий создаются поддомены, а мне так не нужно.

    • Марина Белоусова says:

      Андрей, попробуйте один из плагинов Ads-WordPress или Another WordPress Classifieds Plugin (AWPCP). Успехов! Расскажите потом, что получилось.

Поделитесь своим инсайтом

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>