it-swarm.com.de

Entfernen des Links "<a>" aus dem Menü "<li>" für einige "Links" ohne JS

Ich möchte, dass einige meiner Navigationsmenüelemente Klartext ohne Hyperlink anzeigen. Normalerweise erschien dieser Code:

<ul class="..." id="...">
<li><a href="">my item</a>
</li>
</ul>

und ich versuche das zu bekommen:

<ul class="..." id="...">
<li>my item
</li>
</ul>

aber natürlich nicht für alle Menüpunkte, aber für einige von ihnen. Einfach gesagt: Ich möchte den Hyperlink aus bestimmten Elementen meiner Menüs entfernen. Gibt es eine Option für diese Art von Dingen?

P.S. das wp_nav_menu:

$items_wrap = '<nav class="...">';
$items_wrap .= '<ul id="%1$s" class="%2$s">%3$s</ul>';
$items_wrap .= '</nav>';
wp_nav_menu( array(
'container'       => false,
 'container_class' => false,
 'menu_class' => '...',
 'echo' => true,
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'depth' => 0,
 'theme_location' => '...',
 'items_wrap'        => $items_wrap,)
 );

Mit "..." habe ich meine benutzerdefinierte Navigationsklasse, Menüklasse und den Namen des Themenorts entfernt

Vielen Dank.

4
V0RT3R

Angenommen, Sie verwenden wp_nav_menu() , um Ihre Navigation anzuzeigen, können Sie einen Walker anwenden, der nach CSS-Klassen sucht:

$items_wrap  = '<nav class="...">';
$items_wrap .= '<ul id="%1$s" class="%2$s">%3$s</ul>';
$items_wrap .= '</nav>';

wp_nav_menu( array(
    'container'         => false,
    'container_class'   => false,
    'menu_class'        => '...',
    'echo'              => true,
    'before'            => '',
    'after'             => '',
    'link_before'       => '',
    'link_after'        => '',
    'depth'             => 0,
    'theme_location'    => '...',
    'items_wrap'        => $items_wrap,
    'walker'            => new Texas_Ranger(),
) );

Beachten Sie die neue Walker-Klasse am Ende der wp_nav_menu()-Parameterliste.

In diesem Fall müssen Sie die folgende Walker-Klasse zu Ihrer functions.php-Datei hinzufügen:

class Texas_Ranger extends Walker_Nav_Menu {

    /**
     * Building the List Item element
     * @param Referenced string $output
     * @param Post Object $item
     * @param int $depth
     * @param array $args
     * @return void
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent         = ( $depth > 0 ? str_repeat( "\t", $depth ) : '' );

        // Passed Classes
        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $class_names = esc_attr( implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ) );

        // build html
        $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $class_names . '">';

        // If 'noLink' exists in classes, don't HTML anchor tag.
        if( in_array( 'noLink', $classes ) ) {

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

        } else {

            // link attributes
            $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        ) .'"' : '';
            $attributes .= ' class="menu-link ' . ( $depth > 0 ? 'sub-menu-link' : 'main-menu-link' ) . '"';

            $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s',
                $args->before,
                $attributes,
                $args->link_before,
                apply_filters( 'the_title', $item->title, $item->ID ),
                $args->link_after,
                $args->after
            );
        }

        // build html
        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    }
}

Das heißt, es wird nach einer Klasse noLink gesucht, und wenn sie im Listenelement vorhanden ist, überspringen wir den Anker-HTML-Prozess.

Der letzte Schritt ist, sich bei WordPress anzumelden, zu Appearance -> Menus zu navigieren und oben rechts auf Screen Options zu klicken und sicherzustellen, dass "CSS-Klassen" markiert sind:

 Menus Screen Options CSS Classes 

Dann fügen wir bei Listenelementen, die wir nur als Text anzeigen möchten, die Klasse noLinks wie folgt hinzu:

 Add Class 'noLink' to Home 

6
Howdy_McGee