Опис елементів меню? Спеціальна ходунка для wp_nav_menu ()

Меню звичайного Wordpress виглядає так:

Головна | Блог | Про нас | Контактна інформація

Але я бачив багато сторінок з описами під цими посиланнями:

Головна сторінка | Наші блоги | Про нас | Звертайтесь
.... зустрічайтесь з нами ... | читати докладніше | основна інформація | Форма Зворотного Зв'язку

Як цього досягти?

(Я хочу, щоб це була основна функція для всіх моїх тем, тому ніяких плагінів, будь ласка, просто хочу знати, як це робиться)

Вам потрібна спеціальна ходунка для навігаційного меню.

В основному ви додаєте параметр 'walker'до wp_nav_menu()параметрів і викликаєте екземпляр розширеного класу:

wp_nav_menu(
    array (
        'menu'            => 'main-menu',
        'container'       => FALSE,
        'container_id'    => FALSE,
        'menu_class'      => '',
        'menu_id'         => FALSE,
        'depth'           => 1,
        'walker'          => new Description_Walker
    )
);

Клас Description_Walkerрозширює Walker_Nav_Menuта змінює функцію, яку start_el( &$output, $item, $depth, $args )потрібно шукати $item->description.

Основний приклад:

/**
 * Create HTML list of nav menu items.
 * Replacement for the native Walker, using the description.
 *
 * @see    https://wordpress.stackexchange.com/q/14037/
 * @author fuxia
 */
class Description_Walker extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @param  string $output Passed by reference. Used to append additional content.
     * @param  object $item   Menu item data object.
     * @param  int $depth     Depth of menu item. May be used for padding.
     * @param  array|object $args    Additional strings. Actually always an 
                                     instance of stdClass. But this is WordPress.
     * @return void
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
    {
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;

        $class_names = join(
            ' '
        ,   apply_filters(
                'nav_menu_css_class'
            ,   array_filter( $classes ), $item
            )
        );

        ! empty ( $class_names )
            and $class_names = ' class="'. esc_attr( $class_names ) . '"';

        $output .= "<li id='menu-item-$item->ID' $class_names>";

        $attributes  = '';

        ! empty( $item->attr_title )
            and $attributes .= ' title="'  . esc_attr( $item->attr_title ) .'"';
        ! empty( $item->target )
            and $attributes .= ' target="' . esc_attr( $item->target     ) .'"';
        ! empty( $item->xfn )
            and $attributes .= ' rel="'    . esc_attr( $item->xfn        ) .'"';
        ! empty( $item->url )
            and $attributes .= ' href="'   . esc_attr( $item->url        ) .'"';

        // insert description for top level elements only
        // you may change this
        $description = ( ! empty ( $item->description ) and 0 == $depth )
            ? '<small class="nav_desc">' . esc_attr( $item->description ) . '</small>' : '';

        $title = apply_filters( 'the_title', $item->title, $item->ID );

        $item_output = $args->before
            . "<a $attributes>"
            . $args->link_before
            . $title
            . '</a> '
            . $args->link_after
            . $description
            . $args->after;

        // Since $output is called by reference we don't need to return anything.
        $output .= apply_filters(
            'walker_nav_menu_start_el'
        ,   $item_output
        ,   $item
        ,   $depth
        ,   $args
        );
    }
}

Або, як прокоментував @nevvermind , ви можете успадкувати всі функції батьківської start_elфункції та просто додати опис до $output:

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) 
{
    parent::start_el( $output, $item, $depth, $args );
    $output .= sprintf( 
        '<i>%s</i>', 
        esc_html( $item->description ) 
    );
}

Вибірка зразка:

Тепер увімкніть поле wp-admin/nav-menus.phpдля опису, щоб отримати можливість редагувати це поле. Якщо ви не працюєте з WP, просто завантажте в неї повний вміст публікації.

Подальше читання:

• Попутні помилки
• Аналогічний приклад з різною розміткою та форматуванням
• Увімкніть поле опису на екрані управління меню програмно
• Зберіть опис предмета для подальшого використання

І це все.

З WordPress 3.0 вам більше не потрібна спеціальна ходунка!

Є walker_nav_menu_start_elфільтр, див. Https://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/

Приклад:

function add_description_to_menu($item_output, $item, $depth, $args) {
    if (strlen($item->description) > 0 ) {
        // append description after link
        $item_output .= sprintf('<span class="description">%s</span>', esc_html($item->description));

        // insert description as last item *in* link ($input_output ends with "</a>{$args->after}")
        //$item_output = substr($item_output, 0, -strlen("</a>{$args->after}")) . sprintf('<span class="description">%s</span >', esc_html($item->description)) . "</a>{$args->after}";
    }

    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'add_description_to_menu', 10, 4);

Це не краще і не гірше, ніж інші пропозиції; це просто різне. Це теж коротко і солодко.

Замість того, щоб використовувати поле опису, як пропонує @toscho , ви можете заповнити поле "Заголовок" на кожному пункті меню потрібним текстом, а потім скористатися цією CSS:

.menu-item a:after { content: attr(title); }

Також було б легко використовувати jQuery, щоб додати його, але текст є достатньо орнаментальним, щоб CSS видався відповідним.

Ви також можете записати <span>елемент після навігаційної мітки в меню і використовувати наступне правило CSS, щоб змінити його displayналаштування (це inlineза замовчуванням):

span {display:block}