Мобильная версия WordPress — плагин WPtouch. Как сделать мобильную версию шаблона для WordPress Wp мобильная версия

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. WPtouch Mobile Plugin

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

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

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

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

2. WordPress Mobile Pack

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

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

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

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

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

3. Плагин Mobile Smart

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

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

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

4. WP Mobile Edition

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#content{max-width: 1280 px;}

Помимо этого вам желательно изменить ширину страниц мобильной версии (за нее отвечает атрибут “width”). После того, как найдете его в разделе CSS, вам нужно будет заменит его значение на “100%”. Это позволит браузеру автоматически подгонять ваш сайт под любой экран. Но стоит отметить, что данный способ адаптации не является эффективным, потому как сайт будет грузиться долго. Основные цели мобильной версии это быстрая загрузка и предоставление удобства. Помимо этого такой вид адаптации не является быстрым. Вам придется искать нужные атрибуты, эксперементировать с их значениями, если будут возникать какие-либо дефекты и так далее.

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

1. Hammy необходим для пропорционального отображения изображений на мобильных устройствах. Механизм работы заключается в том, что плагин меняет стандартный тег вызова изображения img на figure. При желании в настройках плагина есть опция отключения показа изображений определенного класса. Это нужно при адаптации новостных и каких-либо других больших порталов. В противном случае сайт будет грузиться намного дольше.

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

3. Плагин WP Lightbox 2 поможет сделать всплывающие окна на мобильном сайте. Он начинает работать сразу же после активации. При желании можно изменить длительность показа. В целом, с настройкой проблем не должно возникнуть.

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

5. Если вы хотите создать готовый адаптивный сайт за считанные минуты, то вам стоит использовать плагин WP Touch . Он является достаточно популярным, потому как им пользуются более 5 миллионов вебмастеров. Этот плагин содержит базовые настройки (название, язык, регион) и одну тему. Если же вы хотите сделать более функциональную мобильную версию сайта для смартфонов, то вам стоит приобрести премиум версию WP Touch Pro. Здесь присутствует большое количество различных тем и дополнительных настроек, поэтому ваш сайт не будет однообразным.

6. WP Mobile Detector предназначен для определения устройства, с которого посетитель заходят на сайт. Он способен сделать распознавание около 5 тысяч различных устройств. Также плагин фиксирует статистику уникальных посещений, источников перехода и многое другое.

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

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

9. поможет создать быстрый и привлекающий внимание сайт для мобильного устройства. Он отлично работает со всеми темами, которые предложены на официальном сайте движка вордпресс. Данный плагин используют создатели NY Times, Forbes и других популярных сайтов.

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

11. WP Mobile Splash Page Editor будет вам полезен при создании гостевой страницы для мобильной версии вашего интернет-портала. Он достаточно легок в настройке и содержит широкое количество различных стилизаций. При правильном подборе дизайна вы сможете увеличить посещаемость сайта. Стоит также упомянуть, что данный плагин обеспечивает быструю загрузку страниц на каком-либо портативном устройстве.

12. При использовании Wapple Architect Mobile вы получите адаптированную версию, которая будет иметь URL-адрес идентичный классической. То есть, не будет перенаправления на поддомен вида “m.сайт.com”. Это никаким образом не влияет на СЕО-показатели. Особенностью данного плагина является также возможность адаптации абсолютно любой темы под мобильные устройства (будь это даже тема с большим количеством различных виджетов). Благодаря этому, вам не придется тратить лишнее время на работу с дизайном.

Как осуществляется адаптация без использования плагинов?

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

Сервис dudamobile.com является достаточно популярным, потому как имеет широкий выбор опций. Однако, данный сервис является платным. Цена будет составлять 9 долларов США. Это достойная плата, учитывая что вам не придется использовать какие-либо плагины.

Для начала вам нужно здесь зарегистрироваться или пройти авторизацию через Фейсбук. После этого переходите в раздел “Дизайн” и кликаете по полю “Макет”. Перед вами откроются возможные варианты размещения навигации. Для выбора вам достаточно кликнуть по понравившемуся варианту. Чтобы настроить цветовые гаммы, вам нужно кликнуть на поле “Стиль”. Вы также можете загрузить свое фоновое изображение. Поле “Заголовок” отвечает за эмблему. Вы можете ее загрузить в виде картинки или же представить каким-либо текстом. В целом, процесс конструирования происходит в визуальном режиме. Вы “настраиваете”, а сервис формирует специальный код. Стоит сказать также, что есть и бесплатная версия. Но в таком случае на сайте будет автоматически отображаться реклама.

