15 бесплатных Wordpress плагинов для мобильного веб-сайта. Мобильная версия wordpress сайта


15 бесплатных Wordpress плагинов для мобильного веб-сайта / Wordpress плагины / Постовой

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

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

Mobile Smart
Плагин Mobile Smart позволяет вашему WordPress сайту автоматически переключать тему, если пользователь использует мобильное устройство.

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

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

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

Any Mobile Theme Switcher
Этот плагин определяет мобильный браузер, и отображает тему, настроенную администратором. Для разных устройств можно установить индивидуальные темы.

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

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

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

MobilePress
MobilePress — это плагин для WordPress, формирующий удобную мобильную версию вашего WordPress сайта или блога.

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

WordPress Mobile Pack
Целью этого плагина является расширение возможностей блогеров, издателей и других создателей контента. Поддерживается на различных устройствах, таких как iPhone, смартфонах с ОС Android, Windows Phone 8 и др.

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

Post Script Responsive Images
Этот плагин позволяет приводить изображения к нужному размеру прямо на ходу, а также автоматически трансформирует ранее загруженные изображения.

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

FV WordPress Flowplayer
Этот бесплатный, простой в использовании плагин является отличным решением для встраивания видео формата FLV или MP4 в ваши публикации или на страницы сайта.

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

Easy Responsive Shortcodes
Этот плагин обеспечивает полным набором простых в использовании шорткодов для создания столбцов, кнопок, вкладок, значков, и др. Он был разработан специально для использования в адаптивных темах, но также хорошо работает и в неадаптивных.

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

WP Smart Mobile Theme plugin
WP Smart Mobile Theme plugin формирует мобильную версию вашего WordPress блога, которая автоматически корректируется в зависимости от устройства.

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

Mobile Previewer
Этот плагин предоставляет зарегистрированным пользователям возможность предварительного адаптивного просмотра.

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

WP Responsive Menu
Используя этот плагин, можно для любых мобильных устройств с легкостью преобразовать свое wordpress меню в изящное sliding меню.

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

WP Mobile Detector Mobile Plugin
Плагин WP Mobile Detector Mobile Plugin автоматически определяет, использует ли посетитель сайта обычный мобильный телефон или смартфон, и соответственно загружает совместимую мобильную WordPress тему.

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

WP Mobile Edition
Плагин представляет собой полный инструментарий для «мобилизации» вашего WordPress сайта. Очень прост в использовании.

Wordpress плагины: 15 бесплатных Wordpress плагинов для мобильного веб-сайта

postovoy.net

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

 Время чтения:3 минуты

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

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

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

Плагин для создания мобильной версии сайта WPtouch Mobile Plugin

WPtouch

72 %Рейтинг

11949368Скачиваний

4.2Требуется

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

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

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

Плагин для создания мобильной версии сайта WordPress Mobile Pack

WordPress Mobile Pack – Mobile Plugin for Progressive Web Apps & Hybrid Mobile Apps

70 %Рейтинг

1083766Скачиваний

3.6Требуется

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

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

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

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

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

Плагин для создания мобильной версии сайта Mobile Smart

Mobile Smart

92 %Рейтинг

154535Скачиваний

3.1Требуется

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

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

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

Плагин для создания мобильной версии сайта WP Mobile Edition

WP Mobile Edition

80 %Рейтинг

239730Скачиваний

3.0Требуется

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

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

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

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

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

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

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

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

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

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

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

mainview.ru

Мобильная версия wordpress сайта

Мобильная версия сайта

Доброе время суток,если оно доброе, не знаю как у вас, но у меня что-то полный 3,14здец на работе — «почему ты не работаешь, как тебе говорят, я тебе задачу поставил еще в субботу и на почту скинул материал», только в субботу выходной был. Дома — что за зарплата (2900 грн. по курсу $ — 116) да, да, вот такая в МНС зарплата. Что-то я отклонился от тематики статьи, а она весьма интересная и актуальна на сегодняшний день мобильная версия wordpress сайта.Итак, рассмотрим, для чего это необходимо, как узнать оптимизирован ли сайт под мобильное устройство, как создать мобильный сайт для wordpress.

Мобильная версия своего сайта

Зачем необходимо оптимизировать сайт под мобильное устройство? Ответов на данный вопрос можно навести множество, к примеру, многие поисковые системы анализируют сайты, и дают оценкуне оптимизирован по мобильные устройствоВ результате чего могут понизить в ранжировании и выдачи той или иной ПС, а учитывая развитие мобильных и планшетных устройств, и сколько людей ими пользуются, вы будите терять целевой трафик, к тому же и посетителям будет неприятно просматривать ваш сайт из-за маленького шрифта, и плотности элементов.Проверить сайт как он отображается на мобильном устройстве можно здесьhttps://developers.google.com и тутhttps://www.google.com/webmasters/tools/mobile-friendly/удобство на мобильном

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

