Как в wordpress добавить меню? – шаблон горизонтального меню

Всем привет, сегодня я хочу рассказать вам как можно в wordpress добавить меню. Казалось бы не сложная задача, но хороших 10 - 15% вопросов связаные именно с меню, ведь несмотря на то, что у вордпресс есть специальная функция wp_nav_menu - разработчики шаблонов то и дело маются ерундой и делают его через всем известное место. Далее я покажу вам пошаговую инструкцию как создать шаблон меню.

В качестве примера предлагаю вам, вместе со мной, сделать простенькое, одноуровневое, горизонтальное меню wordpress.

Если вы искали информацию о выпадающих меню wordpress, советую обратить внимание на эти статьи:

  1. Горизонтальное выпадающее меню
  2. Вертикальное выпадающее меню

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

Навигация по странице:

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

Горизонтальное меню wordpress на HTML+CSS

к менюЯ не буду особо много времени уделять моментам по созданию Html и CSS для нашего меню. Постараюсь просто привести части кода и краткое описание к ним.

Html код нашего меню будет самый простой:

<nav id="nav1">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Отзывы</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Вопрос/Ответ</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>

Именно таким списком ul по-умолчанию генерирует меню вордпресс.

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

Стили CSS

#nav1{
position:relative;
width:100%;
height:62px;
background:#0076c6;
border-bottom:5px solid #e5eef4;
box-sizing:border-box;
z-index:11;
font-family:Arial, sans-serif;
}
#nav1 ul{
display:block;
list-style:none;
margin:0px;
padding:0px;
text-align:justify;
font-size:1px;
line-height:1px;
width:100%;
height:57px;
}
#nav1 ul::after{
display:inline-block;
width:100%;
height:0px;
content:" ";
}
#nav1 ul li{
display:inline-block;
width:auto;
height:auto;
font-size:15px;
line-height:1.4em;
vertical-align:top;
}
#nav1 ul li a{
display:block;
width:auto;
height:57px;
box-sizing:border-box;
padding:18px 20px 0px 20px;
font-size:15px;
color:#ffffff;
}
#nav1 ul li a:hover{
background:#11476C;
text-decoration:none;
}

Горизонтальное меню wordpress, которое растягивается на всю ширину блока.

Вот так это меню выглядит в браузере:горизонтальное меню wordpress

CSS код нужно скопировать в свою тему в style.css. Html код также можно скопировать в нужное место темы, обычно это header.php + потребуется малость подогнать CSS стили, чтоб меню стало так как вам нужно на сайте.

Далее я покажу вам какие пхп вставки нужно сделать в вашем меню и как настроить меню в wordpress.

Как добавить шаблон меню в wordpress

к менюНадеюсь вы скопировали CSS и HTML к себе в шаблон. Теперь нам нужно подкоректировать наш код.

1) Открываем место, где находится меню и вместо

<ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">О нас</a></li>
        <li><a href="#">Отзывы</a></li>
        <li><a href="#">Новости</a></li>
        <li><a href="#">Статьи</a></li>
        <li><a href="#">Вопрос/Ответ</a></li>
        <li><a href="#">Контакты</a></li>
    </ul>

ставим вот такой вызов функции вордпресс:

<?php wp_nav_menu( array('theme_location' => 'menu1', 'container'=>false, 'depth'=>'1', 'echo'=>'1')); ?>

В итоге у нас получится вот так:

<nav id="nav1"> <?php wp_nav_menu( array('theme_location' => 'menu1', 'container'=>false, 'depth'=>'1', 'echo'=>'1')); ?> </nav>

 

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

'container'=>false – говорим что нам не нужно оборачивать в контейнер наше меню.

'depth'=>'1' – выводим только 1 уровень меню

'echo'=>'1' – шаблон меню выводим сразу. Если указать 0, то можно получить меню в переменную.

 

2) Открываем файл functions.php вашего шаблона и регистрируем там наше меню, но для начала стоить проверить, вдруг функция register_nav_menus уже используется. Для этого воспользуйтесь поиском Ctrl+F. Если такой функции все же нет, добавляем такой код:

<?php register_nav_menus( array( 'menu1' => 'Меню верх' ) ); ?>

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

WordPress добавить меню в админке

3) к менюЗаходим в админку сайта, теперь нам нужно создать и добавить меню в wordpress. Заходить нужно по этому адресу ваш_сайт/wp-admin/nav-menus.phpwordpress добавить меню

И создаем новое меню. Я назвал его "Top", нажимаем создать как у меня на скине:

menu-wp-2Теперь у вас появляется окно, в котором можно добавлять пункты меню. Смотрим скин ниже, я добавил парочку страниц, а также выбрал чекбокс напротив "Меню верх", а это как мы помним и есть наше "menu1".wordpress шаблон меню

4) Сохраняем меню и смотрим результат. Если вы все сделали правильно, у вас должно быть полностью рабочее горизонтальное меню wordpress.

 

Проблемы с wordpress меню

к менюВ версии вордпресс 4.4 начались жуткие проблемы с меню, а именно:

  • между пунктами меню пропали пробелы;
  • меню не растягивается на всю ширину блока;
  • неправильно добавляются разделители.

В общем в новой версии разработчики немножко погнали и решили подправить шаблон меню, в результате чего в инете все чаще можно встретить запросы "не работает меню wordpress 4.4", "проблемы с меню wordpress".

Сейчас я покажу вам код, который решает эту проблему:

<?php /*****************Трабл с меню на сайтах WP 4.4 **************************/
add_filter('wp_nav_menu_items', 'add_menu_probel');
function add_menu_probel($menu_items){
  return str_replace('</li><li', "</li> <li", $menu_items);
} ?>

Его нужно записать в самый конец файла functions.php вашей темы. С помощью этого не хитрого кода, можно вернуть правильную работу меню.

 

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

Советую прочесть статью создание сайта на wordpress, а также буду благодарный за клик на кнопку поделится

Комментарии к записи «Как в wordpress добавить меню? – шаблон горизонтального меню»:
  1. Зоя:

    Добрый день! Спасибо за статью, все чётко и понятно. Но у меня вопрос: можно ли сделать 2 горизонтальных меню на сайте? Одно, которое уже есть по умолчанию на сайте и добавить второе к нему? Только чуть ниже под лого

    • admin:

      Добрый день. На базе этого меню можно создать сколько угодно других, только единственный момент в примере я использовал ID nav1, если бы это был класс то проблем не было б, а так для второго меню вам нужно добавить через запятую типа: #nav1, #nav2{и далее те же стили}
      #nav1 ul, #nav2 ul{} и так далее.
      Ну и во время вывода второго меню в хтмл поменять <nav id="nav1"> на <nav id="nav2">
      и вроде все, горизонтальное меню должно у вас работать тогда

  2. Николай:

    Спасибо за статью! После добавления кода сбились польские шрифты, т.е. выдает абракадабру вместо специфических польских букв.

  3. БелГрупп:

    Огромное спасибо за статью! "На носу" 2017 год, а статья по прежнему актуальна! Добавил меню в шаблон страницы товаров. Вот, что получилось: (-url-)

  4. Валя:

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

Сделать заказ
Онлайн помощь по WordPress