Привет Друзья! С точки зрения SEO пользовательского интерфейса или usability сайта очень удобно, чтобы по меню было видно, у каких пунктов меню есть подменю (часто это показывает стрелка или маленький треугольник, или картинка меню). При использовании wp_nav_menu() WordPress добавляет класс 'sub-menu' к тегам <ul> каждого подменю, но ничего к родительским элементам, поэтому их трудно различить.
Мы начнём с добавления следующего кода в наш файл function.php. Не забудьте заменить ‘wpandyou’ на название вашего собственного сайта или просто Вашим словом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Добавление CSS класса в меню, для отображения индикатора submenu class Wpandyou_Menu_Walker extends Walker_Nav_Menu { //начало функции Walker, которая поможет нам добавить класс в пункт меню function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) { //id пункта меню $wpandyou_id_field = $this->db_fields['id']; if ( !empty( $children_elements[ $element->$wpandyou_id_field ] ) ) { // название css класса, который будет отображаться в родительском меню $element->classes[] = 'wpandyou-punkt-menu-parent'; } Walker_Nav_Menu::display_element( $element, $children_elements, $max_depth, $depth, $args, $output ); } } |
По сути, вышеприведённый код проверяет, имеет ли данный пункт подпункты, и если да, добавляет wpandyou-punkt-menu-parent в массив $classes. Для получения более подробной информации (в том числе о walker-ах, багах в ядре и других развлечениях) смотрите ссылки в конце поста.
Для того, чтобы этот код заработал, надо сообщить меню о его использовании, а это мы сделаем с walker аргументом при вызове функции wp_nav_menu(), первый простейший php пример, это вызов всех страниц в виде меню:
|
1 |
wp_nav_menu( array( 'walker' => new Wpandyou_Menu_Walker ) ); |
Пример выше отобразит все Ваши опубликованные страницы в админ панеле. Если нам необходимо отобразить меню из раздела Внешний вид -> Меню, нам необходимо указать, какое именно меню отобразить. Пример кода:
|
1 |
wp_nav_menu( array( 'theme_location' => 'primary', 'walker' => new Wpandyou_Menu_Walker ) ); |
Где 'primary' — это название Вашего меню.
Теперь, когда у нас есть ключевой класс, мы можем воспользоваться CSS для вставки изображения или просто условного обозначения, например стрелки. Добавим следующие строки в style.css:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.wpandyou-punkt-menu-parent > a:after { color: #999; /* content отвечает за вывод стрелок. Вы можете воспользоваться background: url(); */ content: ' >>'; font-weight:normal; font-size: 11px; vertical-align: 1px; } .sub-menu .wpandyou-punkt-menu-parent > a:after { content: ' >>>'; } |
Если Вы изучаете CSS советую Вам почитать о новых способах вёрстки:
- Адаптивные структуры столбцов или Responsive design
- Viewport мета тег для не адаптивного дизайна сайта (non responsive design)
- Меню для мобильных сайтов. Обучение
В данном CSS мы используем горизонтальное меню. Первая часть кода отвечает за вывод стрелок главного меню, а второй код выводит стрелки в sub-menu.
Полезные ссылки о Walker и wp_nav_menu():
stackexchange.com
Codex WordPress
wp_nav_menu() в Codex WordPress
Удачи Вам и хороших заработков!
Клиент требует убирать из меню те страницы сайта (меню основано на страницах), для которых стоит статус «Черновик» или «На утверждении».
Можно ли каким нибудь способом, либо:
a) не формировать это меню в момент сборки, или же
б) присваивать такому пункту какой либо, скажем, класс, например class=»hiddenitem»
В данный момент меню формируется следующим образом:
$args = array(
‘theme_location’=>’equipment-menu’,
‘container’=>’div’,
‘container_class’=>’children_menu_top’,
‘container_id’=>’menu’,
‘menu_class’=>’sf-menu’,
‘menu_id’=>’children_menu’,
‘before’=>’‘,
‘after’=>’‘,
‘fallback_cb’=>false
);
wp_nav_menu($args);
Спасибо за помощь! 😉
указанный код выводит готовое меню из раздела WordPress внешний вид->меню, т.к не указано какое именно меню речь идет о первом меню…, и в меню д.б отображаться то что в нем добавлено… вы уверены что ваше меню страниц со статусами “Черновик” или “На утверждении” выводится указанным способом?
Доброй ночи,
а можно как-то волкер применить к тем меню, которые выводятся через виджет в сайдбаре?