So fügen Sie Klasse und Element hinzu -tag im Untermenü von „wp_nav_menu“ in WordPress?

Lesezeit: 8 Minuten

Benutzer-Avatar
Cray

Ich möchte eine Klasse hinzufügen a Tag eines sub-menu und ein b Tag innerhalb des Links.

WordPress gibt mir diesen Code:

<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page dropdown menu-item-72"><a
    href="#">Link</a>
  <ul class="dropdown-menu"></ul>

Und ich will das:

<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page dropdown menu-item-72"> <a
    href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
  <ul class="dropdown-menu"></ul>

Weiß jemand eine Lösung dafür?

Benutzer-Avatar
Martinczerwi

Sehen Sie sich diese Antwort an, sie erklärt, wie Sie benutzerdefiniertes HTML zu den WordPress-Menüs hinzufügen: https://stackoverflow.com/a/12251157/1627227

BEARBEITEN:

Ich habe ein Beispiel zusammengestellt, das zu Ihrer Frage passt. Sie können es platzieren Funktionen.php. Beachten Sie die Kommentare, sie erklären, wo Sie Ihren benutzerdefinierten Code hinzufügen können.

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {

  function start_lvl(&$output, $depth) {
      $indent = str_repeat("\t", $depth);
      //$output .= "\n$indent<ul class=\"sub-menu\">\n";

      // Change sub-menu to dropdown menu
      $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
  }

  function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    // Most of this code is copied from original Walker_Nav_Menu
    global $wp_query, $wpdb;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $class_names = $value="";

    $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="" . esc_attr( $class_names ) . '"';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

    $has_children = $wpdb->get_var("SELECT COUNT(meta_id)
                            FROM wp_postmeta
                            WHERE meta_key='_menu_item_menu_item_parent'
                            AND meta_value="".$item->ID.""");

    $output .= $indent . '<li' . $id . $value . $class_names .'>';

    $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        ) .'"' : '';

    // Check if menu item is in main menu
    if ( $depth == 0 && $has_children > 0  ) {
        // These lines adds your custom class and attribute
        $attributes .= ' class="dropdown-toggle"';
        $attributes .= ' data-toggle="dropdown"';
    }

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;

    // Add the caret if menu level is 0
    if ( $depth == 0 && $has_children > 0  ) {
        $item_output .= ' <b class="caret"></b>';
    }

    $item_output .= '</a>';
    $item_output .= $args->after;

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

}

Nachdem Sie dies eingerichtet haben, müssen Sie zu dem Punkt gehen, an dem Ihr Menü (wp_nav_menu()) wird genannt. In der Antwort, auf die ich verlinkt habe, gibt es den vollständigen Funktionsaufruf wp_nav_menu. Sie müssen jedoch diese Zeile hinzufügen: 'walker' => new Custom_Walker_Nav_Menu in das arguments-Array, um Ihr benutzerdefiniertes Walker-Objekt in diesem bestimmten Menü zu verwenden.

Hoffe du hast es verstanden 😉

  • Tut mir leid, ich verstehe es nicht. Wo soll ich das “class=”dropdown-toggle” data-toggle=”dropdown”” für ein übergeordnetes Element einfügen? und wo ist das b-tag im link?

    – Kräh

    31. Oktober 2012 um 17:06 Uhr

  • Ich habe ein Beispiel hinzugefügt, das die gewünschten Änderungen auf den Code anwendet. Wenn noch etwas unklar ist, sagen Sie mir bitte, ob Sie Ihr Design handcodiert haben oder ob Sie ein heruntergeladenes Design verwenden. Auch der Code erfordert, dass Sie die verwenden WordPress-Menüs und wp_nav_menu um Ihre Menüs aufzurufen.

    – Martinczerwi

    2. November 2012 um 9:48 Uhr

  • Ah, vielen Dank! Aber ich brauche die Klasse “Dropdown-Menü” nur in übergeordneten Menüpunkten. Das Attribut “data-toggle=”dropdown”” sollte nur in Links von übergeordneten Menüpunkten auftauchen. Und in diesem Link brauche ich diesen Code: <b class="caret"></b> In dem <ul> des Untermenüs brauche ich die Klasse “Dropdown-Menü” Die Frage ist: Wie kann ich prüfen, ob es ein Untermenü gibt oder ob der Menüpunkt ein übergeordneter Eintrag ist?

    – Kräh

    2. November 2012 um 16:35 Uhr

  • Es tut mir wirklich leid, ich habe das Caret übersehen und hatte auch einen Fehler in der HTML-Syntax. Ich habe den Code oben bearbeitet. Ob Sie sich im Hauptmenü befinden, erkennen Sie an der $depth-Variable. $depth ist die Menüebene, für das Hauptmenü ist es 0, je tiefer die Ebene, desto höher die Zahl.

    – Martinczerwi

    2. November 2012 um 16:55 Uhr

  • Danke, aber jetzt habe ich die Attribute und Klassen in jedem Element mit Tiefe = 0. Ich brauche sie nur, wenn es ein Untermenü gibt. gibt es dafür eine variable?

    – Kräh

    2. November 2012 um 17:08 Uhr

Seit WordPress 3.6.0 können Sie den Filter nav_menu_link_attributes verwenden:

add_filter( 'nav_menu_link_attributes', 'add_class_to_items_link', 10, 3 );

function add_class_to_items_link( $atts, $item, $args ) {
  // check if the item has children
  $hasChildren = (in_array('menu-item-has-children', $item->classes));
  if ($hasChildren) {
    // add the desired attributes:
    $atts['class'] = 'dropdown-toggle';
    $atts['data-toggle'] = 'dropdown';
    $atts['data-target'] = '#';
  }
  return $atts;
}

Die Tags haben leider keinen Filter, den wir verwenden könnten, also brauchen wir einen Rollator:

class MY_Menu_Walker extends Walker_Nav_Menu {

  public function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"sub-menu dropdown-menu\">\n";
  }   

}

fügen Sie dann beim Aufruf des Menüs die Walker-Option hinzu:

wp_nav_menu( array('walker' => new MY_Menu_Walker));

  • Ich könnte erfolgreich sein, wenn ich nur das erste Code-Snippet verwende. Danke @VictorBV

    – Duschan

    10. Januar 2019 um 4:42 Uhr

Benutzer-Avatar
Urooj Khan

Verwenden Sie diesen Code in Function.php

function add_menuclass($ulclass) {
   return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');

Benutzer-Avatar
Khairul

Sie können dies verwenden, um zu überprüfen, ob es ein Untermenü gibt:

$has_children = $wpdb->get_var("SELECT COUNT(meta_id)
                                FROM wp_postmeta
                                WHERE meta_key='_menu_item_menu_item_parent'
                                AND meta_value="".$item->ID.""");

Dann machen Sie einfache Kontrollen

if ( $has_children > 0 ) {
  // These lines adds your custom class and attribute
  $attributes .= ' class="dropdown-toggle"';
  $attributes .= ' data-toggle="dropdown"';
}

Denken Sie daran, einzustellen $wpdb als global:

global $wp_query, $wpdb;

Tada~

Sie können es in der functions.php platzieren. 

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
      $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
      $GLOBALS['dd_depth'] = (int) $depth;
      parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
   function start_lvl(&$output, $depth) {
     $indent = str_repeat("\t", $depth);
     $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
   }
  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) 
  {
    global $wp_query, $wpdb;
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $li_attributes="";
    $class_names = $value="";
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    //Add class and attribute to LI element that contains a submenu UL.
    if ($args->has_children){
      $classes[]    = 'dropdown';
      $li_attributes .= 'data-dropdown="dropdown"';
    }
    $classes[] = 'menu-item-' . $item->ID;
    //If we are on the current page, add the active class to that menu item.
    $classes[] = ($item->current) ? 'active' : '';
    //Make sure you still add all of the WordPress classes.
    $class_names = join( ' ', apply_filters( 'nav_menu_css_class',     array_filter( $classes ), $item, $args ) );
    $class_names=" class="" . esc_attr( $class_names ) . '"';
    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
    $has_children = $wpdb->get_var(
    $wpdb->prepare("
       SELECT COUNT(*) FROM $wpdb->postmeta
       WHERE meta_key = %s
       AND meta_value = %d
       ", '_menu_item_menu_item_parent', $item->ID)
     );
   $output .= $indent . '<li' . $id . $value . $class_names .'>';
   $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';
   //Add attributes to link element.
   $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        ) .'"' : '';
   // Check if menu item is in main menu

if ( $depth == 0 && $has_children > 0  ) {
    // These lines adds your custom class and attribute
    $attributes .= ' class="dropdown-toggle"';
    $attributes .= ' data-toggle="dropdown"';
}
   $item_output = $args->before;
   $item_output .= '<a'. $attributes .'>';
   $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
   // Add the caret if menu level is 0
   if ( $depth == 0 && $has_children > 0  ) {
      $item_output .= ' <b class="caret"></b>';
   }
   $item_output .= '</a>';
   $item_output .= $args->after;
   $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }
}

Platzieren Sie diesen Code dann in Ihrer Vorlage, wo Sie dieses Menü anzeigen möchten.

   <?php

                if ( has_nav_menu( 'primary' ) ) {

                     $defaults = array(
                        'theme_location'  => 'primary',
                        //'menu'            => '',
                         'container'       => 'ul',
                         'container_class' => '',
                         'container_id'    => '',
                         'menu_class'      => '',
                         'menu_id'         => '',
                         'walker'          =>  new My_Walker_Nav_Menu()
                    );

                    wp_nav_menu( $defaults );

                }
            ?>

Damit habe ich mein Problem gelöst.

1384270cookie-checkSo fügen Sie Klasse und Element hinzu -tag im Untermenü von „wp_nav_menu“ in WordPress?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy