it-swarm-eu.dev

Popis položek menu? Vlastní Walker pro wp_nav_menu ()

Normální Wordpress Menu vypadá takto:

Domů | Blog | O nás | Kontakt

Na těchto stránkách jsem ale viděl mnoho stránek s popisy:

Domovská stránka | Naše blogy O nás | Kontakt
.... potkejte nás ... | více informací základní informace Kontaktní formulář

Jak toho dosáhnout?

(Chci, aby to byla základní funkce pro všechny mé motivy, takže žádné pluginy prosím, chci jen vědět, jak se to dělá)

102
Wordpressor

Pro nav menu potřebujete vlastní chodítko.

V podstatě přidáte parametr 'walker' do voleb wp_nav_menu() a zavoláte instanci rozšířené třídy:

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

Třída Description_Walker rozšiřuje Walker_Nav_Menu a mění funkci start_el( &$output, $item, $depth, $args ) a hledá $item->description.

Základní příklad:

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

Nebo alternativně jak komentoval @nevvermind , můžete inherit všechny funkce rodičovské funkce start_el a just append the description to $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 ) 
    );
}

Ukázkový výstup:

enter image description here

Nyní zapněte pole pro popis v wp-admin/nav-menus.php , abyste mohli toto pole upravit. Pokud WP nezaškrtnete pouze obsah svého úplného příspěvku.

enter image description here

Další čtení:

A to je vše.

113
fuxia

Vzhledem k tomu, WordPress 3.0 , vy ne potřebujete vlastní chodec už!

Tam je walker_nav_menu_start_el filtr, viz https://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/

Příklad:

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

To není lepší nebo horší než jiné návrhy; je to prostě jiné. Je to také krátké a sladké.

Namísto použití pole popisu jako @toscho navrhuje, můžete vyplnit pole "Title" v každé položce nabídky s textem, který chcete, a pak použít tento CSS:

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

Bylo by také snadné použít jQuery připojit, ale text je dostatečně dekorativní, že CSS se zdá být vhodné.

8
mrwweb

Můžete také napsat <span> prvek za navigační štítek v nabídkách a použít následující pravidlo CSS pro změnu jeho display nastavení (ve výchozím nastavení inline):

span {display:block}
2
Markus