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

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

Суть проблемы

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

Пути решения

1. Редактирование кода ручками

Можно просто зайти в нужную часть сайта (header.php, footer.php и т.д.), убрать код, который выводит последовательность страниц, и написать нужный код менюшки.

Разберем пример. Заходим в header.php, видим там примерно это:

Код вывода меню по странице

Вот это код:

Убираем его и вставляем обычный код вида:

Плюсы такого метода:

  • Быстрота
  • Простота

Минусы:

  • Сложно редактировать
  • Не будет подсветки при активном пункте меню

2. Редактирование шаблона WordPress

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

  1. Включается поддержка меню в functions.php
  2. Создается меню и вставляется php код в шаблон, который будет выводить нужную менюшку

Если у вас в теме не включена поддержка меню, тогда раздел «Внешний вид» — «меню» выглядит вот так:

Меню без возможности редактирования

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

Кого ты обманываешь, WordPress? Мне нужно добавить меню не в боковую колонку, а в любую часть шаблона!

Идем в functions.php и вставляем туда код (внутри <?php … ?>, конечно же):

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

Создали области темы

Мы включили поддержку менюшек. Теперь опять идем в functions.php и вставляем новый код:

Соответственно, можно назвать как хотите. Сохраняем. Не забудьте исправить кодировку на UTF-8 без BOM, иначе будут кракозябры такие. В Разделе «Внешний вид» — «Меню» теперь можно увидеть уже следующее:

Редактируем области темы

В общем-то. Теперь можно в «Области темы» выбирать меню и сохранять. Но где на сайте это меню появится? Сейчас нужно добавить код, который бы выводил то меню, которое мы поместим в «Области темы».

Код, который выводит меню в шаблоне

Вот сам код:

Плюсы этого метода:

  • Удобство в дальнейшем редактировании менюшек
  • Автоматически нужный пункт меню будет подсвечиваться

Минусы:

  • Некоторая сложность в первоначальном копании в коде

На этом все. Можно редактировать класс у этого меню. Но этого вы уж и без меня справитесь 🙂

16 мыслей о “Как добавить свое меню в шаблон wordpress

  1. Очень полезный пост! Эта проблема давненько меня мучила, но я просто избегал ее, используя шаблоны, в которых предусмотрены создание своего меню. Но благодаря вам проблема потеряла свою актуальность. Спасибо ОГРОМНОЕ!!! 🙂

  2. Добрый день, спасибо за четкое и подробное объяснение. Теперь выбор тем станет более широким. А не знаете, какой код можно поставить, чтобы сделать меню- аккордеон. А то очень много места занимаете вордпрессовское меню по умолчанию.

    1. JSB:

      Добрый день, спасибо за отзыв) Рад, что помог. Касательно вашего вопроса, я скорее всего, разберу эту тему в отдельном посте, насколько я знаю, такое меню можно реализовать через плагин или же просто через css. Поищите «меню wordpress в стиле аккордеон».

      1. Я уже смотрела несколько плагинов, к сожалению, они с последними версиями вордпресса не работают.

  3. Спасибо за полезную статью! Код я поменяла, нужные названия в меню появились, а вот как теперь к ним ссылки написать на рубрики?

    1. JSB:

      Немного вас не понял. Ссылки настраиваются из админки, когда вы создаете меню. Для рубрик можно использовать блок «Рубрики» или «Ссылки» на странице «Меню».

  4. Отличная статья. Четко и грамотно все написано. Очень помогло… Спасибо.

  5. n:

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

    1. JSB:

      Если между пунктами меню нет пробелов, это уже проблема со стилем этого меню. Вам нужно подправить его в вашем файле css.

  6. Спасибо за статью! Очень помогла. Хм… посмотрел на дату последнего коммента. Как символично, ровно через год!о)

  7. Здравствуйте.
    У меня 4 ВП и такой картинки не рисуется в меню. Все создавалось вручную, либо на основании существующих страниц.
    Но поехало все. Перестал работать графический редактор меню. Не могу создать иерархию страниц — все выводит списком.
    У меня ветвистое меню с четкой иерархией — а тут такая напасть. Все началось из-за одной страницы — не вставала. Удалял, создавал заново, через существующие, через Ссылки делал. В итоге все удалили и теперь у меня на сайте вообще меню нет. Что делать?
    Как создать иерархию страниц меню?

  8. Альбинас:

    Здравствуйте.
    У меня сложность возникла. Редактор меню на ВП глючит.
    Не дает создавать иерархию страниц. То есть все списком выводит.
    Я добавляю страницы, наполняю сайт и он перестал создавать мне подменю. Я уж и произвольно делал страницу, через “Ссылки”, задавая название и ссылку данному подменю, но все равно ВП выводит страницу списком.
    У меня очень разветвленное меню на сайте и четкая иерархия.
    Удалил все, чтобы создать заново – в итоге вообще меню нет на сайте.
    Что делать?
    Можете подсказать?

  9. Здравствуйте,
    Сделал по инструкции, всё работает.
    Но как сделать вывод дочерних пунктов меню?
    При наведении только загорается, но дочерние элементы не выводит.

    Заранее спасибо.

    ——-
    С уважением, PROPHESSOR 😉

  10. Raplo:

    добрый день. вау спасибо! не думал, что так просто. но замечу, что несмотя на то, что у вас есть блоки с кодом, некоторые части кода в них все равно заменяються на html-символы. если не трудно — поправьте 🙂

    1. JSB:

      Поправил, код режется вордпрессом, поэтому так криво все)

  11. Алексей:

    Здравствуйте, почти все так, только у меня получилось 2 меню, одно которое было, а вот нужное вверху сайта :). Где искать бардак не подскажете?)).
    Статья очень хорошая и нужная +5

Добавить комментарий для Raplo Отменить ответ

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