Wordpress сделать мобильную версию. Мобильные WordPress темы и плагины или Как адаптировать WordPress темы под мобильные устройства? Плагин Mobile Smart

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

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

(function(w, d, n, s, t) { w[n] = w[n] || ; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true }); }); t = d.getElementsByTagName("script"); s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks");

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

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

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

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

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

1. Hammy

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

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

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

2. Responsive Widgets

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

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

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

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

3. WP Lightbox 2

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

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

4. Responsible

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

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

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

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

5. WPTouch Mobile Plugin

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

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

6. WordPress Mobile Pack

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

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

7. Jetpack

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

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

Заключение

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

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

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

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

У меня в Гугл-вебмастере уже больше года висит такая напоминалка.

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

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

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

Короче, я рубанул эту мобильную версию!

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

Рост числа мобильных пользователей.

Вообще, если смотреть статистику, то даже при моей специфике ИнфоМастерской, уже примерно 4-5% заходят на блог с мобильных устройств. И количество мобильных пользователей только растет.

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

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

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

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

Таким образом количество мобильных в сети растёт в геометрической прогрессии.

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

Моя задача не убедить вас-делать или не делать мобильную версию сайта.

Я хочу Вас предостеречь от того чтоб не упустить аудиторию и удержать, а еще лучше нарастить посещалку Вашего проекта.

Теперь давайте обсудим как лучше сделать мобильную версию сайта.

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

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

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

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

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

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

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

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

У меня до недавнего времени так и работал сайт, но что-то в последнее время, а точнее последний год, все равно не нравится Гуглу, и он перестал считать, что мой сайт адаптирован под мобильные устройства.

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

Поэтому я все же решил обратится к плагинам.

Для рассмотрения я взял три плагина.

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

1. Jetpack это универсальный плагин с массой возможностей для WordPress.

Среди этих возможностей и создание мобильной версии Вашего сайта.

Подключается очень легко и особых настроек не требует.

Преимущества Jetpack для создания мобильной версии сайта:

1. Простота настроек-включил и пользуйся

2. Все элементы сайта остаются в дизайне просто адаптируются под мобильную версию

3. Плагин постоянно обновляется

4. Что не мало важно это плагин от wordpress.com

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

1. Показывать или нет краткие анонсы на главной моб.версии сайта

2. Показывать или нет миниатюры к записям

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

Вот как выглядит мой сайт wp-home.info в моем телефоне. На этом сайте я использую Jetpack.

Как работать с этим плагином и другие его возможности я показываю в бесплатном видеокурсе “Сайт на WordPress от новичка до ПРОФИ” в второй части курса.

Вот прилагаю видео из этого курса о том, как настроить мобильную версию проекта с помощью Jetpack

Недостатки Jetpack

1. Но к сожалению, для моего блога Инфомастерской он не подходит, т.к. Jetpack создает не малую нагрузку на сайт (в него напихали кучу функционала) и я при посещаемости ИМ уже не могу себе позволить.

Сайт WP-home.info еще молодой и для него такая нагрузка вполне подходит.

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

Я проводил эксперимент и отключал все функции Jetpack, и он все равно грузил базу запросами.

2. WPtouch Mobile Plugin плагин для создания мобильной версии с PRO версией.

Отличный плагин с кучей настроек.

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

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

Чем хорош WPtouch для создания мобильной версии сайта:

1. Плагин постоянно обновляется и держит в тонусе пользователя

2. Русифицированный и удобный интерфейс

3. Расширенная настройка меню

5. Возможность подключить и настроить изящный слайдер

6. Настройка вывода записей

7. Большой выбор подключения социального обмена-кнопок

8. Возможность вставить в футер дополнительную HTML- вставку

9. Возможность добавлять свои стили

10. Пред осмотр все изменений в настройках

Прилагаю видео с обзором возможностей плагина.

Из недостатков плагина.

1. Плагин не хило грузит сайт при замере плагином P3, но думаю подправить это плагинами кеширования. но… читайте второй пункт

2. Плагин конфликтует с плагином кеширования WP Super Cache, что совсем не хорошо. Это один из моих любимых плагинов кеширования.

И хотя в настройках WP Super Cache есть функция совместимости с WPtouch, но она работает через раз и все равно на сайте начинаются такие тормоза, что не захочется никакой мобильной версии.

Я еще протестирую этот плагин с другими кеширующими и о результатах отпишусь на блоге.

3. Плагин имеет платную ПРО версию с еще большим функционалом. Я бы взял и платную, но пока нужно покатать бесплатник.

3. WPSmart Mobile простой плагин для создания мобильной версии сайта.

Наверное, самый простой и легкий плагин для создания моб.версии. Напишу честно что ПОКА, я остановился на нем.

Ну вот! — могут сказать многие- водил кругами и наконец довел до нужного!

