Мобильная версия сайта

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

Есть вопросы? Напиши комментарий!

Здравствуйте! Чтобы сделать Мобильную версию своего Сайта, вам необходимо прочесть данную статью от начало и до конца, только тогда вы действительно поймёте и узнаете, как просто и быстро можно адаптировать свой Сайт под любые мобильные устройства, я вам это ГАРАНТИРУЮ!

Потратьте всего 10 минут своего времени!  чтобы наконец-то адаптировать свой сайт под любые мобильные устройства. И наконец перестать терять своих потенциальных клиентов, которые всё больше и больше, будут заходить на ваш сайт со смартфонов, айфонов и других популярных гаджетов. Не теряйте зря своё время и свой Трафик…. Действуйте!

 

 

Как Самому Бесплатно сделать Мобильную версию Сайта!

 

Адаптировать свой сайт под мобильное устройство нам поможет плагин – WPtouch, скачать данный плагин вы сможете из своей административной панели WordPress, для этого перейдите по вкладке: Плагины – Добавить новый, введите в поле поиска название плагина, и нажмите Enter. Установите и активируйте плагин – WPtouch.

 

05-05-2015 17-05-35

 

После установки и активации плагина, нажмите на вкладку WPtouch, которая появится в левом меню вашего WordPress. Затем у вас появится ещё 6 вкладок – Что нового, Базовые настройки, Темы и расширения, Параметры темы, Меню и Повысить категорию до Про. На странице – Что нового можно почитать новости сервиса Wptouch.

 

05-05-2015 17-07-43

 

Но нас интересуют настройки, поэтому переходим на страницу – Базовые настройки. В данных настройках, вам нужно указать:

 

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

Язык региона вашего сайта.

Режим отображенияAll visitors – Для всех посетителей.

 

Остальные настройки оставьте по умолчанию, и нажмите – Сохранить изменения.

 

05-05-2015 17-11-30

05-05-2015 17-14-00

 

Далее, переходим на страницу – Темы и расширения. Здесь нам будет доступна одна Бесплатная Тема, которая отвечает всем требованиям, и сделает для вас полноценную мобильную версию вашего сайта. Выбираем её, и нажимаем на кнопку – Настроить.

 

05-05-2015 17-16-50

 

Далее, мы попадём на страницу Параметров темы. Начнём с Общих параметров, здесь вам нужно – Указать количество записей, которые будут отображаться на мобильной версии вашего сайта.

 

05-05-2015 17-21-02

 

Затем спуститесь вниз страницы, здесь вы можете включить и настроить для вашей темы – Готовый слайдер, указать сколько записей в нём будет показываться, сделать его автоматическим и указать какие конкретно записи будут в нём отображаться. Остальные настройки можно оставить по умолчанию. В конце не забудьте Сохранить сделанные изменения.

 

05-05-2015 17-23-15

 

Далее, переходим в параметры – Фирменная символика, здесь вы сможете подобрать оригинальный дизайн для вашей темы – указать цвета для – фона, заголовка, ссылок, колонтитула публикаций. Так же можно загрузить фирменную эмблему, и задать стиль шрифта.

 

05-05-2015 17-26-06

 

Внизу страницы можно указать URL адреса своих аккаунтов популярных Социальных сетей – Facebook, Tvitter, Google+, Адрес электронной почты, RSS.

 

05-05-2015 17-38-32

 

В конце сохраняем настройки Фирменной символики.

 

05-05-2015 17-39-08

 

Далее, переходим на страницу – Меню, в настройках – Тематические меню, выберите меню заголовка, которое будет отображаться в мобильной версии вашего сайта. И укажите будете ли вы использовать значки для вашего меню. В конце – Сохраняем сделанные изменения.

 

05-05-2015 17-41-08

 

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

 

05-05-2015 17-43-26

 

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

 

05-05-2015 17-44-56

 

И последнее, сохраняем настройки, и жмём на кнопку – Просмотреть тему.

 

05-05-2015 17-46-33

 

У вас откроется окно, на котором будет показана – Готовая, мобильная версия вашего сайта.

 

05-05-2015 17-47-55

 

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

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

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

 

Я уже пользуюсь другим плагином для создания мобильной версии сайта – WP Mobile detector. (Обновление 11.07.2015) До новых встреч! Отказался от плагинов, у меня адаптивная тема, так проще и лучше, сайт быстрее грузится (Обновление 17.04.2019).

 

P.S.  Релиз ещё 4 плагинов, для создания мобильной версии вашего сайта!

 

 

Остались вопросы? Напиши комментарий! Удачи!

 

Поделиться ссылкой:

https://info-effect.ru/



info-effect.ru ТОП
Как самому сделать мобильную версию сайта wordpress обновлено: Апрель 17, 2019 автором: Илья Журавлёв

