Сергей Арсентьев
Создание мобильной версии сайта на WordPress за 10 минут
Google на днях объявил о приоритете в ранжировании сайтов, которые имеют мобильную версию. Это может значить лишь одно: наступление эпохи мобильных устройств состоялось. И поэтому каждый уважающий себя сайт или блог на WordPress теперь просто обязан иметь мобильную версию.
Мобильную версию сайта многие владельцы сайтов (да и я сам, чего уж греха таить) просто не находили времени и особых причин делать.
Однако все изменилось с тех пор, как Google всерьез взялся на поддержку мобильных устройств. Долгое время Google "пугал" своих вебмастеров примерно следующими сообщениями:
Мы проверили 27 стр. Вашего сайта и обнаружили, что 100% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих 27 стр. у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.
Количество проверенных страниц и процент несоответствий мог отличаться, но суть была такой: Google предупреждал, что с сайтом по его мнению что-то не так.
И вот сейчас представители корпорации официально объявили о приоритетной поддержке с 21 апреля 2015 года тех проектов, которые будут иметь мобильную версию сайта. Что это значит? Да то, что сайт без мобильной версии будет ранжироваться хуже, чем сайт, позаботившийся о пользователях телефонов и планшетов.
Результат проверки должен быть вот таким:
По аналогии проверяйте мобильную версию сайта в панели вебмастера Яндекс: https://webmaster.yandex.ru/site/
Результаты проверки должны быть все зелененькими, без красных замечаний.
У меня кстати один сайт клиента по SEO в инструменте Google проверку проходил, а в Яндексе - нет! Так что обязательно проверяйте и там, и там.
И если у вас страница не оптимизирована под мобильные устройства в одном или нескольких поисковиках, то самое время сделать это прямо сейчас.
Важно! У вас может быть уже создана мобильная версия, да только Google и Яндекс может это не понять, так как вы ему запретили индексацию служебных папок в файле Robots.txt.
Мобильные устройства стали уже нормой: кто-то выходит в сети через телефон, кто-то с планшета или нетбука. Поэтому игнорировать таких посетителей больше недопустимо.
Так, по крайней мере считает Google и Яндекс, а это значит, что мобильная версия становится стандартом. Но это еще далеко не все плюшки, которые вы получите от использования "маленькой" версии сайта или блога.
Вот примерный список преимуществ, которые получает сайт с мобильной версией:
- приоритет в Google и Яндексе (да, да, Яндекс теперь тоже анализируется мобильную версию в новом интерфейсе панели Вебмастера, апдейт от Яндекса, скорее всего, не за горами)
- улучшение поведенческих факторов: ведь посетителям комфортнее работать с мобильного устройства на сайте, который имеет мобильную версию, поэтому они на таких сайтах проводят больше времени, открывают больше страниц и легче получают информацию, уменьшая показатели отказов и улучшая поведенческие факторы, которые дополнительно влияют на положение в поиске.
- скорость загрузки: в мобильной версии, как правило, отброшены лишние второстепенные детали, чтобы сайт грузился максимально быстро - это также улучшает поведенческие факторы и статистику сайта.
- повышение конверсий: на удобном сайте люди быстрее и стабильнее добираются до нужных целей (положить товар в корзину, оформить подписку, стать зарегистрированным участником, прочитать запись в блоге, кликнуть на рекламу и так далее).
- солидность: корпоративные сайты, имеющие мобильную версию придают их компаниям небольшой дополнительный положительный имидж.
- отношение пользователей: пользователи быстрее привыкают к хорошему, поэтому блоги и сайты, имеющие мобильную версию, имеют больше шансов получить постоянную лояльную аудиторию, чем их менее развитые конкуренты.
Таким образом, список преимуществ достаточно большой, чтобы не откладывая ни минуты установить мобильную версию сайта.
Но как это сделать?
Неужели придется верстать все заново и платить за это тысячи рублей? Если ваш сайт сделан на WordPress CMS, то все можно сделать быстро и бесплатно.
WordPress: мобильная версия сайта за 5-10 минут!
Помните я как-то писал, какую ? Если вы следовали этой рекомендации или же сами сделали правильный выбор и остановились на WordPress, то благодаря развитому сообществу можно воспользоваться бесплатной версией отличного плагина, который мгновенно и автоматически создаст мобильную версию для вашего сайта.
Что вам нужно теперь сделать:
После установки вам станет доступны настройки плагина в левом меню. Там есть такие пункты: базовые настройки, темы и расширения, параметры темы и меню. Рассмотрим все подробнее.
Базовые настройки
Название и автор сайта
Что будет написано вверху вашего сайта в мобильной версии. Рекомендую использовать что-то короткое, буквально на 20 знаков, так как примерно это количество умещается целиком. Галочку " " можно снять.
Определение региона.
Русский в большинстве случаев подойдет.
Начальная страница.
Можете вручную задать отдельную главную страницу для мобильных устройств (например, меньшую по объему или с другим текстом). Очень удобно, но я оставил все по умолчанию.
Остальные параметры трогать большого смысла не вижу, тем более что самые интересные из них доступны только в полной платной версии плагина.
Параметры темы: "Общие"
В бесплатной версии мобильного плагина будет доступна только одна тема оформления, поэтому сразу переходите к ее параметрам, которые имеют несколько вкладок.
Вкладка "Общие" позволяет задавать такие параметры как:
Блог.
Количество записей в списке блога. Тут же можно исключать рубрики и теги (то есть выводить не все записи в мобильной версии). Я вывожу всё, это по-моему логично.
Эскизы записей я поставил такой: Все (блог, отдельный, страницы, поиск и архив).
В этом случае у меня для каждого поста подтянулись миниатюры в кружочках - красиво.
Вот смотрите, в первом случае - с эскизами, во втором - без.
Мне больше понравилось с эскизами, тем более, что места они занимают немного.
Показать категории записей и теги - Да.
Показать дату публикации - Да.
Показать автора записи - Нет
(мне кажется излишним)
Показывать кружочки с комментариями на публикациях - Да
Показывать поиск в колонтитуле - Да
.
Страницы
У меня комментарии на страницах не выводятся, поэтому выводить не
Поддержка пользовательских записей
Я включил поддержку всех типов, какие только у меня были:
Включить wpcf7_contact_form (плагин формы обратной связи)
Включить dilemma (голосование да/нет)
Включить social-locker ()
Включить wysijap (плагин для электронной подписки)
Форма регистрации
Так как на моем блоге нет возможности регистрации, то не включал.
Готовый слайдер
В своей теме не нашел, где они могут показываться эти слайдеры. Но на всякий случай включил, пусть будет.
Параметры темы: "Фирменная символика"
Вот где нужно тщательно покопаться. Здесь оформляется внешний вид мобильной версии сайта.
Цвета сайта
Именно здесь настраиваются цвета мобильной версии сайта, поэтому рекомендую
Эмблема сайта
Это логотип. Если установить логотип сайта, то он будет показываться вместо названия. Так как это название, я уже писал выше, короткое, то мне больше понравилось использовать лого.
Примечание темы.
Просто произвольный код, который будет отображаться под кнопками переключения с мобильной версии на обычную. Зависит от вашей фантазии. Я пока не задействовал это поле.
Оформление
Выберите шрифты, которые вам больше нравятся. Я поставил "Шрифты браузера". По идее должно быстрее грузиться.
Общий доступ.
Установите галочки "Показать ссылки для обмена" и "Показывать совместные ссылки на страницах", это позволит показывать в мобильной версии внутри поста ссылки на соцсети Facebook, Twitter, Google+ и отправить ссылку на пост по емейл. Это удобно и красиво.
Социальные ссылки примечания
Введите ссылки на ваши социальные контакты, группы и RSS. Тогда внизу всех мобильных страниц появятся симпотичные круглые значки, по которым можно будет активировать те или иные соцсервисы.
Параметры темы: "Закладка пиктограмм".
Это кнопка для iPhone или Android, которая будет использоваться, если пользователи сохранят ссылку на ваш сайт себе на мобильное устройство.
Я взял за основу PSD-макет иконки iPhone и быстро создал себе нужную кнопку в Photoshop.
Если вы пока не дружите с этим редактором, то можете бесплатно создать иконку для Apple вот в этом сервисе .
Меню
Этот важнейший пункт позволяет настроить вывод меню, которое осуществляется при помощи правой пиктограмки.
Тут все просто: вы можете выбрать или уже предустановленные иконки (проще всего) или загрузить свои иконки на прозрачном фоне и добавить уже их.
Важно! В момент добавления никакого уведомления об успешной загрузке не происходит, поэтому просто грузите сколько нужно, а потом переходите в Menu Icons и выбирайте набор значков "Пользовательские значки" - там будут загруженные ранее иконки.
Вот посмотрите, как у меня получилось настроить:
Кстати, предустановленные значки в комплекте плагина отлично подобраны и подойдут большинству проектов.
А знаете ли вы, что можете проверить получившуюся версию сайта для мобильных устройств на iPhone5 без самого телефона? Для этого можно просто воспользоваться сервисом "Эмулятором iPhone", например iphone5simulator.com
Выводы и итоги
Таким образом, можно буквально за несколько минут и главное, бесплатно создать на сайте или блоге под WordPress мобильную версию сайта.
Это огромное конкурентное преимущество перед многими прочими CMS, которые еще не имеют таких простых и удобных плагинов и в которых для создания версии под мобильные устройства нужно привлекать верстальщика, а такое удовольствие редко стоит дешевле 100$.
Судя по заявлениям представителей Google, с 21 апреля 2015 применение мобильной версии станет фактически стандартом для успешного продвижения проекта в сети. Поэтому рекомендую не откладывая сделать себе мобильную версию, тем более, что это занимает всего несколько минут (я дольше писал это пост, чем настраивал плагин).
Сделайте это наконец! Создайте мобильную версию своего сайта на WordPress и избавьте каждого посетителя с мобильного устройства от неудобства все время увеличивать масштаб страниц для читабельности текста и выполнять N-ное количество лишних движений.
Мы предлагаем вам 7 крутейших, а главное бесплатных плагинов WordPress, которые помогут вам это сделать всего за несколько минут.
Плагины для создания мобильной версии вашего сайта на WordPress
Скорее всего, термин «адаптивный дизайн» не является для вас новым, так как уже в течение лет так 2-х он находится у всех на слуху. Но если вы еще не знаете, то его смысл заключается в «преображении» или «адаптации» сайта для мобильных устройств. То есть посетителю с любого гаджета, будь то планшет или смартфон, будет так же удобно просматривать страницы вашего сайта, как и со стационарного ПК или ноутбука.
Ниже приведены четыре плагина, которые 100% помогут решить эту задачу - сделать мобильную версию вашего сайта на WordPress.
1. Hammy
Начнем с очень удобного плагина Hammy для изменения размеров изображений в соответствии с разрешением экрана мобильного устройства, на котором будет выводиться сайт. Он заменяет тег на
Для использования плагина необходимо установить некоторые точки останова и выбрать элемент 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, так как они не очень совместимы.
Заключение
В сфере веб-дизайна важно и нужно всегда следить за новинками, особенно, если они действительно могут быть вам полезны. В нашем случае, «адаптивность под мобильные устройства» уже становится стандартной функцией, которую необходимо использовать всем владельцам сайтов и соответствовать, так сказать, требованиям эре мобильных гаджетов.
Если вы уже использовали какой-либо плагин из этой серии или у вас есть свой вариант, которого нет в нашем списке – не жадничайте, делитесь с другими пользователями.
Аль Капоне, Миша Япончик или ребята из Острых Козырьков примерно 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
- Google Search Console Test Mobile Friendly
https://search.google.com/test/mobile-friendly
Яндекс Вебмастер
- Яндекс Вебмастер
https://webmaster.yandex.ru/
Bing Mobile Test
- Bing Mobile Test
https://www.bing.com/webmaster/tools/mobile-friendliness
ВебМарк
Как выглядит Ваш сайт на мобильных устройствах можно также проанализировать на сайте Вебмарк.
В простом мобильном иммитаторе вы сразу увидите ваш результат.
- ВебМарк
http://webmark.com.ua/mobile/
Проверка мобильной версии сайта — регулярный подход.
В зависимости от ритма жизни вашего сайта, наверняка будут присутствовать изменения в дизайне, обновления различных плагинов, добавление скриптов.
Поэтому проверять мобильную версию сайта желательно постоянно. Особенно при внесении правок в код и установке новых функциональных модулей.
Сервисы для проверки мобильной версии сайта
Мобильная версия сайта для 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, тогда взгляните на следующий плейлист:
- Скачать Woocommerce 3.4.3 zip по прямой ссылке с https://ru.wordpress.org
Мобильная версия сайта 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
(Последнее обновление: 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");Реалии сегодняшнего дня обязывают иметь мобильную версию сайта всем проектам.
Гугл вообще обещает понижать в выдаче сайты, которые не имеют мобильную версию и плохо просматриваются в мобильных устройствах.
У меня в Гугл-вебмастере уже больше года висит такая напоминалка.
Но я же супер-занятый и мне некогда обращать внимание на такую ерунду!
Пару лет назад я создал мобильную версию сайта с помощью одного сервиса (сейчас даже ссылку давать не буду). Но в итоге получил дублирование контента сайта на стороннем ресурсе.
Я сначала считал, что это же только для мобильных, но потом увидел в поиске мои дублированные страницы с этого сервиса, и они были выше моих основных. Траст сервиса то повыше моего.
Короче, я рубанул эту мобильную версию!
В наше время, когда уникальность сайта, это наше все, так разбазаривать дубли, я считаю не разумно.
Рост числа мобильных пользователей.
Вообще, если смотреть статистику, то даже при моей специфике ИнфоМастерской, уже примерно 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