Лучшие плагины для создания мобильной версии WordPress сайта. Wordpress версия мобильная
Создание мобильной версии сайта Wordpress за 10 минут
Google на днях объявил о приоритете в ранжировании сайтов, которые имеют мобильную версию. Это может значить лишь одно: наступление эпохи мобильных устройств состоялось. И поэтому каждый уважающий себя сайт или блог на WordPress теперь просто обязан иметь мобильную версию.
Мобильную версию сайта многие владельцы сайтов (да и я сам, чего уж греха таить) просто не находили времени и особых причин делать.
Однако все изменилось с тех пор, как Google всерьез взялся на поддержку мобильных устройств. Долгое время Google "пугал" своих вебмастеров примерно следующими сообщениями:
Мы проверили 27 стр. Вашего сайта и обнаружили, что 100% из них неудобно просматривать на мобильных устройствах. Из-за ошибок на этих 27 стр. у пользователей складывается плохое впечатление о ресурсе. Эти страницы не считаются оптимизированными для мобильных устройств с точки зрения Поиска Google, и они будут отображаться и ранжироваться в результатах поиска на смартфонах соответствующим образом.
Количество проверенных страниц и процент несоответствий мог отличаться, но суть была такой: Google предупреждал, что с сайтом по его мнению что-то не так.
И вот сейчас представители корпорации официально объявили о приоритетной поддержке с 21 апреля 2015 года тех проектов, которые будут иметь мобильную версию сайта. Что это значит? Да то, что сайт без мобильной версии будет ранжироваться хуже, чем сайт, позаботившийся о пользователях телефонов и планшетов.
Вы можете проверить прямо сейчас, оптимизирован ли ваш сайт по мнению Google, под мобильные устройства. Введите имя вашего сайта вот тут: https://www.google.com/webmasters/tools/mobile-friendly/
Результат проверки должен быть вот таким:
По аналогии проверяйте мобильную версию сайта в панели вебмастера Яндекс: https://webmaster.yandex.ru/site/
Результаты проверки должны быть все зелененькими, без красных замечаний.
У меня кстати один сайт клиента по SEO в инструменте Google проверку проходил, а в Яндексе - нет! Так что обязательно проверяйте и там, и там.
И если у вас страница не оптимизирована под мобильные устройства в одном или нескольких поисковиках, то самое время сделать это прямо сейчас.
Важно! У вас может быть уже создана мобильная версия, да только Google и Яндекс может это не понять, так как вы ему запретили индексацию служебных папок в файле Robots.txt.
Поэтому если в результатах тестирования вы увидите что-то вроде такого: "Некоторые ресурсы страницы (50) заблокированы в файле robots.txt", то читайте статью «Googlebot не может получить доступ к файлам CSS и JS на сайте»
Для чего нужно создание мобильной версии сайта?
Мобильные устройства стали уже нормой: кто-то выходит в сети через телефон, кто-то с планшета или нетбука. Поэтому игнорировать таких посетителей больше недопустимо.
Так, по крайней мере считает Google и Яндекс, а это значит, что мобильная версия становится стандартом. Но это еще далеко не все плюшки, которые вы получите от использования "маленькой" версии сайта или блога.
Вот примерный список преимуществ, которые получает сайт с мобильной версией:
- приоритет в Google и Яндексе (да, да, Яндекс теперь тоже анализируется мобильную версию в новом интерфейсе панели Вебмастера, апдейт от Яндекса, скорее всего, не за горами)
- улучшение поведенческих факторов: ведь посетителям комфортнее работать с мобильного устройства на сайте, который имеет мобильную версию, поэтому они на таких сайтах проводят больше времени, открывают больше страниц и легче получают информацию, уменьшая показатели отказов и улучшая поведенческие факторы, которые дополнительно влияют на положение в поиске.
- скорость загрузки: в мобильной версии, как правило, отброшены лишние второстепенные детали, чтобы сайт грузился максимально быстро - это также улучшает поведенческие факторы и статистику сайта.
- повышение конверсий: на удобном сайте люди быстрее и стабильнее добираются до нужных целей (положить товар в корзину, оформить подписку, стать зарегистрированным участником, прочитать запись в блоге, кликнуть на рекламу и так далее).
- солидность: корпоративные сайты, имеющие мобильную версию придают их компаниям небольшой дополнительный положительный имидж.
- отношение пользователей: пользователи быстрее привыкают к хорошему, поэтому блоги и сайты, имеющие мобильную версию, имеют больше шансов получить постоянную лояльную аудиторию, чем их менее развитые конкуренты.
Таким образом, список преимуществ достаточно большой, чтобы не откладывая ни минуты установить мобильную версию сайта.
Но как это сделать?Неужели придется верстать все заново и платить за это тысячи рублей? Если ваш сайт сделан на WordPress CMS, то все можно сделать быстро и бесплатно.
WordPress: мобильная версия сайта за 5-10 минут!
Помните я как-то писал, какую CMS выбрать для блога? Если вы следовали этой рекомендации или же сами сделали правильный выбор и остановились на WordPress, то благодаря развитому сообществу можно воспользоваться бесплатной версией отличного плагина, который мгновенно и автоматически создаст мобильную версию для вашего сайта.
Что вам нужно теперь сделать:
Установить плагин, который доступен в репозитории и называется WPtouch. Устанавливается он как обычный плагин, никаких особенных действий делать не нужно (читайте, если нужна инструкция по установке плагинов под WordPress).
После установки вам станет доступны настройки плагина в левом меню. Там есть такие пункты: базовые настройки, темы и расширения, параметры темы и меню. Рассмотрим все подробнее.
Базовые настройки
Название и автор сайтаЧто будет написано вверху вашего сайта в мобильной версии. Рекомендую использовать что-то короткое, буквально на 20 знаков, так как примерно это количество умещается целиком. Галочку "Отображать "На платформе WPtouch" в примечании" можно снять.
Определение региона.Русский в большинстве случаев подойдет.
Начальная страница.Можете вручную задать отдельную главную страницу для мобильных устройств (например, меньшую по объему или с другим текстом). Очень удобно, но я оставил все по умолчанию.
Переключение.Рекомендую обязательно оставить возможность переключения между обычной и мобильной версией - вдруг у пользователя что-то не подгрузится, он сможет легко вернуться к обычной версии сайта.
Остальные параметры трогать большого смысла не вижу, тем более что самые интересные из них доступны только в полной платной версии плагина.
Параметры темы: "Общие"
В бесплатной версии мобильного плагина будет доступна только одна тема оформления, поэтому сразу переходите к ее параметрам, которые имеют несколько вкладок.
Вкладка "Общие" позволяет задавать такие параметры как:
Блог.Количество записей в списке блога. Тут же можно исключать рубрики и теги (то есть выводить не все записи в мобильной версии). Я вывожу всё, это по-моему логично.
Эскизы записей я поставил такой: Все (блог, отдельный, страницы, поиск и архив).В этом случае у меня для каждого поста подтянулись миниатюры в кружочках - красиво.
Вот смотрите, в первом случае - с эскизами, во втором - без.
Мне больше понравилось с эскизами, тем более, что места они занимают немного.
Далее я выбрал такие параметры:
Показать категории записей и теги - Да.Показать дату публикации - Да.Показать автора записи - Нет (мне кажется излишним)Показывать кружочки с комментариями на публикациях - ДаПоказывать поиск в колонтитуле - Да.
СтраницыУ меня комментарии на страницах не выводятся, поэтому выводить не
Поддержка пользовательских записейЯ включил поддержку всех типов, какие только у меня были:
Включить wpcf7_contact_form (плагин формы обратной связи)Включить dilemma (голосование да/нет)Включить social-locker (плагин социального замка для wordpress)Включить wysijap (плагин для электронной подписки)
Форма регистрацииТак как на моем блоге нет возможности регистрации, то не включал.
Готовый слайдерВ своей теме не нашел, где они могут показываться эти слайдеры. Но на всякий случай включил, пусть будет.
Параметры темы: "Фирменная символика"
Вот где нужно тщательно покопаться. Здесь оформляется внешний вид мобильной версии сайта.
Цвета сайтаИменно здесь настраиваются цвета мобильной версии сайта, поэтому рекомендую
Эмблема сайтаЭто логотип. Если установить логотип сайта, то он будет показываться вместо названия. Так как это название, я уже писал выше, короткое, то мне больше понравилось использовать лого.
Примечание темы.Просто произвольный код, который будет отображаться под кнопками переключения с мобильной версии на обычную. Зависит от вашей фантазии. Я пока не задействовал это поле.
ОформлениеВыберите шрифты, которые вам больше нравятся. Я поставил "Шрифты браузера". По идее должно быстрее грузиться.
Общий доступ.Установите галочки "Показать ссылки для обмена" и "Показывать совместные ссылки на страницах", это позволит показывать в мобильной версии внутри поста ссылки на соцсети Facebook, Twitter, Google+ и отправить ссылку на пост по емейл. Это удобно и красиво.
Социальные ссылки примечанияВведите ссылки на ваши социальные контакты, группы и RSS. Тогда внизу всех мобильных страниц появятся симпотичные круглые значки, по которым можно будет активировать те или иные соцсервисы.
Параметры темы: "Закладка пиктограмм".
Это кнопка для iPhone или Android, которая будет использоваться, если пользователи сохранят ссылку на ваш сайт себе на мобильное устройство.
Я взял за основу PSD-макет иконки iPhone и быстро создал себе нужную кнопку в Photoshop.
Если вы пока не дружите с этим редактором, то можете бесплатно создать иконку для Apple вот в этом сервисе.
Остальные вкладки, вроде "Рекламы", конечно, важны, но доступы только в платной версии плагина WPTouch для WordPress.
Меню
Этот важнейший пункт позволяет настроить вывод меню, которое осуществляется при помощи правой пиктограмки.
Тут все просто: вы можете выбрать или уже предустановленные иконки (проще всего) или загрузить свои иконки на прозрачном фоне и добавить уже их.
Важно! В момент добавления никакого уведомления об успешной загрузке не происходит, поэтому просто грузите сколько нужно, а потом переходите в Menu Icons и выбирайте набор значков "Пользовательские значки" - там будут загруженные ранее иконки.
Вот посмотрите, как у меня получилось настроить:
Кстати, предустановленные значки в комплекте плагина отлично подобраны и подойдут большинству проектов.
А знаете ли вы, что можете проверить получившуюся версию сайта для мобильных устройств на iPhone5 без самого телефона? Для этого можно просто воспользоваться сервисом "Эмулятором iPhone", например iphone5simulator.com
Выводы и итоги
Таким образом, можно буквально за несколько минут и главное, бесплатно создать на сайте или блоге под WordPress мобильную версию сайта.
Это огромное конкурентное преимущество перед многими прочими CMS, которые еще не имеют таких простых и удобных плагинов и в которых для создания версии под мобильные устройства нужно привлекать верстальщика, а такое удовольствие редко стоит дешевле 100$.
Судя по заявлениям представителей Google, с 21 апреля 2015 применение мобильной версии станет фактически стандартом для успешного продвижения проекта в сети. Поэтому рекомендую не откладывая сделать себе мобильную версию, тем более, что это занимает всего несколько минут (я дольше писал это пост, чем настраивал плагин). 
Яндекс с августа 2016 года теперь тоже определяет мобильную версию в панели вебмастера, очевидно, что этот поисковик также будет отдавать приоритет в поиске для сайтов, имеющих мобильную версию.
Как решить проблему с адаптированием одностраничника WPPAGE под мобильные устройства?
Я не рассматривал подобные плагины в блоге, потому что не вижу никакой выгоды от автоматической мобильной версии для одностраничника.
Ведь одностраничные сайты — не продвигаются в поиске, стало быть мобильная версия не даст никаких преференций, плюс задача одностраничника — дать красивую картинку, суперакции, расписать ярко и структурировано все преимущества товара или услуги, а мобильная версия — это урезанная, упрощенная часть сайта, как правило, без особой графики, без скриптов, эффектов и т.п.
То есть я пока не вижу пользы от мобильной версии для лендингов, тем более, что проще изначально его сверстать адаптивно, под любые разрешения — это всего лишь одна страница и вообще не заморачиваться с плагинами
Приз!
Хотите попробовать выиграть денежный приз прямо сейчас? Все что, вам нужно сделать - кликнуть на иконку любой соцсети. Это просто и бесплатно 
Выиграть приз
moytop.com
Мобильная версия WordPress сайта - плагин WP Mobile Detector
Здравствуйте уважаемые коллеги, гости wordpress-book.ru.
Не обращали внимания, как стремительно растет число пользователей интернета со своих мобильных телефонов? Не думали создать мобильную версию для своего сайта?
Я тоже задумывался на этот счет, но, было как-то недосуг. Все откладывал на завтра. Видимо, ждал того петуха, который клюнет в известное место. Так вот, на днях, в моей панели инструментов для веб-мастеров от Гугла появилось следующее сообщение:
Перейдя по предложенной в сообщении ссылке по адресу https://www.google.com/webmasters/tools/mobile-friendly/ и, проанализировав там главную страницу своего блога, я получил вот такой грустный результат:
Согласитесь, глупо терять солидную долю трафика (до 40%) из-за такой ерунды, как отсутствие мобильной версии сайта.
Можно адаптировать свою тему соответствующим образом вручную. А можно и обойтись специальным расширением для своей CMS. Второй вариант подойдет тем, кто несилен в верстке или, если очень хочется создать мобильную версию прямо сейчас, на время проведения работ по адаптации или вообще на постоянную основу. Как говорится: "Нет ничего более постоянного, чем временное".
Тестируя самые популярные плагины WordPress для решения поставленной задачи, я остановился на WP Mobile Detector.
В отличие от других, этот плагин оптимизировал все страницы wordpress-book.ru под мобильные устройства без замечаний. В бесплатной версии он не имеет ограничений по функционалу, а только по количеству предустановленных тем. Прост в настройке, быстр, легок и довольно симпатичен.
Настройка WP Mobile Detector
После установки и активации стандартным способом, в левой колонке панели администратора появится новое подменю - WP Mobile Detector, при открытии которого появятся пункты с настройками, статистикой и списком доступных тем. Тут все просто, сами разберетесь.
В верхней части, на каждой странице админки, появится предупреждающая надпись о необходимости присвоения папке cache плагина полных прав на чтение, запись и выполнение.
Без этого не будет работать кэширование мобильной версии вашего WordPress сайта.
Зайдите на свой сервер по ftp, найдите там папку cache и присвойте ей полные права, как на картинке.
Предупреждающее сообщение исчезнет.
Перевод WP Mobile Detector, удаление ссылок
Все было бы совсем хорошо, если бы плагин имел русскую локализацию и не расставлял бы внешние исходящие ссылки в свои темы.
Начнем с самого простого и наиболее важного - с удаления этих самых ссылок.
Отредактируем файлы темы "bluesteel-mobile", уже установленной по умолчанию. Использовать будем текстовый редактор Notepad++.
Итак, откройте файлы footer.php, sidebar.php, functions.php, и удалите из них коды, выделенные на скриншотах. Пути к файлам подчеркнуты красной чертой.
Для русификации, потребуется отредактировать файлы functions.php - в корне плагина и файлы шаблона - sidebar.php, search.php, index.php, comments.php, category.php, 404.php, archive.php, searchform.php. Просто замените все слова, нуждающиеся в переводе (напечатаны ядерно-черным шрифтом), на русские.
Перед редактированием, обязательно измените кодировку текстового документа с ANSI на UTF-8 (без BOM) в инструментах "Кодировки" текстового редактора Notepad++.
Для наглядности или для использования, скачайте уже отредактированный мной WP Mobile Detector по ссылке ниже.
Скачать русский WP Mobile Detector версии 1.8 без внешних ссылок.
Теперь ваш WordPress сайт имеет полноценную мобильную версию, поисковики и посетители обязательно это оценят.
wordpress-book.ru
Как сделать мобильную версию сайта wordpress, обзор плагина для адаптации
Адаптация сайта под мобильные устройства это необходимая составляющая успешного продвижения, потому как большинство пользователей любит удобство. С недавних пор такие поисковые системы, как Гугл и Яндекс начали понижать в выдаче сайты, которые не адаптированы под мобильные устройства. В следствии этого уменьшается посещаемость сайта. Поэтому для того чтобы удержать этот показатель, вам понадобится мобильная версия wordpress.
Для начала стоит проанализировать нынешнее отображение сайта на мобильных устройствах. Для этого достаточно зайти в панель вебмастера от Гугла. Здесь вы узнаете подробную информацию о недочетах и сможете их исправить при помощи знаний программирования.
Оптимальным решением будет добавление в раздел CSS вашей темы такого текста:
#content{max-width: 1280 px;}
Помимо этого вам желательно изменить ширину страниц мобильной версии (за нее отвечает атрибут «width»). После того, как найдете его в разделе CSS, вам нужно будет заменит его значение на «100%». Это позволит браузеру автоматически подгонять ваш сайт под любой экран. Но стоит отметить, что данный способ адаптации не является эффективным, потому как сайт будет грузиться долго. Основные цели мобильной версии это быстрая загрузка и предоставление удобства. Помимо этого такой вид адаптации не является быстрым. Вам придется искать нужные атрибуты, эксперементировать с их значениями, если будут возникать какие-либо дефекты и так далее.
Если же вы не обладаете знаниями из области программирования, то вам стоит установить специальные плагины, которые помогут сэкономить вам время и ускорить загрузку мобильной версии.
1. Hammy необходим для пропорционального отображения изображений на мобильных устройствах. Механизм работы заключается в том, что плагин меняет стандартный тег вызова изображения img на figure. При желании в настройках плагина есть опция отключения показа изображений определенного класса. Это нужно при адаптации новостных и каких-либо других больших порталов. В противном случае сайт будет грузиться намного дольше.
2. Responsive Widgets нужен для того, чтобы сделать специальные виджеты, которые будут отображаться только на мобильных устройствах. Виджет это блок сайта, который содержит какую-либо информацию (недавние или популярные новости, опросы и так далее). Выбор виджетов достаточно широкий, чтобы создать многофункциональный сайт.
3. Плагин WP Lightbox 2 поможет сделать всплывающие окна на мобильном сайте. Он начинает работать сразу же после активации. При желании можно изменить длительность показа. В целом, с настройкой проблем не должно возникнуть.
4. Responsible существенно облегчит вам настройку адаптации сайта. После его активации в верхней часте сайта появится панель, с помощью которой вы сможете сделать регулирование размеры сайта в зависимости от вида мобильного устройства. Этот плагин является удобным, потому как при изменении параметров вы тут же сможете увидеть результат.
5. Если вы хотите создать готовый адаптивный сайт за считанные минуты, то вам стоит использовать плагин WP Touch. Он является достаточно популярным, потому как им пользуются более 5 миллионов вебмастеров. Этот плагин содержит базовые настройки (название, язык, регион) и одну тему. Если же вы хотите сделать более функциональную мобильную версию сайта для смартфонов, то вам стоит приобрести премиум версию WP Touch Pro. Здесь присутствует большое количество различных тем и дополнительных настроек, поэтому ваш сайт не будет однообразным.
6. WP Mobile Detector предназначен для определения устройства, с которого посетитель заходят на сайт. Он способен сделать распознавание около 5 тысяч различных устройств. Также плагин фиксирует статистику уникальных посещений, источников перехода и многое другое.
7. WordPress Mobile Pack это многофункциональный плагин. Благодаря нему вы сможете сделать настройку отображения различных кнопок бара (добавить в закладки и так далее), кнопок смены версии сайта с классической на мобильную и блоков с рекламой от Гугл или AdMob. Также он содержит мобильную версию панели управления сайтом. Это существенно повысит удобство, потому как в стандартной версии панели управления при работе на мобильных устройствах некоторые опции являются ограниченными в доступе.
8. WP Mobile Edition это полная копия предыдущего. Помимо вышеперечисленных опций данный плагин подключает возможность комментирования записей с помощью системы Disqus, а также создает дополнительную XML карту для мобильной версии.
9. Duda Mobile Website Builder поможет создать быстрый и привлекающий внимание сайт для мобильного устройства. Он отлично работает со всеми темами, которые предложены на официальном сайте движка вордпресс. Данный плагин используют создатели 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. Оно бесплатное и легкое в использовании.
Похожие статьи
wordpresslib.ru
Мобильная версия сайта WordPress | WordPress Mania
Доброго времени суток, дорогие мои друзья! Очень неприятно попадать на сайт без мобильной версии, когда ищешь информацию на бегу и поэтому я продолжаю важную тему для пользователей WordPress: как оптимизировать сайт для мобильных устройств? Как создать мобильную версию сайта WordPress? Мобильная версия сайта WordPress - плагин WP Mobile Detector.
Мобильная версия сайта WordPressОптимизировать сайт для показа на различных мобильных устройствах, если вам сложно изменить действующую конфигурацию темы WordPress, можно с помощью специальных мобильных плагинов, с одним из самых популярных и рекомендуемых Google - WPtouch, я познакомил вас в этой статье. Но, в связи с тем, что у бесплатной версии WPtouch очень много, даже слишком ограничений, естественно, надо рассмотреть его (ему) альтернативу, а такие есть. И к стати, Google, также предлагает к выбору из трёх вариантов мобильных плагинов. Вот, сегодня и предлагаю познакомится вам с ещё одним плагином для создания мобильной версии сайта на WordPress.
Мобильная версия сайта WordPress с плагином WP Mobile Detector
Мобильный плагин WP Mobile Detector для WordPressWP Mobile Detector Mobile Plugin, как и WPTouch, используется для отображения специальных тем на мобильных устройствах. Темы, используемые на сайте для обычных компьютеров, останутся без изменений. При отображении сайта на мобильных устройствах будет использоваться отдельная тема. На выбор доступны семь тем. Данный модуль автоматически распознаёт более 5 000 мобильных устройств и отображает совместимую с телефоном/планшетом тему. Ещё есть возможность просматривать статистику по посещениям пользователей с мобильных устройств. Вообщем, хороший плагин, только единственный большой минус, опять в бесплатной версии нельзя вставить мобильную рекламу, а так, WP Mobile Detector весьма достоин, чтобы использовать для своего сайта.
Для того, чтобы создать мобильную версию для вашего сайта WordPress, достаточно установить мобильный плагин WP Mobile Detector стандартным способом, через поиск по плагинам в админпанели, введя его название и после его активации, перейти сразу в подраздел Mobile Themes:
Мобильные темыНа странице выбора мобильной темы для вашего сайта, если вас устраивает тема по умолчанию, тогда всё, больше ни чего делать не надо. Конечно, можно подобрать из семи предложенных тем для мобильного сайта, для этого надо понравившеюся темку активировать, нажав соответствующею ссылку:
Активация мобильной темы для сайтаВот и весь, товарищи, процесс создания мобильной версии сайта. Можете теперь проверить свой результат оптимизации сайта для мобильных устройств, то есть удобство для пользователей. Пройдите по этому адресу - https://www.google.com/webmasters/tools/mobile-friendly/ введите свой адрес блога и через несколько секунд появится результат:
Проверка удобства просмотра на мобильных устройствахНа этом, дамы и господа, позвольте с вами попрощаться. Вроде ни чего не забыл, добавить больше не чего. На долго вас не задержал. Удачи вам и всего хорошего.
P.S. - В следующем посте, я познакомлю вас с ещё одним достойным мобильным плагином.
Понравилась статья? Поделись с друзьями!
wordpressmania.ru
15 бесплатных Wordpress плагинов для мобильного веб-сайта / Wordpress плагины / Постовой
WordPress является одной из самых известных и простых в использовании и управлении CMS. С ее помощью создаются самые разные сайты, например, блоги, корпоративные сайты, магазины. В WordPress доступно использование множества полезных плагинов. Создать сайт, который бы адекватно отображался на всех смартфонах и мобильных устройствах, не так уж легко. В данной статье будут рассмотрены лучшие WordPress плагины, позволяющие с легкостью оптимизировать ваш веб-сайт для телефонов, планшетов и других устройств.
Mobile Smart
Плагин Mobile Smart позволяет вашему WordPress сайту автоматически переключать тему, если пользователь использует мобильное устройство.
WPtouch
WPtouch — мобильный плагин для WordPress, который автоматически формирует простую и изящную тему для посетителей вашего WordPress сайта. Есть возможность настраивать некоторые детали, а также свободно переключаться между мобильной и обычной версиями сайта.
Any Mobile Theme Switcher
Этот плагин определяет мобильный браузер, и отображает тему, настроенную администратором. Для разных устройств можно установить индивидуальные темы.
WP Mobile Plugin
Если у вас не адаптивный сайт, этот плагин покажет красивую и отлично спроектированную мобильную тему посетителям, зашедшим с мобильных устройств. При этом код обычной версии сайта не изменится.
MobilePress
MobilePress — это плагин для WordPress, формирующий удобную мобильную версию вашего WordPress сайта или блога.
WordPress Mobile Pack
Целью этого плагина является расширение возможностей блогеров, издателей и других создателей контента. Поддерживается на различных устройствах, таких как iPhone, смартфонах с ОС Android, Windows Phone 8 и др.
Post Script Responsive Images
Этот плагин позволяет приводить изображения к нужному размеру прямо на ходу, а также автоматически трансформирует ранее загруженные изображения.
FV WordPress Flowplayer
Этот бесплатный, простой в использовании плагин является отличным решением для встраивания видео формата FLV или MP4 в ваши публикации или на страницы сайта.
Easy Responsive Shortcodes
Этот плагин обеспечивает полным набором простых в использовании шорткодов для создания столбцов, кнопок, вкладок, значков, и др. Он был разработан специально для использования в адаптивных темах, но также хорошо работает и в неадаптивных.
WP Smart Mobile Theme plugin
WP Smart Mobile Theme plugin формирует мобильную версию вашего WordPress блога, которая автоматически корректируется в зависимости от устройства.
Mobile Previewer
Этот плагин предоставляет зарегистрированным пользователям возможность предварительного адаптивного просмотра.
WP Responsive Menu
Используя этот плагин, можно для любых мобильных устройств с легкостью преобразовать свое wordpress меню в изящное sliding меню.
WP Mobile Detector Mobile Plugin
Плагин WP Mobile Detector Mobile Plugin автоматически определяет, использует ли посетитель сайта обычный мобильный телефон или смартфон, и соответственно загружает совместимую мобильную WordPress тему.
WP Mobile Edition
Плагин представляет собой полный инструментарий для «мобилизации» вашего WordPress сайта. Очень прост в использовании.
postovoy.net
Лучшие плагины для создания мобильной версии Wordpress сайта
Приветствую друзья. 2 февраля Яндекс анонсировал в своем блоге для вебмастеров новый алгоритм ранжирования сайтов в мобильном поиске – Владивосток. Суть его сводится к тому, что при запросах с телефонов поисковая выдача будет строиться с учетом адаптивности сайта к показу на маленьких экранах смартфонов.
Раньше этот фактор не учитывался, но тот, кто подсуетился заранее, сейчас окажется в выигрыше – будут выше в поиске, получат больше трафика, заработают больше денег. Подробнее новость смотрите тут. Google подобную методику начал применять еще раньше.
В новом Яндекс Вебмастере, о котором я писал недавно, есть функция проверки сайта на мобильность. С ее помощью можно проверить свой ресурс и на основании полученных результатов предпринимать какие-либо действия.
Речь сегодня пойдет о WordPress блогах и о том, как нам, простым труженикам сети, приспосабливаться к новым условиям.
Для начала надо понять, что есть 3 пути адаптации вашего ресурса под мобильный поиск:
- Создание отдельной мобильной версии сайта на поддомене или другом домене.
- Использование адаптивной темы WordPress, которая автоматически меняет размеры и расположение элементов при открытии на маленьких экранах.
- Применение разных тем оформления в зависимости от устройства – на компьютере будет один шаблон, для телефона другой (более простой и компактный).
Про первый случай говорить не хочется, так как это неэффективно, по сути, вы делаете отдельный сайт, а вот оставшихся 2 доступны для блоггеров.
Адаптивные темы для WordPress
Если вы еще не определились с «одежкой» для своего блога и только подходите к уроку про установку темы на WordPress, то при поиске смотрите те, которые изначально разработаны как адаптивные. В этом случае никаких проблем в будущем вы не встретите.
Аналогичным образом поступайте при заказе платных шаблонов – указывайте в техническом задании обязательную адаптацию под мобильные устройства.
Примером адаптивного шаблона может послужить текущая тема моего блога BiznesSystem.ru.
WordPress плагины для мобильной версии сайта
Теперь давайте перейдем к ситуации, когда шаблон у вашего блога уже есть и менять его вы не хотите, но он не рассчитан на мобильный трафик. К сожалению, адаптация темы, изначально не пригодной для смартфонов, дело непростое и сделать ее на коленках не получится. Вопрос решается созданием мобильной версии WordPress сайта с помощью плагинов. Это способ бесплатный и легкий в реализации.
Действуют плагины следующим образом – Сайт автоматически определяет устройство, с которого идет просмотр и, в зависимости от него, включает разные шаблоны – либо обычный, либо специальный мобильный.
Устанавливать плагины легко и с этим справится даже начинающий вебмастер. Как устанавливать плагины смотрите подробнее тут.
Все плагины, которые я приведу ниже, есть в каталоге WordPress и они устанавливаются прямо через админку.
1. WPtouch Mobile Plugin
Самый первый плагин для мобильной версии сайта, с которым я познакомился, он же и самый известный. Пример работы на моем сайте DmitriyZhilin.ru
В бесплатной вариации он содержит только один шаблон, но его можно настраивать – менять цвета шрифтов, фона, кнопок и т.д. Есть возможность добавить свой код в подвал и дополнительные CSS стили прямо из панели настроек.
Работает плагин на русском языке, правда, перевод слегка корявый на данный момент, но все понятно.
Кроме цветовой настройки есть возможность указать устройства, для которых будет применяться плагин – «яблоки», «андроиды», «windows фоны» и т.д.
2. WordPress Mobile Pack
Как и предыдущий вариант, имеет одну бесплатную тему, а остальные открываются после приобретения PRO версии.
Есть возможность добавить специальный логотип для мобильной версии, поменять стандартные цвета, выбрать список показываемых категорий и страниц.
Управление и настройки плагина WordPress Mobile Pack на английском языке, но все интуитивно понятно, тем более, что все начинает работать сразу после активации и можно дополнительно ничего не делать.
Что мне не понравилось, так это главная страница, на ней отображается название последней статьи и все, для перехода к другим записям и категориям необходимо листать сайт, хотя, почти весь экран главной страницы пустой.
Чуть не забыл – необходима версия PHP вашего хостинга не ниже 5.3.0
3. Плагин Mobile Smart
Очень интересный вариант. В отличие от предыдущих плагинов, этот не содержит в себе предустановленных мобильных тем, он выступает в качестве переключателя.
То есть, вы его устанавливаете и на главной странице настроек указываете WordPress тему, которая будет показана мобильным пользователям – тема может быть любая из тех, что вы нашли и закачали на сайт.
Нужна адаптивная тема для сайта (о которых я рассказывал в начале). Но тут фишка в том, что эта адаптивная тема работает не постоянно, а только для пользователей телефонов, всем остальным посетителям сайт выдает обычный ваш шаблон (не адаптивный).
4. WP Mobile Edition
Из тех, что я пробовал, этот плагин мобильной версии WordPress мне понравился больше всего. При минимуме настроек он содержит максимально удобный мобильный шаблон:
- Минималистичный дизайн (показал максимальную скорость и адаптивность в PageSpeed Insights от Google)
- удобное меню, специально адаптированное к маленьким экранам,
- удобная главная страница с последними статьями,
- кнопка переключения на обычную тему из мобильной и шорткод для размещения кнопки перехода в мобильную версию из обычной (этого не было в рассмотренных выше).
Плагин на русском, причем, перевод хороший. Хотя, необходимость в нем отсутствует, так как после активации я никаких настроек не делал.
Сам дизайн пока один, но он содержит несколько цветовых схем.
Единственный минус, тема показывает миниатюры записей, а так как у меня их нет, то напротив заголовков стоят пустые квадратики (на скрине видно). Не особо портят они внешний вид сайта, но отключить показ миниатюр возможности нет – жаль.
Какой плагин выбрать?
В заключении, отвечу на вопрос о выборе наиболее походящего плагина для вашего проекта. Единственно правильного решения нет. Я рекомендую попробовать каждый из приведенных мной вариантов.
Сначала испытайте плагины с мобильными темами – 1, 2, 4. Если ни один из них вам не приглянется, то ищите хорошую тему с адаптивным дизайном и подключайте ее для мобильных пользователей плагином Mobile Smart (3), тут уж никаких ограничений нет – использовать можно любой шаблон.
Не забудьте про кэширование
Если вы используете на сайте плагины кэширования (а использовать их надо обязательно), то учитывайте, что пользователи видят страницы сохраненные в кэше, а не генерируемые CMS, поэтому без соответствующих настроек, разделения страниц для мобильных и стационарных посетителей не будет — из кэша будет приходить одинаковая страница.
У плагина Hyper Cache, настройки которого приведены здесь, есть специальная вкладка «Мобильный» и в ней нужно указывать, что кэш должен храниться отдельно для компьютеров и отдельно для телефонов. В той же статье я про эту настройку рассказывал. У других плагинов кэширования должны быть аналогичные настройки, без них смысла делать мобильную тему нет.
- 5
- 4
- 3
- 2
- 1
biznessystem.ru
Мобильная версия сайта на WordPress
Реалии сегодняшнего дня обязывают иметь мобильную версию сайта всем проектам.
Гугл вообще обещает понижать в выдаче сайты, которые не имеют мобильную версию и плохо просматриваются в мобильных устройствах.
У меня в Гугл-вебмастере уже больше года висит такая напоминалка.
Но я же супер-занятый и мне некогда обращать внимание на такую ерунду!
Пару лет назад я создал мобильную версию сайта с помощью одного сервиса (сейчас даже ссылку давать не буду). Но в итоге получил дублирование контента сайта на стороннем ресурсе.
Я сначала считал, что это же только для мобильных, но потом увидел в поиске мои дублированные страницы с этого сервиса, и они были выше моих основных. Траст сервиса то повыше моего.
Короче, я рубанул эту мобильную версию!
В наше время, когда уникальность сайта, это наше все, так разбазаривать дубли, я считаю не разумно.
Рост числа мобильных пользователей.
Вообще, если смотреть статистику, то даже при моей специфике ИнфоМастерской, уже примерно 4-5% заходят на блог с мобильных устройств. И количество мобильных пользователей только растет.
Давайте сам порассуждаем, еще недавно планшет или смартфон были если не роскошью, то достаточно дорогими гаджетами и не далеко не все могли себе позволить.
Сейчас каждый из нас покупая или меняя мобильный телефон уже не ограничивается возможностями простого звонка или фотосьемки.
Попробовав раз возможности смартфона на андроиде или на 8-ой винде, мы уже не захотим возвращаться к простому мобильному.
Планшеты вообще стали чем-то супер-доступным. Родители детям покупают планшет вместо громоздкого персонального компьютера или даже ноутбука, и дешевле и проще в обращении.
Таким образом количество мобильных в сети растёт в геометрической прогрессии.
Если мы упустим этот рынок интернет-серферов сейчас то завтра наверстать будет очень сложно. Конкуренция растет с каждым днем.
Моя задача не убедить вас-делать или не делать мобильную версию сайта.
Я хочу Вас предостеречь от того чтоб не упустить аудиторию и удержать, а еще лучше нарастить посещалку Вашего проекта.
Теперь давайте обсудим как лучше сделать мобильную версию сайта.
Как сделать мобильную версию сайта на WordPress
Мобильную версию сайта можно сделать с помощью плагинов и без.
Давайте сначала обсудим как сделать моб. версию без плагинов.
Еще недавно был очень популярным способом было использование различных сервисов. Суть работы была простая.
Вы прописывали в сервисе rss-ленту сайта, и они создавали на своем поддомене мобильную версию Вашего. Все вроде хорошо, но Ваш контент появляется на чужом ресурсе.
Опять размазывать тему не буду, читайте в начале этого поста почему я отказался от этого способа.
Можно сделать мобильную версию с помощью адаптивной темы.
Сайт распознает что пользователь зашел с мобильного и меняет стили для темы WordPress.
У меня до недавнего времени так и работал сайт, но что-то в последнее время, а точнее последний год, все равно не нравится Гуглу, и он перестал считать, что мой сайт адаптирован под мобильные устройства.
Возможно я потом сяду и пободаю свою тему, но сейчас немного не до этого. Сейчас моя задача решить проблему создания мобильной версии сайта малой кровью и как можно быстрее.
Поэтому я все же решил обратится к плагинам.
Делаем мобильную версию сайта плагинами.
Для рассмотрения я взял три плагина.
Я знаю, что плагинов для создания моб.версии сайта намного больше, но я решил рассмотреть самые популярные и доступные.
1. Jetpack это универсальный плагин с массой возможностей для WordPress.
Среди этих возможностей и создание мобильной версии Вашего сайта.
Подключается очень легко и особых настроек не требует.
Преимущества Jetpack для создания мобильной версии сайта:
1. Простота настроек-включил и пользуйся
2. Все элементы сайта остаются в дизайне просто адаптируются под мобильную версию
3. Плагин постоянно обновляется
4. Что не мало важно это плагин от wordpress.com
Немного о том, как настраивать плагин. Немного потому что, все настройки сводятся к трем пунктам:
1. Показывать или нет краткие анонсы на главной моб.версии сайта
2. Показывать или нет миниатюры к записям
3. Показывать или нет ссылку на Jetpack
Как видим настройки очень простые и, если честно, то мобильная версия сайта смотрится вполне прилично без потерь информации с сайтбара. Сайтбар выводится под основным контентом сайта.
Вот как выглядит мой сайт wp-home.info в моем телефоне. На этом сайте я использую Jetpack.
Как работать с этим плагином и другие его возможности я показываю в бесплатном видеокурсе “Сайт на WordPress от новичка до ПРОФИ” в второй части курса.
Вот прилагаю видео из этого курса о том, как настроить мобильную версию проекта с помощью Jetpack
Недостатки Jetpack
1. Но к сожалению, для моего блога Инфомастерской он не подходит, т.к. Jetpack создает не малую нагрузку на сайт (в него напихали кучу функционала) и я при посещаемости ИМ уже не могу себе позволить.
Сайт WP-home.info еще молодой и для него такая нагрузка вполне подходит.
2. Второй недостаток исходит из первого. В плагин напихали кучу возможностей и инструментов, которые в основной массе своей, не нужны на сайте, а запросы пусть и пустые к базе данных создают.
Я проводил эксперимент и отключал все функции Jetpack, и он все равно грузил базу запросами.
От себя могу порекомендовать попробовать этот плагин, если Ваш сайт справляется, то ради бога, плагин реально хороший и мощный.
2. WPtouch Mobile Plugin плагин для создания мобильной версии с PRO версией.
Отличный плагин с кучей настроек.
Пусть вас не пугает что их много, все они интуитивно понятные и просто настраиваются. Как по мне, чем больше настроек, тем больше возможности сделать ваш сайт уникальным и подстроить под основной дизайн Вашего проекта.
Я поставил этот плагин на свой сайт поддержки партнеров. Что сказать результатом почти доволен и буду наблюдать дальше.
Чем хорош WPtouch для создания мобильной версии сайта:
1. Плагин постоянно обновляется и держит в тонусе пользователя
2. Русифицированный и удобный интерфейс
3. Расширенная настройка меню
4. Загрузка своего логотипа
5. Возможность подключить и настроить изящный слайдер
6. Настройка вывода записей
7. Большой выбор подключения социального обмена-кнопок
8. Возможность вставить в футер дополнительную HTML- вставку
9. Возможность добавлять свои стили
10. Пред осмотр все изменений в настройках
Прилагаю видео с обзором возможностей плагина.
Из недостатков плагина.
1. Плагин не хило грузит сайт при замере плагином P3, но думаю подправить это плагинами кеширования. но… читайте второй пункт
2. Плагин конфликтует с плагином кеширования WP Super Cache, что совсем не хорошо. Эт
info-m.pro
