Как добавить описания меню в ваши темы WordPress

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

Система меню WordPress имеет встроенную функцию, с помощью которой вы можете добавлять описания к пунктам меню. Однако по умолчанию эта функция скрыта. Даже если они включены, их отображение не поддерживается без добавления некоторого кода. Большинство тем не разработаны с учетом описания пунктов меню. В этой статье мы покажем вам, как включить описания меню в WordPress и как добавить описания меню в ваши темы WordPress.

Примечание: Этот учебник требует от вас достаточного понимания HTML, CSS и разработки тем WordPress.

Когда и зачем нужно добавлять описания меню?

Некоторые пользователи считают, что добавление описания меню поможет в SEO. Однако мы считаем, что основная причина, по которой вы захотите их использовать, — это лучший пользовательский опыт на вашем сайте.

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

Описания меню

Шаг 1: Включить описания меню

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

Включение описания меню в WordPress

Это включит поле описания в пунктах вашего меню. Например:

Поле описания добавлено к пунктам меню

Теперь вы можете добавить описания меню к пунктам вашего меню WordPress. Однако эти описания еще не появятся в ваших темах. Для отображения описаний меню нам придется добавить немного кода.

Шаг 2: Добавьте класс walker:

Класс Walker расширяет существующий класс в WordPress. По сути, он просто добавляет строку кода для отображения описаний пунктов меню. Добавьте этот код в функции вашей темы.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 = ' . esc_attr( $class_names ) . '"'; $output .= $indent . '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 .= ''; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '
описание . ''; $item_output .= ''; $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() для отображения меню. Мы также опубликовали руководство для начинающих о том, как добавить пользовательские навигационные меню в темы WordPress. Большинство тем WordPress добавляют меню в header.php шаблон. Однако возможно, что ваша тема использовала другой файл шаблона для отображения меню.

Теперь нам нужно найти функцию wp_nav_menu() в вашей теме (скорее всего в header.php) и измените его следующим образом.

  'primary', 'menu_class' => 'nav-menu', 'walker' => $walker ) ); ?>

В первой строке мы устанавливаем $walker для использования класса walker, который мы определили ранее в функциях.php . Во второй строке кода единственным дополнительным аргументом, который нам нужно добавить к существующим аргументам wp_nav_menu, является ‘walker’ => $walker .

Шаг 4. Стилизация описаний

Класс walker, который мы добавили ранее, отображает описания пунктов в этой строке кода:

$item_output .= '
описание . '';

Приведенный выше код добавляет разрыв строки к пункту меню, добавляя
и затем обертывает ваши описания в span с классом sub. Вот так:

Чтобы изменить отображение описаний на сайте, вы можете добавить CSS в таблицу стилей вашей темы. Мы тестировали это на Twenty Twelve и использовали следующий css.

.menu-item < border-left: 1px solid #ccc; >span.sub

Мы надеемся, что вы найдете эту статью полезной, и она поможет вам создать классно выглядящие меню с описаниями меню в вашей теме. Вопросы? Оставьте их в комментариях ниже.

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий