Всем привет!
До 21 апреля осталось чуть больше недели, чтобы оптимизировать свой сайт под мобильные устройства. За это время вряд ли получится у программиста заказать и получить готовую мобильную версию для сайта, да и не у всех могут быть деньги на это. В этой статье я расскажу, как сделать мобильную версию сайта с помощью плагина WPtouch Mobile Plugin.
Как проверить оптимизирован ли сайт для мобильных устройств и как он отображается на устройствах с различным расширением экрана, читайте по ссылке https://inetsovety.ru/proverka-optimizatsii-sayta-pod-mobilnye/
Как сделать мобильную версию WordPress сайта
С помощью плагина WPtouch Mobile Plugin даже новичок сможет сделать мобильную версию для своего WordPress сайта, если установленный шаблон не адаптивный. Не смотря на то, что плагин имеет две версии бесплатную и платную, базовой версии вполне достаточно для среднего сайта. В том случае, когда у вас крутой сайт, который приносит нормальный доход, для него лучшим решением будет заказать программистам мобильную версию, а не покупать Про версию WPtouch за 59 долларов.
Установка плагина стандартная. В строку поиска вводим название WPtouch Mobile Plugin и устанавливаем его. На этом скрине смотрите пошаговые действия по установке:
Как только вы активировали плагин, у сайта появилась мобильная версия. Проверка удобства просмотра на мобильных устройствах от Гугла показывает «Отлично! Страница оптимизирована для мобильных устройств». Больше можно ничего не делать. Все работает. Зайдите на свой сайт со своего телефона и посмотрите.
Для тех, кто желает покопаться в настройках, а также добавить рекламу в плагин WPtouch, рассмотрим его функционал более подробно.
Как настроить плагин WPtouch
В админке в левой колонке появился пункт WPtouch.
Первый подпункт «Что нового», можно не смотреть. В нем на английском рассказывается о новых обновлениях и улучшениях в плагине, которые вносят его разработчики.
Второй подпункт «Базовые настройки». Он имеет две вкладки: «общие» и «совместимость». На вкладке «общие» можно изменить название сайта, выбрать начальную страницу, отключить ссылку переключения к полной версии. Настройки на вкладке «совместимость» нам не интересны, только пользователи Про версии могут выбрать, какие плагины будут загружаться с мобильной версией, а также добавить шорткоды.
Третий пункт – «Темы и расширения». Здесь нам делать нечего. В бесплатной версии есть только одна тема – Bauhaus, а из расширений вообще ничего не доступно.
Идем дальше. Четвертый подпункт – «Параметры темы». Он имеет аж 5 вкладок «Общие», «Фирменная символика», «Закладка пиктограмм», «Режим веб-приложения», «Реклама».
На первой вкладке «Общие» обратите внимание на следующие настройки: вывод количества записей, поэкспериментируйте с эскизами, выберите какие элементы показывать (комментарии, слайдер). К сожалению, для бесплатной версии не доступен вывод блока похожих записей. На вкладках «Фирменная символика» и «Закладка пиктограмм» можно изменить цвета и эмблемы темы.
В четвертом пункте «Меню» выберите, какие страницы меню показывать, а какие нет. К каждой странице можно добавить значки:
Как вы заметили, в бесплатной версии нельзя добавить рекламу, которая будет отображаться на мобильном. Это ограничение можно обойти, добавив в файл темы рекламный код. Минус у этого способа следующий – при обновлении плагина рекламные коды нужно добавлять заново.
Хочу обратить ваше внимание на то, что для телефона нужно создавать рекламные блоки своего формата. В Адсенс есть стандартный блок 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(); ?>
Вот собственно и все. Не забывайте, рекламу придется добавлять заново после обновления плагина. Сохраните себе на компьютер этот файлик с рекламными кодами.
Жду ваших комментариев.
Выскажу и свое мнение по поводу мобильной версии, но в другом ключе. У меня есть телефон на Windows и вот многие блоги на WordPress отображаются некорректно, не знаю почему. Причем как-то странно, одни статьи блога могут хорошо и полностью открываться вместе с комментариями в конце, а другие статьи открываются на половину. При всем этом на Android все прекрасно работает тот же самый блог. Это относится ко многим блогам именно на WordPress и в чем причина лично мне неизвестно.
Понимаю если реклама стоит на сайте и видишь ее через обычный вид на компе, но зачем же извращаться над мобильной версией? Посетители блога заходят же не рекламу смотреть, а инфу получить или что новое узнать. А тут с телефона зашел и опять реклама. По моему очень многим не нравится реклама, но одно дело когда на компе видишь, а другое когда она на мобильнике или планшете. Конечно дело ваше. Это мое сугубо личное мнение и я бы не ставил рекламу в мобильную версию
Александр, расчёт не на «очень многим не нравится реклама», а на меньшую часть. Если бы не кликали, рекламу бы и не ставили.
Конечно реклама раздражает, но эффективно работает))))
Виктория вы супер! Сбылась мечта идиота.
Наконец-то я настроил мобильный плагин как положено со всеми картинками и илюстрациями. И помогли мне в этом вы. Проблема действительно была из-за того, что я не задавал своим статьям миниатюры. До этого просто загружал картинки и всё, думал что этого достаточно. Спасибо вам большое! Желаю вашему блогу развития и процветания! 
Совсем недавно мой знакомый блогер похвастался установкой плагина WPtouch и я посмотрел, как выглядит его сайт через мобильный. Какого же было мое удивление, когда я увидел отличную картинку, совсем отличную от моей. В кружках на главной у него были картинки из статей, а в шапке меняющие иллюстрации из последних записей. Версию он установил такую же бесплатную как у меня. Настройки теже. После длинной переписки с ним, я так и не понял почему такая разница. Может дело в шаблонах? Смотрите сами: мой блог на мобильном: web-klik.ru и его: ojseo.ru В чем может быть проблема?
Шаблоны у мобильных версий у вас одинаковые.
В шапке у него выводится слайдер. В настройках плагина зайдите: параметры темы — общие — внизу поставьте птички возле «Включить готовый слайдер» и «Популярные записи на линейке также отражены в листингах».
Что касается миниатюр в кружках, странно почему они не выводятся у вас. Вы же к каждой записи загружаете миниатюру через «Добавить миниатюру» в правом сайдбаре на странице добавления новой записи. Если да, то не понятна причина.
А как относиться Google к этому плагину?
Вижу не один я помучался с оптимизацией под мобильные устройства.
Задал жару гошка всем блогерам.
Авторитетные сайты, блоги, магазины все же держат позиции.
Рано или поздно все сайты перейдут под мобильные версии из за повсеместного распространения мобильных средств связи. Сейчас мобильные средства в СНГ не так распространены как на западе.
Да они практически уже итак все перешли на мобильную версию. а так поисковики ругаются
Спасибо, за статью, теперь у меня есть мобильная версия с рекламой! Но через неделю не стали показываться картинки. Не знаете в чем дело? Плагин не обновляла еще.
Рекламные картинки или картинки с сайта?
Пробовал и себе сделать мобильную версию с помощью этого плагина, но через несколько дней использования отказался. Слишком уж калично работает, грузит сайт вообще не по божески. Решил сменить шаблон на адаптивный, сейчас вот коплю деньги на классный шаблон
Для инет-магазина иногда лучше использовать подобный плагин. В других случаях — адаптивную верстку.
Не думаю что у большинства блогеров есть свой инет-магазин. Виталий Охрименко говорил об обычном блоге.
Я думаю интернет магазину только у единиц блогеров присутствуют
Виктория, спасибо большое за информацию, действительно помогло, а вот вы не заморачивались вопросом как вставить блок адсенс в середину текста? в мобильной версии разумеется.
Готового решения не нашла в интернете, поэтому ограничилась вставкой рекламы до и после поста.
Тогда, еще один вопрос, вы не знаете как отключить вывод миниатюры перед постом, потому, что у меня картинки миниатюры в десктопной версии не отображаются поэтому я их вставлял вручную перед статьей, а вот в мобильной версии получается, что перед статьей идут 2 одинаковые картинки.
В файле single.php плагина, полный адрес к нему есть в статье, удалите строчки:
<див class="post- page- thumbnail" >
< ? php the_ post_ thumbnail('large', array( 'class' => ‘post-thumbnail wp-post-image’ ) ); ? > И закрывающийся див не забудьте удалить.
Да, спасибо увидел уже и удалил, все отлично)
Да, это распространенная проблема на многих блогах — как видим с комментария решается довольно просто.
Это хорошо, что вы в середине поста не ставите рекламу, Виктория — заботитесь тем самым о удобности чтения материала вашими читателями.
Юра, рекламу можно и нужно ставить, если она особо не напрягает читателей. Как же без рекламы?
Реклама почти всегда напрягает читателя, но ставить рекламу лучше вверху, не в середине, потому что не все читатели дочитывают до середины.
Нужно тогда интересные статьи писать, полезные. Что бы люди до конца их дочитывали.
А что это за статьи такие, которые и до середины не дочитывают
Без проблем реклама отображается и на компьютерной версии и на мобильной в середине записи при использовании плагина Quick Adsense.
Плагин уже более двух лет не поддерживатеся.
И что? CyrToLat не поддерживается дольше, а все пользуются.
Это точно, пользуются. И все довольны
Виктория, время уже прошло с момента последнего вопроса. Может уже нашли как вставить код Адсенс на мобильную версию сайта посредине текста?
Еще не нашла. Пока добавила рекламу в начало и конец поста.
На мобильной версии реклама от гугла будет занимать всю ширину странички — это может отрицательно повлиять на мобильный трафик в целом.
В Адсенсе есть адаптивный формат рекламного блока, который не будет занимать всю область девайса.
Да, есть плагин супер кеш. Первый раз, когда ставил, он был активный и страниц больше было, которые открывались не в той версии, которой нужно.
Вчера отключил супер кеш, но не удалил и переустановил снова плагин WPtouch Mobile. На сей раз после смены версии внизу сайта, только одна страница не открылась в той версии, которая нужна.
Возможно вы правы Виктория и дело может быть в несовместимости этих плагинов друг с другом.
Сегодня зашёл со смартфона и приятно был удивлён, что снова все страницы в мобильной версии показываются. Правда до этого почистил куки и сменился айпи у телефона. Кнопку переключения версий не трогал.
Вообщем всё нормально работает, если не трогать кнопку переключения версий и плагин с кешом нужно наверное вообще удалить. Думаю пока. Как вы считаете?
Плагин кеширования сохраняет себе версию страницы, которая открыта первый раз (он не различает мобильная это версия или полная), и потом показывает эту страницу всем посетителям не зависимо от того, какую им версию нужно. В этом и заключается проблема работы мобильной версии сайта и плагинов кеширования. Посмотрите может в настройках плагина есть функция не кешировать мобильные страницы.
Если сайт без плагина кеширования не создает повышенную нагрузку на хостинг, его можно отключить.
Если его отключить, то посетителям нужно будет тратить кучу денег на скачивание одних и тех же страничек. Нужно с этим что-то делать — найти более оптимальное решение.
Фейсбук запустил в небо планеры на солнечных батареях, которые будут предоставлять бесплатный доступ к соцсети. Все бы гиганты действовали в том же направлении…
Думаю, посетители не будут тратить кучу денег на скачивание одних и тех же страничек. Вы забываете что браузер тоже кэширует посещённые страницы.
Плагин кеширования все же удалять не нужно — он существенно экономит дорогой мобильный трафик для читателей, Павел.
Вот поэтому лучше поставить адаптивную тему и оставить плагин кеширования, а WP Touch удалить, чтоб не было конфликтов.
Интересно, в платной версии WPtouch Mobile есть проблемы с несовестимостью с плагинами кэширования как у Павла? Если нет, может стоит приобрести платную версию.
Добавил плагин. Все нормально, гугл одобрил, но есть некоторые нюансы:
1) При просмотре сайта на смартфоне, после переключения внизу сайта на полную версию и пролистав несколько страниц, переключить обратно на мобильную версию получается уже не со всех страниц. И открываются потом уже некоторые страницы в мобильной версии, а некоторые в полной.
Изначально после установки плагина все страницы в смартфоне отражаются в мобильной версии. А вот после того, как переключишь внизу на полную, потом обратно и происходит такая котовасия.
Скажите, у кого-нибудь наблюдались такие проблемы?
Павел, а у вас используется какой-либо плагин кеширования страниц? Возможно дело в нем.
Дело 100% в плагине кеширования. Нужно искать настройки и корректно его настроить.
Можно удалить плагин кэширования, посмотреть сайт под мобильной версией, потом опять поставить плагин кэширования.
Это точно, методом исключения
Эта проблема наблюдается только тогда, когда некорректно настроен плагин кеширования.
А в чём некорректность настройки плагина кеширования? Блогеры настраивают плагин по статьям других блогеров, у которых плагин кеширования исправно работает.
Ну есть же и такие. которые настраивают сами, без чьих то подсказок
Павел, чтоб не тратить время на настройки плагина кеширования, сначала деактивируйте его и повторите попытку. Если все будет работать нормально, тогда уже придется в нем ковыряться.
Нужно почистить кэш и все станет ясно.
Виктория, спасибо большое за обзор плагина. Установила на оба свои сайта. Искала как исправить недоразумение с мобильными устройствами. Теперь все отлично!
У вас сразу после установки все корректно работает, или также пришлось думать как настраивать плагин кеширования?
Плагин кеширования временно можно деактивировать. У меня он часто в такой стадии находится
Ну плагином не советую ) лучше к фрилансерам обратиться
Интересно, а почему не советуете плагином??? Посмотрите статистику поисковиков и в там увидите то что как раз плагин с точки зрения поисковиков самый удобный для посетителей, не один фрилансер такого не сделает. тем более там дополнительные возможности есть и прочее. Так что плагин это самое то что нужно.
более 7 миллионов народа плагин установили. думаю доверять можно)))
Такая цифра о чем-нибудь, но говорит. Немалое количество воспользовалось установкой плагина!
Просто это самый простой способ подготовиться к выходу нового алгоритма и не потерять трафик.
Плагин самый нормальный, с точки зрения поисковиков — но, при этом если его криво установить — то он может показывать сайт с ошибками, не всегда корректно его отображать.
Скорее лучший или просто самый популярный среди подобных плагинов.
Плагин, как минимум, увеличивает скорость загрузки сайта. Так утверждает Гугл и рекомендует поменьше плагинов использовать.
Чтобы обращаться к фрилансерам нужны денежные средства, при чем не всегда маленькие.
Согласен, поэтому первый вариант — данный плагин, второй — адаптивная тема из паблика.
Поделитесь средствами, обратимся
Я — к тому, что тут есть люди, которые не имеют возможности заплатить фрилансерам или которые хотят сами разобраться в проблеме и сами решить ее.
Спасибо, Виктория! Статья — настоящий «пинок под зад», чтобы не расслабляться)
В наше время вообще расслабляться никак нельзя — нужно работать и работать, чтобы продвигаться!
Двигаться вперед и работать нужно постоянно, иначе ничего не будет.
Не то что пинок, а временная мера. Все же лучше адаптивная тема