Оптимизировать сайт для мобильных устройств

Итак, если после проверки своего сайта на удобство у вас показало 40% стоит задуматься про его оптимизацию под мобильные устройства, здесь можно выбрать два варианта.Первый заказать на фрилансе или погуглить и найти в рутине человека, который вам это сделает, стоимость от 30 до 60 зеленных долларов.Второй способ разобраться самостоятельно, а пока будите разбираться использовать плагин WPtouch Mobile Plugin который на первое время (может и на постоянно) отображать удобство на 100% и это бесплатно.

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

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

Переходим в раздел ► Базовые настройки здесь все довольно просто и понятно (указываем название сайта, все остальные пункты оставляем без изменений). Снизу имеется кнопка для просмотра заданных настроек, используем.WPtouch Mobile PluginПереходим в следующий пункт ►Темы и расширения учитывая, что мы используем бесплатный плагин, вам будет доступна только одна тема Bauhaus 1.4.6 другие темы pro стоят от 40 $.Переходим ► Настроить откроется вкладка с параметрами Bauhaus здесь будет 5 подменю смотрим на скриншотпараметры настройкаОбщие — устанавливаем сколько желаете вывести на блоге записей, исключить категории указав id категории через запятую в результате чего данная категория и статьи которые в ней имеются не будут отображаться на главной, с другими пунктами в этом подменю проблем точно не будет.Фирменная символика — здесь весьма интересный раздел задаем (выбираем цвет) устанавливаем специальное изображение, прописываем ссылки для установки кнопок социальных сетей.иконки для мобильного сайта Остальные три подменю только для версии pro.

Переходим ► меню здесь буду подменюMobile

Тематика меню — выбираем свое меню которое у вас создано и отметьте использовать значки, значки для меню задаются в Menu lcons перетянув мышьюиконки на менюсохраняем, в итоге получим неплохое оформленное меню и в целом бесплатную версию мобильного сайта.Mobile PluginУдачи.

С уважением, Андрей Юрийчук

zarobitok.ru

Плагин мобильной версии wordpress — ТОП

Здравствуйте !

В данной статье я буду рассказывать про плагин мобильной версии wordpress, который позволит вам адаптировать ваш сайт wordpress под мобильные устройства. Раньше, задача создания мобильной версии сайта, казалось мне просто не реальной и не выполнимой, в голове просто не укладывалось как можно самому сделать такое. Но, как я люблю говорить — то что вчера казалось невозможным, сегодня уже обычная реальность. Сейчас, чтобы адаптировать сайт wordpress под мобильные устройства, мне хватит 2-3 часа, чтобы установить и настроить нужный плагин, никуда не торопясь.

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

Установить данный плагин вы сможете прямо из своей админ-панели wordpress. Перейдите по вкладке: Плагины — Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте открывшийся плагин.

 

18-10-2015 08-52-28

 

Чтобы начать настраивать плагин, перейдите по вкладке: WPSmart.

 

18-10-2015 09-31-01

 

Разберём настройки:

Settings.

— Site Title, укажите здесь название вашего сайта, которое будет отображаться в мобильной версии.

— Site Logo, здесь можно загрузить логотип для мобильного сайта. Оптимальный размер логотипа — 400 на 50 пикселей. Если вы используете логотип, то название сайта отображаться не будет.

— General.

Enable search from site header, включает поиск из шапки сайта, если стоит галочка.

Enable commenting in posts, включает комментирование в постах, если стоит галочка.

Custom front page, здесь можно выбрать главную страницу для мобильной версии.

— Post settings.

Show post author and date, если стоит галочка, то к каждой записи будет показываться автор и дата.

Show tags when viewing a post, если поставите галочку, то при просмотре поста будут показываться теги.

Show categories when viewing a post, если поставите галочку, то будут отображаться категории при просмотре поста.

Show image thumbnails in post listings, отображение миниатюр изображений в пост-листинге. Для некоторых тем не доступно.

Show featured images on post pages, показать избранные изображения на страницах постов.

— Analytics, можно включить аналитику от гугл, если она у вас установлена на сайте. Если используете другую аналитику, выбирайте значение — Custom.

— Advertising, можно включить показ рекламы от гугл адсенс, если используете. Либо свою рекламу — custom.

В конце Сохраните настройки, нажав на кнопку — Save All Changes.

 

18-10-2015 10-01-55

 

Themes.