Более простым является mippin.com , который содержит значительно меньше опций. Механизм работы похож с предыдущим сервисом.

Проверка адаптации

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

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

С помощью сервиса iPad Peek вы сможете абсолютно бесплатно увидеть особенности отображения вашей мобильной версии на таких устройствах, как iPad, iPhone и других гаджетах фирмы Apple. Данный сервис является популярным, потому как большинство пользователей интернета предпочитает именно устройства Apple.

Также вы можете воспользоваться сервисом Mobile Phone Emulator, который позволяет увидеть отображение вашей мобильной версии не только лишь на продукции Apple, но и на продукции компаний Samsung, HTC и BlackBerry.

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

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

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

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

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

#content {
max-width: 1280px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

WPtouch - мобильная версия сайта

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

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

Я например, в последнее время сразу такой веб - ресурс покидаю и забываю к нему дорогу. К чему это я? Если ваш сайт не оптимизирован для мобильных устройств, то прощай трафик. А вам это надо? Нет, конечно. Значит будем делать мобильную версию сайта WordPress .

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

В Инструментах для веб-мастеров появился раздел "Удобства просмотра на мобильных устройствах", где вы можете выявить основные проблемы при просмотре со смартфонов и планшетов не одной страницы, а всего вашего сайта. Хотя, и без вашего участия Google проверит соответствует ли ваш сайт новым требованием, а если нет или существуют ошибки, то может прийти на вашу почту такое письмо - Сайт сайт.ru не оптимизирован для мобильных устройств и перечисляются проблемы .

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

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

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

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

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

Самый популярный плагин мобильной версии WordPress это - WPtouch. Который советует использовать Google , не даром же, уже последовали рекомендациям поисковика 12 711 745 пользователей. Круто!

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

Панель администрирования WPtouch и WordPress Customizer (визуальные настройки) позволяют настраивать многие аспекты его внешнего вида, а также предоставлять быструю , удобную и стильную версию вашего сайта посетителям вашего мобильного устройства без изменения кода.

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

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

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

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

И так, появится новый раздел с одноимённым названием на боковой панели админки. Сразу переходите на страницу "Настройки":

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

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

Да, вы можете для мобильного меню выбрать иконки/значки. По умолчанию, загружена тема значков Elegant, но если вам эти иконки не подходят, то можно загрузить свой пользовательский набор или установить дополнительные. Для этого нужно нажать вкладку "Загрузка и наборы значков" и выбрать набор из списка:

Набор значков для меню - плагин WPtouch Mobile

После присвоения каждому пункту своего значка нажимаем "Посмотреть тему" и радуемся нашим успехам:

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

И наше меню с иконками:

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

Заходим сюда (или в Инструментах для веб-мастеров) - https://www.google.com/webmasters/tools/mobile-friendly/ вводим URL сайта или отдельной страницы, ждём пару секунд и опля, наш результат такой: Отлично! Страница оптимизирована для мобильных устройств, а в PageSpeed Insights: 100 / 100 Удобство для пользователей:

Удобство для пользователей - PageSpeed Insights

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

Удачи, до новых встреч.

С 21 апреля Google начнет использовать новые алгоритмы поиска. В результате предпочтение будут отдавать в первую очередь мобильным версиям интернет-ресурсов вне зависимости от того, будет ли поисковик выдавать запрос пользователю для стационарного компьютера, ноутбука, планшета или смартфона.

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

Привет, дорогие читатели!

За эту неделю на моем блоге произошло два замечательных события! Во-первых, наконец-то посещалка перевалила за 1000 (во вторник было 1040 уников). Во-вторых, я установила в сайдбар. Жду ваших комментариев о внешнем виде рекламного блока. И буду крайне благодарна за клики 🙂

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