19 комментариев

  • Наталья 06.06.2017 Ответить

    Я тоже пыталась адаптировать сайт под мобильное устройство. Предыстория такова, что открыли с мужем интернет-магазин кондиционеров. Но с телефона конечно не удобно смотреть его. Поэтому попробовали сами адаптацию сайта под мобильные устройства. Прочитали много статей, в том числе и эту тоже. Честно- пол ночи сидели..До конца так и не разобрались. Проверяли адаптацию сайта, мучались, не выспались( Конечно расстроились, потому что время было зря потрачено и силы. У нас реклама от гугла. Из-за кривой верстки сайта на компе она помещалась, а вот при просмотре с мобильного не хочет адаптироваться и выходит за левую сторону экрана. Не адаптировались не только картинки, но и видео.((В итоге в интернете нашли информацию. Цена приемлемая, срок исполнения вышел всего 2 дня! Сайт после адаптации проходит тесты на мобильность гугла и яндекса. Кстати на самом сайте этой компании очень интересные статьи. Все написано понятно, поэтому мы и заинтересовались. По телефону нам так же отвечали на все вопросы. Весь сайт был сделан не в горизонтальную, а в вертикальную прокрутку. Смотрится теперь сайт на телефоне очень классно! И голову ломать не пришлось и сайт теперь адаптирован и под планшеты и под мобильники)Спасибо!

  • Виктор Егармин 15.08.2017 Ответить

    Первоначально не задумывались о том, что сайты надо будет открывать на мобильных устройствах. 12 лет тому назад об этом и речи толком не было. Сделали ресурс на бесплатном движке от joomla. Без вливаний финансов, сердито, но то что нужно по функционалу, легко добавлять новые статьи.
    В остальном докупили платный шаблон от Roket Theme и все пошло как по маслу. Но сейчас каждый смартфон на андройде и тот же айфон – подключен дома через Wi-Fi, а в пути через симковый инет.
    В итоге заходя на сайт видно, что его коробит, строки уходят в бок и выглядит это как минимум не читабильно. Вычитал на вашем сайте про адаптацию сайта под мобильные устройства. Все четко расписано и стало понятно, что нужно добавлять мобильную версию. Подобрали и в пределах десятки сделали “трансформацию” для корректного отображения на телефонах.
    Выглядит отлично, теперь стоит задуматься о подкрутке форума, так как вопросов в комментариях много. Тем более тематика портал – строительство. Укладка, шлифовальные работы и реконтруирование зданий – все это актуально в любое время. Но вот решение вопроса будет чуть попозжа, когда реклама немного отобъет эти затраты или инвесторы примут аспект во внимание.

  • Эльман 23.12.2018 Ответить

    Привет, Илья. Подскажи какую тему выбрать чтобы сайт на мобильных устройствах отображался как на компьютере, чтобы просто приближать и смотреть контент. Либо чтобы можно было переключиться на основную версию сайта, т е кому как удобно. Просто какую тему не ставлю везде есть своя мобильная версия. А посмотрел сайты у конкурентов в основном как на ПК так и на мобильных устройствах. Спасибо

    • Илья Журавлёв 23.12.2018 Ответить Автор

      Привет. Выбирай любую адаптивную тему. На WordPress их очень много. В админ панели, слева, перейди на страницу: Внешний вид – Темы – Добавить новую. Ещё поставь себе плагин Definitely allow mobile zooming. Он добавляет функцию для уменьшения или увеличения сайта с помощью пальцев рук.

      • Эльман 24.12.2018 Ответить

        Илья, а вот если у меня тема hestia, в ней сразу есть мобильная версия, достаточно хорошая, даже крутая, но там на странице помещается только 1 товар, хотелось хотя бы 2 товара в ширину. Я не смог это исправить, можно ли как-то переключиться на основную компьютерную версию с телефона. Либо вообще из темы удалить мобильную версию. И еще фото товара размытые именно в категориях, а на странице самих товаров и в карточках товаров все хорошо. Что нужно попробовать? Спасибо огромное

        • Илья Журавлёв 24.12.2018 Ответить Автор

          У вас плагин Woocommerce не совместим с вашей темой. Лучше использовать официальную тему, типа Storefront, тогда проблем никогда не будет. Вам могу посоветовать плагин Mobile Theme Switcher переключатель мобильной темы. Количество отображаемых товаров можно регулировать: Внешний вид – Настроить – Woocommerce, смотрите там настройки. Чтобы убрать размытие, попробуйте пересоздать миниатюры с помощью плагина Force Regenerate Thumbnails.

  • Дмитрий 17.04.2019 Ответить

    Илья подскажите пожалуйста. У меня тема Customizr Pro 2.1.2 адаптированная для мобильной версии сайта, но всё равно если посмотреть с мобильного телефона сайт вылезает за рамки. Что надо сделать?

    • Илья Журавлёв 17.04.2019 Ответить Автор

      Добрый день. Что именно вылезает за рамки?

      • Дмитрий 17.04.2019 Ответить

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

        • Илья Журавлёв 17.04.2019 Ответить Автор

          Таблицы с помощью чего делали? Наверно дело не в теме.

          • Дмитррий 17.04.2019

            Как не в теме? В редакторе WP

          • Илья Журавлёв 17.04.2019 Автор

            Таблицы делали с помощью плагина? Если с помощью редактора, то какого, старого или нового Gutenberg?

  • Дмитррий 17.04.2019 Ответить

    Старого, вот пример записи которая не вмещается.

    • Илья Журавлёв 17.04.2019 Ответить Автор

      Вы так и не ответили, с помощью чего таблицу делали) В старом редакторе по умолчанию нет такой функции для создания таблиц. Таблицы ваши не адаптивные. Но тема тут вообще не причём. Сделайте адаптивные таблицы вот и всё. Можно сделать с помощью плагина Shortcodes Ultimate.

      • дмитрий 17.04.2019 Ответить

        вот скрин редактора

        • Илья Журавлёв 17.04.2019 Ответить Автор

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

          • дмитрий 17.04.2019

            У меня на других страницах таблицы адаптивные и сделаны в старом редакторе, посмотрите эту страницу, там все вмещается

          • Илья Журавлёв 18.04.2019 Автор

            Потому что там текст выровняли по левому краю, поэтому вмещается. Можете везде так сделать.

      • дмитрий 17.04.2019 Ответить

        Так вопрос почему одни таблицы адаптивные, а другие нет, я таблицы все в этом редакторе делал?

Добавить комментарий

Ваш e-mail не будет опубликован.

 

Внимание! Вы соглашаетесь с Политикой конфиденциальности сайта info-effect.ru



Обратная связь

Политика конфиденциальности - Пользовательское соглашение