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

Содержание

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

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

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

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

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

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

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

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

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

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

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

Примером адаптивного шаблона может послужить текущая тема моего блога BiznesSystem.ru.

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

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

Поделиться в соц. сетях:Ссылка на эту страницу:https://garnitsin.online/blog/sait-na-wordpress/mobilnaya-versiya-sayta-wordpress/

Встроить HTML код видео:

Закрыть

Аль Капоне, Миша Япончик или ребята из Острых Козырьков примерно 100 лет назад вряд ли задавались вопросом что такое мобильная версия сайта wordpress. Скорее всего, их интересовала мобильная версия ограбления.

В наши дни для доблестных воинов интернета часто приходится решать подобные задания.

Коль вы столкнулись с такой задачей, уважаемый читатель, то давайте же рассмотрим варианты решений.

Мобильная версия сайта wordpress — как сделать свой сайт адаптивным

Мобильный сайт — какой должен быть?

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

Мобильная версия сайта wordpress — что такое мобильный сайт?

Адаптивная верстка

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

Будь то Ipod, Iphone, Android или телевизор Samsung, ваш сайт должен выглядеть опрятным везде и всегда.

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

Адаптивный дизайн

Судя по всему, адаптивный дизайн сайта относится к факторам первостепенной важности.

Ведь в 2018 году мало кому будет приятно зайти в своем телефоне на какой-то сайт и увидеть там микроскопическую картинку вместо приемлемого стандартами размеров шрифтов информативно полезного текста.

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

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

Адаптивный дизайн — Мобильная версия сайта wordpress

Адаптация сайта под мобильные устройства

Этот вопрос был хитом еще, наверное, лет 5 назад. Сейчас адаптировать сайт, особенно на WordPress, не сможет только полный профан.

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

Мобильная версия сайта — адаптация сайта под мобильные устройства

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

Давайте начнем по порядку.

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

Наверняка, они знают свое дело на приличном уровне.

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

Мобильная версия Яндекс и Вконтакте

Рассмотрите внимательно эти сайты:

мобильная версия вк — https://m.vk.com
мобильная версия яндекс — https://mobile.yandex.ru

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

Вконтакте и Яндекс — Мобильные версии

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

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

Ответьте на этот вопрос, перейдя по ссылкам на следующие ресурсы от главных Грандов Интернет-индустрии:

Google Search Console
Яндекс Вебмастер
Bing Mobile Test
ВебМарк

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

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

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

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

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

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

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

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

А если самописная или древняя тема, то мобильную версию WordPress можно организовать так:

Плагин

Используйте популярные и с постоянной адекватной поддержкой плагины.

Среди них могу выделить Jetpack и WPtouch.

Видео об этих 2-х плагинах смотрите ниже.

Без плагина

Если решили сделать без плагина, то отлично. Профессиональный подход.
Добавьте в файл стилей несколько незамысловатых строк медиа-запросов (типа, @media screen and (max-width: 768px){…}), и будет вам счастье.

Или подключите свой mystyle.css в файле шаблона и спокойно контролируйте адаптивность через FTP.

Только не забывайте учитывать моменты обновлений движка WordPress.

Как поступить лучше, — вам виднее.

На поддомене

Можно сделать на поддомене отдельную быструю легкую версию сайта.

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

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

WordPress

В WordPress адаптация настроена со старта.

О, мой уважаемый читатель!

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

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

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

Сегодня, как говориться, — в Вордпресс все включено.

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

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

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

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

Ответ по настройке можно найти в следующем плейлисте:

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

Woocommerce мобильная версия

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

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

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

Wptouch

Пожалуй, самый популярный плагин для реализации мобильной версии сайта на WordPress — плагин WPtouch.

В следующей подборке видео дан обзор, рассмотрена установка и настройка плагина WPtouch.

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

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

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

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

Для среднестатистического сайта на WordPress с головой хватает обычного хорошо настроенного адаптивного шаблона.

А если у вас wordpress-сайт с посещаемостью 20 000 или более человек в сутки, то вы бы врядли чиали эти строки.

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

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

Такой вопрос иногда проскакивает тоже.

Ну… Смысл отключить?.. Взять и отключить. Как включали, так и отключите.

Или скажите тому, кто включал. Он все отключит.

И зачем тогда было настраивать…

Да и вообще — странный вопрос. Почему то таких аж 15 раз в месяц фигурирует в вордстате.

Может не нужно было и затрагивать?..

