Всем привет!
До 21 апреля осталось чуть больше недели, чтобы оптимизировать свой сайт под мобильные устройства. За это время вряд ли получится у программиста заказать и получить готовую мобильную версию для сайта, да и не у всех могут быть деньги на это. В этой статье я расскажу, как сделать мобильную версию сайта с помощью плагина WPtouch Mobile Plugin.
Как сделать мобильную версию WordPress сайта
С помощью плагина WPtouch Mobile Plugin даже новичок сможет сделать мобильную версию для своего WordPress сайта, если установленный шаблон не адаптивный. Не смотря на то, что плагин имеет две версии бесплатную и платную, базовой версии вполне достаточно для среднего сайта. В том случае, когда у вас крутой сайт, который приносит нормальный доход, для него лучшим решением будет заказать программистам мобильную версию, а не покупать Про версию WPtouch за 59 долларов.
Установка плагина стандартная. В строку поиска вводим название WPtouch Mobile Plugin и устанавливаем его. На этом скрине смотрите пошаговые действия по установке:
Как только вы активировали плагин, у сайта появилась мобильная версия. Проверка удобства просмотра на мобильных устройствах от Гугла показывает «Отлично! Страница оптимизирована для мобильных устройств». Больше можно ничего не делать. Все работает. Зайдите на свой сайт со своего телефона и посмотрите.
Для тех, кто желает покопаться в настройках, а также добавить рекламу в плагин WPtouch, рассмотрим его функционал более подробно.
Как настроить плагин WPtouch
В админке в левой колонке появился пункт WPtouch.
Первый подпункт «Что нового», можно не смотреть. В нем на английском рассказывается о новых обновлениях и улучшениях в плагине, которые вносят его разработчики.
Второй подпункт «Базовые настройки». Он имеет две вкладки: «общие» и «совместимость». На вкладке «общие» можно изменить название сайта, выбрать начальную страницу, отключить ссылку переключения к полной версии. Настройки на вкладке «совместимость» нам не интересны, только пользователи Про версии могут выбрать, какие плагины будут загружаться с мобильной версией, а также добавить шорткоды.
Третий пункт – «Темы и расширения». Здесь нам делать нечего. В бесплатной версии есть только одна тема – Bauhaus, а из расширений вообще ничего не доступно.
На первой вкладке «Общие» обратите внимание на следующие настройки: вывод количества записей, поэкспериментируйте с эскизами, выберите какие элементы показывать (комментарии, слайдер). К сожалению, для бесплатной версии не доступен вывод блока похожих записей. На вкладках «Фирменная символика» и «Закладка пиктограмм» можно изменить цвета и эмблемы темы.
В четвертом пункте «Меню» выберите, какие страницы меню показывать, а какие нет. К каждой странице можно добавить значки:
Хочу обратить ваше внимание на то, что для телефона нужно создавать рекламные блоки своего формата. В Адсенс есть стандартный блок 320*100. Можно создать свой с шириной 320, а высотой 300. Поэкспериментируйте и посмотрите результат.
Как вывести рекламу на мобильном в начале и конце статьи
Теперь объясню куда же добавлять коды. В бесплатной версии плагина WPtouch есть всего одна тема Bauhaus. Зайдем в папку с ней по следующему пути сайт.ru/public_html/wp-content/plugins/wptouch/themes/Bauhaus/default
И вы увидите список файлов, которые отвечают за отображение сайта на мобильных устройствах:
Нас интересует файл single.php. В него мы и будет добавлять коды.
Второй блок Адсенс 320*300 в конец поста, перед кодом:
А код тизерки перед выводом комментариев:
Чтобы посетители из мобильных устройств засчитывались в статистике, добавьте коды счетчиков в этот файл. Я не нашла лучшего места и добавила код перед строкой:
Жду ваших комментариев.
Здравствуйте уважаемые читатели сайт. Посещаемость блога — это важный показатель, подробнее об этом я говорил в статье про то,
Но многие не знают, что немало таких читателей, которые ищут информацию по заработку или по каким-то другим темам не только в ноутбуке или на ПК, также люди используют смартфоны, айфоны, телефоны в конце концов, которые в свою очередь требуют мобильную версии вашего ресурса.
Как правило, шаблоны поддерживают лишь только версию для персональных компьютеров, нет буков и т.д. Поэтому возникает вопрос, как не обделить свой блог трафиком из мобильных устройств, а точнее, как сделать мобильную версию блога?
Некоторые скажут, что якобы посещаемость с гаджетов незначительная, поэтому не стоит волноваться. Да, реально, я так и думал до поры до времени, но оказалось все иначе.
Буквально несколько лет назад таких, кто заходил на сайты разной тематики через телефон было очень мало, но если посмотреть этот показатель сейчас, то все станет на свои места, все будет ясно.
Для тех, кто Гугл Адсенс, Яндекс Директ, Банерах, установить мобильную версию на свой блог следует обязательно, так как со смартфона 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;
- Реклама;
Делайте все под себя и довольствуйтесь.
Последнее, что я хотел бы отметить из настроек - это Меню .
Здесь также можно что-то подковырнуть. Например, какие страницы отображать и проче. Короче испробуйте на практике, ведь все равно в любой момент можно деактивировать плагин, так что бояться нечего.
На этой ноте я заканчиваю написание этого поста. Надеюсь, что теперь знаете, как настроить мобильную версию блога. Пока-пока. В заключение как обычно интересное видео:
С уважением, Жук Юрий.
Сделайте это наконец! Создайте мобильную версию своего сайта на WordPress и избавьте каждого посетителя с мобильного устройства от неудобства все время увеличивать масштаб страниц для читабельности текста и выполнять N-ное количество лишних движений.
Мы предлагаем вам 7 крутейших, а главное бесплатных плагинов WordPress, которые помогут вам это сделать всего за несколько минут.
Плагины для создания мобильной версии вашего сайта на WordPress
Скорее всего, термин «адаптивный дизайн» не является для вас новым, так как уже в течение лет так 2-х он находится у всех на слуху. Но если вы еще не знаете, то его смысл заключается в «преображении» или «адаптации» сайта для мобильных устройств. То есть посетителю с любого гаджета, будь то планшет или смартфон, будет так же удобно просматривать страницы вашего сайта, как и со стационарного ПК или ноутбука.
Ниже приведены четыре плагина, которые 100% помогут решить эту задачу - сделать мобильную версию вашего сайта на WordPress.
1. Hammy
Начнем с очень удобного плагина Hammy для изменения размеров изображений в соответствии с разрешением экрана мобильного устройства, на котором будет выводиться сайт. Он заменяет тег на
Для использования плагина необходимо установить некоторые точки останова и выбрать элемент HTML контейнера. Таким образом, с помощью выбранных вами брейкпоинтов, плагин меняет размер изображения, когда ширина экрана достигает точки останова. Можно также задать определенные классы, чтобы игнорировать некоторые изображения.
2. Responsive Widgets
Этот плагин предлагает новые текстовые/HTML виджеты WordPress, доступные только на гаджетах типа iPad, Nook, PlayStation Vita и других общих устройствах – планшетах и смартфонах.
Чтобы использовать плагин, вам нужно базовое представление о виджетах WordPress. Откройте страницу виджетов и вы увидите много новых виджетов для следующих девайсов и типов экранов:
- Mobile
- Mobile (landscape)
- iPhones and iPods
- Phablets
- Tablet (portrait)
- Tablet (landscape)
- iPad Portrait
- iPad Landscape
- Nexus Tablets
- Kindle Tablets
- Surface Tablet
- Nook Tablets
- PS Vitas
- Desktops
- Large Monitors (1240px+ screens)
- Print only
У многих из этих виджетов есть чекбоксы, с помощью которых можно настроить выведение виджетов на конкретных устройствах. Например, если вы хотите выводить виджет только на планшетах, но не на iPad, то отметьте галочкой нужный чекбокс.
3. WP Lightbox 2
Очень популярный «lightbox» плагин для использования всплывающих в окошке изображений и галерей с эффектами наложения. Но имейте в виду, что этот плагин не решает задачу «адаптивности», а является сам по себе адаптивным.
Чтобы использовать плагин, необходимо просто его активировать. В нем есть несколько настроек, типа активации Lightbox в комментариях или изменение длительности анимации. Но в общем плагин работает сразу же после активации и не требует дополнительной настройки.
4. Responsible
Чрезвычайно полезный WordPress плагин. С его помощью вы протестируете адаптивный дизайн в своем браузере, не отходя от кассы. В нем используется Viewport Resizer Bookmarklet для размещения фиксированной панели вверху страницы, где вы сможете изменить размер страницы для нужных адаптивных устройств (как например, смартфоны, планшеты, экраны стационарных ПК), а также устанавливать необходимые разрешения экрана.
Чтобы начать работу с плагином, достаточно его активировать и посетить одну из страниц сайта. Панель появится на каждой из них, что дает возможность протестировать адаптивный дизайн без каких-либо проблем.
Плагины для создания мобильных тем
Эти плагины работают по очень интересному принципу: они показывает различные темы WordPress, если пользователь заходит на ваш сайт с мобильного устройства. Такая функция особенно полезна, если у вас на сайте используется тема, неадаптированная под мобильные устройства. И если у вас нет ни времени, ни желания менять тему сайта под мобильный гаджет, то следующие три плагина созданы специально для таких ленивых, как вы! :-)
5. WPTouch Mobile Plugin
Это, пожалуй, один из самых популярных бесплатных плагинов для создания привлекательного сайта в мобильной версии. На сегодняшний день его рейтинг составляет 3,9 из возможных 5 звезд. После установки и активации плагина вам будет доступна куча всяких классных функций, хотя многие пользователи могут ограничиться стандартным набором для создания мобильной версии сайта.
Но будьте осторожны! Еще в июле 2014 года стало известно об уязвимости версии плагина WPTouch 3. Она была тут же замечена и исправлена, но успела навредить многим сайтам, которые использовали данный плагин. Поэтому всегда следите за обновлениями плагина и заботьтесь о безопасности вашего сайта во всех его версиях.
6. WordPress Mobile Pack
Еще один лидер тем для мобильной версии сайтов на WordPress. Количество скачиваний плагина перевалило за 600 тысяч, а рейтинг составляет 3.8 звезд из 5 возможных. Его крутость состоит в замене классического дизайна на интерфейс мобильного приложения.
Как и предыдущий плагин WPTouch, этот нуждается только в установке и активации. При желании можете покопаться в настройках, но это необязательно. Плагин можно использовать сразу же после его активации.
7. Jetpack
Этот плагин занимает лидирующие позиции по популярности среди подобных ему инструментов, это подтверждается поддержкой WordPress.com и Automattic. В нем есть очень полезная функция «Mobile Theme». Чтобы использовать ее, нужно зайти на страницу настроек (Jetpack → Settings) после установки и активации плагина. Действий минимум, а возможностей максимум. Вы убедитесь в этом сами, если выберите этот бесплатный плагин.
Единственный совет, который мы можем вам дать – это не использовать данный плагин с плагином Disqus, так как они не очень совместимы.
Заключение
В сфере веб-дизайна важно и нужно всегда следить за новинками, особенно, если они действительно могут быть вам полезны. В нашем случае, «адаптивность под мобильные устройства» уже становится стандартной функцией, которую необходимо использовать всем владельцам сайтов и соответствовать, так сказать, требованиям эре мобильных гаджетов.
Если вы уже использовали какой-либо плагин из этой серии или у вас есть свой вариант, которого нет в нашем списке – не жадничайте, делитесь с другими пользователями.
Сегодня объясню, для чего нужна на wordpress мобильная версия сайта . Порекомендую плагин wptouch и расскажу, как его правильно настроить, чтоб в мобильной версии выводилась нужная информация (конкретные страницы, рубрики, записи, разделы). К слову, не так давно сам на нескольких сайтах установил и настроил данное расширение. Функционирует дополнение - отлично, плюс ко всему Яндекс и Google теперь не пишут, что сайт не оптимизирован для мобильных устройств.
Зачем на wordpress сайте нужна мобильная версия?
Ответ прост и практически очевиден: мобильный трафик растет. Следовательно, основные поисковые системы требуют от владельцев сайтов соответствовать. Лучше сделать сайту мобильную версию, чтоб он не был понижен в поисковой выдаче или не получил других санкций.
Достоинства плагина wptouch
Почему именно wptouch был выбран мною, как оптимальный плагин для мобильной версии сайта вордпресс? Да потому что в первую очередь, искалось простое, актуальное решение. На wordpress мобильная версия сайта за счет такого дополнения выглядит хорошо. Возможна реально гибкая настройка (с учетом того, что плагин бесплатный - это реально хорошая новость).
Плагин для мобильной версии сайта. Настройка
Сразу скажу, что настройка мобильной версии сайта wordpress с помощью дополнения, о котором писалось выше длиться буквально 5-10 минут. На заключительном этапе можно посмотреть, как будет выглядеть мобильная версия сайта. При желании убрать или отключить дополнение можно в консоли wordpress буквально за два клика.
Настройка wptouch плагин
1) Первым делом надо установить плагин wptouch.
2) После установки, в консоли WP появится надпись «Wptouch» с разделом «Настройки». Туда нам и надо будет зайти.
3) Выбираем раздел «Настройки меню», нажимаем «Перейти в настройки меню».
4) Первым делом надо прописать «Название меню» и «Сохранить меню».
5) В сохраненное меню добавляем все необходимые: страницы, записи, рубрики, произвольные ссылки (ссылка на любую статью). Делается это путем проставления галочек и нажатием кнопку «Добавить в меню».
6) Все блоки готового меню, в роли которых выступают: страницы, записи, рубрики и произвольные ссылки можно упорядочить под себя: поменять местами, сделать дочерними.
7) И самый важный момент, который многие упускают: перед тем как сохранить меню, надо там, где «Показать местонахождение», выбрать: WPtouch: Header Menu. По крайней мере, в моей теме wordpress это оптимальное решение.
8) Переходим к визуальной настройке, нажимаем: «Переключиться на мобильную тему» и любуемся 🙂
ВНИМАНИЕ !!! Если проставить лишние галочки в этом блоке, то некоторые элементы (страницы, записи, рубрики, произвольные ссылки) мобильной версии начнут отображаться в обычной версии сайта. Не паникуйте! Попробуйте подстроить плагин под себя (сняв лишние галочки).
>Какого раздела?
Раздела с новостями
>Причем плагин к «мобильной версии»? У Вас и так тема адаптивная (Правда, древнючая, взятая на помойке, с шелами и пр.)
Извиняюсь, я слабо разбираюсь в вордпрессе в принципе, мне сайт делал один фрилансер. Если плагины тут не помогут, то как мне можно мобильную версию настроить? Обновить тему или другую поставить? Нужно, чтобы этот раздел с новостями (окошко справа) было видно с телефона.
Раздела с новостями
Стало ещё менее понятно. Весть сайт состоит из «разделов с новостями». В ВП это называется «рубрики с записями». Или же Вы имеет ввиду что-то другое.
Извиняюсь, я слабо разбираюсь в вордпрессе в принципе, мне сайт делал один фрилансер.
Как моно скорее выкинуть эту помоечную тему если не хотите иметь проблем. Брать темы нужно только из оф каталога . Как и плагины.
Если плагины тут не помогут, то как мне можно мобильную версию настроить?
Что Вы имеете ввиду под » мобильную версию настроить»? Адаптивная тема — это есть «для мобильных».
Нужно, чтобы этот раздел с новостями (окошко справа) было видно с телефона.
Какое «окошко справа»? Я ничего такого не вижу.
>Стало ещё менее понятно.
Сделал скриншот, чтобы было понятнее:
https://ibb.co/cwnSnH
>Что Вы имеете ввиду под » мобильную версию настроить»?
Я имею в виду настроить то, что в мобильной версии отображается. Потому что сейчас в ней не видно этого окна (на скриншоте)
>Как моно скорее выкинуть эту помоечную тему если не хотите иметь проблем. Брать темы нужно только из оф каталога. Как и плагины.
А какие проблемы могут быть? Я, конечно, подумаю об этом, но в ближайшее время нет ресурсов, чтобы сайт полностью переделывать. Плагины я только официальные ставлю.
Я имею в виду настроить то, что в мобильной версии отображается. Потому что сейчас в ней не видно этого окна (на скриншоте)
У Вас скрываются сайдбар/виджеты. Это в принципе нормально. Если хотите чтобы показывалось — нужно переделывать или менять тему.
А какие проблемы могут быть?
От невозможности получить помощь до левых ссылок и взлома сайта с очень плохими последствиями .
Контент сохранится полностью. Об этом можно даже не беспокоиться. Но в любом случае придется повозиться с настройками темы и может перенастройкой некоторых плагинов, отвечающих за внешний вид — например вывод галерей. Но это чисто технические вопросы, они 100% решаемы. А скорость решения проблемы зависит от вашего опыта, умноженного на сложность поставленной задачи.
Как переделать тему, чтобы сайдбары и виджеты отображались?
Была бы тема из оф каталога — можно было бы сказать что-то определённое, а как что сделано в этой теме…
Насколько сложно поменять тему (на надежную и официальную) с сохранением всего загруженного контента?
>Была бы тема из оф каталога - можно было бы сказать что-то определённое, а как что сделано в этой теме…
Вообще я смотрел некоторые скриншоты из руководств и у меня консоль выглядит примерно так же, как и у всех.
>Контент в целом не зависит от темы. Но если в теме использовалось что-то не стандартное, то работы уже побольше.
Понятно. В общем, буду копить денег и искать более толкового программиста. Сам я, конечно, не смогу все это сделать.
Вообще я смотрел некоторые скриншоты из руководств и у меня консоль выглядит примерно так же, как и у всех.
Консоль не причем. Проблема в доступности кода темы (и не предлагайте скачать этот хлам.)
В общем, буду копить денег и искать более толкового программиста. Сам я, конечно, не смогу все это сделать.
В принципе, просто поменять тему не сложно. Но вот довести до ума и реализовать все хотелки — тут уже могут быть сложности.
Просмотр 10 ответов - с 1 по 10 (всего 10)
- Тема «Посоветуйте плагин для настройки мобильной версии» закрыта для новых ответов.
