Улучшаем меню WordPress

19 Мар 2023г. в 12:36

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

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

Как только вы создали меню с помощью страницы Внешний вид > Меню, можно использовать функцию WordPress wp_nav_menu() в файле шаблона для вывода созданного меню.

Проблема заключается в том, что вывод функции будет иметь пример такой вид:

1
<ul id="menu-main">
2
<li><a href="#">Главная</a></li>
3
<li><a href="#">О нас</a></li>
4
<li><a href="#">Контакт</a></li>
5
<li><a href="#">Блог</a></li>
6
</ul>
С помощью такого неупорядоченного списка невозможно создать меню в том виде, как нужно нам. Для наших целей вывод должен иметь вид:

1
<ul id="menu-main">
2
<li><a href="#"><strong>Главная</strong><span>Начните здесь!</span></a></li>
3
<li><a href="#"><strong>О нас</strong><span>Будем знакомы!</span></a></li>
4
<li><a href="#"><strong>Конатакты</strong><span>Будьте на связи!</span></a></li>
5
<li><a href="#"><strong>Блог</strong><span>Свежие сплетни</span></a></li>
6
</ul>
Тег <strong> оборачивает заголовок, а описание помещено в тег <span>. Такая конструкция может быть легко стилизована с помощью CSS для создания специального типа меню.

Подготовка
Сначала нам надо правильно настроить меню. WordPress уже имеет опцию описания для каждого пункта меню, но по умолчанию она отключена.

Во время работы на странице Внешний вид > Меню посмотрите в верхний правый угол экрана - там размещена закладка “Настройки экрана”. Если нажать на нее, то развернется вкладка с несколькими дополнительными опциями для вывода каждого пункта меню. Среди них есть чекбокс для включения описания.

Включение опции "Описание"

Как только данное поле будет отмечено, то при редактировании каждого пункта меню появится дополнительное поле для ввода описания.

По умолчанию WordPress добавляет длинное описание пункта меню, которое создается на основании содержания страницы. Роман можно удалить и вставить несколько слов, характеризующих пункт меню.

Реадктирование описания пункта меню

Теперь у нас все готово к тому, чтобы вывеcти нужные данные на экран.

Редактируем вывод с помощью пользовательского обходчика
WordPress использует специальный класс “Walker”(обходчик) который используется для каждой записи данных и выводит ее соответствующим образом. Дело в том, что мы можем легко создать наше собственное расширение данного класса PHP. Таким образом нам не нужно будет заботиться о вытаскивании данных из базы и подготовке массивов. Мы только дополним часть кода WordPress, которая выводит список. Итак, открываем файл functions.php используемой у вас на сайте темы и добавляем в него следующий код:

class description_walker 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="'. esc_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 ) .'"' : '';
$prepend = '<strong>';
$append = '</strong>';
$description = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';
if($depth != 0)
{
$description = $append = $prepend = "";
}
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
$item_output .= $description.$args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
Что делает данный класс? Фактически это код стандартного обходчика, в который внесены несколько дополнительных строк: выполняется проверка наличия описания, если оно есть, то описание оборачивается в тег span и добавляется к заголовку навигации.

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

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

wp_nav_menu( array(
'container' =>false,
'menu_class' => 'nav',
'echo' => true,
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'depth' => 0,
'walker' => new description_walker())
);
Как только меню будет выведено с другой структурой можно легко стилизовать его с помощью CSS так, как требуется. Вот пример правил CSS для такого меню:

.nav{
height:50px;
padding-left:13px;
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
}

.nav a{
display:block;
float:left;
line-height:18px;
outline:medium none;
padding:2px 10px;
text-decoration:none;
width:95px;
min-height: 35px;
}

.nav li a strong {
display:block;
font-size:14px;
font-weight:normal;
}

.nav li a span {
display:block;
font-size:10px;
line-height:14px;
}