Ладно, проехали.

Идем далее.

Мобильная версия сайта wordpress — как отключить?

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

Adobe Muse — удивительная разработка корпорации Adobe для создания сайтов любой сложности и любого назнаения.

В этом видео рассмотрено создание мобильной версии сайта в программе Adobe Muse.

Мобильная версия сайта — программа Adobe Muse

Если у вас Не WordPress

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

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

На этом завершаю.

Удачных событий и свершений.

И, как всегда, — задавайте побольше правильных вопросов и находите правильные ответы.

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

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

 

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

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

Мобильная версия сайта 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 плагинов для мобильного веб-сайта

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

24 Сен 2019

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

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

Зачем вообще делать мобильную версию сайта? Почти каждый житель планеты носит с собой мобильное устройство определенной марки. Даже дети играют в игры и смотрят YouTubee на планшетах и смартфонах. Поскольку у большинства людей есть мобильный телефон, с большой долей вероятности они читают на нем чей-то блог или сайт. Скорее всего ваш сайт также просматривают со смартфонов, и если не проведена мобильная оптимизация, пользователь видит некорректно работающий ресурс.

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

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

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

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

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

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

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

Мобильные плагины для WordPress

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

Плагин JetPack (мобильная тема)

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

Чтобы создать мобильную версию сайта, нужно просто включить модуль «Мобильная тема». Для этого установите и активируйте плагин JetPack, перейдите в настройки плагина и активируйте модуль «Мобильная тема»:

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

Адаптивные таблицы WordPress

Плагин JetPack адаптирует все элементы сайта, кроме таблиц, которые продолжают некорректно отображаться на мобильных устройствах даже после активации мобильной темы. Чтобы это исправить, достаточно установить и активировать плагин «Make Tables Responsive». Настроек в плагине нет, после его активации все таблицы на сайте станут адаптивными для всех мобильных устройств. Вот так таблицы выглядели до установки плагина «Make Tables Responsive»:

А вот так выглядят таблицы после установки плагина:Соответственно, чтобы создать мобильную версию WordPress сайта в автоматическом режиме, нужно установить и активировать два плагина: «JetPack» (с последующим включением модуля мобильная тема) и «Make Tables Responsive» (адаптивные таблицы в WordPress).

Как в Google исправить проблемы категории «Удобство для мобильных»

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

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

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

Google Webmaster обнаружил три ошибки: контент шире экрана, интерактивные элементы расположены слишком близко и слишком мелкий шрифт. Давайте разбираться, как устранить эти проблемы.

Ошибка: Контент шире экрана. Баннеры в шапке сайта, видео ролики с Ютуба и блоки контекстной рекламы выходят за рамки экрана:Ошибка: Интерактивные элементы расположены слишком близко. В подвале сайта блок контекстной рекламы расположен сверху навигационных ссылок, тем самым закрывая их:Ошибка: Слишком мелкий шрифт. Эта ошибка – следствие двух предыдущих. Поскольку контент шире экрана, пользователь должен увеличить масштаб, из-за чего шрифт текста становится слишком мелким. Устранение первых двух ошибок автоматически скроет данную ошибку.

Что сделал я, чтобы исправить проблемы «Удобство для мобильных»? Установил два вышеописанных плагина. В итоге Google Webmaster перестал ругаться, подтвердив исправление ошибок:Примечание. Также на сайте тестировались плагины «WPtouch» (мобильная версия) и «Automatic Responsive Tables» (плагин таблиц). Однако оба этих плагина не смогли решить поставленных перед ними задач. «WPtouch» не смог создать мобильную версию сайта, а после установки плагина «Automatic Responsive Tables» таблицы не адаптировались под мобильные устройства.

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

Опубликовано в Как создать сайт. Пошаговая инструкция
Советую посетить следующие страницы:
Как сделать таблицу в WordPress
Обзор хостинга TimeWeb
Как установить капчу на сайт
Обзор плагина All In One SEO Pack
Необходимые плагины для WordPress

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

(Последнее обновление: 08.07.2016)

Привет, дамы и господа! Продолжаю серию постов о том, как создать мобильную версию сайта WordPress? Ведь это сегодня очень важно так как, в Яндекс и Google Поиске работает алгоритм оптимизации. Поэтому в верхних строчках поиска будут только сайты с мобильной версией. Сегодня у нас будет пост о Jetpack Mobile: Мобильная версия сайта WordPress с плагином Jetpack.

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

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

