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

в этом Учебник по WordPress, мы сделаем вашему сайту WordPress бесплатную мобильную модификацию с помощью плагина WPtouch.

Основы мобильной оптимизации

Очевидно, что дизайн, ориентированный на мобильный экран, является неотъемлемой частью "Удобство для мобильных", и это не единственное соображение.

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

Плагины для конкретной платформы –  Возможность использовать определенные плагины, которые отключаются в зависимости от устройства отображения посетителя, также удивительна и полезна. Зачем WordPress прилагать столько усилий для загрузки плагина, если его функциональность не нужна?

Конкретный мобильный контент –  Хотя контент должен меняться между платформами. На мобильных устройствах вам необходимо отображать заголовки и фрагменты, которые лучше подходят для меньшего экрана.

Подход 80/20

Вы, наверное, слышали о правиле 80/20, известном также как принцип Парето по имени его создателя, итальянского экономиста Вильфредо Парето.

Чтобы сделать ваш сайт полностью мобильным и удобным для пользователя с помощью настраиваемой темы, которая связывает его с темой рабочего стола, меню и плагинами, а также с вашим контентом (который необходимо будет адаптировать к устройству), потребует значительных усилий. Но использование плагина позволит достичь 80% того, что мы хотим, всего за 20% (или меньше) усилий, необходимых для полностью персонализированного подхода.

WPtouch, выбирая плагин

Если плагин был загружен более 5 миллионов раз, то весьма вероятно, что этого достаточно.

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

Важно отметить, что WPtouch активируется только на мобильных телефонах, но не на планшетах..

Итак, мы быстро перейдем к основам, то есть к установке и настройке плагина WPtouch.

1. Скачать и установить

перейти к  Расширения > добавлять в панели администратора WordPress, затем найдите WPtouch.  монтажник et Активировать плагин.

Кроме того, вы можете lскачать из каталога плагинов WordPress и загрузить через ваш FTP.

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

Есть 4 страницы опций (некоторые с несколькими вкладками), так что можно многое настроить, прежде чем эта будет работать идеально.

2. Проверьте это работает

Перед тем как приступить к настройке, мы проверим, действительно ли она работает без какой-либо настройки. В бесплатной версии по умолчанию есть только одна тема, поэтому она должна работать после ее активации.

Однако до этого, если вы хотите только протестировать WPtouch и не хотите отображать свою текущую работу на телефонах мира, перейдите к WPtouch > Основные настройки и определить режим отображения из обследование (активен только для подключенных администраторов сайта) то, сохранить изменения.

Просмотрите свой сайт на мобильном устройстве (или симуляторе) и убедитесь, что ваша тема отображается на вашем мобильном устройстве.

Display-Site-WordPress-на-Mobile2

 3. Настройка мобильного меню

Бесплатная версия WPtouch предлагает важную возможность указать меню для использования на мобильных устройствах, и я настоятельно призываю вас сделать это (конечно, предварительно подумав о том, какой контент наиболее важен для ваших мобильных посетителей! ).

Создайте новое меню, как вы обычно делаете с WordPress. (apparence >Меню). Дайте ему осмысленное имя, например " Меню мобильный " затем на странице настроек МЕНЮ "Для того, чтобы WPtouch, выберите в раскрывающемся списке только что созданное мобильное меню и отметьтеes параметры меню.

Отзывчивый-Theme-Conguration-меню

Создание специального меню для вашей мобильной темы стоит усилий

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

4. Добавить значки закладок

Когда посетитель добавляет ваш сайт в избранное, он может добавить значок на свой домашний экран. Если вы не укажете значок, устройство будет использовать значок по умолчанию и сделает его значком для вашего сайта, чтобы его было легко найти (например, ярлык). Поэтому важно представить образ вашего бренда, чтобы его можно было легко идентифицировать.

Создайте два значка, один для Android (96 × 96 пикселей) и один для iOS (120 × 120 пикселей) одновременно в формате png и загрузите их в WPtouch > Настройки темы >  значки закладок. Вы также можете изменить название сайта здесь, если хотите (если оно кажется вам слишком длинным). Добавление значков закладок значительно улучшит поиск вашего сайта на мобильном главном экране.

Отзывчивая Тема-оф-иконописец закладки

Вернитесь на свой сайт, обновите его и проверьте значок закладки.

5. Теперь вы можете редактировать

Теперь, когда у вас есть все необходимое, вы можете настроить внешний вид вашего мобильного сайта, выбрав «Основные настройки» и «Настройки темы».

Основные настройки

На этой странице вы можете заменить заголовок сайта, выбрать конкретный язык, отобразить мобильную тему только для администраторов (полезно для тестирования), выбрать конкретную мобильную целевую страницу (домашнюю страницу) и добавить HTML-код. пользовательский, CSS или JavaScript.

Настройки темы

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

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

На странице настроек темы есть вкладки 5:

  • общий - эта вкладка позволяет вам поиграть с отображением темы, включая количество сообщений, отображаемых в списке страниц, исключение сообщений из определенных категорий и тегов или отображение избранных изображений , ползунки и формы входа
  • воплощение - Здесь у вас есть несколько вариантов, позволяющих выбрать цвет, логотип для сайта, настраиваемое содержимое нижнего колонтитула и шрифты.
  • Иконки закладки - Как уже говорилось, это позволяет вам определить значок, который будет отображаться на главном экране вашего посетителя, если он отметит ваш сайт как избранный.
  • Режим веб-приложения / реклама - Все полезные, но все ограниченные элементы для версии Pro, которые видны здесь, но неактивны, чтобы вы могли видеть, что вы теряете, если не используете версию Pro.

Обновление до Pro: мощные функции, ужасная ценовая модель

По мере того, как вы перемещаетесь по страницам настроек WPtouch, вы заметите, что ряд очень привлекательных опций ограничен для версии Pro: больше вариантов выбора темы, только мобильный контент, адаптивные изображения и Кэширование назвать несколько.

К сожалению, модель ценообразования WPtouch вряд ли удобна для клиентов.

Вы можете подумать, что купив одну лицензию за 49 долларов, вы получите все функции Pro для 1 сайта, но вы ошибаетесь. здесь нет Кэширование в лицензии на один сайт, чтобы получить ее, вам понадобятся 5 пакетов лицензий по цене 99 долларов США и, если вы хотите, адаптивные изображения.

джин WPtouch разные Лицензионный сбор

Для доступа ко всем функциям необъяснимым образом требуется многосайтовая лицензия.

Почему это слияние двух моделей ценообразования?

Почему бы не перейти на версию Pro и не получить все функции? Я позволю вам представить свой собственный ответ, потому что эти цены почти необъяснимы.

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

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