Как добавить пользовательские меню навигации в темах WordPress

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


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

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

Добавление пользовательских меню навигации в темах WordPress

Когда вам нужен этот учебник WordPress меню навигации?

В большинстве тем WordPress есть хотя бы одно место, где вы можете отображать навигационные ссылки вашего сайта в меню..

Вы можете управлять пунктами меню из простого в использовании интерфейса внутри вашей админ-панели WordPress..

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

Цель этого руководства – помочь DIY / промежуточным пользователям добавить пользовательские навигационные меню в свои темы WordPress..

В этой статье мы рассмотрим следующие темы:

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

    Создание пользовательских меню навигации в темах WordPress

    Навигационные меню являются функцией тем WordPress. Каждая тема может определять свои собственные позиции меню и поддержку меню.

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

    function wpb_custom_new_menu () {
    register_nav_menu (‘my-custom-menu’, __ (‘My Custom Menu’));
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

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

    Пользовательское меню навигации добавлено в тему

    Если вы хотите добавить более одного нового местоположения в меню навигации, вам необходимо использовать код, подобный следующему:

    function wpb_custom_new_menu () {
    register_nav_menus (
    массив (
    ‘my-custom-menu’ => __ («Мое пользовательское меню»),
    ‘дополнительное меню’ => __ («Дополнительное меню»)
    )
    );
    }
    add_action (‘init’, ‘wpb_custom_new_menu’);

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

    Это позволит нам перейти к следующему шагу, который отображает меню в вашей теме.

    Отображение пользовательских меню навигации в темах WordPress

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

    Тем не менее, вы можете добавить свое навигационное меню куда угодно.

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

    <?PHP
    wp_nav_menu (массив (
    ‘theme_location’ => «Мой обычай меню»,
    ‘container_class’ => ‘custom-menu-class’));
    ?>

    Расположение темы – это имя, которое мы выбрали на предыдущем шаге..

    Класс контейнера – это класс CSS, который будет добавлен в ваше меню навигации. Ваше меню появится в виде простого маркированного списка на вашем сайте.

    Пользовательский отображается как простой список

    Вы можете использовать CSS-класс .custom_menu_class для оформления ваших меню. Вот пример CSS, который поможет вам начать:

    div.custom-menu-class ul {
    поле: 20px 0px 20px 0px;
    list-style-type: нет;
    стиль списка: нет;
    list-style-image: нет;
    выравнивания текста: справа;
    }
    div.custom-menu-class li {
    отступы: 0px 20px 0px 0px;
    дисплей: встроенный;
    }
    div.custom-menu-class a {
    цвет: #FFFFFF;
    }

    Пользовательское меню в стиле

    Чтобы узнать больше о стилизации меню навигации, смотрите наш подробный учебник о том, как стилизовать меню навигации WordPress.

    Добавление пользовательского меню навигации в WordPress с помощью Page Builder

    Если вы создаете пользовательский макет целевой страницы или домашней страницы, то с помощью плагина WordPress Page Builder все станет намного проще..

    Мы рекомендуем использовать Beaver Builder, который является лучшим конструктором страниц WordPress на рынке. Это позволяет создавать макеты страниц любого типа с помощью простых инструментов перетаскивания (кодирование не требуется).

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

    Во-первых, вам нужно установить и активировать плагин Beaver Builder. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress..

    После активации вам нужно создать новую страницу или отредактировать существующую, где вы хотите добавить меню навигации. На экране редактора сообщений нажмите кнопку «Launch Beaver Builder»..

    Запустите Beaver Builder

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

    Выберите шаблон

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

    Добавьте модуль меню на свою страницу

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

    Настройки модуля меню

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

    Как только вы закончите, вы можете нажать на кнопку Сохранить и просмотреть меню.

    Предварительный просмотр пользовательского меню навигации, добавленного с помощью Beaver Builder

    Создание мобильных адаптивных меню в WordPress

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

    Отзывчивый пример меню

    Вы можете добавить эффект выдвижения (выше), эффект выпадающего меню и даже эффект переключения для мобильных меню.

    У нас есть подробное пошаговое руководство о том, как сделать готовые для мобильных устройств меню WordPress.

    Делайте больше с навигационными меню WordPress

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

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

    • Как добавить иконки изображений с меню навигации в WordPress
    • Как добавить условную логику в меню в WordPress
    • Как добавить описания меню в тему WordPress
    • Как добавить полноэкранное адаптивное меню в WordPress
    • Как добавить мега-меню на ваш сайт WordPress

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

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map