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

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

Рассмотрим несколько популярных плагинов, которые помогут адаптировать сайт на WordPress для мобильных платформ:

Плагин JetPack

JetPack адаптирует сайт на WordPress для мобильных устройств нажатием одной кнопки. Отметьте “Включает мобильную тему JetPack” в блоке настроек “Расширения темы”. JetPack подойдет для мобильной адаптации блога и простого сайта.

Мобильный плагин Wiziapp

Wiziapp не только адаптирует сайт или блог для мобильного, но и конвертирует сайт в мобильное приложение. Причем это никак не влияет на отображение сайта на десктопах.

В меню настроек плагина “Themes” выберите одну из восьми представленных тем, которая будет отображаться на мобильных устройствах. При этом тема сайта со стационарного ПК или ноутбука останется прежней.

Чтобы просмотреть как будет выглядеть мобильное приложение конвертированное плагином, зайдите в блок настроек “Settings” и выберите “Simulate the App — Web Simulator”. Выберите нужную вам систему Android либо iOS.

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

Мобильный плагин WPtouch Mobile

Плагин WPtouch Mobile автоматически переделывает сайт для мобильных платформ и динамически загружает статьи с помощью технологии Ajax, поддерживая плавные переходы на сенсорных экранах устройств.

Чтобы посмотреть как будет выглядеть версия сайта адаптированная под мобильные платформы, нажмите в настройках плагина кнопку “Preview Theme”.

Платная версия под названием WPtouch Pro предлагает еще отдельную админ-панель и поддержку в системе тикетов.

Мобильный плагин WP Mobile Detector

Плагин WP Mobile Detector автоматически определяет модель смартфона пользователя и в зависимости от этого загружает для него одну из выбранных вами тем. При этом тема сайта со стационарного ПК или ноутбука останется прежней. У вас может быть несколько различных тем для различных устройств. Также плагин WP Mobile Detector автоматически меняет размер и разрешение картинок в зависимости от пользовательского дисплея. Плагин работает с более чем 5000 видов мобильных телефонов и смартфонов.

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

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

Мобильный плагин WP Mobile Edition

Плагин WP Mobile Edition , как и WP Mobile Detector, определяет популярные мобильные устройства и показывает контент в том разрешении и качестве, которое необходимо конкретному мобильному телефону. WP Mobile Edition создает мобильную версию на поддомене вида m.facebook.com с индивидуальными настройками и перенаправляет всех мобильных пользователей на него. Это необходимо для ускоренного кэширования и поддержки мобильных cookie.

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

Сделайте основные настройки плагина и задайте функции темы.

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

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

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

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

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

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

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

TOUCH Light Mobile WP Theme

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

BRAVE – A Dark Responsive Mobile Theme

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

Ultimate And Slate Mobile WordPress

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

HERO Mobile Theme And Web App

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

Resans WP Mobile Portfolio Theme

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

Spartan WP Theme For Mobile

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

Provocateur WordPress Theme For Mobile Devices

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

Troller Mobile WordPress Theme

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

Mobit Mobile WordPress Template

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

Metro Mobile WordPress Mobile Theme

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

Tiger Mobile Template WordPress Version

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

Mobilize – jQuery Mobile WordPress Theme

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

Сегодня я расскажу о том, как без плагинов и скриптов создать мобильную версию шаблона для вашего блога на WordPress. Ни для кого не секрет, что сейчас увеличивается количество людей, посещающих сайты с помощью смартфонов. Например, на одном из моих блогов около 2000 просмотров в месяц, а это 10-12% от общего числа, происходит с мобильных устройств. Кстати, это на 3% больше, чем посетителей с браузером Internet Explorer. Так почему, если на практически каждом сайте прописываются специальные теги для IE, не позаботиться и о пользователях мобильных телефонов?

Большинство современных для телефонов, с которых совершается просмотр сайтов, управляются OS Android или iOS, на Symbian в 90% случаев используется браузер Opera Mini (Mobile). А значит, браузеры для телефонов поддерживают CSS3, что мы и будем использовать при создании мобильной версии темы.

К особенностям браузеров мобильных устройств относятся:

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

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

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

Давайте теперь определимся, каким должен быть дизайн сайта для телефона :

