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


Мобильная версия сайта на Wordpress: ТОП-3 плагинов

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

Ниже представлены 3 плагина для WordPress, позволяющих адаптировать ваш сайт для мобильных платформ:

1) WP Touch

WPtouch автоматически переделывает ваш WordPress сайт для мобильных платформ, реализует подгрузку статей на ajax и плавные переходы при их просмотре с устройств типа iPhone, iPod touch, мобильных телефонах на платформе Android, мобильных устройствах BlackBerry OS6+ и многих других

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

wptouch-Crunchify[1]Подробная статья по этому плагину доступна здесь.

2) WP Mobile Detector

WP Mobile Detector WordPress plugin автоматически определяет если пользователь использует мобильный телефон или смартфон, то в этом случае загружает совместимую мобильную тему WordPress для каждого.

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

3) MobilePress

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

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

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

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

VN:F [1.9.22_1171]

Rating: 3.1/5 (14 votes cast)

wpincode.com

Как сделать мобильную версию сайта wordpress, обзор плагина для адаптации

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

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

google-panel

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

#content{max-width: 1280 px;}

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

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

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

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

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

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

Responsible

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

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

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

WordPress Mobile Pack

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

WP Mobile Edition

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

Duda Mobile Website Builder

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

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

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

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

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

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

Duda Mobile

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

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

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

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

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

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

iPad-Peek

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

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

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

Похожие статьи

wordpresslib.ru

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

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

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

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

clip_image002

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

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

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

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

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

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

Вообще, если смотреть статистику, то даже при моей специфике ИнфоМастерской, уже примерно 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 Mobile Plugin плагин для создания мобильной версии с PRO версией.

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

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

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

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

4.  Загрузка своего логотипа

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

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

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

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

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

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

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

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

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

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

info-m.pro

Мобильная версия Wordpress сайта за 10 минут: плагин Wptouch

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

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

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

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

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

В нашем случае мобильную версию wordpress нам поможет сделать замечательный плагин Wptouch, который, если смотреть с популярных сенсорных устройств, например, таких как iPhone, IPod Touch, Android, BlackBerry будет хорошо отображаться! Админ-панели позволяет настроить многие аспекты его внешнего вида. Там есть куча настроек, которые вам помогут всё выполнить максимально чётко.

Где взять плагин?

Это можно сделать прямо через админку вашего сайта, перейдя в Плагины — добавить новый, и вбить в поиск плагинов его название: «мобильная версия wordpress». Как видите, у данного плагина хороший рейтинг.

Вместо кнопки «детали» у вас, будет кнопка «Установить», нажимаете на неё и активируете плагин. Либо же есть другой вариант. Можно скачать плагин из интернета себе на компьютер и потом установить его по всем известной схеме, кто не знает, читайте статью «Как установить wordpress плагин».

Как видите, тут всё просто, а вот уже как его настроить, совсем другой вопрос, поскольку плагин полностью на английском, можно скачать видеоурок по настройке плагина (качайте на ютубе).

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

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

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

Похожее

owlweb.ru

Мобильная версия WordPress сайта - плагин WP Mobile Detector

Здравствуйте уважаемые коллеги, гости wordpress-book.ru.

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

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

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

wordpress-book-ne-optimizirovan

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

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

Согласитесь, глупо терять солидную долю трафика (до 40%) из-за такой ерунды, как отсутствие мобильной версии сайта.

Можно адаптировать свою тему соответствующим образом вручную. А можно и обойтись специальным расширением для своей CMS. Второй вариант подойдет тем, кто несилен в верстке или, если очень хочется создать мобильную версию прямо сейчас, на время проведения работ по адаптации или вообще на постоянную основу. Как говорится: "Нет ничего более постоянного, чем временное".

Тестируя самые популярные плагины WordPress для решения поставленной задачи, я остановился на WP Mobile Detector.

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

В отличие от других, этот плагин оптимизировал все страницы wordpress-book.ru под мобильные устройства без замечаний. В бесплатной версии он не имеет ограничений по функционалу, а только по количеству предустановленных тем. Прост в настройке, быстр, легок и довольно симпатичен.

Настройка WP Mobile Detector

После установки и активации стандартным способом, в левой колонке панели администратора появится новое подменю - WP Mobile Detector, при открытии которого появятся пункты с настройками, статистикой и списком доступных тем. Тут все просто, сами разберетесь.

Настройка WP Mobile Detector

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

cache

Без этого не будет работать кэширование мобильной версии вашего WordPress сайта.

Зайдите на свой сервер по ftp, найдите там папку cache и присвойте ей полные права, как на картинке.

изменить атрибуты папки

Предупреждающее сообщение исчезнет.

Перевод WP Mobile Detector, удаление ссылок

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

Начнем с самого простого и наиболее важного - с удаления этих самых ссылок.

Отредактируем файлы темы "bluesteel-mobile", уже установленной по умолчанию. Использовать будем текстовый редактор Notepad++.

Итак, откройте файлы footer.php, sidebar.php, functions.php, и удалите из них коды, выделенные на скриншотах. Пути к файлам подчеркнуты красной чертой.

footer

sidebar

functions

Для русификации, потребуется отредактировать файлы functions.php - в корне плагина и файлы шаблона - sidebar.php, search.php, index.php, comments.php, category.php, 404.php, archive.php, searchform.php. Просто замените все слова, нуждающиеся в переводе (напечатаны ядерно-черным шрифтом), на русские.

searchform

