Стандартная навигация Bootstrap имеет замысловатую разметку, что не позволяет изпользовать ее при создании меню в WordPress с помощью функции wp_nav_menu(), но эту проблему можно решить с помощью нестандартного Walker и нескольких фильтров.
Задача
Главная задача — повторить стандартную разметку NavBar с помощью wp_nav_menu(). Выглядит она вот так:
<nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <s.
own-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </nav>
Собственно, только элемент <ul class="nav navbar-nav">...</ul> будет заменен функцией wp_nav_menu(). А значит получим такую конечную разметку:
<nav id="nav" class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header visible-xs"> &.
class="collapse navbar-collapse navbar-ex1-collapse"> <?php wp_nav_menu(array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'items_wrap' => '<ul id="%1$s" class="%2$s nav navbar-nav">%3$s</ul>', 'walker' => new Bootstrap_Walker_Nav_Menu, )); ?> </div><!-- /.navbar-collapse --> </nav>
Стоить заметить, что вам заранее нужно разрешить использование меню в WordPress теме и зарегистрировать новое меню, прикрепив его к позиции primary.
Решение
Создаем свой нестандартный Walker. Это такой класс, который позволяет особым образом вывести стандартное меню в WordPress.
class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu { /** * Display Element */ function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) { $id_field = $this->db_fields['id']; .
$args->link_after = ' <b class="caret"></b>'; } parent::start_el($output, $item, $depth, $args, $id); if ( is_object($args) && !empty($args->has_children) ) $args->link_after = $link_after; } /** * Start Level */ function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("t", $depth); $output .= "n$indent<ul class="dropdown-menu list-unstyled">n"; } }
Таким образом мы немного кастомизировали вывод меню, чтобы оно подходило для Bootstrap.
Последним шагом остается обеспечить возможность работы вложенных меню. Делается это с помощью следующего фильтра:
add_filter('nav_menu_link_attributes', function($atts, $item, $args) { if ( $args->has_children ) { $atts['data-toggle'] = 'dropdown'; $atts['class'] = 'dropdown-toggle'; } return $atts; }, 10, 3);
Обратите внимание, что тут используется анонимная функция. Это не будет работать на сервере со старой версией PHP.
- Информация о функции wp_nav_menu();
- Как работают нестандартные Walker.
Нашли ошибку или возник вопрос — пишите в комментариях.
blog.eney.solutions
Система меню WordPress имеет встроенную функцию, с помощью которой вы сможете добавлять описания к каждому элементу меню. Однако, эта функция по-умолчанию скрыта. И даже если ее включить, то не обойтись без добавления кода. Большинство тем разрабатываются без поддержки оговариваемой функции. В этой статье опишу, как включить описания к меню в WordPress и как добавить их в свою тему ВП.
Внимание: Эта статья предполагает ваших знаний HTML, CSS, и знаний в разработке тем для WordPress.
Прежде всего, давайте выясним зачем нужно добавлять подписи к меню? Ну, многие люди думают, что это помогает в плане SEO. Однако, по моему мнению, основной причиной использования подписей должно являться удобство для пользователей вашего сайта. Описания могут использоваться для того, чтобы сообщить пользователям, что именно они увидят, кликнув по ссылке в меню. Интригующее описание привлечет больше кликов!
![menudescriptions[1]](/wp-content/uploads/5c281efb88fb85c281efb8900b.jpg)
Шаг 1: Включаем подписи к меню
Идем в Внешний вид » Меню. Кликаем на кнопку Настройки экрана в правом верхнем углу страницы. Отмечаем пункт Описание.
![enable-menu-descriptions[1]](/wp-content/uploads/5c281efe47d615c281efe47e7c.jpeg)
Это «включит» поле описания в каждом элементе меню. Примерно так:
![descriptions-enabled[1]](http://wpfc.ml/b.gif)
Теперь можно добавлять описания из админки. Однако, эти описания нигде не отобразятся в вашей теме. Для того, чтобы исправить это, нужно добавить код, которого совсем немного.
Шаг 2: Добавляем класс walker:
Класс walker расширяет существующий класс в WordPress. Он просто добавляет строку кода для отображения подписей в меню. Вставьте следующий код в файл functions.php вашей темы:
class Menu_With_Description extends Walker_Nav_Menu { function start_el(&$output, $item, $depth, $args) { global $wp_query; $indent = ( $depth ) ? str_repeat( "t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ); $class_names = ' class="' .
c_attr( $class_names ) . '"'; $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>'; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '<br /><span class="sub">' . $item->description . '</span>'; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } }
Шаг 3. Включаем Walker в wp_nav_menu
Темы WordPress используют функцию wp_nav_menu() для вывода меню. Большинство из них содержат код вывода в файле header.php шаблона. Однако, если его там не окажется, то необходимо будет поискать в других файлах шаблона.
Нам нужно выяснить, где вызывается эта функция (чаще всего в header.php) и изменить его в такую сторону.
<?php $walker = new Menu_With_Description; ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>
В первой строке мы задали $walker для использования класса walker, который мы определили ранее в файле functions.php. Во второй строке кода добавили дополнительный параметр к уже существующим —
'walker' => $walker
шан 4. Оформляем описания
Класс walker , который мы добавили ранее, выводит описания с помощью этой строки кода:
$item_output .= '<br /><span class="sub">' . $item->description . '</span>';
Этот код добавляет перенос строки в элемент меню с помощью тега < br />, а затем оборачивает описания в span с классом sub. Вот так:
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://www.example.com/about/">О нас<br /><span class="sub">Кто мы такие?</span></a></li>
Если захотите изменить вывод описаний на своем сайте, необходимо будет покопаться в CSS стилях вашей темы. Я тестировал на стандартной теме WordPress — Twenty Twelve, поэтому и стили использовались оттуда.
.menu-item { border-left: 1px solid #ccc; } span.sub { font-style:italic; font-size:small; }
Надеюсь, что статья поможет начинающим разработчикам оформить меню в своих темах по собственному вкусу.
wpincode.com
Создание меню и пунктов произвольного меню через административную панель WordPress
Для создания меню переходим в Административную панель – Внешний вид – Меню и смотрим, включена ли поддержка произвольных меню в вашем шаблоне. Если нет, то можем пока пропустить данный шаг и перейти сразу ко второй части статьи. Если же меню уже поддерживается, то у вас откроется страница примерно следующего содержания.
Для создания нового меню, вписываем его название в поле «Введите заголовок меню» и жмем «Создать меню».
Лично я предпочитаю прописывать все названия латинскими буквами во избежание каких-либо проблем в будущем. Кириллические названия тоже поддерживаются, но я не рекомендовал бы вам их использовать. Это лично мое мнение.
После создания меню нам нужно выбрать его в блоке «Области темы», который находится в левой колонке, после чего сохранить результат, нажав на кнопку «Сохранить».
В данном случае тема оформления поддерживает лишь одно произвольное меню, поэтому особо выбирать не приходится. Нужно просто выбрать созданное нами меню из выпадающего списка и сохранить результат. Если же тема поддерживает два или более меню, то нужно выбирать меню исходя из его расположения в шаблоне.
После сохранения результатов для добавления новых пунктов в меню достаточно отметить нужные категории или страницы и нажать кнопку «Добавить в меню».
После этого их можно как угодно перемещать относительно друг друга и изменять вложенность.
Также можно редактировать текст ссылки, добавлять атрибут Title или удалять пункт меню.
Кроме страниц и рубрик вы также можете добавлять в произвольное меню и обычные ссылки. Для этого пропишите ссылку в блоке «Произвольные ссылки» и нажмите кнопку «Добавить в меню».
Итак, мы рассмотрели, как создавать произвольное меню через административную панель WordPress, как добавлять в него новые пункты и производить их настройку. Теперь давайте перейдем ко второй части статьи и научимся включать поддержку произвольных меню в WordPress и выводить их в шаблоне при помощи функции wp_nav_menu.
Включение поддержки произвольных меню в WordPress
Первым делом нам нужно зарегистрировать использование произвольных меню и самих меню. Для этого открываем на редактирование файл function.php вашей темы оформления и добавляем следующий код.
Где «top» — идентификатор меню, а «Верхнее меню» — название месторасположения.
Если нужно добавить несколько меню, то перечисляем их через запятую.
После добавления данного кода поддержка произвольных меню будет включена автоматически. Убедиться в этом вы можете, перейдя в Административную панель – Внешний вид – Меню. Но самой регистрации меню недостаточно. Меню нужно еще вывести в шаблоне. Для этого мы воспользуемся специальной функцией wp_nav_menu.
Вывод произвольного меню. Функция wp_nav_menu
Как уже говорилось выше, выводить произвольные меню мы будем при помощи функции wp_nav_menu, которая может принимать следующие параметры.
При этом параметры можно передавать как через массив, так и через строку. В любом случае меню будет работать. Для наглядности рассмотрим оба варианта.
Передача параметров через массив
Передача параметров через строку
Лично я предпочитаю второй вариант, так как он более компактный, на мой взгляд. В любом случае результатом работы функции будет следующий код.
На этом я заканчиваю данную статью. Основные моменты мы рассмотрели и в 99% случаев данной информации вам будет достаточно для самостоятельного создания произвольных меню в WordPress. Если же у вас возникнут какие-то вопросы, вы всегда сможете задать их в комментариях.
На этом все. Удачи вам и успехов в создании сайтов на WordPress.
dmitriydenisov.com
WordPress 3 получил новый отличный менеджер меню, который используется для управления навигацией на вашем сайте. В данном уроке мы рассмотрим как изменить вывод по умолчанию для менеджера меню так, чтобы улучшить внешний вид меню. Посмотрите сначала на пример меню WordPress, которое мы сделаем в ходе урока.
Как вывести содержание поля описания пункта меню WordPress
В примере видно, что каждый пункт меню имеет ниже названия небольшое описание содержания. Это очень популярный стиль, который, к сожалению, нельзя сделать стандартными средствами WordPress.
Как только вы создали меню с помощью страницы Внешний вид > Меню, можно использовать функцию WordPress wp_nav_menu() в файле шаблона для вывода созданного меню.
Проблема заключается в том, что вывод функции будет иметь пример такой вид:
С помощью такого неупорядоченного списка невозможно создать меню в том виде, как нужно нам. Для наших целей вывод должен иметь вид:
Тег <strong> оборачивает заголовок, а описание помещено в тег <span>. Такая конструкция может быть легко стилизована с помощью CSS для создания специального типа меню.
Подготовка
Сначала нам надо правильно настроить меню. WordPress уже имеет опцию описания для каждого пункта меню, но по умолчанию она отключена.
Во время работы на странице Внешний вид > Меню посмотрите в верхний правый угол экрана — там размещена закладка “Настройки экрана”. Если нажать на нее, то развернется вкладка с несколькими дополнительными опциями для вывода каждого пункта меню. Среди них есть чекбокс для включения описания.
Как только данное поле будет отмечено, то при редактировании каждого пункта меню появится дополнительное поле для ввода описания.
По умолчанию WordPress добавляет длинное описание пункта меню, которое создается на основании содержания страницы. Роман можно удалить и вставить несколько слов, характеризующих пункт меню.
Теперь у нас все готово к тому, чтобы вывеcти нужные данные на экран.
Редактируем вывод с помощью пользовательского обходчика
WordPress использует специальный класс “Walker”(обходчик) который используется для каждой записи данных и выводит ее соответствующим образом. Дело в том, что мы можем легко создать наше собственное расширение данного класса PHP. Таким образом нам не нужно будет заботиться о вытаскивании данных из базы и подготовке массивов. Мы только дополним часть кода WordPress, которая выводит список. Итак, открываем файл functions.php используемой у вас на сайте темы и добавляем в него следующий код:
Что делает данный класс? Фактически это код стандартного обходчика, в который внесены несколько дополнительных строк: выполняется проверка наличия описания, если оно есть, то описание оборачивается в тег span и добавляется к заголовку навигации.
Обходчик также проверяет факт работы с подпунктом меню, если это подпункт меню, то выводить описание не нужно.
Вызов функции
Теперь, когда у нас есть собственный класс обходчик, нужно сказать WordPress, что следует использовать наш класс, а не стандартный. Для этого вызывается функция wp_nav_menu() для вывода кода меню в нужном месте с установкой параметра используемого обходчика (параметр walker ):
Как только меню будет выведено с другой структурой можно легко стилизовать его с помощью CSS так, как требуется. Вот пример правил CSS для такого меню:
Готово!
ruseller.com
2.5/5 (6)
Every modern WordPress theme should include many common elements within the code. Hard-coding a manual navigation works if you’ve already created the content, but it is not very dynamic at all.
The best method would be creating your own WP navigation programmatically which an administrator can then tie into one of their own menus.
For this article I’d like to go over the fundamentals you should follow when creating your own navigation in a theme. Specifically going over the many custom options and how you can setup a brand new menu from scratch. You won’t need to create anything for this article so think of it more like a reference guide when coding.
Basics of a Nav Menu
Back before the many advancements of WordPress 3.0 developers typically used wp_page_menu() in theme development. This will output a full list of pages along with a homepage link, and you have some parameters which are outlined in the codex. You might still use this in your sidebar or footer area if it makes sense.
But the much more popular method of navigation is through WordPress’ built-in menu system. Administrators may create as many custom menus as they like, dragging & dropping links to create manual hierarchy and structure. You can directly manage links to posts, pages, categories, tags, practically anything on your site.
The first step is to write some code in your functions.php file which creates the navigation menu. This may be done with register_nav_menu() or register_nav_menus() if you have multiple items. These menus only require a single identifier called $location along with a small descriptive string.
$location is more like a slug ID used to identify the menu in your theme. You’ll reference this defined item inside any PHP theme file you need it to appear. Also note that nav menus will auto-initialize theme support so you do not need to use add_theme_support() for menus.
Positions in your Theme
With your menu(s) setup in functions.php we should move on to the other theme files. Let’s start in a typical location such as header.php where we can add some very basic code. This sample is copied from the wp_nav_menu() codex and includes all of the optional parameters.
I’m going to delve into these options more in the next section. But I’ll start by glossing over the first two. Please remember that all of these are optional, because the values you see above will become your default if not overwritten. theme_location should match the location slug you chose when registering the menu. This is the only value that you should change to ensure it matches up properly.
Sometimes people confuse the menu location with menu since they are both very similar. In fact, menu should almost always be omitted which then allows the webmaster to assign their own menu to that location. This menu parameter is used to include a pre-made admin menu. It should be identical to a pre-existing menu that has already been created. But since most people will not have an existing menu(or this could change between websites) it’s best practice to simply leave it out of your theme navigation.
Setting Parameters
The other settings are mostly for customization which is why you could ignore them. But let’s tackle the rest so we have a good understanding of the possibilities. container, container_class, and container_id are beneficial when styling the menu. The outer container element wraps around the UL so it could even be an HTML5 <nav> if you like semantics.
The menu_class and menu_id get applied onto the unordered list itself. Each menu gets a class of .menu, so you might wish to change this if you’re using more than one. The echo param tells this function to output the HTML menu, otherwise it will return the value back to a function or PHP variable. When wp_nav_menu() cannot run for any reason, it will automatically fallback to using wp_page_menu() as I mentioned earlier.
The next two before and after params will output any HTML just before each of the anchor links, or just after closing them. link_before and link_after will append HTML inside the anchor links, just before & after the text itself. Remember these options and be sure not to get them mixed up! When in doubt, check the codex for support.
Now if you do not want to use an unordered list you can change this inside items_wrap. It’s using a sprintf() type of syntax to replace values with dynamic parameters in the same function. %1$s refers to menu_id, %2$s refers to menu_class, and %3$s is related to the list items output. Since it takes a whole lot of extra work to change the <li> elements it is usually best to just leave this one alone.
Finally the depth parameter tells the menu how deep we should go for hierarchy. If our header navigation is only a single-tier dropdown menu then we only need 1 level of depth. Or we may have a 2-tier flyout menu which could use 2 levels of depth. -1 is a special value which displays all links in the menu, but condenses them together into the same display level.
Now the $walker item is a special parameter for customizing how WordPress outputs content in a tree hierarchy. It expects a new class object which includes customized methods for item output. This is a fairly advanced topic, but you can read more about it from the Walker class reference guide.
Generate Menus from WP Admin
This last bit should provide administrators & webmasters a better way to understand menus. Once logged into the admin panel hover «Appearance» and then click the menus link.
From here you should rearrange links by organizing from the left accordion into the right section. You can give the menu a name which can be referenced in PHP — but notice at the top you’ll see a drop-down select menu. Once you register a navigation and give it a theme location it appears in this dropdown for the administrator to select. This is how webmasters can organize their own menus without needing to code any PHP.
From the left side you can choose between pages, posts, links, categories, and tags. If you click the small tab near the top-right corner labeled «Screen Options» you can hide some of these screen choices. You’ll also find advanced menu options for giving each link a target(such as target=»_blank») or even unique CSS classes.
Each category link could use a different class for unique colors when selected. By default you’ll give each link some text and a brief description, which is often used only by the website administrator. Links can also have title attributes and unique XFN values.
The more you practice using this menu system the clearer it will become. As a developer who has been using WordPress for years, I find this to be very handy. Newcomers who are just learning the basics of WordPress can still pick this up quickly without much of a struggle.
Further Reading
- Improve your WordPress Navigation Menu Output [Tutorial]
- Adding Custom Attributes To WordPress Menus
- Extending the WordPress Walker Class
- Create a Custom WordPress Menu Walker, Extending Walker_Nav_Menu Class
Closing
I hope this in-depth look at the WordPress navigation system can help new developers jump right into theming. Obviously there are some other important aspects to coding a theme. But navigation is so crucial and also somewhat confusing if you’ve never built something like this before. Try out these sample PHP codes and see what you can make using WordPress as the core foundation.
www.templatemonster.com
Здравствуйте, сегодня опять поговорим о создании меню (вертикальное и горизонтальное) в wordpress через панель управления, а также о том, как вывести его в любом месте вашего сайта с помощью функции wp_nav_menu, все будет намного проще, чем мои ранее написанные руководства по созданию меню.
Скачать исходники для статьи можно ниже
Нижеуказанное руководство основано на моей предыдущей статье –
Создаем выпадающее горизонтальное меню WordPress (подробно).
Однако, здесь мы будем делать все проще (не будем трогать файл functions.php или использовать скрипты, чтобы сделать меню выпадающим), а именно научимся делать вертикальное меню или горизонтальное не выпадающее меню.
Приступим же!
1. Заходим в панель управления сайтом на wordpress, в левом меню выбираем пункт “Внешний вид” и его подпункт “Меню”.
Здесь создаем нужное нам меню.
Например, создадим меню из рубрик, но не из всех, а только тех, которые нам нужны и назовем данное меню – “rubrici”, вот так это будет выглядеть:
2. Для вывода меню в wordpress будем пользоваться следующей функцией:
<?php wp_nav_menu('menu=имя меню'); ?>
Все просто, в вышеуказанном коде, вместо “имя меню” подставляете название созданного вами меню и вставляете код в любом месте вашего сайта.
Для меню, созданного в нашем примере данная функция будет выглядеть следующим образом:
<?php wp_nav_menu('menu=rubrici'); ?>
3. Вставляем меню в нужном месте нашего сайта.
Давайте, например, вставим наше меню “rubrici” в шапку, в самом вверху.
Для примера возьмем стандартную тему wordpress – Twenty Twelve.
Для этого в панели управления wordpress заходим в пункт – “Веншний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем – header.php.
В его коде находим открывающий тег body, а сразу после него идет тег, открывающий блок “page” – вот после него и вставим вывод нашего меню “rubrici” с помощью функции – wp_nav_menu:
... <body <?php body_class(); ?>> <div id="page" class="hfeed site"> <?php wp_nav_menu('menu=rubrici'); ?> <header id="masthead" class="site-header" role="banner"> ...
Сохраняем изменения и переходим на свой сайт, смотрим, что у нас получилось:
Как видите меню у нас получается вертикальное, и это хорошо, если вам нужно вертикальное меню, однако, допустим, что нам нужно горизонтальное меню, тогда нам нужно прописать стили оформления для нашего меню – “rubrici”.
4. Прописываем стили меню.
Для начала, обернем функцию вывода нашего меню в новый блок, например “menu2”, для того чтобы прописать для него стили оформления.
То есть код в файле header.php (путь 3 данного руководства) будет выглядеть так:
... <body <?php body_class(); ?>> <div id="page"> <div id="menu2"> <?php wp_nav_menu('menu=rubrici'); ?> </div> <header id="masthead" role="banner"> ...
Следующий шаг, который нам нужно сделать – это прописать стили оформления для нашего нового блока (“menu2”), в котором и содержится наше новое меню (“rubrici”).
А для этого в панели управления wordpress, в левом меню, выбираем пункт “Внешний вид”, далее его подпункт “Редактор”, а справа среди шаблонов выбираем файл – style.css.
Переходим в его коде в самый низ и вставляем следующий фрагмент:
#menu2 { padding: 0 0 0 20px; margin: 0; } #menu2 li { float: left; list-style: none; font: 12px Tahoma, Arial; } #menu2 li a { display: block; background: #20548E; padding: 5px 12px; text-decoration: none; border-right: 1px solid white; width: 70px; color: #EAFFED; white-space: nowrap; } #menu2 li a:hover { background: #1A4473; } #menu2 li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white; }
После чего переходим на сайт и смотрим, что у нас получилось:
Как видите наше меню превратилось из вертикального в горизонтальное, осталось только подкорректировать стили оформления под свой сайт.
Например в данном примере нам нужно растянуть по ширине каждый пункт меню – за это отвечает атрибут:
width: 70px;
Меняю его на:
width: 170px;
После чего мое меню будет выглядеть следующим образом:
На этом все!
Не забудьте прочитать “похожие статьи”
mnogoblog.ru
function wp_nav_menu( $args = array() ) { static $menu_id_slugs = array(); $defaults = array( 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '', 'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'item_spacing' => 'preserve', 'depth' => 0, 'walker' => '', 'theme_location' => '' ); $args = wp_parse_args( $args, $defaults ); if ( ! in_array( $args['item_spacing'], array( 'preserve', 'discard' ), true ) ) { // invalid value, fall back to default. $args['item_spacing'] = $defaults['item_spacing']; } /** * Filters the arguments used to display a navigation menu. * * @since 3.0.0 * * @see wp_nav_menu() * * @param array $args Array of wp_nav_menu() arguments. */ $args = apply_filters( 'wp_nav_menu_args', $args ); $args = (object) $args; /** * Filters whether to short-circuit the wp_nav_menu() output. * * Returning a non-null value to the filter will short-circuit * wp_nav_menu(), echoing that value if $args->echo is true, * returning that value otherwise. * * @since 3.9.0 * * @see wp_nav_menu() * * @param string|null $output Nav menu output to short-circuit with. Default null. * @param stdClass $args An object containing wp_nav_menu() arguments. */ $nav_menu = apply_filters( 'pre_wp_nav_menu', null, $args ); if ( null !== $nav_menu ) { if ( $args->echo ) { echo $nav_menu; return; } return $nav_menu; } // Get the nav menu based on the requested menu $menu = wp_get_nav_menu_object( $args->menu ); // Get the nav menu based on the theme_location if ( ! $menu && $args->theme_location && ( $locations = get_nav_menu_locations() ) && isset( $locations[ $args->theme_location ] ) ) $menu = wp_get_nav_menu_object( $locations[ $args->theme_location ] ); // get the first menu that has items if we still can't find a menu if ( ! $menu && !$args->theme_location ) { $menus = wp_get_nav_menus(); foreach ( $menus as $menu_maybe ) { if ( $menu_items = wp_get_nav_menu_items( $menu_maybe->term_id, array( 'update_post_term_cache' => false ) ) ) { $menu = $menu_maybe; break; } } } if ( empty( $args->menu ) ) { $args->menu = $menu; } // If the menu exists, get its items. if ( $menu && ! is_wp_error($menu) && !isset($menu_items) ) $menu_items = wp_get_nav_menu_items( $menu->term_id, array( 'update_post_term_cache' => false ) ); /* * If no menu was found: * - Fall back (if one was specified), or bail. * * If no menu items were found: * - Fall back, but only if no theme location was specified. * - Otherwise, bail. */ if ( ( !$menu || is_wp_error($menu) || ( isset($menu_items) && empty($menu_items) && !$args->theme_location ) ) && isset( $args->fallback_cb ) && $args->fallback_cb && is_callable( $args->fallback_cb ) ) return call_user_func( $args->fallback_cb, (array) $args ); if ( ! $menu || is_wp_error( $menu ) ) return false; $nav_menu = $items = ''; $show_container = false; if ( $args->container ) { /** * Filters the list of HTML tags that are valid for use as menu containers. * * @since 3.0.0 * * @param array $tags The acceptable HTML tags for use as menu containers. * Default is array containing 'div' and 'nav'. */ $allowed_tags = apply_filters( 'wp_nav_menu_container_allowedtags', array( 'div', 'nav' ) ); if ( is_string( $args->container ) && in_array( $args->container, $allowed_tags ) ) { $show_container = true; $class = $args->container_class ? ' class="' . esc_attr( $args->container_class ) . '"' : ' class="menu-'. $menu->slug .'-container"'; $id = $args->container_id ? ' id="' . esc_attr( $args->container_id ) . '"' : ''; $nav_menu .= '<'. $args->container . $id . $class . '>'; } } // Set up the $menu_item variables _wp_menu_item_classes_by_context( $menu_items ); $sorted_menu_items = $menu_items_with_children = array(); foreach ( (array) $menu_items as $menu_item ) { $sorted_menu_items[ $menu_item->menu_order ] = $menu_item; if ( $menu_item->menu_item_parent ) $menu_items_with_children[ $menu_item->menu_item_parent ] = true; } // Add the menu-item-has-children class where applicable if ( $menu_items_with_children ) { foreach ( $sorted_menu_items as &$menu_item ) { if ( isset( $menu_items_with_children[ $menu_item->ID ] ) ) $menu_item->classes[] = 'menu-item-has-children'; } } unset( $menu_items, $menu_item ); /** * Filters the sorted list of menu item objects before generating the menu's HTML. * * @since 3.1.0 * * @param array $sorted_menu_items The menu items, sorted by each menu item's menu order. * @param stdClass $args An object containing wp_nav_menu() arguments. */ $sorted_menu_items = apply_filters( 'wp_nav_menu_objects', $sorted_menu_items, $args ); $items .= walk_nav_menu_tree( $sorted_menu_items, $args->depth, $args ); unset($sorted_menu_items); // Attributes if ( ! empty( $args->menu_id ) ) { $wrap_id = $args->menu_id; } else { $wrap_id = 'menu-' . $menu->slug; while ( in_array( $wrap_id, $menu_id_slugs ) ) { if ( preg_match( '#-(d+)$#', $wrap_id, $matches ) ) $wrap_id = preg_replace('#-(d+)$#', '-' . ++$matches[1], $wrap_id ); else $wrap_id = $wrap_id . '-1'; } } $menu_id_slugs[] = $wrap_id; $wrap_class = $args->menu_class ? $args->menu_class : ''; /** * Filters the HTML list content for navigation menus. * * @since 3.0.0 * * @see wp_nav_menu() * * @param string $items The HTML list content for the menu items. * @param stdClass $args An object containing wp_nav_menu() arguments. */ $items = apply_filters( 'wp_nav_menu_items', $items, $args ); /** * Filters the HTML list content for a specific navigation menu. * * @since 3.0.0 * * @see wp_nav_menu() * * @param string $items The HTML list content for the menu items. * @param stdClass $args An object containing wp_nav_menu() arguments. */ $items = apply_filters( "wp_nav_menu_{$menu->slug}_items", $items, $args ); // Don't print any markup if there are no items at this point. if ( empty( $items ) ) return false; $nav_menu .= sprintf( $args->items_wrap, esc_attr( $wrap_id ), esc_attr( $wrap_class ), $items ); unset( $items ); if ( $show_container ) $nav_menu .= '</' . $args->container . '>'; /** * Filters the HTML content for navigation menus. * * @since 3.0.0 * * @see wp_nav_menu() * * @param string $nav_menu The HTML content for the navigation menu. * @param stdClass $args An object containing wp_nav_menu() arguments. */ $nav_menu = apply_filters( 'wp_nav_menu', $nav_menu, $args ); if ( $args->echo ) echo $nav_menu; else return $nav_menu; }
developer.wordpress.org
В позапрошлой статье блога я писал про интересное нововведения последней версии wordpress — специальный механизм создания и управления меню в wordpress 3.0. Теперь стало намного удобнее и проще обычным пользователям создавать различные по сложности меню, которые могут состоять не только страницы или категории блога, но и иметь ссылки на любые URL. Для отображения меню в шаблоне используется специальная функция wp_nav_menu — про нее сегодня и расскажу.
Если в админке wordpress нету раздела меню, то его можно активировать добавлением специального кода в файл functions.php
Далее создаете меню в соответствующему пункте раздела «Внешний вид» (Appearence). После этого в шаблоне блога в нужном нам месте выводим само меню через код:
Здесь first — название созданного нами меню. Это использование функции в общем случае без виджетов, с ними там нужно будет немного по другому работать. Тем не менее функция wp_nav_menu может выводиться и без аргументов, в результате чего будут «просматриваться» разные ситуация — сначала совпадение по названию меню, если для него указан хотя бы один пункт меню, в противном случае будет просто отображено непустое меню ну и т.п. Но опять же советую просто использовать приведенный выше код и не разбираться потом что должна выводить функция без аргументов. Ее синтаксис выглядит следующим образом:
Здесь используются следующие параметры:
$menu — выбранный идентификатор для меню — ID, slug или название меню.
$container — меню UL по умолчанию «оборачивается» в контейнер DIV с помощью данной настройки.
$container_class — указывает класс контейнера, по умолчанию его значение menu-{menu slug}-container, то есть в нашем случае, например, будет класс menu-first-container.
$container_id — можно добавить контейнеру ID, по умолчанию не указано.
$menu_class — класс для элемента меню UL, его значение — menu.
$menu_id — ID для элемента ul, по умолчанию равно значению menu-{slug}
$echo — если вы не хотите отображать меню, а возвращать значение функции используйте для этой настройки значение 0.
$fallback_cb — если меню не существует, вызывается функция wp_page_menu.
$before — задает текст, который выводится перед ссылкой А.
$after — текст после ссылки А, по умолчанию он, как и предыдущий, пустые.
$link_before — выводит фразу перед текстом ссылки, не задано.
$link_after — выводится после текста ссылки, тоже пустое.
$depth — задает количество уровней иерархии для вывода меню, значение по умолчанию 0 выводит все меню целиком.
$walker — какой-то непонятный пользовательский «walker object», наверное больше понадобится продвинутым разработчикам.
$theme_location — локация темы, где будет использовано меню, должна быть активирована через register_nav_menu() для того чтобы пользователь смог ее выбирать. Тоже какая-то не совсем понятная настройка, судя по всему, при работе с виджетами.
wordpressinside.ru