Fügen Sie innerhalb des wp_nav_menu-Links anchor-Tags die span-class hinzu

Ich habe Beispiele gefunden, die eine class zu Elementen der obersten Ebene hinzufügen, so dass wir einen Pfeil in Menüpunkten mit Unterelementen anzeigen können, aber schrecklich scheint, mit den bereits eingebauten WordPress-classn fertig zu werden, kann den Pfeil nicht mit aktuellem und CSS-Hover anzeigen Es ruiniert nur alle Staaten.

Das aktuelle Navigationsmenü ist wie folgt

  • Text
  • Gibt es eine Möglichkeit, stattdessen einen innerhalb der übergeordneten Tags hinzuzufügen?

    Beispiel,

    Add ⇒ innerhalb ⇒ Tags

    Also ⇒

  • Text
  • das ist übergeordnet.

    Der aktuelle Code Fügt die -Tags außerhalb der übergeordneten Tags hinzu

     class My_Walker_Nav_Menu extends Walker_Nav_Menu { function start_lvl(&$output, $depth, $args) { $indent = str_repeat("\t", $depth); if('primary' == $args->theme_location && $depth ==0){ $output .='<span class="arrow"></span>'; } $output .= "\n$indent

    Ursprünglicher Fragetitel bearbeitet von: ” add span class inside

    Solutions Collecting From Web of "Fügen Sie innerhalb des wp_nav_menu-Links anchor-Tags die span-class hinzu"

    Haben Sie versucht, die Parameter ” before oder ” link_before in Ihren Array-Argumenten zu verwenden, wenn Sie Ihre wp_nav_menu function deklarieren?

    Hinweis: Verwenden Sie after oder link_after für den gegenteiligen Effekt.

    Beispiel,

     wp_nav_menu( //normal arguments here....etc 'before' => '', //or 'link_before' => '', ); 

    Aus dem Codex:

    $before
    (string) (optional) Gibt den Text vor dem des Links aus
    Standard: Keine

      eg 'before' => '' 

    oder…

    $link_before
    (string) (optional) Ausgabe von Text vor dem Linktext
    Standard: Keine

      eg 'link_before' => '' 

    Unterstützende Ressourcen:

    http://codex.wordpress.org/Function_Reference/wp_nav_menu

    Dadurch werden tatsächlich zwei Instanzen erstellt, in denen eine Spannungsklasse innerhalb des Tags auf der primären und der sekundären Ebene angezeigt wird, sodass Sie Ihrer Spannungsklasse zum Entcasting und Navigieren verschiedene Bilder hinzufügen können.

    Dies hilft Benutzern und Entwicklern zu zeigen, ob es ein Drop-Down-Menü für Ihr Header-Menü gibt, und erleichtert auch das Navigieren innerhalb Ihrer Website.

    1. Fügen Sie diesen Code zuerst zu Ihrer functions.php hinzu.

     class Nav_Walker_Nav_Menu extends Walker_Nav_Menu { function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes[] = 'menu-item-' . $item->ID; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args ); $id = $id ? ' id="' . esc_attr( $id ) . '"' : ''; $output .= $indent . '
  • '; $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 ) .'"' : ''; $item_output = $args->before; $item_output .= ''; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; if ( 'primary' == $args->theme_location ) { $submenus = 0 == $depth || 1 == $depth ? get_posts( array( 'post_type' => 'nav_menu_item', 'numberposts' => 1, 'meta_query' => array( array( 'key' => '_menu_item_menu_item_parent', 'value' => $item->ID, 'fields' => 'ids' ) ) ) ) : false; $item_output .= ! empty( $submenus ) ? ( 0 == $depth ? '' : '' ) : ''; } $item_output .= ''; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } }
  • 2. Fügen Sie den Code unten zu Ihrer header.php hinzu, wo Ihr wp_nav_menu installiert ist.

    Im Folgenden wird der Code erläutert, so dass das neue benutzerdefinierte Menü in diesem Fall Nav_Walker_Nav_Menu installiert wird.

     < ?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'walker' => new Nav_Walker_Nav_Menu() ) ); ?> 

    3. Fügen Sie einige CSS hinzu

    Es ist also in der Lage, Ihre neuen Pfeil-Pfeil-Bilder innerhalb Ihrer Tags in der Primär- und Sekundärstufe anzuzeigen.

     #menu-header-menu li span.arrow { height:12px;background-image: url("images/nav-arrows.png");background-position: -8px -3px;background-repeat: no-repeat;float: right;margin: 0 0px 0 10px;text-indent: -9999px;width: 12px;} #menu-header-menu li a:hover span.arrow{ height:12px;background-image: url("images/nav-arrows.png");background-position: -39px -3px;background-repeat: no-repeat;float: right;margin: 0 0px 0 10px;text-indent: -9999px;width: 12px;} #menu-header-menu ul.sub-menu li span.sub-arrow { height:12px;background-image: url("images/nav-arrows.png");background-position: -8px -39px;background-repeat: no-repeat;float: right;margin: -2px 0px 0 10px;text-indent: -9999px;width: 12px;} #menu-header-menu ul.sub-menu li a:hover span.sub-arrow{ height:12px;background-image: url("images/nav-arrows.png");background-position: -39px -39px;background-repeat: no-repeat;float: right;margin: -2px 0px 0 10px;text-indent: -9999px;width: 12px;} 

    Ich hoffe das hilft! 🙂

    Beide Antworten, die von userabuser und wordpress_designer gepostet werden, sind großartig, aber ich würde gern eine Antwort posten, was eine Kombination der beiden ist.

    Mit dieser Antwort können Sie Logik verwenden, um zu definieren, wo link_before nicht angewendet werden soll. Sowie was Sie vor dem Linktext stellen möchten.

    Erstellen Sie zuerst eine sehr einfache class wie die folgende. Diese class ist eigentlich nur dafür zuständig, zu überprüfen, wann immer das Element kein Untermenü ist ( $depth < = 0 ), und den link_before Wert zu link_before und zu link_before .

     if ( ! class_exists('PREFIX_Menu_Walker')) { class PREFIX_Menu_Walker extends Walker_Nav_Menu { public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { $before = property_exists($args, 'link_before') ? $args->link_before : ''; // Empty the `link_before` when walking over a root level element if ($depth < = 0 && !empty($before)) { $args->link_before = ''; } // Continue with the default/core wordpress nav menu walker class parent::start_el( $output, $item, $depth, $args, $id ); // Remember what `link_before` $args where set. $args->link_before = $before; } } } 

    Die zweite Sache, die Sie tun müssen, ist, das Argument link_before und das Argument link_before auf Ihr Array wp_nav_menu wie folgt anzuwenden:

     wp_nav_menu([ 'link_before' => 'Hello', 'walker' => new PREFIX_Menu_Walker() ]);