Как в известном анекдоте:

Поцелуй меня в плечо…

Ну ты же то же с далека начал!

Нет! Совсем не так!

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

От себя могу сказать, что я бы с удовольствием использовал для ИнфоМастерской плагин WPtouch и вчера пол дня мучил сайт. Наверняка многие заметили тормоза в работе-это я экспериментировал!

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

Преимущества WPSmart Mobile для создания мобильной версии сайта:

1. Простота настроек

4. Настройка вывода новостей

5. Настройка меню

6. настройка цветовой гаммы

7. Возможность подключения статистики от Гугл

8. Подключения своего аккаунта Адсенса

Теперь пройдемся по настройкам WPSmart.

В левой панели WordPress появился новый пункт-WPSmart. Заходим знакомимся.

Основные настройки WPSmart.

Здесь Вы можете:

Задать другое название для сайта,

Подгрузить логотип сайта (оптимальный размер 400 на 50 пикселей)

Подключить поиск и комментарии

Настроить вывод новостей (включение даты, автора, миниатюры и анонса)

Подключить Гугл-аналитику

Подключить свой аккаунт в Адсенсе

Темы WPSmart.

Выбор небольшой всего три темы:

С анонсами последних записей и миниатюрами сбоку

Просто с анонсами

Вывод последней статьи на главную

Хотелось бы больше тем и разнообразия, но что есть то и берем.

Внешний вид-appearance

В этом разделе все просто, назначаем цвета фону, тексту. ссылкам

Меню

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

не забываем поставить чебокс Enable drop-down pages/links menu.

Иначе меню в моб. версии не покажется.

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

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

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

Новый год всё таки! Хоть и СТАРЫЙ но ведь Новый!

Теперь первую часть курса “Сайт на WordPress от новичка до ПРОФИ” можно скачать в цифровом формате на свой компьютер.

Кроме этого в курс прошита возможность зарабатывать .

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

Узнаете скачав сам видеокурс вот по этой ссылке.

Создание проектов под ключ любой сложности!
Доводка сырых сайтов до кондиции
Разработка уникального дизайна под заказ
Верстка и натяжка на популярные ситемы: WordPress, MODX, OpenCart
Обращайтесь, сделаем качественно и красиво! Skype: ashifin Viber/Mob: V+380503613708

    >Какого раздела?
    Раздела с новостями

    >Причем плагин к «мобильной версии»? У Вас и так тема адаптивная (Правда, древнючая, взятая на помойке, с шелами и пр.)
    Извиняюсь, я слабо разбираюсь в вордпрессе в принципе, мне сайт делал один фрилансер. Если плагины тут не помогут, то как мне можно мобильную версию настроить? Обновить тему или другую поставить? Нужно, чтобы этот раздел с новостями (окошко справа) было видно с телефона.

    Раздела с новостями

    Стало ещё менее понятно. Весть сайт состоит из «разделов с новостями». В ВП это называется «рубрики с записями». Или же Вы имеет ввиду что-то другое.

    Извиняюсь, я слабо разбираюсь в вордпрессе в принципе, мне сайт делал один фрилансер.

    Как моно скорее выкинуть эту помоечную тему если не хотите иметь проблем. Брать темы нужно только из оф каталога . Как и плагины.

    Если плагины тут не помогут, то как мне можно мобильную версию настроить?

    Что Вы имеете ввиду под » мобильную версию настроить»? Адаптивная тема — это есть «для мобильных».

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

    Какое «окошко справа»? Я ничего такого не вижу.

    >Стало ещё менее понятно.
    Сделал скриншот, чтобы было понятнее:
    https://ibb.co/cwnSnH

    >Что Вы имеете ввиду под » мобильную версию настроить»?
    Я имею в виду настроить то, что в мобильной версии отображается. Потому что сейчас в ней не видно этого окна (на скриншоте)

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

    Я имею в виду настроить то, что в мобильной версии отображается. Потому что сейчас в ней не видно этого окна (на скриншоте)

    У Вас скрываются сайдбар/виджеты. Это в принципе нормально. Если хотите чтобы показывалось — нужно переделывать или менять тему.

    А какие проблемы могут быть?

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

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

    Как переделать тему, чтобы сайдбары и виджеты отображались?

    Была бы тема из оф каталога — можно было бы сказать что-то определённое, а как что сделано в этой теме…

    Насколько сложно поменять тему (на надежную и официальную) с сохранением всего загруженного контента?

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

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

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

    Консоль не причем. Проблема в доступности кода темы (и не предлагайте скачать этот хлам.)

    В общем, буду копить денег и искать более толкового программиста. Сам я, конечно, не смогу все это сделать.

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

Просмотр 10 ответов - с 1 по 10 (всего 10)

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

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

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

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

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