Управление и настройка произвольного меню в WordPress

Опубликовано: 01.09.2018

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

Поддержка произвольного меню

Вначале, перед последующими действиями, нужно проверить вашу тему на поддержку управления произвольного меню. Хоть времени от выпуска релиза прошло 6 лет (2010) и по идее в каждой теме уже должно присутствовать отвечающие функции. Но бывают исключения, и чтобы убедиться в поддержки, перейти в раздел «Внешний вид-Меню». Если обнаружите следующею надпись:

Создаём в Wordpress МЕНЮ. Виды МЕНЮ В ВОРДПРЕССЕ | Выпадающее МЕНЮ

Следовательно, тема лишена такой прекрасной возможности. Для исправления нам понадобится лишь добавить такую строку add_theme_support( 'menus' ); в файле functions.php . Или зарегистрировать свое меню также через этот файл и поддержка включается автоматически.

Основы WordPress. Серия седьмая. Навигационное меню

//меню register_nav_menu( 'primary', __( 'Top Menu') );

После добавления этого кода у вас в разделе «Меню», конфигурация «Настройки меню» появится новый параметр «Область темы Top Menu».

Детали управления произвольного меню

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

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

Главная вкладка управления. Здесь можно совершать все действия без необходимости переключения на вкладку «Управление областями». Если было создано несколько меню, то здесь в виде выпадающего списка будет полный перечень, из которого можно выбрать какое именно меню отредактировать. Рядом расположена ссылка «создать новое меню», при клике на нее откроется поле ввода для названия. Не забывайте нажимать кнопку «Сохранить меню» после внесения изменений. В боковой части расположены элементы «Страницы, Произвольные ссылки, Рубрики, Записи, Формат», которые доступны для добавления в меню. В первом и последнем виджете схема добавления аналогичная: ставятся галочки на нужные элементы, затем нажимается кнопка «Добавить…». Вкладка «Произвольная ссылка» – это любой адрес веб-страницы или сайта, прописывается URL и текст ссылки. В структуре меню находятся все добавленные вами элементы. Также присутствуют дополнительные параметры, а именно:

Классы CSS – возможность добавить любой класс к определенному пункту меню. С примером использования можно ознакомиться здесь .

Описание к ссылке (XFN) – дополнительный атрибут ссылке, позволяющий указать статус ресурса, на который вы ссылаетесь. .

Пример.

<a href="http://www.example.com/" rel="friend">Фильмы</a> Описание – Обычный текст, отображающий возле главной надписи, как дополнительная информация пункта меню.

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

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

Шаг 1-й. Регистрируем меню

Открываем файл functions.php и в самом низу, перед знаком ?>, добавляем такой фрагмент кода:

/* регистрация своего меню */ function register_my_menu() { register_nav_menu( 'primary', __( 'Верхнее меню') ); register_nav_menu( 'secondary', __( 'Нижнее меню') ); } add_action( 'init', 'register_my_menu' );

Этим кодам мы регистрируем два новых меню в текущей теме. Одно ориентированное как главное (header), второе расположим внизу сайта (footer).

Шаг 2-й. Место вывода

На втором шаге обозначим область вывода меню с помощью функции wp_nav_menu(). Первое добавим в файл header.php после всех функций, а второе в файл footer.php .

<nav id="site-navigation" class="main-navigation inner-wrap clearfix" role="navigation"> <?php wp_nav_menu( array( 'container' => 'none', 'menu_class' => 'nav1', 'theme_location' => 'primary' ) ); ?> </nav> <nav class="footer-menu" class="clearfix"> <?php wp_nav_menu( array( 'container' => 'none', 'menu_class' => 'nav2', 'theme_location' => 'secondary' ) ); ?> </nav>

Шаг 3-й. Оформление

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

/* =NAVIGATION ----------------------------------------------- */ nav li > ul, nav li > ol { margin: 0; list-style: none; } .main-navigation { width: 100%; background-color: #FFFFFF; } .main-navigation li { float: left; position: relative; font-family: 'Roboto', sans-serif; font-weight: 300; } .main-navigation a { color: #444444; display: block; float: left; font-size: 16px; padding: 12px 16px; } .main-navigation li.default-menu, li.default-menu { display: none; } .main-navigation a:hover, .main-navigation ul li.current-menu-item a, .main-navigation ul li.current_page_ancestor a, .main-navigation ul li.current-menu-ancestor a, .main-navigation ul li.current_page_item a, .main-navigation ul li:hover > a { color: #FFFFFF; background-color: #77CC6D; } /* =DROP DOWN ----------------------------------------------- */ .main-navigation ul li ul, .main-navigation ul li:hover ul ul, .main-navigation ul ul li:hover ul ul, .main-navigation ul ul ul li:hover ul ul, .main-navigation ul ul ul ul li:hover ul ul { display:none; z-index: 100; border-left: 1px solid #F8F8F8; border-right: 1px solid #F8F8F8; border-bottom: 1px solid #F8F8F8; margin-left: -1px; } .main-navigation ul li:hover ul, .main-navigation ul ul li:hover ul, .main-navigation ul ul ul li:hover ul, .main-navigation ul ul ul ul li:hover ul, .main-navigation ul ul ul ul ul li:hover ul { display:block; } .main-navigation ul li ul { position: absolute; width: 200px; top: 44px; } .main-navigation ul li ul li { float: none; border-bottom: 1px solid #F8F8F8; } .main-navigation ul li ul li:last-child { float: none; border-bottom: none; } .main-navigation ul li ul li a, .main-navigation ul li.current-menu-item ul li a, .main-navigation ul li ul li.current-menu-item a, .main-navigation ul li.current_page_ancestor ul li a, .main-navigation ul li.current-menu-ancestor ul li a, .main-navigation ul li.current_page_item ul li a { float: none; font-size: 14px; font-weight: 300; height: 100%; padding: 8px 14px; color: #444444; background-color: #FFFFFF; } .main-navigation ul li ul li a:hover, .main-navigation ul li ul li:hover > a, .main-navigation ul li.current-menu-item ul li a:hover { color: #FFFFFF; background-color: #77CC6D; } .main-navigation ul li ul li ul { left: 200px; top: 0; } .main-navigation select { display: none; } /* =FOOTER MENU ----------------------------------------------- */ .footer-menu { float: right; } .footer-menu li { float: left; position: relative; } .footer-menu li.default-menu, li.default-menu { display: none; } .footer-menu a { color: #666666; display: block; float: left; font-size: 10px; height: 21px; padding: 5px 0 0 16px; font-size: 12px; } .footer-menu a:hover, .footer-menu ul li.current-menu-item a, .footer-menu ul li.current_page_ancestor a, .footer-menu ul li.current-menu-ancestor a, .footer-menu ul li.current_page_item a, .footer-menu ul li:hover > a { color: #77CC6D; }

Шаг 4-й. Меню в админ-зоне

После выше, проделанной нами работы, останется создать меню и добавить необходимые элементы. Переходим в раздел «Внешний вид-Меню», пишем название меню в поле ввода «Название меню» (любое, это для себя). В левой колонке выбираем какие элементы добавить (страницы, рубрики и т.д.). Внизу «Область темы» ставим галочку напротив «Верхнее меню» и жмем кнопку «Сохранить меню».

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