Главная - Без рубрики - Как сделать адаптивное меню на сайте WordPress

Как сделать адаптивное меню на сайте WordPress

Эта статья — небольшое продолжение статьи о том, как создать дочернюю тему WordPress. Поэтому мой совет — сначала прочитайте предыдущую статью, чтобы вам стало лучше понятно, о чем идет речь.

Небольшое предисловие

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

Условия задачи следующие:

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

В статье о создании дочерней темы WordPress я рассказал о том, что во вновь созданной теме вы должны были создать всего два файла:

[list icon=»icon: check-square-o» icon_color=»#0552ad»]
  • Файл стилей CSS для написания в нем новых стилей для вашей основной темы WordPress (на примере нового цвета заголовков)
  • Файл функций functions.php, в котором вам надо было добавить код подключения нового файла стилей и дочерней темы
[/list]

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

Итак, с чего начнем.

Я предлагаю вам сделать так:

[list icon=»icon: check-square-o» icon_color=»#0552ad»]
  • Если посетитель заходит с смартфона или планшета — ваше стандартное меню будет отключено
  • Посетитель увидит адаптивное меню, которое ему будет удобно просматривать
[/list]

Чтобы выполнить данное условие, нам надо:

Написать код PHP для подключения нового, мобильного меню

Для этого открываем файл functions.php и вставляем в него такой код:

[slh lang=»php»] function extra_setup() { register_nav_menu (‘primary mobile’, __( ‘Navigation Mobile’, ‘twentyfifteen’ ));
} add_action( ‘after_setup_theme’, ‘extra_setup’ );
[/slh]

После сохранения зайдите в раздел Внешний вид консоли — перейдите на страницу Меню и вы увидите два варианта меню, включая только что созданное — ‘Navigation mobile’.

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

[slh lang=»php»] ‘primary mobile’, ‘menu_class’ => ‘nav-menu’ ) ); ?>;
[/slh]

Этот код отвечает за вывод вашего нового, мобильного меню.

Теперь надо научить вашу дочернюю тему понимать, с какого устройства к вам заходит посетитель, и если с мобильного — надо отключить основное меню и включить мобильное.

Для этого, сначала, добавляем функцию PHP в файл functions.php:

[slh lang=»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’)
[/slh]

По умолчанию, WordPress оборачивает меню в тег DIV с именем класса, производного от имени меню. Мы могли использовать для каждого меню разные классы, но зачем? Чтобы максимизировать гибкость, мы будем устанавливать наш собственный универсальный класс для названия контейнера меню. Как раз в примере выше мы применили фильтр и зарегистрировали новый класс для мобильного меню простым добавлением к основному классу через тире букв -nav. То есть, для основного меню будет использоваться <div class=»primary-nav»>, а для мобильного меню — <div class=»primary-mobile-nav»>.

Теперь внесем дополнения в файл стилей:

[slh lang=»css»] .primary-mobile-nav {
display: none;
}
@media (max-width: 643px){
.primary-nav {
display: none;
}
.primary-mobile-nav {
display: block;
}
}
[/slh]

Здесь мы применили медиа-запрос @media, который сегодня понимает практически любой современный браузер. Подробно об этом запросе можно найти кучу ссылок и подробных описаний с примерами его применения в CSS.

Я только лишь остановлюсь на конкретном нашем случае:

В нашем примере этот запрос указывает, что при размере экрана не более 643px необходимо выключить (display:none) основное меню навигации и включить (display:block) мобильное меню навигации

Пишем CSS стили для нашего мобильного меню

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

[slh lang=»css»] @media screen and (max-width: 643px) {
.primary-mobile-nav {
position: relative;
min-height: 40px;
}
.primary-mobile-nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #FAFAFA url(images/icon-menu.png) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.primary-mobile-nav li {
display: none; /* скрыть все

  • пункты */
    margin: 0;
    }
    .primary-mobile-nav .current {
    display: block; /* показывать только текущие активные

  • пункты */
    }
    .primary-mobile-nav a {
    display: block;
    padding: 5px 5px 5px 32px;
    text-align: left;
    }
    .primary-mobile-nav .current a {
    background: none;
    color: #666;
    }

    /* при наведении на пункты меню */
    .primary-mobile-nav ul:hover {
    background-image: none;
    }
    .primary-mobile-nav ul:hover li {
    display: block;
    margin: 0 0 5px;
    }
    .primary-mobile-nav ul:hover .current {
    background: url(images/icon-check.png) no-repeat 10px 7px;
    }

    /* адаптивное меню справа */
    .primary-mobile-nav.right ul {
    left: auto;
    right: 0;
    }

    /* адаптивное меню по центру */
    .primary-mobile-nav.center ul {
    left: 50%;
    margin-left: -90px;
    }

    }
    [/slh]

    Надеюсь, обе статьи, в которых я рассказал о создании дочерней темы WordPress и на ее основе — создание адаптивного меню, вам понравились.

    Не забудьте «лайкнуть» — плюс к карме вам гарантирую))

    Источником вдохновения к написанию этих двух статей послужили:

    — http://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme

    — http://premium.wpmudev.org/blog/how-to-create-awesome-responsive-menu

    — http://webdesignerwall.com/tutorials/css-responsive-navigation-menu

  • О admin

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

    Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

    *