Мобильное меню WordPress: создаем шаг за шагом

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

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

Посмотреть демо

Шаг 1: Регистрация мобильного меню

Прежде всего, необходимо зарегистрировать новое меню в вашей теме. Лучше всего сделать это через дочернюю тему. Просто откройте файл functions.php и вставьте в него следующий код:

//Регистрация мобильного меню
function ws_register_mobile_menu() {
    register_nav_menu('mobile-menu', __('Мобильное Меню'));
}
add_action('init', 'ws_register_mobile_menu');

Шаг 2: Создание мобильного меню

Теперь нам нужно создать меню в админ-панели сайта. Зайдите в раздел «Внешний вид – Меню», нажмите на кнопку «Создать меню», задайте ему имя и обязательно поставьте галочку напротив «Мобильное меню». После этого нажмите кнопку «Создать меню».

мобильное меню wp

После того как вы создали меню, в левой панели выберите, какие элементы вы хотели бы добавить в это меню: страницы, записи и т.д. Затем нажмите кнопку «Добавить в меню» и сохраните внесенные изменения.

wordpress mobile menu

Шаг 3: Интеграция мобильного Меню

Теперь необходимо вывести код для отображения мобильного меню в ваш файл header.php. Разместите его после основного меню. Оно выглядит примерно так:

<?php  wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'top-menu', 'depth' => '2' ) ); ?>

После него вставляем наш код.

<!-- Кнопка показа меню-->                        
<div class="mobile-menu-toggle">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
</div>
<!-- Вывод меню -->
<nav class="wsmall-mobile-menu">
    <?php
    if (has_nav_menu('mobile-menu')) {
        wp_nav_menu(array('theme_location' => 'mobile-menu'));
    }
    ?>
</nav>

Шаг 4: Добавление скрипта

Нам нужно добавить скрипт, чтобы меню появлялось при нажатии на кнопку. Подключение скрипта в WordPress лучше всего выполнить через файл functions.php.

<script>
jQuery(document).ready(function($) {
    $('.mobile-menu-toggle').click(function() {
        $('.mobile-menu-toggle').toggleClass('menu-open');
        $('.wsmall-mobile-menu').slideToggle(300);
    });
});
</script>

Шаг 5: Стили мобильного меню

Остался последний этап создания мобильного меню в WordPress — добавление стилей для оформления внешнего вида. Для этого вам нужно в файл style.css добавить код:

/* Стили мобильного меню */
.wsmall-mobile-menu {
    display: none;
}

.mobile-menu-toggle {
    cursor: pointer;
    display: inline-block;
}

.mobile-menu-toggle .line {
    background-color: #fff;
    display: block;
    height: 3px;
    margin: 4px auto;
    transition: 0.3s ease-in-out;
    width: 25px;
}

.mobile-menu-toggle.menu-open .line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.mobile-menu-toggle.menu-open .line:nth-child(2) {
    opacity: 0;
}
.mobile-menu-toggle.menu-open .line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

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

@media (max-width: 820px) {
        /* Показать мобильное меню */
        .mobile-menu-toggle {
                display: inline-block;
        }
        /* Скрыть главное меню */
        #site-navigation {
                display: none;
        }
}

Пробуйте! И если что-то будет не получаться, обязательно обращайтесь в комментариях.

33 комментария
  1. Как изменить направление раскрытия меню? Оно открывается вниз, а надо вверх.

      1. Не хотелось подключать bootstrap, когда css написан, но видимо придется. Надо было сразу его использовать, а не умничать 😉

        Спасибо за ответ.

  2. Всем привет! Может подскажет кто :). У меня на блоге имеется некая мобильная версия. (irinaroslova.ru) Делала не я.

    У этой версии имеется мобильное меню. После моих ковыряний блога мобильное меню не раскрывается и переходит на адрес блога+# Собственно вопрос — где должно быть... Что-то... Что отвечает за реакцию на клик по меню... Что я сломала? ))

    Да.Явно использовалось jquery... И... надеюсь, — я не сносила никаких плагинов.

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

    1. Здравствуйте! Печальная история, надеюсь она станет для вас небольшим уроком, на будущее)) Что касается исправления, думаю нет такой крайней необходимости сносить это меню, чтобы поставить новое.

      Проще исправить ваши внесенные изменения. Самый легкий вариант — обратиться к бэкапу файлов, если такой имеется. Если нет, то поищите в текущей теме файлы с разрешением js, в них вам нужно найти отвечающий класс меню .a-menu2. Ну, а дальше уже смотреть в чем именно проблема.

  3. Добрый день!

    Не подскажете ли мне куда вставить мобильное меню в файле «Header» если нет вообще ничего про меню в нём? Тема «Vantage».

    Вот что непосредственно в файле Header:

    <?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="main"> * * @package vantage * @since vantage 1.0 * @license GPL 2.0 */ ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <link rel="icon" href="http://granit-garant.by/favicon.ong" type="image/x-icon" /> <link rel="shortcut icon" href="http://granit-garant.by/favicon.png" type="image/x-icon" /> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta http-equiv="X-UA-Compatible" content="IE=10" /> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php do_action('vantage_before_page_wrapper') ?> <div id="page-wrapper"> <?php do_action( 'vantage_before_masthead' ); ?> <?php get_template_part( 'parts/masthead', apply_filters( 'vantage_masthead_type', siteorigin_setting( 'layout_masthead' ) ) ); ?> <?php do_action( 'vantage_after_masthead' ); ?> <?php vantage_render_slider() ?> <?php do_action( 'vantage_before_main_container' ); ?> <div id="main" class="site-main"> <div class="full-container"> <?php do_action( 'vantage_main_top' ); ?>

    1. Здравствуйте! Так в этой теме изначально меню адаптивное для мобильных устройств. Но, если хотите это поставить, то в вашей теме главное меню находится в файле parts/menu.php... попробуйте поместить в этот файл после всех функций.

  4. Доброго дня! У меня проблема в следующем — использую тему «BeHealthy», у нее уже есть адаптивная версия сайта для мобильного, но меня не устраивает адаптивное меню. Сделала все, как вы написали, но меню ничуть не изменилось — все такое же стандартное... Что мне надо изменить, что бы получилось такое же как у вас?

    1. Kate, Здравствуйте! Если вы все правильно сделали, то результат должен быть положительным. На крайний случай попробуйте почистить кэш или используйте клавиши Ctrl + F5. И скажите, перед установкой этого меню вы старое мобильное меню удалили, которое изначально в теме присутствует? Судя по коду темы, меню выводится через select, а именно: <select id="mobile-main-menu" class="mobile-menu">.

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

  5. Здравствуйте, тема colormag, не работает кнопка меню. Что я только не делал. Тема респонсив. Не пойму в чем проблема. Помогите плиз

    1. Здравствуйте. Так это меню не с моего урока. Когда оно перестало работать? Ведь изначально оно работает.

      1. WordSmall, Да, работало. Скажитепожалуйста. Если я сделаю как у вас написано. Мне дополнительно старое меню нужно сносить?

    1. Нужно, потому что их будет два. Но лучше исправить это. Вспомните, после чего оно перестало работать. Попробуйте по очереди по отключать плагины. И может вы подключали свою версию библиотеки jquery.

Оставить ответ

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