Меню

any mobile theme switcher настройки

Пятый элемент блогосферы

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

Тема Frontier для блога, которую я использую, адаптивная, имеет массу возможностей в настройке дизайна, но мне не очень нравится ее мобильный вариант. Он может отпугнуть посетителей, кроме того, Гугл прохладно относится к неудобному для пользователю мобильному представлению сайта, поэтому может запросто снизить приоритетность его показа в результатах поисковых запросов.

В результате поисков я перебрала несколько плагинов, пока не остановилась на Any Mobile Theme Switcher. Теперь сформулирую, что же я хочу от мобильной темы:

  • Неусложненный дизайн
  • Моя шапка блога — привычная и узнаваемая, добавляющая уникальность блогу
  • Анонсы записей до тега «Читать далее», желательно с одним изображением
  • Возможность размещения виджетов в «подвале» блога

Два плагина у меня отказались работать, еще от нескольких я отказалась из-за неуникальности дизайна, в котором можно было только заменить цвет на свой и, в лучшем случае, добавить логотип, очень мелкий. В плагине Jetpack дизайн мобильной темы, кстати, вообще не настраивался. Плагин Any Mobile Theme Switcher позволяет использовать любую тему для WordPress в качестве мобильной.

Теперь я расскажу, как настроить плагин Any Mobile Theme Switcher.

Сначала нужно установить плагин. Для этого в админке своего блога заходим в «Плагины» — «Добавить новый» и в окне поиска плагинов вбиваем «Any Mobile Theme Switcher». Далее кликаем по кнопке «Установить». Теперь заходим в «Установленные плагины» и активизируем его.

Активизировали? Теперь вам нужна другая тема, помимо той, которая активна в вашем блоге. Эта тема должна иметь возможность настройки шапки блога и виджеты в подвале. Если у вас есть такая тема, можете пропустить этот абзац. Если нет, в меню админки выбираете «Внешний вид» — «Темы» — «Добавить новую». Можете поискать в популярных, либо выставить фильтры характеристик, примерно так.

Фильтр характеристик тем WordPress

Как только установили тему (активизировать ее ни в коем случае не надо), в «Настройках» находим «Any Mobile Theme» и переходим, собственно, к настройкам.

Плагин Any Mobile Theme Switcher дает возможность выбрать свою тему для нескольких видов мобильных устройств. Для одних из них вы можете выбрать тему посложнее, для других — попроще. Сейчас я настрою показ темы Hemingway, весьма приятной глазу, одновременно очень простой и адаптированной к мобильным устройствам.

Настройка плагина Any Mobile Theme Switcher

В результате я получила вполне нормальное мобильное представление блога.

Но это еще не всё. Шапку тема Hemingway взяла из настроек, но неплохо бы еще добавить навигацию по блогу — рубрики и, если нужно, страницы. По желанию можно добавить виджеты соцсетей. И обязательно статистику! Не забываем учитывать и посетителей, заходящих с мобильной техники. Их сейчас очень много.

Читайте также:  xerox workcentre m15 настройка

В настройках плагина нужно разрешить показывать ссылку переключения с мобильной версии на обычную и наоборот. Разработчики советуют не ставить эту ссылку, и они правы. Я отмечу «Yes» напротив вопроса «Do you want to show Switch Mobile Theme link even the vistor is viewing from desktop ?» на недолгое время, пока занимаюсь настройками.

Настройка плагина Any Mobile Theme Switcher

Копируем ссылку, открываем ее в новом окне своего браузера и любуемся несколько секунд, насколько простым стал дизайн сайта в мобильном представлении. Теперь возвращаемся в админку, заходим в «Виджеты».

О, чудо! Многообразие виджетов темы Frontier исчезло, вместо него три виджета подвала и один сайдбар темы Hemingway.