• адаптированным под небольшое разрешение экрана
• предусматривать управление нажатием на сенсорный экран
• достаточно контрастным, чтобы хорошо отображался на ярком экране телефона
• одноколоночным, чтобы отсутствовала горизонтальная прокрутка
• “резиновым” – так как мы не можем предусмотреть все разрешения экранов

Шаг 1. Путь к мобильной теме в header.php

Во-первых, сделайте копию файла стилей вашей темы, и назовите ее style-mob.css.

Определяем мобильное устройство. Способ 1

Сейчас давайте немного изменим файл hearder.php. Найдите, где подключается файл стилей (обычно это первые несколько строк кода):

и замените ее на следующее:

Мы разделили все экраны пользователей на две группы: те, которые больше 640 px, и те, которые меньше. Если экран больше 640 px, то будет загружаться обычный файл стилей style.css, а если меньше, то style-mob.css.

Если вы решили использовать этот способ, то перед строками, которые вы только что вставили, необходимо добавить специальные строки для IE 6-8.

Да-да, телефоны поддерживают media=”screen and (max-width: 641px)”, а ослик до 9 версии – нет 😀

Определяем мобильное устройство. Способ 2

Есть второй способ. Можно задать значение media="handheld" для пути к “мобильному” стилю, и там прописать путь к файлу стиля для телефона:

В этом случае, если просмотр совершается с компьютера, грузится обычный стиль, а если с телефона, то style-mob.css. Я не проверяла, как это будет работать.

Шаг 2. Редактируем style-mob.css

Если вы использовали способ 1 для вставки файла стилей, то просто уменьшите окно браузера, чтобы увидеть, как ваш сайт выглядит с телефона! Если вы использовали способ 2, то временно замените его на способ 1, и сделайте то же самое:D. Ну, или просмотрите сайт непосредственно с телефона. На самом деле, первый способ хорош в процессе разработки мобильной темы , а второй – уже когда она готова к использованию.

Теперь откройте style-mob.css вашим любимым файловым редактором.

Я сделала такие правки:

• установила ширину страницы (body) в 100%, а блока с контентом (page) в 95%, чтобы сделать небольшие поля
• включила “видимость” для кнопки “поиск”
• увеличила размер шрифта, перевела все значения шрифтов в em
• убрала float:left для центральной колонки, чтобы шаблон стал одноколоночным
• и еще некоторые “косметические” правки

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

Если возникли какие-то вопросы, пишите, обязательно отвечу. И подписывайтесь на , чтобы не пропустить ничего интересного!

Любой качественный сайт должен иметь мобильную версию сайта, ведь мобильный трафик постепенно растёт, а отсутствие адаптивной верстки сайта приводит к отказом. Это так же заметили в Google, после чего было решено проверять сайты на наличие мобильной версии сайта, а с 21 апреля 2015 года и во все станет фактором для ранжирования.
Так как же сделать мобильную версию сайта, что бы избежать отказов и понижения позиций? Для решения этой проблемы существуют два способа. Первый способ — сделать адаптивную вёрстку, второй способ — сделать отдельный дизайн мобильной версии сайта. Так как мой сайт на WordPress покажу решения только для данного CMS движка.

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

Однако, если вы довольный своим шаблоном и вам не хочется плагинов, есть вариант сделать ваш шаблон растягивающимся без плагина, как мой. Для этого достаточно прописать в css — «width: 100%» . Ну а что бы дизайн не сильно растягивался добавить строчку:

#content {
max-width: 1280px;
}

Кроме этого в вашей теме картинки могут быть фиксированного размера и не растягиваться, исправляем это такими строками:

img, embed, video {
max-width: 100%;
}

Недостатки такого способа:

• Тяжело разместить каждый эллемент красиво для разных экранов.
• Медленная загрузка сайта из-за не сжатых картинок + подгрузки лишних не оптимизированных скриптов.

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

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

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

