Как сделать свое меню на странице wordpress

Добавлено: 08.11.2018, 12:25 / Просмотров: 91342

Закрыть ... [X]

Создание многоуровневого меню в WordPress занимает не больше времени, чем создание обычного «плоского» меню. Всё делается в том же интерфейсе в разделе «Внешний вид» — «Меню». Давайте для примера создадим структуру меню типичного сайта-визитки какой-нибудь абстрактной компании по оказанию IT-услуг.

Как создать многоуровневое меню в WordPress

Вот примерная структура меню, которая может быть у сайта-визитки сервисной компании:

  • Главная
  • Отзывы клиентов
  • Услуги
    • Подбор оборудования
    • Монтаж и прокладка ЛВС
    • Виртуализация
    • IP-телефония
    • Видеонаблюдение
    • Мониторинг
  • Контакты
  • Блог

Уровень вложенности меню может быть любым, но на мой взгляд, сайты, у которых больше двух уровней вложенности очень неудобны в использовании. Пока ведёшь к подпункту, предыдущий пункт закрывается или постоянно скачет перед глазами. Это по большей части проблема программиста или автора темы, но факт остаётся фактом: самый частый вариант меню на сайтах — двухуровневый.

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

В принципе, это неплохо и можем пойти по такому же пути: сначала создадим структуру, посмотрим, всё ли нормально у нас и затем уже будем создавать страницы (создать страницы вы сможете и самостоятельно, я верю в вас!).

Заходим в раздел «Внешний вид» — «Меню»:

Переходим в раздел "Внешний вид" — "Меню"

Создаём новый набор меню или используем уже существующий.

Создаём пустой набор меню

В левой части этого интерфейса находим блок «Произвольные ссылки» и раскрываем его (подробнее о вставке ссылок я рассказывал в инструкции Как добавить ссылку в меню):

Используем блок "Произвольные ссылки"

Для создания структуры меню нам понадобятся ссылки-заглушки, чтобы не происходил переход на какие-то несуществующие страницы или внешние сайты. Для этого в поле «URL» достаточно указать символ решётки — #, а в поле «Текст ссылки» вставляем нужную нам фразу.

Читайте также:  Как удалить меню в WordPress

Пример заполнения пункта меню

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

Созданный пункт меню

Отлично! Теперь по аналогии создаём остальные пункты меню первого уровня. В результате мы получим примерно такую картинку:

Созданные меню первого уровня

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

Внешний вид меню на сайте

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

Настройка Области темы

Возвращаемся в интерфейс управления меню и теперь уже по аналогии добавим все меню второго уровня, которые будут у нас в виде выпадающего меню для пункта «Услуги». Всё точно так же, ничего нового я тут не покажу.

Результат должен получиться следующий:

Создаём второй уровень меню

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

Создание подменю

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

По аналогии сделаем и другие пункты:

Создаём остальные пункты подменю

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

Готовое двухуровневое меню

Дальше всё просто:

  1. Создаёте нужные вам страницы с подстраницами для Услуг
  2. Удаляете по очереди каждый пункт меню-заглушку
  3. Вставляете ссылку на созданную страницу через раздел «Страницы» интерфейса управления меню

Читайте также:  Как добавить рубрики в меню WordPress

Если какие-то из пунктов вам остались непонятными — напишите об этом в комментарии, я подготовлю более развёрнутую инструкцию на этот счёт, но, как мне кажется, этого материала будет достаточно, чтобы создать развёрнутое меню в WordPress. Успехов! 😉

Если вы нашли ошибку — выделите фрагмент текста и нажмите Ctrl+Enter.

Поделитесь ссылкой на инструкцию с вашими друзьями!

Твитнуть

Поделиться

Плюсануть

Поделиться

Запинить



Источник: http://wordpress1.ru/nastroyka-wordpress/menyu-v-wordpress/mnogourovnevoe-menyu/

Похожие новости


Как сделать стены для кухни своими руками
Как сделать бинты боксёрские
Растяжение и лечение связок голеностопа лечение в домашних условиях
Как сделать мрт стопы
Для отверток своими руками
Как в custom npc сделать врага




ШОКИРУЮЩИЕ НОВОСТИ


Back to Top