Возник вопрос: нужна ли мобильная версия сайта? Судя по статистике за последний месяц у меня свыше 1500 посетителей, которые пользуются при просмотре мобильниками или планшетами. Это приблизительно 50 человек в день, что не так уж и мало. А если учесть, что с каждым годом мобильные технологии внедряются все больше в нашу с вами жизнь, нужно подумать о том, чтоб идти в ногу со временем. В этой статье мы разберем, как сделать мобильную версию для WordPress-блога.

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

Первое, что необходимо сделать, это проверить свои ресурсы на соответствие требованиям Гугл. Каждый может проанализировать удобство просмотра сайта на мобильных устройствах вот здесь — google.com/webmasters/tools/mobile-friendly .

Вот какой результат получился у меня:

Вот еще один полезный сервис от Гугл для проверки скорости загрузки разных версий сайта: developers.google.com/speed/pagespeed/insights . Здесь очень подробно объясняется, что именно на вашем сайте не так, даются конкретные примеры со скриншотами вашего блога. Поэтому обладая знаниями html + css и пользуясь этой инструкцией, можно отлично доработать свой ресурс.

При проверке мобильной версии сайта в Google, вы можете проследовать по ссылке с рекомендациями по адаптации сайта на Вордпресс под мобильные устройства (третья колонка справа – «Далее»). Там приведена еще одна подробная инструкция для WordPress с указанием плагинов, ссылками на адаптивные шаблоны и прочее. Советую также изучить этот документ.

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

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

Мобильная версия для Вордпресс-блога: особенности

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

Небольшой размер экрана;
Более низкая скорость загрузки;
Отсутствие клавиатуры и мыши.

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

Для реализации данных функций есть несколько способов. Самый простой из них – воспользоваться плагинами (идеален для новичков).

Плагины для адаптации сайта

Самые распространенные плагины: WPTouch Mobile Plugin, WP Mobile Detector, MobilePress, WPSmart Mobile.

WpTouch и MobilePress – это базовые бесплатные версии плагинов, которые можно улучшить до более продвинутых версий с большим набором настроек и функций. По отзывам пользователей WpTouch Pro достаточно тяжелый и у него может возникать конфликт с плагинами кэширования (). Случается, что мобильному пользователю может выдаваться страница для ПК из кэша. Такое может случаться и с другими WordPress-плагинами для мобильных версий сайтов. Базовые версии как MobilePress, так и WPTouch вполне можно использовать для блогов с простой структурой и контентом.

Но мне больше понравился плагин WPSmart Mobile. В нем сразу установлены три мобильных шаблона для WordPress на выбор.

Правда, все его настройки на английском, но ничего сложного там нет.

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

Вы можете посмотреть, как будет выглядеть сайт на мобильном устройстве, нажав «Preview»:

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

Просмотр мобильной версии сайта, или отображение его в любом браузере или устройстве можно осуществить с помощью специального расширения User-Agent Switcher. Вот так он выглядит в магазине Google Chrome:

Он позволяет переключать прямо в Хроме тип отображения страницы:

Соответственно, вы можете проверить кроссбраузерность вашего блога и его вид на разных устройствах от iPhone до Samsung Galaxy.

Другие варианты создания мобильной версии сайта на Вордпресс

Варианты без использования плагинов:

с помощью специальных сервисов.
создание мобильной версии на поддомене;
создание отдельного файла стилей CSS для мобильной версии;
прописать данные для всех вариантов отображения в одном CSS-файле;

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

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

Если вы решили создать дополнительный файл стилей, сделайте копию основного и назовите ее, к примеру, style-m.css. Теперь нужно внести изменения в файл header.php, в строки, где подключаются стили.

Например, так они могут выглядеть:

" /> /style-m.css" />

А далее, при наличии знаний в области CSS, можно вносить правки непосредственно в файл style-m.css. Например, поменять шрифты на более контрастные, сделать отображение одноколоночным и все, что рекомендует Гугл.

Я для себя выбрала именно этот способ, набросала на скорую руку несколько стилей и гугл принял работу. Он оказался не слишком придирчивым, достаточно разместить контент в одну узенькую колонку и сервис Гугла радостно сообщает: «Отлично! Страница оптимизирована для мобильных устройств.» . Пока у меня получилось не слишком красиво, но это временный вариант, сделанный за пару часов. Возможно, когда-нибудь руки дойдут сделать это качественно и хорошо.

Удачи вам в освоении мобильной версии сайта на Вордпресс, делитесь своими результатами. До новых встреч!