• Facebook
  • LinkedIn
  • EN EN EN en
  • LV LV LV lv
  • RU RU RU ru
[email protected] | +371 29394520
Coma Web Development
  • Главная
  • Услуги
    • Разработка сайта-визитки
    • Разработка корпоративного сайта
    • Разработка интернет-магазина
    • Обслуживание сайтов на WordPress
    • LiteSpeed WordPress хостинг
    • Amazon Cloud Services
    • Чистка от вирусов
  • Работы
    • Сайты-визитки
    • Корпоративные сайты
    • Интернет-магазины
  • О нас
    • Преимущества
    • Вакансии
  • Цены
  • FAQ
  • Отзывы
  • Контакты
  • Menu Menu
Шаблоны, WordPress

Как добавить кастомное навигационное меню в тему WordPress

pexels-photo-196639

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

navigationmenuthemes

Для чего вам понадобится именно этот урок WordPress?

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

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

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

Этот урок нацелен на пользователей, которые строят кастомную тему WordPress, и тех, кому нужно добавить меню в дополнительных локациях существующей темы 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' );

Теперь вы можете зайти на страницу Appearance > Menus в разделе администратора WordPress и попытаться создать или отредактировать новое меню. Вы увидите опцию локации темы ‘My Custom Menu’.

mycustommenu

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

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

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

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

Отображение кастомного меню в теме WordPress

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

Хотя вы можете добавить ваше навигационное меню куда угодно.

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

<?php wp_nav_menu( array( 'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

Локация темы – это название, которое мы выбрали на предыдущем этапе.

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

custommenu

Вы можете использовать класс CSS .custom_menu_class, чтобы оформить ваши меню. Вот пример CSS, с которого вы можете начать:

div.custom-menu-class ul {
    list-style-type: none;
    list-style: none;
    list-style-image: none;
}
div.custom-menu-class li {
    padding: 20px;
    display: inline;
}

Если вам нужна помощь с CSS и оформление меню, мы рекомендуем использовать одну из этих тем WordPress, чтобы построить свою кастомную тему.

Создание респонсивных меню в WordPress

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

rpmenuplugin

Вы можете добавить эффекты slide out (наверху), dropdown, а также эффект toggle для мобильных меню.

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

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

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

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

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


Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520


Oct 20, 2016/0 Comments/by Alina
Share this entry
  • Share on Facebook
  • Share on Twitter
  • Share on WhatsApp
  • Share on LinkedIn
  • Share on Vk
  • Share by Mail

Search

Новые работы в портфолио

  • The Raven 1The RavenJan 15, 2021 - 19:05
  • Skyn 2SkynDec 22, 2020 - 17:11
  • Tetra Hemp Company 3Tetra Hemp CompanyDec 22, 2020 - 17:07
  • CAT&Lou 4CAT&LouDec 22, 2020 - 16:57
  • Paycasso 5PaycassoDec 22, 2020 - 16:48

О нас

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

Каждый проект планируется, оценивается, разрабатывается и поддерживается индивидуально.

coma_logo_small

Контакты

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

+371 29394520
[email protected]

SIA YUVA
Reģ. Nr.: 42403034996
PVN reģ. Nr.: LV42403034996
Банк: A/S Swedbank
Счёт: LV16HABA0551038070386

Навигация

  • Главная
  • Услуги
    • Разработка сайта-визитки
    • Разработка корпоративного сайта
    • Разработка интернет-магазина
  • О нас
  • FAQ
  • Отзывы
  • Блог
  • Контакты
Developed in coma.lv (естественно). Работаем с 2010 года.
  • Facebook
  • LinkedIn
Scroll to top