Настраиваем мобильную версию WordPress блога

Автор: | Рубрика: Плагины для Wordpress | Обновлено: 2015-04-12 | Создано:
Просмотров: 2347
настройка мобильной версии сайта с помощью плагина WPtouch

Всем привет!

До 21 апреля осталось чуть больше недели, чтобы оптимизировать свой сайт под мобильные устройства. За это время вряд ли получится у программиста заказать и получить готовую мобильную версию для сайта, да и не у всех могут быть деньги на это. В этой статье я расскажу, как сделать мобильную версию сайта с помощью плагина WPtouch Mobile Plugin.

Как проверить оптимизирован ли сайт для мобильных устройств и как он отображается на устройствах с различным расширением экрана, читайте по ссылке http://inetsovety.ru/a-vash-sayt-optimizirovan-dlya-mobilynh-ustroystv/

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

С помощью плагина WPtouch Mobile Plugin даже новичок сможет сделать мобильную версию для своего WordPress сайта, если установленный шаблон не адаптивный. Не смотря на то, что плагин имеет две версии бесплатную и платную, базовой версии вполне достаточно для среднего сайта. В том случае, когда у вас крутой сайт, который приносит нормальный доход, для него лучшим решением будет заказать программистам мобильную версию, а не покупать Про версию WPtouch за 59 долларов.

Установка плагина стандартная. В строку поиска вводим название WPtouch Mobile Plugin и устанавливаем его. На этом скрине смотрите пошаговые действия по установке:

установка плагина WPtouch Mobile Plugin

Как только вы активировали плагин, у сайта появилась мобильная версия. Проверка удобства просмотра на мобильных устройствах от Гугла показывает «Отлично! Страница оптимизирована для мобильных устройств». Больше можно ничего не делать. Все работает. Зайдите на свой сайт со своего телефона и посмотрите.

Для тех, кто желает покопаться в настройках, а также добавить рекламу в плагин WPtouch, рассмотрим его функционал более подробно.

В админке в левой колонке появился пункт WPtouch.

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

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

Третий пункт – «Темы и расширения». Здесь нам делать нечего. В бесплатной версии есть только одна тема – Bauhaus, а из расширений вообще ничего не доступно.

темы мобильной версии в пдагине WPtouch

Идем дальше. Четвертый подпункт – «Параметры темы». Он имеет аж 5 вкладок «Общие», «Фирменная символика», «Закладка пиктограмм», «Режим веб-приложения», «Реклама».

На первой вкладке «Общие» обратите внимание на следующие настройки: вывод количества записей, поэкспериментируйте с эскизами, выберите какие элементы показывать (комментарии, слайдер). К сожалению, для бесплатной версии не доступен вывод блока похожих записей. На вкладках «Фирменная символика» и «Закладка пиктограмм» можно изменить цвета и эмблемы темы.

настройка вывода постов в WPtouch

В четвертом пункте «Меню» выберите, какие страницы меню показывать, а какие нет. К каждой странице можно добавить значки:

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

Как вы заметили, в бесплатной версии нельзя добавить рекламу, которая будет отображаться на мобильном. Это ограничение можно обойти, добавив в файл темы рекламный код. Минус у этого способа следующий – при обновлении плагина рекламные коды нужно добавлять заново.

Хочу обратить ваше внимание на то, что для телефона нужно создавать рекламные блоки своего формата. В Адсенс есть стандартный блок 320*100. Можно создать свой с шириной 320, а высотой 300. Поэкспериментируйте и посмотрите результат.

В случае с тизерной рекламой, можно создать блок шириной все те же 320 пикселей. А в нем расположить 3 объявления в столбец с размером картинки 50*50. Смотрится отлично. Еще я добавила ссылку «читать далее», которая выводится справа от тизера.

Теперь объясню куда же добавлять коды. В бесплатной версии плагина WPtouch есть всего одна тема Bauhaus. Зайдем в папку с ней по следующему пути сайт.ru/public_html/wp-content/plugins/wptouch/themes/Bauhaus/default

