it-swarm.com.de

Beschreibung der Menüpunkte? Benutzerdefinierter Walker für wp_nav_menu ()

Das normale Wordpress-Menü sieht folgendermaßen aus:

Startseite | Blog | Über uns | Kontakt

Aber ich habe viele Seiten mit Beschreibungen unter diesen Links gesehen:

Startseite | Unsere Blogs | Über uns | Kontakt
.... uns treffen ... | Lesen Sie mehr | grundlegende info | Kontakt Formular

Wie kann man das erreichen?

(Ich möchte, dass es die Kernfunktion für alle meine Themen ist, also bitte keine Plugins. Ich möchte nur wissen, wie es gemacht wird.)

102
Wordpressor

Sie benötigen einen benutzerdefinierten Walker für das Navigationsmenü.

Grundsätzlich fügen Sie einen Parameter 'walker' zu den Optionen wp_nav_menu() hinzu und rufen eine Instanz einer erweiterten Klasse auf:

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

Die Klasse Description_Walker erweitert Walker_Nav_Menu und ändert die Funktion start_el( &$output, $item, $depth, $args ), um nach $item->description zu suchen.

Ein einfaches Beispiel:

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

Oder alternativ wie @nevvermind kommentierte könnten Sie erben alle Funktionen der start_el -Funktion des Elternteils und nur anhängen die Beschreibung an $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 ) 
    );
}

Beispielausgabe:

enter image description here

Aktivieren Sie nun das Beschreibungsfeld in wp-admin/nav-menus.php , um dieses Feld bearbeiten zu können. Wenn Sie nicht WP sind, wird der gesamte Inhalt des Posts in den Papierkorb verschoben.

enter image description here

Weitere Lektüre:

Und das ist es.

113
fuxia

Seit WordPress 3.0 brauchen Sie keine benutzerdefinierten Gehhilfen mehr!

Es gibt den walker_nav_menu_start_el Filter, siehe https://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/

Beispiel:

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

Dies ist nicht besser oder schlechter als andere Vorschläge; es ist einfach anders. Es ist auch kurz und süß.

Anstatt das Beschreibungsfeld wie in @toscho vorgeschlagen zu verwenden, können Sie in jedem Menüelement das Feld "Titel" mit dem gewünschten Text ausfüllen und dann das folgende CSS verwenden:

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

Es wäre auch einfach, jQuery zu verwenden, um es anzuhängen, aber der Text ist ornamental genug, dass CSS angemessen erscheint.

8
mrwweb

Sie können auch ein <span> -Element nach der Navigationsbezeichnung in Menüs schreiben und die display -Einstellung mithilfe der folgenden CSS-Regel ändern (standardmäßig inline):

span {display:block}
2
Markus