it-swarm.com.de

Benutzerdefiniertes HTML zum letzten Untermenüelement hinzufügen

Ich füge meinem WordPress-Theme ein benutzerdefiniertes Menü hinzu. Ich muss dem letzten Untermenüelement benutzerdefiniertes HTML hinzufügen - bevor das primäre Untermenü geschlossen wird. </ul>

Ich habe mein neues Menü registriert

//functions.php
function register_my_menus() {
register_nav_menus(
array(
  'accessories'  => __( 'Accessories Menu' )
)
);
}

und ich habe mein neues Menü in meinem Header aufgerufen

//header.php
wp_nav_menu( array( 'theme_location' => 'accessories', 
                    'walker'   => BENZ_Walker_Nav_Menu_ACC                 
        ) ); 

Ich habe versucht, einen neuen Walker zu ändern, um dieses Div zu meinem Untermenü hinzuzufügen. Dabei wurde jedoch das Div für jeden Menüpunkt hinzugefügt

// functions.php ==this adds one div foreach li==comment out
class BENZ_Walker_Nav_Menu_ACC extends Walker_Nav_Menu {

function start_lvl(&$output, $depth) {
    $output .= '<ul class="sub-menu">';
}
  function end_lvl(&$output, $depth) {
        //$output .='<div>the div that I want to show only once</div></ul>';
        $output .= '</ul>';
        }
    }       
}

Wieder ist das obige Beispiel auskommentiert, weil es nicht für meine Bedürfnisse funktioniert

Ich habe auch versucht, einige HTML-Dateien am Ende des Menüs mit den folgenden zwei Beispielen anzufügen ...

//functions.php == this shows custom html after the top-level `<li>`
function BENZ_menu_extras($menu, $args) {
if( 'accessories' !== $args->theme_location )
    return $menu;
return $menu . '<div>the div that I want to show only once</div>';
}
add_filter('wp_nav_menu_items','BENZ_menu_extras', 10, 2);

dies ist sehr nahe, aber ich brauche nicht das HTML in der obersten Hierarchieebene im Menü, sondern eine Ebene tiefer.

Ich habe auch dieses Beispiel ausprobiert.

function add_last_nav_item($items, $args) {
if (!is_admin() && $args->theme_location == 'accessories') {
$items .= '<div>the div that I want to show only once</div>';
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'add_last_nav_item', 10, 2 );

dies entspricht jedoch dem ersten aufgeführten Beispiel ...

Wie können wir eine der obigen Funktionen mit der Variablen $depth verwenden, um mein div hier hinzuzufügen?.

<div class="accessories menu">
  <ul id="menu-accessories" class="menu sf-menu">
    <li id="menu-item-1905">
      <a class="sf-with-ul" href="http://#">ACCESSORIES</a>
      <ul class="sub-menu">
        <li id="menu-item-1897">
          <a class="sf-with-ul" href="http://#">stuff</a>
          <ul class="sub-menu">
            <li id="menu-item-1899">stuff1</li>
            <li id="menu-item-1898">stuff1</li>
          </ul>
        </li>
        <li id="menu-item-1903">
          <a class="sf-with-ul" href="http://#">other stuff</a>
          <ul class="sub-menu">
            <li id="menu-item-1906">other stuff1</li>
            <li id="menu-item-1907">other stuff2</li>
          </ul>
        </li>
        <li id="menu-item-1911">
          <a class="sf-with-ul" href="http://#">blue stuff</a>
          <ul class="sub-menu">
            <li id="menu-item-1912">blue stuff 1</li>
            <li id="menu-item-1913">blut stuff 2</li>
          </ul>
        </li>
    <!--This is where i want to put one div so its in the main submenu-->
    <div>the div that I want to show only once</div>
      </ul>
    </li>
  </ul>
</div>

https://jsfiddle.net/qpbpofpp/3/

Danke fürs Lesen.

--BEGIN EDIT-- Dies ist die nächste, die ich bekommen habe ..

 //functions.php
 class BENZ_Walker_Nav_Menu_ACC extends Walker_Nav_Menu {
 function start_lvl(&$output, $depth) {
       $output .= '<ul class="sub-menu">';
}
function end_lvl(&$output, $depth) {
    if ($depth = 2){
        $output .= '<div>the div that I want to show only once</div></ul>';
    } else {
        $output .= '</ul>';
           }
    }    
}

außer für jetzt zeigt nach allen drei Untermenüs, ich brauche es nur einmal zu zeigen

5
RobBenz

Ok, also stellt sich heraus, dass $depth in der end_lvl() -Funktion standardmäßig bei 0 beginnt, wenn es sich um ein Untermenü handelt, und mit zunehmender Tiefe inkrementiert. Wir müssen also testen, ob {$depth} gleich 0 ist, um ihn nur auf die ersten Untermenüs anzuwenden:

function end_lvl( &$output, $depth, $args ) {
    if( 0 == $depth ) {
        $output .= '<div>the div that I want to show only once</div>';
    }

    $indent = str_repeat( "\t", $depth );
    $output .= "{$indent}</ul>\n";
}
5
Howdy_McGee

Der Filter für wp_nav_menu_items sollte der Weg sein, dies zu tun. Führen Sie Folgendes aus (hacken Sie einfach vorübergehend in das Thema header.php:

function add_last_nav_item($items, $args) {
  // if (!is_admin() && $args->theme_location == 'accessories') {
    $items .= '<div>the div that I want to show only once</div>';
  // }
  return $items;
}
add_filter( 'wp_nav_menu_items', 'add_last_nav_item', 10, 2 );

wp_nav_menu();

Sie sollten genau den Effekt sehen, den Sie beschreiben. Wenn Sie sehen, dass dieser Code auf jeder Ebene ausgegeben wird, stimmt möglicherweise etwas mit Ihrem benutzerdefinierten Walker nicht. Wenn Sie die Quelle anschauen , werden Sie feststellen, dass dieser Filter in Core einmal angewendet wird, nachdem der Menübaum "durchgegangen" wurde. Es sollte nicht mehr als ein einzelnes Element am Ende der bereits vorhandenen Elemente für das Menü hinzugefügt werden.

Um zu steuern, auf welcher Ebene Ihr Code angezeigt wird, ist ein modifizierter Walker der beste Ansatz:

class BENZ_Walker_Nav_Menu_ACC extends Walker_Nav_Menu {
  private $insert = true;
  function start_lvl(&$output, $depth) {
    $output .= '<ul class="sub-menu">';
  }
  function end_lvl(&$output, $depth) {
    if ($depth = 2 && $this->insert === true){
      $output .= '<div>the div that I want to show only once</div></ul>';
      $this->insert = false;
    } else {
      $output .= '</ul>';
    }
  }    
}

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

Beachten Sie die Klasseneigenschaft $insert. Dies wird beim ersten Einfügen auf false gesetzt, um sicherzustellen, dass es nur einmal angezeigt wird.

4
s_ha_dum