Opis pozycji menu? Niestandardowy Walker dla wp_nav_menu ()

Normalne menu Wordpress wygląda następująco:

Strona główna | Blog | O nas | Kontakt

Ale widziałem wiele stron z opisami pod tymi linkami:

Strona główna | Nasze blogi | O nas | Kontakt
.... spotkaj się z nami ... | czytaj więcej | podstawowe informacje | Formularz kontaktowy

Jak to osiągnąć?

(Chcę, aby była to podstawowa funkcja wszystkich moich motywów, więc proszę, nie używaj żadnych wtyczek, chcę tylko wiedzieć, jak to się robi)

Potrzebujesz niestandardowego chodzika do menu nawigacji.

Zasadniczo dodajesz parametr 'walker'do wp_nav_menu()opcji i wywołujesz instancję klasy rozszerzonej:

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

Klasa Description_Walkerrozszerza Walker_Nav_Menui zmienia funkcje start_el( &$output, $item, $depth, $args )szukać $item->description.

Podstawowy przykład:

/**
 * 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
        );
    }
}

Lub, alternatywnie, jak skomentował @nevvermind , możesz odziedziczyć wszystkie funkcje funkcji rodzica start_eli po prostu dołączyć opis do $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 ) 
    );
}

Przykładowe dane wyjściowe:

Teraz włącz pole opisu, wp-admin/nav-menus.phpaby uzyskać możliwość edycji tego pola. Jeśli tego nie zrobisz, WP po ​​prostu niszczy do niego całą treść postu.

Dalsza lektura:

• Powiązane błędy
• Podobny przykład z różnymi znacznikami i formatowaniem
• Włącz programowo pole opisu na ekranie zarządzania menu
• Zbierz opis przedmiotu do późniejszego wykorzystania

I to wszystko.

Ponieważ WordPress 3.0 , to nie potrzebują już zwyczaj walker!

Jest walker_nav_menu_start_elfiltr, patrz https://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/

Przykład:

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);

To nie jest lepsze ani gorsze niż inne sugestie; to jest po prostu inne. Jest też krótki i słodki.

Zamiast używać pola opisu, jak sugeruje @toscho , możesz wypełnić pole „Tytuł” ​​w każdej pozycji menu odpowiednim tekstem, a następnie użyć tego CSS:

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

Dołączenie jQuery byłoby również łatwe , ale tekst jest na tyle ozdobny, że CSS wydaje się odpowiedni.

Możesz także napisać <span>element za etykietą nawigacji w menu i użyć następującej reguły CSS, aby zmienić jego displayustawienie (jest to inlinedomyślnie):

span {display:block}