На данной странице вы можете выбрать Тему для вашего мобильного сайта. Вам будет предложено 3 варианта на выбор, чтобы посмотреть как будет выглядеть ваш сайт на мобильных устройствах, нажмите вверху, справа, на вкладку — Preview (для темы, которая установлена по умолчанию). Если вы хотите установить другую тему, то выберите внизу тему и нажмите на вкладку: Live Preview — для просмотра темы, Activate — для активации темы.

 

18-10-2015 10-04-02

 

Appearance.

— Site Font, здесь можно выбрать шрифт для мобильного сайта.

— Site Background Color, здесь можно выбрать цвет фона для мобильного сайта.

— Site Header Background Color, здесь можно выбрать цвет фона для шапки мобильного сайта.

— Site Header Text & Icon Color, здесь можно выбрать цвет для текста в шапке сайта и цвет значка.

— Site Header Trim Color, здесь можно выбрать цвет верхней границы сайта.

В конце не забудьте Сохранить настройки.

 

18-10-2015 10-32-32

 

Menu.

— Enable drop-down pages/links menu, поставьте здесь галочку, чтобы включить меню.

— Available Menus, выберите меню для мобильного сайта и нажмите на кнопку — Update Menu.

— Custom Links, здесь можно добавить ссылку в меню. Укажите URL ссылки и Label текст ссылки.

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

— Categories, можно добавить категории в меню. Отметьте галочками категории, которые будут отображаться в меню и нажмите на кнопку — Add to Menu.

В конце не забудьте Сохранить настройки, нажав на кнопку — Save All Changes.

 

18-10-2015 13-11-18

 

 

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

 

 

info-effect.ru

info-effect.ru

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

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

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

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

А вот, кстати, один из сервисов можно найти по ссылке — https://www.google.com/webmasters/tools/mobile-friendly/, который позволяет проверить, настроен ли ваш сайт или блог под просмотр на мобильных устройствах.

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

Мобильная версия сайта

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

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

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

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

Плагины: быстрый способ сделать вашу тему под мобильные устройства

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

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

ПЛАГИН WPTOUCH

Плагин WPtouch можно найти по ссылке — https://wordpress.org/plugins/wptouch/, имеет как платную, так и бесплатную версию, преобразует вашу существующую тему и отобразит только контент блога, без показа какой-то другой информации, но результатом будет адаптивная версия со стабильным и простым для чтения дизайном.

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

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

WORDPRESS MOBILE PACK

Плагин WordPress Mobile Pack, который находится по ссылке https://wordpress.org/plugins/wordpress-mobile-pack/ обладает различными цветовыми вариантами и может использоваться как переключатель на мобильную версию, если вы хотите чтобы ваша тема была полностью настроена под мобильные устройства. Он также позволяет редактировать ваши посты из мобильного приложения, хотя данная возможность распространяется только на некоторые мобильные приложения под Андроид или Apple.

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

Также плагин позволяет:

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

Темы для мобильных устройств — следующий уровень

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

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

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

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

Отдельная мобильная версия блога

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

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

Ниже я привожу порядок действий, позволяющий осуществить данный тип:

  • Создаем поддомен (к примеру m.seodengi.ru) на своем хостинге;
  • Приобретаем шаблон с адаптированным дизайном под мобильные устройства. При этом существует возможность преобразовать мобильную версию отдельно с помощью описанного выше плагина WordPress Mobile Pack;
  • Переносим весь контент с сайта, который следует разместить на мобильной версии;
  • Производим настройку индексации и прописываем нужные параметры под поисковые системы;
  • Производим настройку под вход с мобильных устройств на основном домене и поддомене.

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

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

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

#content{ max-width: 1280px; }

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

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

К недостаткам данного способа можно отнести:

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

Заключение

Вот что мы рассмотрели в данной статье:

Четыре различных способа сделать мобильную версию сайта WordPress адаптивной под мобильные устройства:

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

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

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

С уважением, Сергей Хожаков

seodengi.ru

Мобильная версия сайта на Wordpress с помощью плагина WPtouch бесплатно

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

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

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

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

Существует два варианта плагина WPtouch (бесплатная версия) и WPtouch PRO (платная версия). Но в принципе на первых порах для нормальной работы вам будет достаточно и бесплатной версии. Поэтому давайте сейчас и разберем, как сделать мобильную версию сайта WordPress с помощью бесплатной версии плагина WPtouch.

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

Делаем мобильную версию сайта с помощью Wptouch

 

Итак, переходим непосредственно к установке и настройке плагина.Установка начинается как обычно с загрузки плагина. Как загружаются плагины, я думаю, вы уже знаете. Но вкратце все, же напомню. Заходим в раздел «Плагины», «Добавить новый». Потом в строке поиска набираем название WPtouch и когда система находит необходимый плагин нажимаем кнопку «Установить». Все плагин установлен.Теперь переходим к обзору и настройке.

