Сегодня вы узнаете как самостоятельно сделать мобильную версию для своего сайта wordpress. Сделать мобильную версию сайта можно с помощью популярного плагина – WPtouch Mobile Plugin. Плагин имеет очень гибкие настройки, вы сможете добавить на мобильную тему слайдер, изменить цвет фона темы, цвет заголовка, цвет ссылок, добавить свой текст в футер темы и т.д. Установить данный плагин вы сможете прямо из админ-панели wordpress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
После установки и активации плагина, перейдите на страницу: WPtouch. Здесь вы сможете настроить свою мобильную тему. Разберём настройки.
Общие
– Название сайта WPtouch, здесь вы можете указать название вашего мобильного сайта. По умолчанию отображается название основного сайта.
– Показ WPtouch для мобильных посетителей, должно быть включено, для показа моб.темы мобильным посетителям.
– Мобильная первая страница, здесь можно выбрать другую страницу, имеющуюся на вашем сайте, для отображения на главной странице мобильной темы. Либо можно сделать перенаправление на определённый URL адрес.
– Posts page, здесь можно выбрать страницу, на которой будут отображаться последние записи вашего сайта. По умолчанию на главной странице мобильной темы, будет отображаться главная страница основного сайта.
– Разрешить масштабирование мобильного обозревателя, масштабирование позволит отображать мобильную тему не только на мобильных, но и на планшетах. То есть тема будет адаптивной. По умолчанию масштабирование отключено.
– Шоу на платформе ссылки WPtouch в нижнем колонтитуле темы, вы можете добавить ссылку на автора плагина в футер моб. темы. По умолчанию отключено.
– Язык темы, можно оставить авто-выбор, тогда язык определится автоматически.
– Также относится к администратору, здесь должно быть включено, чтобы настройки плагина отображались на русском языке.
Устройства
– Мобильные устройства и обозреватели, здесь показаны моб. устройства на которых будет отображаться ваша мобильная тема.
– Дополнительные пользовательские агенты, вы можете добавить в поле дополнительные устройства, на которых будет отображаться ваша тема. Например – “nokia”.
Настройки меню
– Настройка меню, по умолчанию в мобильной теме отображается меню, которое установлено на основном сайте. Если вы хотите, то вы можете создать отдельное меню для мобильной темы. На странице Внешний вид – Меню, вы можете создать меню и показывать данное меню только на мобильной теме, поставив галочку для значения – WPtouch Header Menu.
– Включить родительские элементы как ссылки, страницы которые имеют вложения будут отображаться как ссылки. По умолчанию включено.
– Использовать значки меню, можете добавить значки к элементам меню. По умолчанию отключено.
– Show login in menu, можно добавить в меню ссылки входа и выхода. По умолчанию отключено.
Параметры меню
– Эмблема сайта, можете загрузить свой логотип, который будет отображаться вместо названия сайта, вверху экрана.
– Menu position, здесь можно выбрать с какой стороны будет отображаться кнопка для открытия меню, слева или справа. По умолчанию слева.
– Показывать поиск в колонтитуле, по умолчанию вверху моб. темы отображается форма поиска. Здесь можно отключить поиск.
– THEME COLORS, вы можете настроить цвета мобильной темы.
– Theme background, можно выбрать цвет фона моб. темы.
– Header & Menu, можно выбрать цвет заголовка, где отображается название сайта.
– Links, можно выбрать цвет для ссылок.
– Post/Page Headers, можно выбрать цвет для заголовка на страницах и записей.
– Совмещение шрифтов, можно выбрать стиль шрифта для текста.
– Включить готовый слайдер, можно включить или отключить слайдер последних записей. По умолчанию включён.
– Featured slider style, можно выбрать другой стиль слайдера.
– Show # of comments, можно включить показ комментариев. По умолчанию отключены.
– Публикации в слайдерах также отражены в списках, в слайдере отображаются те записи, которые отображаются на главной странице. Можно отключить, чтобы отображались другие записи.
– Posts to display, здесь можно задать определённые записи для показа на главной странице. Например из конкретной рубрики.
– Эскизы записей, можно выбрать эскизы записей.
– Тип пиктограммы, по умолчанию установлены изображения миниатюры записей.
– Показать категории записей и теги, можно включить.
– Показать дату публикации, включено по умолчанию.
– Показать автора записи, можно включить.
– Показывать кружочки с комментариями на публикациях, по умолчанию включено.
– Показывать совместные ссылки на публикациях, показ кнопок соцсетей поделиться, включить или отключить.
– Также показывать на страницах, показ кнопок соцсетей на страницах, по умолчанию отключено.
– Ссылки для общего доступа, можно выбрать где будут отображаться кнопки соцсетей, вверху или внизу.
– Цветовая схема, можно выбрать цвета кнопок соцсетей.
– ССЫЛКИ НА СОЦИАЛЬНЫЕ СЕТИ, вы можете добавить ссылки на свои аккаунты в соцсетях.
– НИЖНИЙ КОЛОНТИТУЛ, можете добавить любой текст или html в подвал моб. сайта.
Все сделанные изменения сохраняются автоматически, то есть вам не нужно сохранять настройки. Чтобы посмотреть как ваш сайт выглядит на мобильных устройствах, вверху нажмите на кнопку – Preview Theme.
Ваша мобильная тема готова!
Ок
Спасибо, Илья!
Пробую)
У меня этот плагин немного глючит. Помогите решить вопрос! Иногда выдает мобильную версию на пк, а иногда наоборот, выдает стандартную тему на мобильном. Возможно есть где-то несовместимость, но где именно не могу понять
Попробуйте отключить масштабирование в настройках плагина, если оно включено у вас. Вообще не должно быть такого, я с таким не сталкивался. Вам наверно лучше написать в службу поддержки плагина.
адрес моего блога на вордпресс
Подскажите как можно его закрипить меню при скоролинги
Есть плагин специальный – чтобы сделать меню липким.
В мобильной версии от wptoach плагин не работает
Тогда вам нужно добавлять свои CSS стили, чтобы зафиксировать меню. Узнать такой стиль можно с помощью плагина – SiteOrigin CSS. Добавить стили можно с помощью плагина – Simple Custom CSS, если в настройках плагина WPtouch нет специального поля для добавления пользовательских CSS стилей, не помню есть оно там или нет.
Делал не помогло
Значит что-то не то делали…
У меня сторфронт тема и хотелось бы вместо 1 столбца товаров, сделать 2 на одной странице. Подскажите, как это можно сделать?
Именно для мобильных устройств ? А на теме WPtouch один столбец отображается ?
И еще вопрос, как сделать кнопку переход на Десктоп версию сайта? Есть ли плагины специальные?
А зачем нужна такая кнопка ? Если у вас есть мобильная версия сайта, то на компьютерах будет отображаться основной сайт, а на мобильных устройствах мобильный сайт. Сами подумайте, зачем пользователю на мобильном устройстве переходить на большой сайт. Есть смысл добавить на большой сайт ссылку для скачивания мобильного приложения вашего сайта.
А подскажите как “заточить” таблицу сделанную в tablepress под этот плагин?
Ее не увеличить не уменьшить не получается. Сталкивались с проблемой?
Да, было дело, лучше использовать плагин Shortcodes Ultimate, там есть функция колонки.
Как убрать в мобильной версии из меню “Login” ?
Можно скрыть с помощью CSS. Пример:
@media screen and (max-width: 600px) {
#chto_ne_pozavivat {
visibility: hidden;
display: none;
}
}
В первой строчки нужно указать максимальный размер экрана, на которых будет отображаться элемент.
Во второй строчки нужно указать название элемента для CSS.
Всё остальное без изменений.
И ещё нужно поставить плагин — Simple Custom CSS, в котором вы будете прописывать данный код.
Как убрать страницы, архивы и рублики с витрины(магазин)
Не понял вопроса. На странице Магазин могут отображаться только товары или категории.
Главная / Витрина
Витрина
Отображается единственный результат
Заполнитель
Giga
1,450 ₽
В корзину
Найти:
Страницы
Wishlist
Woocommerce Predictive Search
Витрина
Корзина
Мой аккаунт
Оформление заказа
Архивы
Рубрики
Рубрик нет
Наверх
Мобильн.Компьютерная
Вот так у меня отображается на моб. версии
Заходите: Внешний вид – Меню, убираете не нужные страницы.
А рубрики с архивами как убрать?
Смотря что выводит их, они в виде текста или ссылки ? Вообще любой элемент можно скрыть с помощью CSS.
А подскажите сделал плагином Custom Field Suite дополнительные поля на блог с рецептами вывела их на сайте все прекрасно, только вот плагин wptouch не хочет их показывать в мобильной версии сайта
Значит плагины не совместимы. Попробуйте другой плагин, например – Rich Snippets, там можно добавлять рецепт, плюс он будет отображаться в поисковой выдаче Google.
В теме storefront в настройках меню можно просто галочку поставить внизу возле “Меню для мобильных устройств” и не париться час с настройках этого плагина, как я вначале :)
Да, можно и так, если вас устраивает мобильное меню темы.
Здравствуйте! А как убрать все title в мобильной версии?
Здравствуйте. Можно скрыть с помощью CSS.
Плагин не показывает мобильную версию сайта не могу изменить показ! Нажимаю глазок сразу выходить пк версия. Как сделать что бы плагин показал мобильную версию?! Имею ввиду плагин SiteOrigin CSS
Вам нужно просто вручную добавить CSS стили для мобильной версии сайта. Можно использовать плагин – Simple Custom CSS. Вот здесь я показывал специальный
CSS код для мобильной версии сайта.
Здравствуйте! Плагин WPtouch стоит на моем сайте давно и все работало нормально до тех пор,пока движок WordPress не обновился до версии 4.8.3 Теперь в мобильной версии сайта не работает меню.То есть,сверху вверху есть три черты,которые и должны открывать полное меню сайта,но ничего не работает.Данный плагин совместим с моей версией движка WordPress.Что можно сделать,какие настройки изменить чтобы все работало?
Заранее благодарю за ответ!
Приветствую,
Пробовал данный плагин ставить на сайт с флеш играми. В мобильном выглядит замечательно, игры загружаются (если использовать правильный браузер), но после загрузки игры кнопка “Play” не кликабельна, игра не запускается. Что можно подкрутить в плагине что бы флеш работало?
P.S. Пробовал другие подобные плагины игры работают.
Здравствуйте. В настройках по умолчанию ничего не сделать. Если перейдёте на версию PRO, возможно решить проблему. Там есть настройки “Совместимость сайта”.
Здравствуйте! Настраиваю все по Вашему блогу, даете очень полезную информацию. Большое спасибо!
Также решила остановиться на этом плагине, но дизайн совершенно не понравился. А проблема у меня в том, что с текущей темой мобильная версия выглядит хорошо, но
1) не работают ссылки (проверяла на iOS),
2) из-за карты Яндекс в контактах все сдвигается вправо.
Подскажите, пожалуйста, может что-то можно вручную поправить?
Здравствуйте. 1. Попробуйте в общих настройках включить Масштабирование страницы. 2. В настройках меню попробуйте отключить параметр Включить родительские элементы как ссылки, или включить, если он отключен. 3. Обратите внимание, у плагина есть настройки Совместимость сайта, но они доступны только в платной версии. Возможно как раз они вам и помогут. 4. Также обратите внимание на Индивидуальную настройку темы. Нажмите на кнопку Перейти в настройщик, попробуйте там изменить настройки.
Спасибо за детальную инструкцию. И за то, что отвечаете на все комментарии.
У меня в полной версии на странице есть тег [box]…[/box] или как это называется. Он отображается как заливка белым цветом. В мобильной версии просто отображается текст “[box]”. Как можно сделать, чтобы его не было. Заливка цветом не нужна.
Здравствуйте. Можно скрыть его с помощью CSS, смотрите здесь.
Можно вообще скрыть с сайта, и с десктоп и с мобильных. Вам поможет плагин SiteOrigin CSS.
Илья, Вы в этом деле человек опытный. Какие есть еще простенькие плагины, чтобы адаптировать сайт для мобильной версии или это самый простой?
Я как-то обращался к Вам с вопросом по плагину Hyper Cache, но нашел у Вас на сайте информацию про другой хороший плагин, который в результате и установил,
У вас тема адаптивная? Если да, плагин вам не нужен. Перейдите: Внешний вид – Настроить. Внизу можно посмотреть как сайт отображается на мобильных и планшетах.
У меня установлена тема: SuvZineВерсия: 1.0.
Судя по тому, что она уже давно не обновлялась, подозреваю, что тема не поддерживается автором.
При попытке ее настроить, изменить фон или произвести с ней еще какие-нибудь действия – появляется сообщение:
Страница недоступна
Сайт ol…v.ru пока не может обработать этот запрос.
HTTP ERROR 500
Я скачал пару похожих тем, но устанавливать их не решаюсь, боюсь. Почитал про установку новых тем, пишут, что могут возникнуть много проблем, которые замучаешься потом расхлебывать…
Где тему взяли? На WP её нет. Поэтому и глючит. Рекомендую использовать официальные темы WordPress, которые есть в репозитории. То есть, их можно найти через админ-панель WordPress, либо на официальном сайте. “Почитал про установку новых тем, пишут, что могут возникнуть много проблем, которые замучаешься потом расхлебывать…” Это бред. Никаких проблем не будет! Да, придётся настроить тему под себя. Но это не проблема! Вот вам полезные плагины для настройки тем:
Изменить стили темы – SiteOrigin CSS
Перевести тему на Русский язык – Loco Translate
Более 500 полезных плагинов – Супер плагины WordPress!
Забиваю в поиск ВП, тема высвечивается. Уже не помню, но по-моему с сайта ВП и качал в 2009 году.
Я тут наше две темы, но не знаю как они, ибо не специалист.
В какой поиск забиваете? Вы похоже не там ищите. Эти темы очень старые. Ищите через админ-панель WordPress. Внешний вид – Темы – Добавить новую. Там есть фильтр. Свежие темы есть. В админке удобней, можно заранее посмотреть тему и сразу установить, без скачивания.
Здравствуйте, отличная тема, очень нравится
Не подскажите как поменять социальные сети, допустим сейчас по стандарту можно поделиться на facebook/pin/twitter/и почта, как отредактировать, добавить тот же допустим вк ?
Здравствуйте. Можно плагин поставить отдельный по соцсетям. Например, Uptolike классный плагин!
Огромное спасибо за совет, плагин превосходный!
То что нужно!
У меня на сайте много записей про такие плагины, ищите через поиск, либо здесь – Супер плагины WordPress
Огромное спасибо за совет, плагин превосходный!
То что нужно!
Здравствуйте,перестал читать shortcode как исправить?
Здравствуйте. Шорткоды не работают в мобильной версии?
да
Перед тем как проблема появилась, плагин обновляли? Может ещё что-то делали, изменяли.
Нет,после пробовал обновлять и ничего,отображается сам шорткод в мобильной версии
На основном сайте нормально показывается? Какой плагин шорткод выводит?
На основной работает все нормально,а в мобильной выводит сам шорткод [my_recent_posts type=”videos” num=”1000″ custom_class=”latest-videos” custom_class_item=”pile-item”]
пробовал менять плагины для шорткодов и никаких изменений Easy Bootstrap Shortcode
Здравствуйте, у меня директ реклама не отображается в мобильной версии сайта через блог! В чем может быть проблема?
Здравствуйте. Конечно не отображается, плагин свою тему ставит на мобильный сайт. Для мобильных нужно отдельно рекламу добавлять. В настройках плагина есть такая возможность, только в одно место.
В этом одном месте и не работает) Нижний коллонтитур я так понимаю? Разместил там код и ничего!
Кэш чистили?
Подскажите пожалуйста. У меня на главной (мобильная версия) отображается картинка (кружочек) с датой добавления публикации, это так должно быть в стандартном варианте?. Как то не красиво…
На главной странице моего сайта в версии для ПК ко всем анонсам публикаций идет картинка, и так красивее выглядит. Как сделать такое же для мобильной версии? Что-бы вместо даты была картинка, которая идет первой в публикации. Спасибо!
Само собой, у плагина свой шаблон, вы не знали об этом? У вас тема адаптивная? Если да, то вам этот плагин не нужен. Лучше адаптивная тема, чем плагин.
Свой шаблон это я понимаю. Была мысль, что может именно с моей темой немного не дружит… Если бы у меня шаблон был адаптивным, то меня здесь не было бы. У меня старый шаблон, тогда еще не думали за смартфоны. Видел как этот плагин показывает картинки вместо дат, вот и спросил может вы знаете где нужно подправить в коде шаблона. Выходит не знаете?
При желании, можно конечно найти. Надо искать в файлах плагина. У меня пока нет на это времени. Поставьте себе плагин File Manager, чтобы быстро находить и редактировать файлы. Вообще, я рекомендую вам, установить себе свежий адаптивный шаблон, так намного лучше и проще.
Добрый вечер подскажите пожалуйста.В мобильной версии не появляться стрелка для под статей.Нажимаешь сверху в правом углу на штрих,статьи есть,адругие которые подкрепил нету?
Здравствуйте. Скриншот можете показать, не совсем понимаю, что это такое.
Добрый день! Замечательная статья и сам плагин. Подскажите, у меня при открывании записи в блоге, в её заголовке каждое слово заголовка отображается с заглавной буквы. Можно ли, что-либо изменить? Заранее спасибо.
Здравствуйте. Наверно просто такой шрифт в теме. Попробуйте изменить его. Есть много плагинов по шрифтам. Например плагин Easy Google Fonts.
Добрый день!
Плагин работает нормально. Но мой сайт перестает искаться поисковыми системами в частности Яндексом и проваливается вниз в поиске.
Не знаете как решить данную проблему?
Спасибо!
Здравствуйте. Как вы поняли, что ваш сайт не индексируется? Такого быть не может, если запретов нигде нет. В Вебмастере есть какие-нибудь уведомления?
Нет нету. Эмпирически определил. Ставлю плагин – сразу траффик на 30% вниз.
Убираю плагин – вверх…
Странно. Проверяли отображение сайта на мобильных? Всё нормально там, никаких косяков нет? Ответ сервера 200 OK? Поставьте плагин, затем в Яндекс Вебмастере проверьте мобильную версию: Инструменты – Проверка мобильных страниц. Возможно какие-то косяки есть, из-за этого увеличиваются отказы и позиции падают. Лучше использовать адаптивную тему, либо подключите Турбо-страницы.
Да, я тоже к этому пришел. Буду менять тему.
Просто очень понравилось отображение этого плагина…
Доброго времени суток.
Подскажите пожалуйста.
Как сделать так, чтобы кнопка перехода на компьютерную версию с мобильной отправляла именно на ту страницу сайта, которая мне нужна?
Заранее спасибо за помощь!!!
Здравствуйте. У WPtouch нет такой опции. Такая функция есть у плагина Any Mobile Theme Switcher переключатель мобильного сайта.
Ручками тоже никак не прописать?
Может и ручками можно. Тогда вам лучше к разработчику обратиться. Могу рекомендовать специалиста – vk.com/wp_selico. Скажите от меня.
Спасибо!
Как подключить к wptouch пользовательский тип записи. в моей теме в function.php зарегистрирован новый тип записи, в десктопе все ок. wptouch их не видит. в папку wptouch.php-themes-default добавила два соответствующих шаблона (в который пользовательские записи выводятся). что еще нужно сделать чтобы плагин в мобильной версии показывал эти записи?
Здравствуйте. Попробуйте в Общих настройках – Целевые страницы – Мобильная первая страница, указать там URL адрес страницы с записями. Они у вас выводятся только на главной? На отдельной странице сможете вывести? Можно попробовать включить PRO функции в настройках Совместимость сайта. Посмотрите настройки Устройства – Дополнительные пользовательские агенты. Может вашего устройства, на котором вы просматриваете, нет в списке.
Здравствуйте! На мобильной версии сайта присутствует пагинация предыдущая запись – следующая запись. Как ее отключить?
Добрый день. У вас тема адаптивная, или у мобильной версии отдельная тема?
У меня есть мобильная и компьютерная версия сайта. Между ними возможно переключение.
Какой плагин используете, для создания мобильной версии?
Wp tuoch плагин.
В настройках смотрели, точно нет такой функции, чтобы можно было отключить? Посмотрите ещё раз, внимательно.
К сожалению ничего не нашла. Можете что-нибудь еще посоветовать?
В основной теме у вас тоже есть такая навигация, предыдущая, следующая запись?
В том то и дело, что только в мобильной версии есть такие кнопки.
Может помочь плагин SiteOrigin CSS. Только нужно будет свернуть окно браузера, чтобы отобразилась мобильная версия. Если этот вариант не прокатит, придётся лезть в файлы плагина, искать там этот код и удалять его. Но, тогда при обновлении плагина, будут слетать все изменения. Придётся постоянно удалять код, после обновлений. Если не хотите парится так, найдите спеца, чтобы он создал вам функцию, которая будет автоматом скрывать этот блок, даже при обновлении.
Спасибо! Успехов в работе!