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

Давайте разберемся, по каким причинам необходимо сделать адаптивное меню для мобильных устройств:

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

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

Создание дочерней темы

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

Добавление нового расположение меню в Вашей теме

Чтобы лишний раз не переписывать таблицу стилей, Вам необходимо добавить следующий код в файл functions.php:

Исходный код

function extra_setup() {
register_nav_menu ('primary mobile', __( 'Navigation Mobile', 'twentythirteen' ));
}
add_action( 'after_setup_theme', 'extra_setup' );

После этих действий, нам необходимо перейти в Внешний вид-Меню, где будет видно отображение меню в двух вариантах, мы выбираем для мобильных устройств.

Добавление нового расположение меню для шапки Вашего шаблона

Вам необходимо открыть файл header.php, далее Вам необходимо в данном файле найти вызов wp_nav_menu и сразу же после того, как найдете данную строку, вставляете следующий код:

Исходный код

<?php wp_nav_menu( array( 'theme_location' => 'primary mobile', 'menu_class' => 'nav-menu' ) ); ?>;

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

Создаем CSS для нашего нового меню

Для этого открываете файл functions.php и добавляете туда следующий код:

Исходный код

function set_container_class ($args) {
$args['container_class'] = str_replace(' ','-',$args['theme_location']).'-nav'; return $args;
}
add_filter ('wp_nav_menu_args', 'set_container_class')

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

Самый последний шаг, который нам остается сделать, это добавить стили для нашего будущего меню, поэтому открываем файл style.css и вставляем туда следующий код:

Исходный код

.primary-mobile-nav {
display: none;
}
@media (max-width: 643px){
.primary-nav {
display: none;
}
.primary-mobile-nav {
display: block;
}
}

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