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

WordPressДобрый день. Если вы пришли сюда, значит вы задумались о создании мобильной версии своего сайта. Существует множество способов разработки такого продукта. В этой статье рассмотрим некоторые из них.

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

Для начала разберемся с вопросом «как сделать мобильную версию сайта на wordpress через плагин». Существует огромное количество различных плагинов. Некоторые из них весьма просты в настройке, но существуют и самые настоящие тяжеловесы, которые очень тяжело адаптировать под себя. В пример, мы приведем наш печеньковский сайт.

С плагинами

Совершенно недавно занимаясь оптимизацией нашего сайта мы решили, что стоит прибегнуть к созданию урезанной версии, где будет минимум графики и максимум информации. При этом контент должен оставаться читабельным. Все должно выглядеть органично и для пользователя контент должен быть максимально доступен. В текущее время развития технологий доступны плагины Accelerated Mobile Pages, которые как раз выполняют указанную задачу. Но и здесь, есть большое количество нюансов. Давайте разбираться в плагинах, которые мы пытались использовать:

AMP

  1. Первый плагин AMP. Он так и называется. Это официальный плагин создания быстрых мобильных страниц сайта для wordpress-a. Но у него есть свои не очень приятные особенности:
    — со старта ничего не понятно, нужно курить доки.
    — отсутствие настроек css как такового. То есть, если нужно подправить стили в стандартных инструментах плагина такого просто нет.
    — отсутствие настроек html. Нет никаких окон по настройке страниц.

В целом именно по этим причинам мы и отказались от этого плагина.

Google AMP For WordPress

2. Второй плагин, который так же был опробован это Google AMP For WordPress. Огромное количество прикрученных фич, максимальная валидация АМП страниц, аддоны, кастомизация АМП страниц, конфигурация лейаутов, GDPR, настройка структуры, переводчик страниц, аналитика, социальные иконки и шареды, аналитика, нотификации и просто еще целый вагон всего. Вот это настоящий тяжеловес — скажите вы. Да, безусловно. Можно настроить все до мелочей, но нужно ли это вам, в таких количествах? Мы пришли к выводу, который привел к отказу и от этого плагина тоже.

Требования к плагину были такие:

— Реализация настроек на одной странице по вкладкам.
— Возможность настройки css, чтобы причесать все недочеты и довести страницы до ума, что-то выпилив, где-то настроив отступы, и где-то добавив что-то нужное.
— Настройка html поблочно (хедер, боди и футер)
— Возможность настройки аналитики
— Быстрое развертывание
— Автоматический редирект при определении мобильных гаджетов
— Легкая настройка монетизации
— Современно оформленное отображение контента
— Шареды в соц сети.

И благо такой плагин есть. Называется он:

AMP для WP — Ускоренные мобильные страницы

3. AMP для WP — Ускоренные мобильные страницы — он настолько удовлетворяет требованиям, что когда мы его установили очень сильно обрадовались. Настраивается все вышеперечисленное. Единственный пункт, в котором понадобилась установка еще одного плагина — это монетизация. Пришлось установить плагин Ads, чтобы реализовать adsense, но это не беда. Посмотреть эти странички можно по адресу https://pechenek.net/amp.

Без плагинов

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

мобильная версия wordpress

Спасибо за внимание, надеюсь эта статья была полезна для вас и помогла в освоении адаптации своего сайта под мобильные устройства. И помните, у нас есть канал на ютубе, канал в телеге, группа в фейсбуке и ВК. Всем удачи!

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

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