Столкнулись с необходимостью зарегистрировать собственное меню в WordPress? WordPress это мощный инструмент, позволяющий очень гибко создавать и настраивать меню для вашего проекта. Сегодня разберемся с фундаментальными понятиями и принципами создания меню в WP.
Содержание:
1. Регистрация меню
Если мы захотим зарегистрировать какое – либо меню в WP необходимо, чтобы оно появлялось в разделе “Внешний вид”. Это делается с помощью функции register_nav_menu(). Эту функцию принято вызывать во время события after_setup_theme. Что это значит? У нас есть action, который мы заносим в файл function.php с помощью конструкции
add_action( 'after_setup_theme', 'theme_register_nav_menu' );
, внутри которой первым параметром мы указываем событие after_setup_theme, а вторым параметром вызываем название нашей функции, содержимое которой описано ниже:
function theme_register_nav_menu() {
register_nav_menu( 'top', 'Меню в шапке' );
register_nav_menu( 'footer', 'Меню в подвале' );
}
Т.е. как только у нас случается событие регистрации темы в WP, мы сразу подключаем свое действие, которое должно случиться после события after_setup_theme, т.е. мы вешаем хук theme_register_nav_menu.
В функции theme_register_nav_menu() мы описываем, что конкретно мы должны сделать, а именно в аргументе register_nav_menu, первым параметром ($location) мы указываем идентификатор расположения меню, в нашем случае ‘top’, а вторым параметром ($description) — описание области меню, которое будет отображаться в админке, назовем его ‘Меню в шапке’ , например. После всех проделанных действий в админке WP в разделе “Внешний вид” появиться “Меню”.
Создаем меню – перейдем в раздел “Редактировать меню” и нажмем на ссылку “создайте новое меню”, здесь мы можем полноценно управлять нашим меню: добавлять страницы, записи, рубрики и др. Перейдем в раздел “Управление областями” и видим область, которую зарегистрировали:
2. Вызов меню
Меню выводиться в шаблоне (header.php, например) функцией wp_nav_menu(). Для того, чтобы вывести наше меню, которое мы зарегистрировали выше, необходимо использовать следующий шаблон:
<?php wp_nav_menu( array(
'theme_location' => 'top',
'container' => null,
'menu_class' => 'nav',
'menu_id' => 'nav',
'walker' => new CSS_Menu_Walker(),
) ); ?>
В theme_location укажем то конкретное меню, которое хотим вывести. Если помните в register_nav_menu мы зарегистрировали меню – top.
3. Редактирование меню
3.1 Активный пункт меню
Зачастую перед разработчиком встает задача, каким то образом отредактировать меню, например сделать подсветку на активном пункте меню. Для этого необходимо задать класс на элемент li (в нашем случае это конкретный пункт меню, который мы хотим подсветить). Для добавления пользовательского класса необходимо добавить Walker класс в файл function.php. С помощью этого класса мы можем легко создавать CSS стили. Вставим следующий код в файл function.php:
class CSS_Menu_Walker extends Walker {
var $db_fields = array('parent' => 'menu_item_parent', 'id' => 'db_id');
function start_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("t", $depth);
$output .= "n$indent<ul>n";
}
function end_lvl(&$output, $depth = 0, $args = array()) {
$indent = str_repeat("t", $depth);
$output .= "$indent</ul>n";
}
function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
global $wp_query;
$indent = ($depth) ? str_repeat("t", $depth) : '';
$class_names = $value = '';
$classes = empty($item->classes) ? array() : (array) $item->classes;
/* Добавление активного класса */
if (in_array('current-menu-item', $classes)) {
$classes[] = 'active';
unset($classes['current-menu-item']);
}
/* Проверка наличия дочерних элементов */
$children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->ID));
if (!empty($children)) {
$classes[] = 'has-sub';
}
$class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
$class_names = $class_names ? '' : '';
$id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args);
$id = $id ? ' id="' . esc_attr($id) . '"' : '';
$output .= $indent . '<li' . $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 .'><span>';
$item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
$item_output .= '</span></a>';
$item_output .= $args->after;
$output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
}
function end_el(&$output, $item, $depth = 0, $args = array()) {
$output .= "</li>n";
}
}
Выше с помощью функции wp_nav_menu мы вызвали наше меню. В аргументе walker укажем класс, тот что находится в файле function.php, а именно CSS_Menu_Walker:
<?php wp_nav_menu( array(
'theme_location' => 'top',
'container' => null,
'menu_class' => 'nav',
'menu_id' => 'nav',
'walker' => new CSS_Menu_Walker(),
) ); ?>
Аргумент Walker указывает функции wp_nav_menu() использовать для вывода HTML-разметки наш пользовательский Walker-класс WP.
Теперь останется отредактировать соответствующий класс (current-menu-item) в файле со стилями .css.
3.2 Дочерний пункт меню
В WP есть возможность создавать дочерние элементы в разделе “Меню”. Для примера создадим такое меню:
Как видим страницы portfolio и contacts являются дочерними для страницы “Пример страницы”. WP сам создает класс для дочерних элементов под названием menu-item-has-children. Редактируем соответствующий класс в файле со стилями .css.
3.3 Меню с якорными ссылками в WP
При разработке landing page разработчик пользуется якорными ссылками. WP позволяет очень гибко настраивать меню, в том числе не составит трудностей сделать меню с якорными ссылками.
Перейдем в подраздел “Произвольные ссылки” раздела “Меню” и укажем ссылку #footer с названием “В подвал”:
И все что остается нам сделать, это добавить идентификатор в наш шаблон:
<footer id="footer">...ваш код</footer>
Теперь при нажатии пункта меню “В подвал” станица будет пролистывать к тому месту, где указан id=»footer» в нашем шаблоне.