Супер плагин Jetpack by WordPress.com, о котором я написал когда он стал доступен и для сайтов размещенных на собственных доменах, хорошо известен вам. Немного напомню на всякий случай, для тех, кто в первые слышит о нём, что установив на сайт данный многофункциональный плагин Jetpack WordPress, вам можно удалять ранее установленные плагины. И знаете почему? А потому, что в состав модуля Jetpack входит целый набор всевозможных плагинов, с помощью которых вы можете расширить и дополнить мощными функциями свой сайт WordPress. Вообщем, один плагин имеет более 30 нужных модулей. Модули для лучшего управления и поиска необходимого, разделены на 8 рубрик, таких как: внешний вид; фотографии и видео; социальные; разработчикам и другие. Во как:

Плагин jetpack by wordpress comПлагин jetpack by wordpress com

Модули плагина Jetpack by WordPress по категориям

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

Плагин jetpack by wordpressПлагин jetpack by wordpress

Набор модулей входящих в плагин jetpack by wordpress

Прошу прощения, не могу удержаться, пожалуй перечислю некоторые полезные и нужные модули входящие в плагин Jetpack:

Enhanced Distribution — Jetpack будет автоматически оповещать (пинговать) сторонние сервисы, например, поисковые системы, о контенте, опубликованном на сайте;

Форма обратной связи — хороший способ дать возможность своим читателям быть на связи, не давая при этом свой личный адрес электронной почты;

Extra Sidebar Widgets — добавляет на сайт дополнительные виджеты. Каждый из них имеет ряд настраиваемых функций;

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

Monitor сайта — никто не любит простоев. Средство Jetpack Monitor позволяет сохранять вкладки на вашем сайте, проверяя их каждые пять минут. При возникновении сбоя вы получите уведомление по электронной почте. Таким образом, вы сможете быстро принять все необходимые меры для восстановления доступа к сайту!;

Site Verification — этот инструмент, чтобы подтвердить право владения и управления сайтом на сторонних сервисах, например, Google, Bing и Pinterest. Проверка сайта позволяет получить доступ к возможностям дополнительных сервисов (например, Инструменты для веб-мастеров от Google или просто получить значок подтвержденного аккаунта). Для этого просто добавляется невидимый meta-тег в исходный код главной страницы сайта;

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

Widget Visibility — выберите, на каких страницах должны отображаться ваши виджеты, с помощью функции «Видимость виджетов»;

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

Похожие записи — Функция «Связанные записи» используется для показа дополнительных ссылок под вашими записями;

Комментарии Jetpack — комментарии дают возможность посетителям использовать их аккаунты от WordPress.com, Твиттера и Фейсбука, чтобы оставлять комментарии на сайте.

И многие, многие другие полезные функции для вашего сайта. Просто великолепный плагин, всё в одном.

А теперь, друзья, вернёмся к нашим баранам, то есть, к нашей сегодняшней теме:

Как создать мобильную версию сайта WordPress с помощью плагина Jetpack by WordPress

Мобильная версия сайта запросто делается с помощью многофункционального плагина Jetpack by WordPress.com. Стоит только активировать нужную функцию «Мобильная тема»:

Мобильная тема от Jetpack оптимизирована для маленьких экрановМобильная тема от Jetpack оптимизирована для маленьких экранов

Мобильная тема для сайта WordPress

Мобильная версия сайта WordPress — мобильная тема от Jetpack оптимизирована для маленьких экранов. Она использует изображение заголовка, фон и виджеты из текущей темы для лучшего отображения. Формат записей поддерживается, если он активен в текущей теме, так что ваши фотографии и галереи будут фантастически выглядеть на смартфоне.

Посетители с iPhone, Android, Windows Phone и других мобильных устройств автоматически увидят мобильную тему с возможностью переключиться на полный сайт. К стати будет сказано, данный плагин Jetpack WordPress входит в тройку рекомендованных Google, чтобы оптимизировать сайт для показа на мобильных устройствах. Читайте о них тут и здесь.

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

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

Jetpack от WordPress→ Настроить Мобильная тема

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

Проверка удобства просмотра на мобильных устройствахПроверка удобства просмотра на мобильных устройствах

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

А вот так выглядит страница со статьёй на телефоне:

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

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

Ну вот, дорогие друзья, мы и узнали с вами, как оптимизировать сайт для мобильных устройств с помощью плагина jetpack by wordpress com. Надеюсь, для вас было полезно. А я на этом, с вами прощаюсь, не на долго. Всего хорошего и удачи всем вам.


