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

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

2. Responsive Widgets

Этот плагин предлагает новые текстовые/HTML виджеты WordPress, доступные только на гаджетах типа iPad, Nook, PlayStation Vita и других общих устройствах – планшетах и смартфонах.

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

• Mobile
• Mobile (landscape)
• iPhones and iPods
• Phablets
• Tablet (portrait)
• Tablet (landscape)
• iPad Portrait
• iPad Landscape
• Nexus Tablets
• Kindle Tablets
• Surface Tablet
• Nook Tablets
• PS Vitas
• Desktops
• Large Monitors (1240px+ screens)
• Print only

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

3. WP Lightbox 2

Очень популярный «lightbox» плагин для использования всплывающих в окошке изображений и галерей с эффектами наложения. Но имейте в виду, что этот плагин не решает задачу «адаптивности», а является сам по себе адаптивным.

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

4. Responsible

Чрезвычайно полезный WordPress плагин. С его помощью вы протестируете адаптивный дизайн в своем браузере, не отходя от кассы. В нем используется Viewport Resizer Bookmarklet для размещения фиксированной панели вверху страницы, где вы сможете изменить размер страницы для нужных адаптивных устройств (как например, смартфоны, планшеты, экраны стационарных ПК), а также устанавливать необходимые разрешения экрана.

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

Плагины для создания мобильных тем

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

5. WPTouch Mobile Plugin

Это, пожалуй, один из самых популярных бесплатных плагинов для создания привлекательного сайта в мобильной версии. На сегодняшний день его рейтинг составляет 3,9 из возможных 5 звезд. После установки и активации плагина вам будет доступна куча всяких классных функций, хотя многие пользователи могут ограничиться стандартным набором для создания мобильной версии сайта.

Но будьте осторожны! Еще в июле 2014 года стало известно об уязвимости версии плагина WPTouch 3. Она была тут же замечена и исправлена, но успела навредить многим сайтам, которые использовали данный плагин. Поэтому всегда следите за обновлениями плагина и заботьтесь о безопасности вашего сайта во всех его версиях.

6. WordPress Mobile Pack

Еще один лидер тем для мобильной версии сайтов на WordPress. Количество скачиваний плагина перевалило за 600 тысяч, а рейтинг составляет 3.8 звезд из 5 возможных. Его крутость состоит в замене классического дизайна на интерфейс мобильного приложения.

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

7. Jetpack

Этот плагин занимает лидирующие позиции по популярности среди подобных ему инструментов, это подтверждается поддержкой WordPress.com и Automattic. В нем есть очень полезная функция «Mobile Theme». Чтобы использовать ее, нужно зайти на страницу настроек (Jetpack → Settings) после установки и активации плагина. Действий минимум, а возможностей максимум. Вы убедитесь в этом сами, если выберите этот бесплатный плагин.

Единственный совет, который мы можем вам дать – это не использовать данный плагин с плагином Disqus, так как они не очень совместимы.

Заключение

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

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

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

7 лучших плагинов для адаптации под мобильные устройства

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

Использование мобильных тем

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

Jetpack

Довольно популярный плагин для веб сайтов на CMS WordPress, который позволяет установить мобильную тему. Для настройки необходимо установить плагин на свой сайт и зайти в раздел настроек (Jetpack – Setting). После этого активируйте функцию «Mobile Theme» и сайт будет адаптирован. Плагин распространяется бесплатно и позволяет адаптировать сайт с минимальным количеством действий.

Среди недостатков стоит выделить плохую совместимость с Discus, поэтому не рекомендуем использовать оба этих плагина одновременно.

WP Mobile Pack

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

WPTouch Mobile Plugin

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

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

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

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

Responsible

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

Теперь на страницах сайта будет отображаться специальная панель, которая позволит изменять размер в зависимости от устройства (планшет, смартфон, ПК).

WP Lightbox 2

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

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

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

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

Hammy

Один из самых удобных плагинов для WordPress, который позволяет создать адаптивный дизайн и правильно отображать сайт на мобильных устройствах. Установите и активируйте данный шаблон, после чего необходимо будет создать точки «останова» и указать для них HTML элементы. При этом для всех изображений будет изменен отображающий их тег. Вместо «img» всем картинкам будет присвоено значение «figure». Точка «останова» представляет собой ограничение размера изображения, при разном разрешении экрана.

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

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

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

Альтернативой использованию плагинов является создание адаптивного дизайна или использование адаптивной темы.

Сегодня я расскажу о том, как без плагинов и скриптов создать мобильную версию шаблона для вашего блога на 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 для центральной колонки, чтобы шаблон стал одноколоночным
• и еще некоторые “косметические” правки

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

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

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