Создание адаптивного меню в WordPress для мобильных устройств

Приветствую, друзья!

И сразу у меня к вам вопрос.

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

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

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

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

Готовы? Тогда давайте начнем.

Способ 1: Добавляем адаптивное меню в WordPress с помощью плагина

Этот метод проще и рекомендуется для новичков, поскольку он не требует специального кодирования.

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

Первое, что вам нужно сделать, это установить и активировать плагин Responsive Menu.

После активации плагина, он добавит новый пункт в меню «Responsive Menu» (отзывчивое меню) в панель администратора WordPress. Нажав на нее, вы попадете на страницу настроек плагина.

Сначала вам нужно ввести ширину экрана, после чего плагин начнет показывать адаптивное меню. Значение по умолчанию — 800 пикселей, которое должно работать на большинстве веб-сайтов.

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

Последний параметр на экране — предоставить классы CSS для вашего текущего неадаптивное меню. Это позволит плагину скрыть ваше меню на меньших экранах.

Не забудьте нажать кнопку «Update Options» (обновить параметры), чтобы сохранить настройки.

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

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

Способ 2: Добавление выпадающего меню с помощью плагина

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

Прежде всего вам нужно установить и активировать плагин Responsive Select Menu.

После активации вам необходимо посетить «Внешний вид» — «Responsive Select», чтобы настроить параметры плагина.

Вам нужно прокрутить вниз до раздела «Activate theme locations» (активировать местоположение в теме). По умолчанию плагин активируется во всех местах темы. Вы можете изменить это, выборочно включив его для определенных мест в своей теме.

Не забудьте нажать кнопку «Сохранить все настройки», чтобы сохранить изменения.

Теперь вы можете посетить свой веб-сайт и изменить размер экрана браузера, чтобы увидеть адаптивное выпадающее меню в действии.

Способ 3: Создание мобильного адаптивного меню с эффектом Toggle (переключение)

Одним из наиболее распространенных способов отображения меню на мобильных экранах является использование эффекта переключения.

Этот метод требует, чтобы вы добавили свой пользовательский код в свои файлы темы WordPress.

Сначала вам нужно открыть текстовый редактор, например блокнот, и вставить этот код.

( function() {
    var nav = document.getElementById( 'zacompom-navigation' ), button, menu;
    if ( ! nav ) {
        return;
    }
 
    button = nav.getElementsByTagName( 'button' )[0];
    menu   = nav.getElementsByTagName( 'ul' )[0];
    if ( ! button ) {
        return;
    }
 
    // Скрыть кнопку, если меню отсутствует или пустое.
    if ( ! menu || ! menu.childNodes.length ) {
        button.style.display = 'none';
        return;
    }
 
    button.onclick = function() {
        if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
            menu.className = 'nav-menu';
        }
 
        if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
            button.className = button.className.replace( ' toggled-on', '' );
            menu.className = menu.className.replace( ' toggled-on', '' );
        } else {
            button.className += ' toggled-on';
            menu.className += ' toggled-on';
        }
    };
} )(jQuery);

Теперь вам нужно сохранить этот файл как navigation.js на рабочем столе своего компьютера.

Затем вам нужно открыть FTP-клиент для загрузки этого файла на сервер в папку /wp-content/themes/zacompom/js/ вашего сайта на WordPress.

Замените каталог zacompom каталогом вашей текущей темы. Если в директории темы нет папки js, вам необходимо ее создать.

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

wp_enqueue_script( 'zacompom_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20171106', true );

Теперь нам нужно добавить меню навигации в нашу тему WordPress. Обычно меню навигации добавляется в файл темы — header.php.

<nav id="zacompom-navigation" class="top-menu" role="navigation">
	<button class="menu-toggle">Menu</button>
	<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

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

/* Меню навигации */
.top-menu {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}
.top-menu li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.top-menu a {
    color: #5d5d5d;
}
.top-menu a:hover,
.top-menu a:focus {
    color: #21759c;
}
.top-menu ul.nav-menu,
.top-menu div.nav-menu > ul {
    display: none;
}
.top-menu ul.nav-menu.toggled-on,
.menu-toggle {
    display: inline-block;
}
 
// CSS-код для использования на мобильных устройствах
 
