Создание и настройка мобильной темы для сайта на WordPress

Адаптация сайта под мобильные устройства — внедрение мобильной темы

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


Навигация по странице:

Модуль Jetpack Мобильная Тема отображает содержание в чистом, лаконичной форме, что делает её легким для мобильных пользователей и позволяет быстро сканировать ваш сайт. Кроме того, было проделано специальные настройки, чтобы сделать мобильную тему, как можно более легкой, для обеспечения быстрой загрузки.

Как включить мобильную тему для адаптации сайта?

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

Как это делается? Заходим с панели администрирования WordPress во вкладку Jetpack/Настройки, находим нужный нам модуль «Мобильная тема» и нажимаем активировать. После этого мы сможет посмотреть как поменялся наш сайт при просмотре с мобильного устройства.

Как выглядит Мобильная тема в действии на сайте?

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




Jetpack Мобильная Главная страница

Как мы можем убедиться мобильная тема от Jetpack имеет довольно не плохое оформление «по умолчанию», но все же мы можем настроить ее так как нам будет угодно. Рассмотрим данные настройки далее.

Опции мобильной темы модуля Jetpack

Мобильная тема дает вам различные варианты настроек:

  • Показывать на экране анонсы или полное содержимое записей на главной странице и страницах архива.
  • Показывать промо для WordPress мобильных приложений в футере мобильной теме.

Чтобы получить доступ к опциям мобильной темы:

  • Пункт меню Jetpack/Настроить.
  • После того, как на первой странице Jetpack, найдете модуль «Мобильная тема» и нажмете «Настроить», вам станут доступны настройки.
  • Выберите нужный вариант, а затем нажмите «Сохранить изменения».

Настройки пользовательского меню мобильной темы

Меню и окно поиска в мобильных темах

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

Если вы хотите использовать специальное меню, а не одно из назначенных в стандартном варианте, вы можете использовать «jetpack_mobile_theme_menu», чтобы заставить мобильную тему Jetpack использовать меню, который вы укажете. Чтобы сделать это, вам нужно в первую очередь установить плагин функциональности.

Затем нужно найти идентификатор пользовательского меню, который вы создали.Если выперейдете в Внешний вид/Меню, в административной панели инструментов и выберите для редактирования пользовательское меню, ID этого меню будет число в конце URL-адреса. Например, в этом URL:

yoursitename.com/wp-admin/nav-menus.php?action=edit&menu=75

Число 75 является идентификатором меню.

Затем, вы должны добавить этот код к функциональности плагина вы ранее установили:

function jetpackme_mobile_theme_menu () {
    return 75;
}
add_filter ('jetpack_mobile_theme_menu','jetpackme_mobile_theme_menu');

Пользовательский заголовок и фон мобильной темы

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

  • Пользовательские изображения заголовка;
  • Пользовательские фоновые изображение и цвет;
  • Пользовательские настройки повторения фонового изображение и настройки позиционирования;
  • Отображение текста заголовка (относящиеся к названию сайта и описанию)
  • Цвет текста на сайте в заголовках (если вы разрешили пользовательский цвет текста заголовка в мобильном варианте темы)

Отображение заголовков и фона сайта в мобильной теме

Настройка боковой панели и виджетов в мобильной теме

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

В настоящее время, мобильная тема отображает одну врезку виджетов в нижней области основного содержания, чуть выше футера сайта. Для того, чтобы виджетов было больше, боковая панель должна иметь идентификатор «sidebar-1». Если вы не знакомы с боковой панелью и назначением идентификаторов, вы можете узнать больше об этом на WordPress.org.

Если ваши виджеты отсутствуют в мобильной теме, скорее всего, виновником является то, что ваша стандартная тема, которую вы используете не имеет боковую панель с идентификатором «sidebar-1» (идентификатор должен быть точно «sidebar-1»). Чтобы убедиться в этом, откройте файлы темы и найдите функцию register_sidebar () (как правило, в functions.php). Если вы хотите, чтобы виджеты появились, вы можете изменить идентификатор боковой панели «sidebar-1».Вот пример:

register_sidebar( array(
    'id'          => 'sidebar-1',
    'name'        => __( 'Right Sidebar', 'theme-text-domain' ),
    'description' => __( 'This sidebar is located in the right column', 'theme-text-domain' ),
) );

Обратите внимание: Если у вас есть несколько боковых панелей, только одна боковая панель может иметь идентификатор «sidebar-1». В этом случае, вы должны сначала решить, какой виджет вы хотите видеть на мобильной версии сайта, а затем изменить идентификатор.

Переключение на «Полную версию сайта»

Читатели имеют возможность переключиться к полной версии вашего сайта, нажав на ссылку «Просмотр полной версии сайта», которая находиться в нижней части каждой страницы.

Источник информации: официальный сайт Jetpack.

5 Комментария

    • Jetpack работает только с wordpress.com или же на отдельном wordpress сайте, в противном случае нужно делать отдельно верстку под маленькие экраны.

  1. Александр, добрый день!
    Как настроить, чтобы мобильная тема использовала макет двух столбцов, хотелось бы категории разместить слева а товары справа?

  2. Яндекс при проверке мобильной версии, построенной на Jetpack пишет что много мелкого текста на странице. Подскажите кто-нибудь, как исправить.

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

Your email address will not be published.


*