Как самому сделать мобильную версию сайта 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 плагинов, для создания мобильной версии вашего сайта!

 

 

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

 

   
Добавить комментарий для Илья Журавлёв Отменить ответ

  1. Наталья

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

    Ответить
  2. Виктор Егармин

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

    Ответить
  3. Эльман

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

    Ответить
    1. Admin автор

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

      Ответить
      1. Эльман

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

      2. Admin автор

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

  4. Дмитрий

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

    Ответить
    1. Admin автор

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

      Ответить
      1. Дмитрий

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

      2. Admin автор

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

      3. Дмитррий

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

      4. Admin автор

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

  5. Дмитррий

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

    Ответить
    1. Admin автор

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

      Ответить
      1. дмитрий

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

      2. Admin автор

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

      3. дмитрий

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

      4. Admin автор

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

      5. дмитрий

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

  6. vlad

    Здравствуйте, Илья. Часто попадаю на ваш сайт из поиска. Вопрос такой. Тема моего вордпресс сайта не поддерживает мобильную версию. Как ее добавить? Пробовал через WP Touch. Выглядит хорошо, но встроенный контент IFRAME на мобильных устройствах не загружается.

    Ответить
    1. Admin автор

      Здравствуйте, значит у вас тема устаревшая, лучше заменить её, сейчас все новые темы в каталоге WordPress адаптивные

      Ответить
      1. vlad

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

      2. Admin автор

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

      3. vlad

        P.S. Помимо того что написано выше, также присутствует проблема с плагином Easy FancyBox. Он устарел. Иногда не догружается встроенный контент iframe . Подскажите, пожалуйста, аналог, если знаете. Заранее спасибо.

      4. Admin автор

        Есть плагин WordPress fancyBox Lightbox