Если чуда не произошло, закройте браузер, удалите куки и залогиньтесь снова. Пользуясь возможностью, добавляйте виджеты в новую тему. Не в коем случае не трогайте виджеты из неактивных колонок! Можно только их открыть, чтобы скопировать содержимое. Ставим в подвал только самые необходимые виджеты рубрик, страницы, возможно, ссылки на RSS и соцсети и, конечно, любимые счетчики. В сайдбар ничего ставить не надо, но, если вы склонны к перфекционизму, добавьте туда остальные виджеты.

Теперь необходимо кое-что изменить в настройках темы («Внешний вид» — «Настроить»). Я, например, заменю изумрудно-зеленый цвет ссылок на синий. Если вдруг в теме отсутствует шапка, добавьте. В результате получился вот такой подвал мобильной темы.

Вот и всё. При желании, можно вернуться в настройки плагина и запретить переход с обычной темы на мобильную и обратно. Также можно разнообразить настройки. Скажем, для iPad настроить основную тему.

источник

Mobile Theme Switcher переключатель мобильной темы WordPress

Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете как добавить на свой сайт переключатель-кнопку для перехода на мобильный или основной сайт. Вы сможете добавить кнопку в меню сайта. Можно добавить кнопку-переключатель на сайт с помощью шорткода или php кода. Вы сможете указать свой текст для ссылки переключателя. Вы сможете выбрать мобильную тему для разных типов устройств, типа iPhone, Android, Windows и т.д.

Установить плагин Any Mobile Theme Switcher вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Далее, после установки и активации плагина, перейдите на страницу: Настройки – Any Mobile Theme. Здесь вы сможете настроить основные параметры плагина. Вы можете выбрать разные темы для отображения на разных устройствах:

– Other Mobile Device Theme.

Читайте также:  отдел к установка windows

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

Далее, внизу страницы вы можете настроить:

Remember forced layout till, вы можете выбрать сколько будет запоминать мобильную тему браузер, для пользователя, который на неё переходит.

Switch Mobile Theme Link Text, текст переключателя-кнопки для перехода на мобильную тему.

Switch Desktop Theme Link Text, текст переключателя-кнопки для перехода на основную версия сайта.

Do you want to show Switch Mobile Theme link even the vistor is viewing from desktop, показывать переключатель на мобильную версию на основном сайте?

В самом низу вы можете скопировать шорткод или php код переключателя для вставки на свой сайт. Можете скопировать ссылки переключателей, чтобы например добавить их в меню сайта.

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

источник

Лучшие плагины для оптимизации WordPress-сайта под мобильные устройства

У вас есть отличная тема оформления для WordPress, которая оптимизирована под мобильные устройства. Но многие из таких тем не так уж хороши. Часто они имеют проблемы с выравниванием на мобильных экранах и медленно загружаются. Но это можно исправить с помощью плагинов для мобильной оптимизации WordPress.

The Mobile Theme Module by Jetpack

WordPress Mobile Pack

Плагин включает в себя несколько мощных инструментов для мобильной версии сайта. Он создает целое веб-приложение с использованием новейших технологий HTML5.

Веб-приложение являются гораздо более удобным для пользователя, включают в себя автономную синхронизацию и работают на всех платформах, включая iOS, Windows Phone, BlackBerry OS и Android.

Плагин WordPress Mobile Pack также позволяет выборочно синхронизировать записи, страницы и комментарии. Платная версия предоставляет продвинутые функции настройки и создания тем, интеграции с Google Analytics, Google AdSense и DoubleClick.

WPtouch Mobile Plugin

WPtouch преобразует существующую тему оформления WordPress в шаблон, соответствующий рекомендациям Google по дизайну мобильных сайтов.

Премиум-версия плагина предлагает множество расширенных тем оформления для блогов, сайтов компаний и интернет-магазинов, созданных с помощью плагина WooCommerce.

Также можно приобрести дополнительные расширения. Их стоимость варьируются от 10 до 20 долларов.

Стоимость базовой версии WPtouch Pro начинается от 88 долларов в год за лицензию для одного сайта. Она включает в себя такие расширения, как Basic Ads, Related Posts, а также режим Web-App.

