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

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

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

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

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

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

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

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

  • Файл стилей CSS для написания в нем новых стилей для вашей основной темы WordPress (на примере нового цвета заголовков)
  • Файл функций functions.php, в котором вам надо было добавить код подключения нового файла стилей и дочерней темы

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

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

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

  • Если посетитель заходит с смартфона или планшета — ваше стандартное меню будет отключено
  • Посетитель увидит адаптивное меню, которое ему будет удобно просматривать

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

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

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

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

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

Советую прочитать еще:  Как добавить изображение в меню навигации с помощью плагина WordPress

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

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

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

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

Для этого, сначала, добавляем функцию PHP в файл 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')

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

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

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

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

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

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

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

Я не буду в деталях описывать все свойства в примере ниже. Для изучения CSS вам надо искать другой сайт. Я лишь напишу простой вариант 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; /* скрыть все <li> пункты */
                margin: 0;
        }
        .primary-mobile-nav .current {
                display: block; /* показывать только текущие активные <li> пункты */
        }
        .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;
        }
}

Надеюсь, обе статьи, в которых я рассказал о создании дочерней темы 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

Если материал вам понравился, нажмите или расскажите о нем друзьям!

Важно! Эта запись может содержать ссылки на плагины, которые к моменту вашего чтения и скачивания могут работать не корректно. Будьте внимательны.

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

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