Настройка мобильной версии WordPress

Начнем с раздела «Меню».

Заходим в раздел Меню плагинаЗаходим в боковой панели сайта в строку «WPtouch», «Меню». Здесь есть три закладки:

  • «Тематические меню» — можно выбрать, что конкретно будет в вашем меню и где оно будет вверху или внизу;Настройка меню
  • «Настройка меню» — для каждой рубрики на вашем сайте можно подобрать и поставить соответствующую картинку;Загрузка и наборы значков
  • «Загрузка и наборы значков» — здесь загружаются все иконки, можно загрузить абсолютно любую иконку или воспользоваться какой-нибудь из уже существующих. Продолжаем выбирать значки для мобильной версии сайта

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

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

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

И вот так (когда запись открыта):

Отображение при открытой записи

Параметры темы

Что здесь нужно настроить:

  1. Общие
  • количество записей в списках блога — я рекомендую показывать 7 статей;Количество записей в мобильной версии WordPress
    • исключенные категории – здесь можно исключить те категории, которые вы не хотите, чтобы они были видны в мобильной версии;
    • исключенные теги – тоже можно исключать лишние вам не нравящиеся теги;
    • далее настраиваем так называемый тип привюшек (эскизы записей) – я рекомендую поставить «Список блога, одиночные записи». Достаточно удобная штука;
    • потом ставим такие галочки как: «Показать категории записей и теги», «Показать дату публикации», «Показывать кружочки с комментариями на публикациях», «Показывать поиск в колонтитуле».
    • ставим галочку «Показать комментарии на страницах».опции отображения
    • в графе «Готовый слайдер» ставим галочки:
    • включить готовый слайдер;
      •  автоматический слайд;
      • популярные записи на линейке также отражены в листингах;
      • и в рамочке выбрать « Показать последние посты».

Настройка готового слайдера

  1. Фирменная символика.

Здесь есть возможность:

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

Ну, в принципе и все. Остальные закладки этого раздела на данном этапе вам не понадобятся.

Базовые настройки мобильной версии сайта на Вордпресс

  1. Общие
  • название и автор сайта – заполняем;Базовые настройки - заполняем название сайта
  • определение региона – выбираем русский язык;
  • режим отображения ставим нормальный;
  • начальная страница – отмечаем любой приглянувшийся вам пункт. У меня, например, стоит пункт «Выбрать из страниц WordPress»;Выбор начальной страницы
  • режим администратора – оставляем по умолчанию.Режим администратора
  1. Совместимость

Здесь есть возможность сделать исключение:

  • короткие коды – исключать будете, когда это вам уже понадобится, вы это поймете. Потому, что есть такие коды в ваших статьях, которые можно убрать, например запуск видео и т.д. Но в принципе данное меню лучше не трогать;
  • filter URLs — это более интересная и применимая функция. Вносимые сюда страницы при загрузке мобильного приложения не будут изменяться;
  • заданные агенты пользователя – данной функцией я не пользовалась и, честно говоря, не совсем понимаю, для чего она предназначена.Режим совместимость

Раздел «Темы и Расширения»

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

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

smarticle.ru

Мобильная версия сайта на wordpress

Мобильная версия сайта на wordpress с помощью плагина wptouchМобильная версия сайта для wordpress. В данной статье я расскажу вам как устанавливается и настраивается мобильная версия сайта на wordpress. Ранее время от времени мне на e-mail приходили письма со следующим вопросом: установлена ли у вас мобильная версия сайта. Я как-то поначалу не придавал этому значения, но после прочтения горы информации, о плюсах этой версии, решился, и установил себе такую вот понимаете мобильную версию :-).

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

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

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

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

Для настройки, в меню боковой панели «параметры», ищем wptouch  и открываем его. Ниже показано окно настроек, на котором Вы окажетесь, его нужно настроить следующим образом.

Я свой сайт настроил, так как показано на скриншотах ниже.

Общие настройки:

Мобильная версия сайта для wordpress

Дополнительные параметры:

Мобильная версия сайта, настройка

Настройка уведомлений и настройка цвета:

Мобильная версия сайта

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

И последний пункт настроек, вы можете подредактировать, так, как вам нравиться, но это так же не принципиально.

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

Мобильная версия сайта для wordpress, настройка плагина

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

Ну что, мобильная версия сайта у вас, теперь настроена. Примите мои поздравления  ➡  .

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

«Хочешь быстро стартовать в Интернете?»

Смотри как это делать

«Есть еще! Смотрите» Форма2

vi-internet.ru