@media screen and (min-width: 600px) {
 
.top-menu ul.nav-menu,
.top-menu div.nav-menu > ul {
    border-bottom: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    display: inline-block !important;
    text-align: left;
    width: 100%;
}
.top-menu ul {
    margin: 0;
    text-indent: 0;
}
.top-menu li a,
.top-menu li {
    display: inline-block;
    text-decoration: none;
}
.top-menu li a {
    border-bottom: 0;
    color: #6b6b6b;
    line-height: 3.692307692;
    text-transform: uppercase;
    white-space: nowrap;
}
.top-menu li a:hover,
.top-menu li a:focus {
    color: #000000;
}
.top-menu li {
    margin: 0 40px 0 0;
    margin: 0 2.857142857rem 0 0;
    position: relative;
}
.top-menu li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    z-index: 1;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}
.top-menu li ul ul {
    top: 0;
    left: 100%;
}
.top-menu ul li:hover > ul,
.top-menu ul li:focus > ul,
.top-menu .focus > ul {
    border-left: 0;
    clip: inherit;
    overflow: inherit;
    height: inherit;
    width: inherit;
}
.top-menu li ul li a {
    background: #efefef;
    border-bottom: 1px solid #dddddd;
    display: block;
    font-size: 11px;
    font-size: 0.785714286rem;
    line-height: 2.181818182;
    padding: 8px 10px;
    padding: 0.571428571rem 0.714285714rem;
    width: 180px;
    width: 12.85714286rem;
    white-space: normal;
}
.top-menu li ul li a:hover,
.top-menu li ul li a:focus {
    background: #d3d3d3;
    color: #444444;
}
.top-menu .current-menu-item > a,
.top-menu .current-menu-ancestor > a,
.top-menu .current_page_item > a,
.top-menu .current_page_ancestor > a {
    color: #646464;
    font-weight: bold;
}
.menu-toggle {
    display: none;
} 
}

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

Устранение неполадок: в зависимости от темы WordPress вам может потребоваться настроить CSS стили. Используйте инструмент проверки элемента браузера, чтобы определить конфликты CSS с вашей темой.

Способ 4: добавление мобильного меню в WordPress

Другим распространенным способом добавления мобильного меню является использование меню панели слайдов (как показано в методе 1).

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

Во-первых, вам нужно открыть текстовый редактор, например «Блокнот», и добавить следующий код в пустой текстовый файл.

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://example.ru/wp-content/themes/zacompom/images/menu.png" alt="Закрыть" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://example.ru/wp-content/themes/zacompom/images/menu.png" alt="Закрыть" />');
        });
    }
);
})(jQuery);

Не забудьте заменить example.ru собственным доменным именем, а название темы zacompom — вашим фактическим каталогом темы. Сохраните этот файл как slidepanel.js на рабочем столе.

Теперь вам понадобится изображение, которое будет использоваться в качестве значка меню. Значок гамбургера чаще всего используется в качестве значка меню. Вы найдете множество таких изображений с разных сайтов. Я буду использовать значок меню из библиотеки материалов Google Material Icons.

Как только вы найдете изображение, которое хотите использовать, сохраните его как menu.png.

Затем вам нужно открыть файловый клиент FTP и загрузить файл slidepanel.js в папку /wp-content/zacompom/js/.

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

После этого вам нужно загрузить файл menu.png в папку /wp-content/themes/zacompom/images/.

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

Добавьте этот код в файл functions.php вашей темы.

wp_enqueue_script( 'zacompom_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20171106', true );

Теперь нам нужно добавить фактический код в файл header.php вашей темы, чтобы отобразить меню навигации. Вы должны найти код, похожий на этот:

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

Вам нужно обернуть существующее меню навигации кодом HTML, чтобы отобразить меню слайдов на мобильных экранах.

<div id="toggle">
<img src="http://www.example.ru/wp-content/themes/zacompom/images/menu.png" alt="Показать" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Обратите внимание, что навигационное меню вашей темы все еще существует. Мы только что обернули его вокруг HTML, чтобы нам нужно было запустить меню слайдов.

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

Вот пример CSS, который вы можете использовать в качестве отправной точки:

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}
} 
 
@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgba(26, 26, 26, .9);
color: white;
top: 0;
left: -250px;
overflow: auto;
}
#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;
}
.nav-menu li { 
border-bottom: 1px solid #dfdfdf; 
padding: 20px;
width: 100%;
}
.nav-menu li: hover { 
background: #cccccc;
}
.nav-menu li a { 
color: #ffffff;
text-decoration: none;
width: 100%;
}
}

В зависимости от темы WordPress вам может потребоваться настроить CSS, чтобы избежать конфликтов.

Вот как это выглядело на моем демо-сайте:

Я надеюсь, что эта статья поможет вам научиться создавать отзывчивые мобильные меню в WordPress.

На этом разрешите откланяться — до скорых встреч!


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.
2 комментария к статье "Создание адаптивного меню в WordPress для мобильных устройств"
  1. Юрич: 14.08.2018 в 23:25

    Класс может быть любой) Возьмите например на моем сайте. Потом на 800 пикселей скройте его, а меню плагина выведите. Вот и все!

  2. Ирина: 14.08.2018 в 22:35

    Спасибо за статью. Очень полезна. Подскажите для новичка, где посмотреть класс CSS для текущего неадаптивного меню, если пользоваться первым способом?

Заказать сайт