Как настроить wptouch mobile plugin

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

Просмотров: 2 751

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

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

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

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

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

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

Google Search Console

Чтобы узнать, какие страницы вашего сайта WordPress неудобно просматривать на мобильных устройствах, воспользуйтесь соответствующим отчетом в Search Console:

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

Проверка оптимизации для мобильных

Инструмент проверки оптимизации для мобильных от Google: Оптимизирована ли ваша страница для мобильных устройств? Проверьте, удобно ли просматривать страницу на мобильном устройстве. Для этого введите URL страницы и ознакомьтесь с результатами ее анализа. Инструмент от Гугл — search.google.com/test/mobile-friendly

Если результат плохой:

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

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

Проверка мобильных страниц Яндекс. Вебмастер

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

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

От Google Search Console — Сайт сайт.ru не оптимизирован для мобильных устройств и перечисляются проблемы .

От Яндекс. Вебмастер — Сайт https://ваш_сайт.ru признан не оптимизированным для мобильных устройств.

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

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

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

Также можно подключить Яндекс Турбо‑страницы для WordPress и создать Google AMP-версию сайта ВордПресс. И будет вам счастье. Ну, а вдруг — не будет, тогда мобильная версия WordPress сайта вас спасёт.

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

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

Сделайте свой сайт WordPress мобильным всего за несколько кликов с помощью WPtouch Mobile.

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

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

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

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

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

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

Установить плагин можно стандартным путём, то есть, через поиск по плагинам, вводите его название устанавливаете и активируете:

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

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

Настроек WPtouch в бесплатной версии мало, только лишь, самое необходимое:

Здесь, в принципе ни чего менять не надо, но можете сделать, как вам нужно. Оставьте настройки общие по умолчанию. А нажав кнопку Previev Theme (Предварительный просмотр темы) вы увидите, как выглядит ваша мобильная версия сайта WP:

Пробежитесь по всем разделам настроек плагина WPtouch. Например, настройте мобильное меню или перейдите в настройщик мобильной темы WordPress и продолжите работу:

Интерфейс настройки позволяет просмотреть изменения на мобильном сайте перед их публикацией. Вы можете переходить на другие страницы сайта в режиме предпросмотра. Можно визуально, легко настроить мобильную версию сайта WordPress. Нажимаем каждый пункт и настраиваем нужные параметры:

После не забываем нажать кнопу Опубликовать.

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

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

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

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

Заходим снова сюда — https://www.google.com/webmasters/tools/mobile-friendly/ вводим URL сайта или отдельной страницы, ждём пару секунд и опля, наш результат такой:

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

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

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

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

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

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

Источник

WPtouch — плагин для wordpress или как сделать мобильную версию блога за считанные минуты!

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

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

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

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

Для тех, кто зарабатывает на рекламе Гугл Адсенс, Яндекс Директ, Банерах, установить мобильную версию на свой блог следует обязательно, так как со смартфона Galaxy S III или с планшета ASUS Google Nexus 7 кликать по рекламе с простой версии темы неудобно, проверял лично.

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

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

Плагин WPtouch. Для чего он нужен?

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

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

Как установить WPtouch?

Все также, как и с обычным плагином.

1. Производим скачивание на сайте плагинов вордпресс;

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

3. Соединяемся с FTP-сервером.

4. Переходим вот сюда: wp-content/plugins/;

5. Теперь переносим плагин в эту папку, посредством: курсор мыши наводим на плагин, кликаем и не отпуская переносим в список всех плагинов;

6. Сейчас плагин внутри вашего сайта, но он еще не работает, так как вам необходимо перейти в админку блога и Активировать WPtouch. Активацию можно сделать, зайдя в «ПЛАГИНЫ».

7. После проведенной активации переходим в настройки. Они находятся в разделе «ПАРАМЕТРЫ», на новой версии вордпресс образуется новая вкладка, в самом низу, то есть настройки плагина не в разделе параметры и туда далее, а прямо среди общих разделов.

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

Настройки WPtouch?

Установив плагин, можете проверить, как выглядит ваш сайт. Это можно сделать, открыв его на смартфоне, телефоне и каком-либо другом мобильном устройстве. Если нет смартфона, то мобильный найдется у каждого.

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

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

Что-то не устраивает? Тогда проведите настройки! Как туда попасть я уже сказал выше. Сейчас подробнее о них!

В разделе WPtouch есть несколько подразделов:

1. Что нового;
2. Основные параметры;
3. Темы и Расширения;
4. Настройки темы;
5. Меню;
6. Обновить до Pro;

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

Первым делом посетим основные параметры . Если все отображается на латинском, тогда выполняем перевод.

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

Вот, что мы здесь нашли:

• Отображение названия блога;
• Регионализация;
• Режим отображения;

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

Темы и расширения. Это второй раздел плагина.

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

Настройки темы . Здесь думаю и остановимся ненадолго.

• Общие;
• Брендинг;
• Иконки Закладок;
• Веб-режим App;
• Реклама;

Делайте все под себя и довольствуйтесь.

Последнее, что я хотел бы отметить из настроек — это Меню .

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

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

С уважением, [urlspan]Жук Юрий.[/urlspan]

Источник