Hostenko лучший WordPress хостинг
размещение статей на сайте поможет заработать

Главная » Создание Wordpress блога » Настройка Wordpress блога » Как создать мобильное выпадающее меню для сайта WordPress

Как создать мобильное выпадающее меню для сайта WordPress

mobile-menu-css Представляю на ваш суд мобильное выпадающее меню для сайта WordPress на чистом CSS, где роль картинки будет выполнять шрифт-иконка. Этот урок может пригодиться тем блогерам и вебмастерам, кто решил сделать мобильную версию сайта самостоятельно. А также тем, у которых установлены старые темы WordPress и кто не желает, или не имеет возможности заменить их на адаптивные шаблоны.

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

Для начала предлагаю посмотреть Демо-страницу, чтобы понять, как мобильное меню будет отображаться на планшете или смартфоне.

demo-mobile-menu

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

1.) Первое, что нам нужно сделать — создать дополнительное меню.

Если установленный на вашем блоге шаблон поддерживает создание дополнительного меню — можете пропустить этот шаг. Для тех же у кого нет такой функции, нужно в панеле управления WordPress перейти в раздел «Внешний вид»«Редактор»«functions.php» и после знака (<?php) добавить код, который создаст меню под названием «Mobile-menu».

add_action( 'init', 'register_my_menu' );
function register_my_menu() {
register_nav_menu( 'mobile-menu', __( 'Mobile Menu' ) );
}

Теперь перейдите «Внешний вид»«Меню» и увидите результат своих действий. До вставки кода, в моем шаблоне, была такая картина:

redaktirovat-menu

После добавления кода появилась вкладка — «Управление областями».

sozdat-mobilnoe-menu

А после того как нажал на «создать меню», у меня появилась возможность настроить и перенести в мобильную версию только те страницы блога, которые посчитал необходимыми. Именно в этом и заключалась основная цель регистрации дополнительного меню.

nastroit-mobile-menu

Таким образом можно зарегистрировать сколько угодно меню одновременно, только вместо функции register_nav_menu (),  нужно будет использовать register_nav_menus ().
Вот пример:

register_nav_menus( array(
'main_menu' => 'Main Navigation Menu',
'mobile_menu' => 'Mobile Menu',
) );

2.) После регистрации и настройки нового меню, нам нужно вывести его в шаблон с помощью вставки кода в header.php:

<nav id="mobile-menu">
<a href="#" id="menu-icon"></a>
<?php wp_nav_menu( array( 'theme_location' => 'mobile-menu' ) ); ?>
</nav>

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

♦ Стили CSS для мобильного меню

Важно: Чтобы новое меню отображалось по умолчанию только на мобильных устройствах, нам нужно его скрыть с помощью добавления этого кода:  #mobile-menu{ display: none } в файле Style.css используемой вами темы WordPress.

Для отображения мобильного меню на небольших устройствах, в коде Css обязательно указывается медиа — запрос с шириной экрана, например, меньше 767 пикселей. А вот и сам код:

@media screen and (max-width: 767px) {

/* mobile menu */

#mobile-menu{ display: block }

#menu-icon {
width: 40px;
height: 40px;
display: block;
background: #7AD03A ;
float: right;
margin-top: 10px;
}

nav ul, nav:active ul {

display: none;
position: absolute;
padding: 20px;
background: #7AD03A;
right: 0px;
top: 35px;
width: 50%;
border-radius: 4px 0 4px 4px;
}

nav li {
list-style-type:none;
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}

nav li a{ color:#fff; text-decoration:none; display:block}
nav:hover ul { display: block; }
}
}

После сохранения внесенных изменений, зайдите на сайт через Firebug (для Firefox) или DevTools (для Chrome) в режиме мобильного просмотра, и оцените созданное меню. Оно уже довольно не плохо смотрится. Но это еще не все и нам предстоит его усовершенствовать.

♦ Шрифт иконка для мобильного меню

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

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