Как сделать мобильную версию сайта 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 с преобразовать в сайт, который будет отлично смотреться на мобильных устройствах. Далее развиваясь в этой теме, вы помимо создания мобильной версии сайта, возможно захотите, чтобы ваш контент также был преобразован под мобильные устройства.

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

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

Wordpress плагины: Плагины для создания мобильной версии сайта на WordPress - ТОП 6

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

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

WPtouch
При скачивании и активации WP Touch, на сайте устанавливается простая и быстрая в загрузке мобильная тема, не затрагиваются URL и вложенный контент. Заметим, что плагин для мобильных устройств WordPress WP Touch находится в числе рекомендаций Google, поэтому с его установкой сайт получает больше шансов подняться вверх в выдаче. Неудивительно, что количество его скачиваний превысило 6 миллионов. Если в бесплатной версии имеется всего одна мобильная тема, то в премиум-версии вы найдете сразу семь отличных тем. WP Touch предоставляет следующие функции:
  • Исключение или включение отдельных страниц.
  • Изменение и управление меню.
  • Возможность для проведения А/В тестирования
  • Размещение рекламы.
  • Опция мобильного кеша.
  • Возможность переключения между стандартной или мобильной темой.

Wordpress плагины: Плагины для создания мобильной версии сайта на WordPress - ТОП 6
Wp Super Cache
Кеширование разрешает существенно снижать нагрузку на хостинг. Практика показывает, что плагин мобильной версии WordPress Wp Super Cache позволяет ускорять генерирование страничек в 10 раз, ведь отображение контента после его установки требует уже минимум ресурса. Данный инструмент идеально подходит для новичков, его работа требует минимальных настроек. Даже не вникая в технические тонкости кеширования, можно оптимизировать свой сайт, просто активировав данный плагин.

Wordpress плагины: Плагины для создания мобильной версии сайта на WordPress - ТОП 6

Jetpack
Следующий плагин Вордпресс для мобильной версии сайта — Jetpack, он предлагает более широкий выбор настраиваемых функций, чем Wp Super Cache. Ознакомившись с его преимуществами, можно сделать вывод, что Jetpack способен заменить сразу несколько плагинов:
  1. Плагин отображает в конце просмотра страницы статьи с похожим контентом, стимулируя рост внутренних переходов по сайту.
  2. Отображение статистики сайта.
  3. Автоматическая публикация сообщений в соцсетях.
  4. Создание файлов XML Sitemaps.
  5. Мониторинг работы ресурса с интервалом от 5 минут.
  6. Наличие удобной контекстной боковой панели и раздела комментариев.
  7. Создание контактных форм.

Wordpress плагины: Плагины для создания мобильной версии сайта на WordPress - ТОП 6
Auto Optimize
Главная фишка плагина Auto Optimize – способность сокращать время загрузки до 30% путем оптимизации базы данных, своевременного удаления кеша и объединения скриптов. Плагин имеет поддержку работы с изображениями формата webp.

Wordpress плагины: Плагины для создания мобильной версии сайта на WordPress - ТОП 6

Hummingbird – Speed Up WordPress
Если вам требуется быстрая мобильная версия Вордпресс, то плагин Hummingbird может оказаться хорошим решением. Этот инструмент производит сканирование ресурса, и, после обнаружения проблемных моментов, предлагает лучшие варианты для исправления в «один клик». Рассмотрим его особенности:
  1. Настройка загрузки файлов, изменение их порядка, объединение и сжатие файлов.
  2. Использование программы GZIP для улучшения передачи HTML, таблиц и JavaScript.
  3. Хороший функционал для быстрой обработки страниц, изображений, кеширования в браузере.

Wordpress плагины: Плагины для создания мобильной версии сайта на WordPress - ТОП 6
Asset CleanUp: Page Speed Booster
Большинство плагинов внедряют свой код на каждой странице сайта, независимо от того, используются ли они на этой странице. Для повышения скорости загрузки контента можно запретить загрузку этих кодов на тех страницах, где они не нужны. Данный плагин WordPress производит сканирование сайта, выгружая ненужные CSS / JS. Кроме того Asset CleanUp уменьшает HTML-код фактической страницы, сокращает или объединяет загруженные файлы CSS и JavaScript.

Wordpress плагины: Плагины для создания мобильной версии сайта на WordPress - ТОП 6

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *