Создание темы для адаптации сайта под смартфоны и планшеты

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

В ней расскажем про использование мобильной темы при помощи востребованного плагина Джет Пак. Мы поговорим про включение анонсов и полных записей на основной странице сайта и страничках архива.

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

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

Включение мобильной темы для адаптации ресурса

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

Как это выполнить? Нужно авторизоваться в административной панели Ворд Пресс, а затем открыть раздел Jetpack/Настройки. Ищем в нём интересующий вас модуль, а именно «Мобильная тема» и просто жмем по клавише активации.

Теперь можно переходить на сайт с мобильного устройства, и оценивать все изменения.

Внешний вид сайта с мобильной темой?

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

Как видим из скриншота выше, представленная в плагине Джет Пак тема достаточно привлекательна, но… Вы можете выполнить настройки согласно личных предпочтений. О них мы и поговорим по тексту ниже.

Опции темы для мобильных устройств

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

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

Для получения доступа к функциям мобильной темы вам потребуется:

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

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

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

Если нужно установить специальное меню, а не предложенное разработчиками, то можно воспользоваться “jetpack_mobile_theme_menu”. Благодаря этому действию можно будет выбрать тему, которая и будет использоваться в дальнейшем.

Но, чтобы выполнить это, прежде всего вам будет необходимо на первом шаге произвести установку плагина функциональности?

После понадобится найти идентификатор меню пользователя, который был создан вашими усилиями. Если зайти во Внешний вид/меню, в админке инструментов и выбрать для редактирования меню пользователя, его ID будет число, находящееся в конце ЮРЛ-адреса. К примеру,

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

Число 75 и будет идентификатором нашего меню.

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

function jetpackme_mobile_theme_menu () {

    return75;

}

add_filter('jetpack_mobile_theme_menu','jetpackme_mobile_theme_menu');

Заголовок и фон темы для мобильных устройств

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

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

Настраиваем боковую панель и виджеты темы для мобильных устройств

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

Сейчас мобильная тема отражает одну врезку виджетов в нижней части главного содержимого страницы, немного выше футера портала. Для увеличения числа виджетов, боковая панель должна дополняться идентификатором “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' ),

) );

Как переключиться на полную версию портала?

При переходе на каждую страницу, и прокрутке её до подвала, ваши посетители смогут найти надпись «Просмотр полной версии ресурса». Клик по ней перебросит их на компьютерную версию сайта.

На это все вопросы по мобильной теме сайта разобраны «от» и «до». Надеемся, что данная статья принесла вам пользу. Не забывайте изучать и другие уроки Ворд Пресс. Удачи!