В чем недостаток этого способа:
1. По сути вы создаёте дубликат сайта, выходит что нужно наполнять 2 сайта, конечно можно сделать авторепостинг с помощью NextScripts: Social Networks Auto-Poster, но следить за двумя сайтами не практично.
2. Так как мобильная версия дублирует контент, поэтому нужно либо запрещать к индексации поддомен, тогда поисковики не оценят ваш труд. Либо прописывать в head — rel=»canonical», показывая что контент дублируется, однако в выдачи первой страницы m. версии уже не будут.
3. Как не стараться SEO оптимизация таких страниц превращается в тяжёлую работу, либо вы пишите уникальный контент для мобильной версии, либо не выйти в топ таким страницам.

Какие в этом плюсы:
1. Максимальная настройка юзабилити для мобильных телефонов, а это увеличение продаж, больше спрос, посещаемость, легче распростронить среди пользователей информацию.
2. Сумашедшая загрузка страниц, из-за того, что вы убираете лишние элементы сайта, загружается маленькие картинки, нету ненужных скриптов.

Порядок действий как сделать отдельную мобильную версию сайта WordPress:
1. Создаём поддомен (пример m.сайт) на хостинге;
2. Покупаем платный шаблон, либо создаём собственный для мобильных телефонов. Так же есть вариант организовать мобильную версию отдельно с помощь тех же плагинов, о которых писал в первом методе;
3. Загружаем заново весь контент, который должен быть на мобильной версии сайта;
4. Настраиваем индексации и прописываем необходимые параметры для поисковиков.
5. Настраиваем проверку на вход с мобильных устройств на основном домене и поддомене с помощью веб-сервера nginx.

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

Приветствую друзья. 2 февраля Яндекс анонсировал в своем блоге для вебмастеров новый алгоритм ранжирования сайтов в мобильном поиске – Владивосток. Суть его сводится к тому, что при запросах с телефонов поисковая выдача будет строиться с учетом адаптивности сайта к показу на маленьких экранах смартфонов.

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

В новом Яндекс Вебмастере, о котором я , есть функция проверки сайта на мобильность. С ее помощью можно проверить свой ресурс и на основании полученных результатов предпринимать какие-либо действия.

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

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

1. Создание отдельной мобильной версии сайта на поддомене или другом домене.
2. Использование адаптивной темы WordPress, которая автоматически меняет размеры и расположение элементов при открытии на маленьких экранах.
3. Применение разных тем оформления в зависимости от устройства – на компьютере будет один шаблон, для телефона другой (более простой и компактный).

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

Адаптивные темы для WordPress

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

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

WordPress плагины для мобильной версии сайта

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

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

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

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

1. WPtouch Mobile Plugin

Самый первый плагин для мобильной версии сайта, с которым я познакомился, он же и самый известный. Пример работы на моем сайте DmitriyZhilin.ru

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

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

Кроме цветовой настройки есть возможность указать устройства, для которых будет применяться плагин – “яблоки”, “андроиды”, “windows фоны” и т.д.

2. WordPress Mobile Pack

Как и предыдущий вариант, имеет одну бесплатную тему, а остальные открываются после приобретения PRO версии.

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

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

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

Чуть не забыл – необходима версия PHP вашего хостинга не ниже 5.3.0

3. Плагин Mobile Smart

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

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

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

4. WP Mobile Edition

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

• Минималистичный дизайн (показал максимальную скорость и адаптивность в PageSpeed Insights от Google)
• удобное меню, специально адаптированное к маленьким экранам,
• удобная главная страница с последними статьями,
• кнопка переключения на обычную тему из мобильной и шорткод для размещения кнопки перехода в мобильную версию из обычной (этого не было в рассмотренных выше).

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

Сам дизайн пока один, но он содержит несколько цветовых схем.

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

Какой плагин выбрать?

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

Сначала испытайте плагины с мобильными темами – 1, 2, 4. Если ни один из них вам не приглянется, то ищите хорошую тему с адаптивным дизайном и подключайте ее для мобильных пользователей плагином Mobile Smart (3), тут уж никаких ограничений нет – использовать можно любой шаблон.

Не забудьте про кэширование

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

У плагина Hyper Cache, настройки которого , есть специальная вкладка “Мобильный” и в ней нужно указывать, что кэш должен храниться отдельно для компьютеров и отдельно для телефонов. В той же статье я про эту настройку рассказывал. У других плагинов кэширования должны быть аналогичные настройки, без них смысла делать мобильную тему нет.