И вы увидите список файлов, которые отвечают за отображение сайта на мобильных устройствах:

список файлов темы

Нас интересует файл single.php. В него мы и будет добавлять коды.

Первый блок Адсенс 320*100 я добавила после вывода миниатюры, сразу после этого кода:

<div class="post-page-thumbnail">
<?php the_post_thumbnail('large', array( 'class' => 'post-thumbnail wp-post-image' ) ); ?>
</div>

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

Второй блок Адсенс 320*300 в конец поста, перед кодом:

<?php get_template_part( 'related-posts' ); ?>

А код тизерки перед выводом комментариев:

<?php if ( comments_open() || wptouch_have_comments() ) { ?>

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

<?php get_footer(); ?>

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

Жду ваших комментариев.

С уважением, Виктория – блог inetsovety.ru

Поделиться ссылкой на пост в соц. сетях
Получать уведомления о новых статьях на e-mail
Комментариев: 64 к статье "Настраиваем мобильную версию WordPress блога"
  • Александр 2016-01-06 в 07:06

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

    Ответить
    • Люся 2016-11-20 в 02:33

      Александр, расчёт не на «очень многим не нравится реклама», а на меньшую часть. Если бы не кликали, рекламу бы и не ставили.

      Ответить
  • Павел 2015-09-15 в 10:23

    Виктория вы супер! Сбылась мечта идиота. 🙂 Наконец-то я настроил мобильный плагин как положено со всеми картинками и илюстрациями. И помогли мне в этом вы. Проблема действительно была из-за того, что я не задавал своим статьям миниатюры. До этого просто загружал картинки и всё, думал что этого достаточно. Спасибо вам большое! Желаю вашему блогу развития и процветания! 🙂

    Ответить
  • Павел 2015-09-06 в 16:05

    Совсем недавно мой знакомый блогер похвастался установкой плагина WPtouch и я посмотрел, как выглядит его сайт через мобильный. Какого же было мое удивление, когда я увидел отличную картинку, совсем отличную от моей. В кружках на главной у него были картинки из статей, а в шапке меняющие иллюстрации из последних записей. Версию он установил такую же бесплатную как у меня. Настройки теже. После длинной переписки с ним, я так и не понял почему такая разница. Может дело в шаблонах? Смотрите сами: мой блог на мобильном: web-klik.ru и его: ojseo.ru В чем может быть проблема?

    Ответить
    • Виктория 2015-09-14 в 12:20

      Шаблоны у мобильных версий у вас одинаковые.
      В шапке у него выводится слайдер. В настройках плагина зайдите: параметры темы — общие — внизу поставьте птички возле «Включить готовый слайдер» и «Популярные записи на линейке также отражены в листингах».
      Что касается миниатюр в кружках, странно почему они не выводятся у вас. Вы же к каждой записи загружаете миниатюру через «Добавить миниатюру» в правом сайдбаре на странице добавления новой записи. Если да, то не понятна причина.

      Ответить
  • Ранис 2015-08-06 в 14:00

    А как относиться Google к этому плагину?

    Ответить
  • Алексей Щукин 2015-06-05 в 22:47

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

    Ответить
    • Сергей Грицюк 2015-07-31 в 18:22

      Авторитетные сайты, блоги, магазины все же держат позиции.

      Ответить
    • Люся 2016-11-20 в 02:37

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

      Ответить
  • Карлыгаш 2015-05-13 в 09:56

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

    Ответить
    • Сергей Грицюк 2015-07-31 в 18:23

      Рекламные картинки или картинки с сайта?

      Ответить
  • Виталий Охрименко 2015-05-02 в 10:54

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

    Ответить
    • Сергей Грицюк 2015-07-31 в 18:24

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

      Ответить
    • Люся 2016-11-20 в 02:40

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

      Ответить
  • Александр 2015-04-24 в 09:21

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

    Ответить
    • Виктория 2015-04-24 в 11:25

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

      Ответить
      • Александр 2015-04-24 в 11:43

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

        Ответить
        • Виктория 2015-04-25 в 15:02

          В файле single.php плагина, полный адрес к нему есть в статье, удалите строчки:
          < див class="post- page- thumbnail" >
          < ? php the_ post_ thumbnail('large', array( 'class' => ‘post-thumbnail wp-post-image’ ) ); ? > И закрывающийся див не забудьте удалить.

          Ответить
          • Александр 2015-04-25 в 15:57

            Да, спасибо увидел уже и удалил, все отлично)

            Ответить
        • Юрий Йосифович 2015-04-29 в 18:16

          Да, это распространенная проблема на многих блогах — как видим с комментария решается довольно просто.

          Ответить
      • Юрий Йосифович 2015-04-29 в 18:15

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

        Ответить
        • Сергей Грицюк 2015-07-31 в 19:24

          Юра, рекламу можно и нужно ставить, если она особо не напрягает читателей. Как же без рекламы?

          Ответить
        • Люся 2016-11-20 в 02:43

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

          Ответить
      • Виктория 2015-06-12 в 14:18

        Без проблем реклама отображается и на компьютерной версии и на мобильной в середине записи при использовании плагина Quick Adsense.

        Ответить
        • Сергей Грицюк 2015-07-31 в 19:26

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

          Ответить
        • Люся 2016-11-20 в 02:45

          И что? CyrToLat не поддерживается дольше, а все пользуются.

          Ответить
      • Сергей Грицюк 2015-07-31 в 19:21

        Виктория, время уже прошло с момента последнего вопроса. Может уже нашли как вставить код Адсенс на мобильную версию сайта посредине текста?

        Ответить
        • Виктория 2015-08-01 в 07:01

          Еще не нашла. Пока добавила рекламу в начало и конец поста.

          Ответить
    • Юрий Йосифович 2015-04-29 в 18:14

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

      Ответить
      • Сергей Грицюк 2015-07-31 в 19:27

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

        Ответить
  • Павел 2015-04-20 в 12:45

    Да, есть плагин супер кеш. Первый раз, когда ставил, он был активный и страниц больше было, которые открывались не в той версии, которой нужно.
    Вчера отключил супер кеш, но не удалил и переустановил снова плагин WPtouch Mobile. На сей раз после смены версии внизу сайта, только одна страница не открылась в той версии, которая нужна.
    Возможно вы правы Виктория и дело может быть в несовместимости этих плагинов друг с другом.
    Сегодня зашёл со смартфона и приятно был удивлён, что снова все страницы в мобильной версии показываются. Правда до этого почистил куки и сменился айпи у телефона. Кнопку переключения версий не трогал.
    Вообщем всё нормально работает, если не трогать кнопку переключения версий и плагин с кешом нужно наверное вообще удалить. Думаю пока. Как вы считаете?

    Ответить
    • Виктория 2015-04-20 в 15:08

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

      Ответить
      • Юрий Йосифович 2015-04-29 в 18:18

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

        Ответить
        • Сергей Грицюк 2015-07-31 в 20:01

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

          Ответить
        • Люся 2016-11-20 в 02:50

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

          Ответить
    • Юрий Йосифович 2015-04-29 в 18:17

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

      Ответить
      • Сергей Грицюк 2015-05-31 в 17:58

        Вот поэтому лучше поставить адаптивную тему и оставить плагин кеширования, а WP Touch удалить, чтоб не было конфликтов.

        Ответить
      • Люся 2016-11-20 в 02:55

        Интересно, в платной версии WPtouch Mobile есть проблемы с несовестимостью с плагинами кэширования как у Павла? Если нет, может стоит приобрести платную версию.

        Ответить
  • Павел 2015-04-20 в 08:45

    Добавил плагин. Все нормально, гугл одобрил, но есть некоторые нюансы:
    1) При просмотре сайта на смартфоне, после переключения внизу сайта на полную версию и пролистав несколько страниц, переключить обратно на мобильную версию получается уже не со всех страниц. И открываются потом уже некоторые страницы в мобильной версии, а некоторые в полной.
    Изначально после установки плагина все страницы в смартфоне отражаются в мобильной версии. А вот после того, как переключишь внизу на полную, потом обратно и происходит такая котовасия.
    Скажите, у кого-нибудь наблюдались такие проблемы?

    Ответить
    • Виктория 2015-04-20 в 11:49

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

      Ответить
      • Юрий Йосифович 2015-04-29 в 18:20

        Дело 100% в плагине кеширования. Нужно искать настройки и корректно его настроить.

        Ответить
        • Люся 2016-11-20 в 03:00

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

          Ответить
    • Юрий Йосифович 2015-04-29 в 18:19

      Эта проблема наблюдается только тогда, когда некорректно настроен плагин кеширования.

      Ответить
      • Люся 2016-11-20 в 03:03

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

        Ответить
    • Сергей Грицюк 2015-05-31 в 17:55

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

      Ответить
    • Сергей Грицюк 2015-07-31 в 20:03

      Нужно почистить кэш и все станет ясно.

      Ответить
  • Людмила Лао 2015-04-18 в 20:27

    Виктория, спасибо большое за обзор плагина. Установила на оба свои сайта. Искала как исправить недоразумение с мобильными устройствами. Теперь все отлично!

    Ответить
    • Юрий Йосифович 2015-04-29 в 18:20

      У вас сразу после установки все корректно работает, или также пришлось думать как настраивать плагин кеширования?

      Ответить
      • Сергей Грицюк 2015-05-31 в 17:53

        Плагин кеширования временно можно деактивировать. У меня он часто в такой стадии находится 🙂

        Ответить
  • Артём 2015-04-15 в 19:15

    Ну плагином не советую ) лучше к фрилансерам обратиться

    Ответить
    • Александр 2015-04-16 в 22:05

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

      Ответить
      • Людмила Лао 2015-04-18 в 20:28

        более 7 миллионов народа плагин установили. думаю доверять можно)))

        Ответить
        • Анютка Незабудка 2015-04-30 в 12:40

          Такая цифра о чем-нибудь, но говорит. Немалое количество воспользовалось установкой плагина!

          Ответить
          • Сергей Грицюк 2015-05-31 в 17:52

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

            Ответить
      • Юрий Йосифович 2015-04-19 в 03:30

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

        Ответить
        • Сергей Грицюк 2015-05-31 в 17:50

          Скорее лучший или просто самый популярный среди подобных плагинов.

          Ответить
      • Сергей Грицюк 2015-05-31 в 17:51

        Плагин, как минимум, увеличивает скорость загрузки сайта. Так утверждает Гугл и рекомендует поменьше плагинов использовать.

        Ответить
    • Юрий Йосифович 2015-04-19 в 03:29

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

      Ответить
      • Сергей Грицюк 2015-05-31 в 17:50

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

        Ответить
    • Сергей Грицюк 2015-07-31 в 20:05

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

      Ответить
  • Лариса 2015-04-13 в 14:47

    Спасибо, Виктория! Статья — настоящий «пинок под зад», чтобы не расслабляться)

    Ответить
    • Юрий Йосифович 2015-04-19 в 03:31

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

      Ответить
      • Сергей Грицюк 2015-07-31 в 20:06

        Двигаться вперед и работать нужно постоянно, иначе ничего не будет.

        Ответить
    • Сергей Грицюк 2015-05-31 в 17:48

      Не то что пинок, а временная мера. Все же лучше адаптивная тема

      Ответить
Оставить комментарий
Нажмите, чтобы отменить ответ.

Комментарий появится после проверки. Комментарии, содержащие спам и ненормативную лексику будут удалены!