Перед редактированием, обязательно измените кодировку текстового документа с ANSI на UTF-8 (без BOM) в инструментах "Кодировки" текстового редактора Notepad++.

Для наглядности или для использования, скачайте уже отредактированный мной WP Mobile Detector по ссылке ниже.

Скачать русский WP Mobile Detector версии 1.8 без внешних ссылок.

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

wordpress-book.ru

Мобильная версия WordPress - плагин WPtouch

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

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

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

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

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

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

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

Плагин WPtouch Mobile Plugin - мобильная версия сайта WordPress

Плагин WPtouch Mobile Plugin - мобильная версия сайта WordPressWPTouch – плагин для создания мобильной версии сайта

Самый популярный модуль WPtouch который советует использовать Google, не даром же, уже последовали рекомендациям поисковика более 6 778 799 пользователей. Круто! WPTouch – мобильный плагин, который служит для создания отдельной версии сайта, оптимизированной для мобильных устройств. Темы, используемые на сайте для обычных ПК, останутся без изменений. При отображении сайта на мобильных устройствах будет использоваться отдельная тема. На выбор доступны несколько тем. Жалко, что в бесплатной версии доступна только одна тема.

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

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

WPtouch - Базовые настройкиБазовые настройки плагина WPtouch Mobile Plugin

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

Выбор темы в WPtouchТемы и расширения плагина WPtouch Mobile Plugin

Отметьте в общих настройках то, что вам будет доступно и сохранитесь:

Общие настройки темы BauhausWPtouch - Параметры Bauhaus

Во вкладке "Фирменная символика" можно выбрать: Цвета Темы; Стиль шрифта; загрузить эмблему для сайта и указать ссылки на социальные сети:

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

Всё, здесь нам больше ловить не чего, остальные вкладки даже можно не открывать, показ рекламы на мобильной версии сайта не доступна. Блин, тем кто зарабатывает на рекламе очень хреново. Надо искать альтернативный плагин или покупать PRO версию плагина. Ладно, пока идём дальше. Открываем подраздел "Меню" и выбираем из списка (если у вас два и больше), какое меню вашего сайта отображать в мобильной версии блога:

WPtouch Mobile PluginТематическое меню мобильной версии сайта- плагин WPtouch Mobile Plugin

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

Значки для меню мобильной версии сайтаПеретащите значки, чтобы связать их с пунктами меню

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

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

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

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

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

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

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

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

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

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

P.S. - Google с 21 апреля начнет использовать новые алгоритмы поиска

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

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

Понравилась статья? Поделись с друзьями!

wordpressmania.ru

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

Мобильный сёрфингМобильная версия сайта, зачем её делать? Заинтересовался этим вопросом буквально на днях и сделал для себя открытие. Посмотрел рейтинги различных инструментов и плагинов для решения данной задачи, остановился на WPTouch. Организовал мгновенно для одного из своих проектов мобильную версию WordPress сайта. И ликовал – версия сайта для мобильных устройств стала приносить существенную прибыль, с мобильного трафика.

Мобильную упрощённую версию должен иметь любой более-менее посещаемый сайт на WordPress. Она улучшит поведенческие факторы юзеров, заходящих с мобильных устройств + серьёзно повысит CTR рекламных объявлений. Почему?

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

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

Без мобильной версии сайта, рекламные блоки казались маленькими и убогими, при заходе с того же Iphone – чтобы клацнуть по рекламе, нужно было увеличить масштаб и прокрутить страницу вниз. С мобильных юзеров я имел ранее совсем небольшой профит. Теперь же вижу, что после создания мобильной версии сайта, доход с проекта может увеличиться на 10-15% – мобильные юзеры клацают отлично как на блоки Adsense, так и на РСЯ. Проект, на котором я опробовал WPTouch, имеет львиную долю мобильного трафика – 24% от всех посетителей.

Проверяйте статистику посещений с мобильных устройств, и если процент таких пользователей превышает хотя бы 5% – имеет смысл заняться созданием мобильной версии вашего сайта. Сначала я был в замешательстве – как отнесутся поисковые системы к подмене шаблона, не будет ли негативной реакции? Ведь я не собирался выносить мобильную версию на поддомен или создавать альтернативу в папке wap. Проконсультировался с представителем Яндекса и узнал, что и Google, и Yandex – отлично относятся к сайтам, имеющим мобильную версию для посетителей, работающую по принципу WPTouch: при заходе посетителя, определяется User-agent, и если информация в нём говорит о том, что пользователь с мобильного устройства – подгружается мобильный шаблон. Если юзер зашёл с обычного компьютера – грузится стандарт.

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

Путь к нужной теме для редактирования, находится по адресу WPTouch -> Themes -> Bauhaus -> Default. Меняем, что нужно, заливаем с заменой через FTP. Самый основной и нужный шаблон – single.php – однако для полного фэн-шуя, придётся редактировать практически каждый файл, чтобы оформить всё достойно. Лично я убрал с топового меню выдвигающееся меню страниц, поставил свои социальные кнопки, русифицировал форму комментариев + добавил несколько разных мелочей. Также, придётся редактировать много чего по адресу WPTouch -> Themes -> Foundation -> Default. Разумеется, плагин будет исправно работать и без каких-либо вмешательств в шаблоны. Но, я настоятельно рекомендую хотя бы перевести фразы шаблона с английского на русский + обязательно добавить в single.php несколько рекламных блоков.

Не забудьте поставить срезы для Яндекс Директа и создать новые рекламные блоки в Adsense, для отслеживания эффективности монетизации мобильного трафа :)

beaseee.ru