Any Mobile Theme Switcher

Плагин Any Mobile Theme Switcher распознает смартфоны и планшеты, работающие на базе Android, Windows Mobile и BlackBerry OS. Вы можете выбрать для них различные мобильные темы оформления.

Премиум-версия плагина (стоимость которой составляет $10) позволяет отображать различные домашние страницы в зависимости от типа мобильного устройства. Он также отображает QR-код на десктопной версии сайта для мобильных закладок и совместим с плагином W3 Total Cache.

Obox Mobile – WordPress Mobile Plugin

Плагин Obox Mobile WordPress предлагает расширенные возможности настройки мобильной темы:

  • Визуальный настройщик.
  • Главная страница с виджетами, которая позволяет более эффективно размещать контент.
  • Всплывающая левая боковая панель, которая формирует у посетителей ощущение использования веб-приложения.
Читайте также:  в приложении мастер настройки произошла ошибка после прошивки

Этот премиум плагин стоит $40, включая пожизненные обновления и 6 месяцев эксклюзивной поддержки от команды разработчиков Obox.

WP Mobile Detector

Плагин определяет более 5000 устройств и позволяет обслуживать «специфический» контент.

Бесплатная версия WP Mobile Detector поставляется с 11 темами оформления для мобильных устройств, предназначенными для блогов, сайтов компаний и интернет-магазинов.

Стоимость платной версии плагина начинается от 50 долларов. В ней доступен интерактивный редактор мобильных тем, интеграция рекламы, отслеживание посетителей и многое другое.

Несколько дополнительных советов

Цель этой статьи заключается в том, чтобы показать, как оптимизировать мобильный WordPress-сайт. Мы предоставили вам список полезных плагинов. Теперь рассмотрим еще несколько аспектов реализации.

Адаптивные изображения

Изображения в используемой теме оформления WordPress должны быть адаптивными. Например, если я переключаюсь с портретного на альбомный режим или меняю ширину окна браузера, изображения должны адаптироваться к новым размерам области просмотра.

Начиная с версии WordPress 4.4, CMS поставляется со встроенной поддержкой адаптивных изображений. Если вы используете старую тему, убедитесь, что разработчик обновил ее. Проверьте, работает ли адаптивное отображение изображений. Если нет, то лучше поменять тему оформления на более современную.

Оптимизация изображений

WordPress автоматически создает оптимизированные версии изображений в разных размерах. Вы можете оптимизировать новые и существующие изображения, используя плагин EWWW Image Optimizer . Он поддерживает пакетное сжатие изображений в форматах JPG или PNG.

WP Smush — еще один плагин для оптимизации изображений. Бесплатная версия ограничивает максимальный размер входного файла 1 МБ.

Отложенная загрузка изображений

Но для загрузки оптимизированных изображений все еще требуется время. Чтобы минимизировать передачу данных и сократить время загрузки сайта, можно использовать плагин BJ Lazy Load .

Простой JavaScript-код откладывает загрузку изображений до тех пор, пока область просмотра не станет активной. Если в браузере отключена поддержка JavaScript, плагин перестает работать, «не ломая» сайт. Изображения будут загружаться в обычном режиме. Другими словами, изображения загружаются только тогда, когда вы прокручиваете страницу вниз и находитесь в области просмотра.

Протестируйте свой мобильный сайт

Google предоставляет удобный тестер сайтов для мобильных устройств . После проверки сервис выдает персональные рекомендации по оптимизации сайта.

Заключение

Все эксперты говорят о том, что количество мобильных пользователей будет увеличиваться. Google уже начал использовать принцип mobile first в качестве фактора ранжирования. Поэтому пришло время и вам оптимизировать свой сайт под мобильную аудиторию!

Данная публикация представляет собой перевод статьи « Best Plugins for WordPress Mobile Site Optimization » , подготовленной дружной командой проекта Интернет-технологии.ру

источник

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

Adblock
detector