На просторах интернета нашел интересные шрифты-иконки, которые можно скачать с этого сайта. Далее нужно распаковать архив и, с помощью Ftp-клиента, загрузить шрифты и таблицы стилей на сервер хостинга в директорию темы WordPress (обычно это: wp-content/themes/ваша тема). Затем откройте header.php и вставьте ссылку на таблицу стилей:

<link rel="stylesheet" href="//ваш сайт/путь к файлу
/mfglabs_iconset.css">

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

<a href="#" id="menu-icon"></a>

Исправьте его на этот:

<a href="#" id="menu-icon"><i class="icon-list icon2x"></i></a>

И последнее, что нужно сделать для правильного отображения иконки, это добавить к уже существующему CSS три строчки кода:

#menu-icon {

width: 40px;
height: 40px;
display: block;
background: #7AD03A ;
float: right;
margin-top: 10px;
}

... И добавьте эти строки ниже:

text-align: center;
color: #fff;
text-decoration:none;

Сохраните изменения, и ваше адаптивное меню готово.

Заключение:
Следуя рекомендациям этой статьи вы должны понимать, что идеального решения для всех сайтов не существует. Скорее всего вам придется подправлять код CSS под свой шаблон и под свои требования. Но ведь для этого на блогах и существуют комментарии, чтобы в непонятных ситуациях уточнить детали, попросить помощи или просто посоветоваться и пообщаться.

Всего хорошего. Удачи и терпения!!
С огромным Уважением, Владимир Задорожнюк


18 комментариев к посту “Как создать мобильное выпадающее меню для сайта WordPress”

Прокомментировать (+)

  1. Эдгар:

    Интересно было почитать, спасибо за советы!

    Ответить
  2. Светлана:

    Вот наконец-то, нашла, что хотела — не поверите, мучалась недели две. У меня сайт на Ворпресс, шаблон адаптирован, все хорошо на мобильном, но очень уж не нравилось родное встроенное меню — когда (не знаю, смогу ли правильно объяснить) нужно выбирать разделы сайта, сбоку стрелочка. А нужно было именно выпадающее, сэндвич, ну или бутерброд, три полоски. Классно, место на экране экономят. На выходных обязательно займусь...

    Ответить
  3. Андрей:

    Спасибо! Функция очень удобная и практичная, а главное экономит место. Описание подробно и информативно. С CSS пришлось помучиться, но в конце концов вроде разобрался что к чему.

    Ответить
    • Владимир Задорожнюк:

      Если будут вопросы по установке, милости прошу в гости на блог.

      Ответить
  4. Nelly:

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

    Ответить
  5. Alienor:

    Подробная инструкция, кажется, что мобильное меню можно сделать быстро. Но у меня с меню всегда проблемы)) Скажите, пожалуйста, какой шаг здесь — самый сложный, к чему готовиться?

    Ответить
    • Владимир Задорожнюк:

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

      Ответить
  6. Степан:

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

    Ответить
    • Владимир Задорожнюк:

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

      Ответить
  7. Никита:

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

    Ответить
    • Владимир Задорожнюк:

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

      Ответить
  8. Вадим:

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

    Ответить
  9. Vlad:

    а как сделать чтобы пряталось обратно при клике на иконку в мобайл?

    оно же в мобайл не видит что мы курсор отвели

    Ответить
  10. Alfapivdenbud:

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

    Ответить
  11. Дмитрий:

    Автор, у тебя ошибка тут есть. Ты не прописал в медиа-запросе display: none для десктопного меню, то есть в мобильной версии выходит два меню.

    Ответить
    • З. Владимир:

      Уважаемый Дмитрий. Обрати внимание на текст выделенный в статье красным цветом.

      Ответить
  12. Василий:

    А кнопка меню всё равно отображается на ПК 🙁

    Ответить
    • З. Владимир:

      Не пробовали открывать свой сайт в режиме инкогнито?

      Ответить

Ваш комментарий (Спам не пройдет!!!)