Come aggiungere un sotto-menu a un menu generato da wp_nav_menu utilizzando un plugin

Question

Come aggiungere un sotto-menu a un menu generato da wp_nav_menu utilizzando un plugin

5 nov 2012, 09:57:31

Visualizzazioni: 22.9K

Voti: 13

Ho un menu generato da wp_nav_menu che appare così:

<ul class="nav-menu" id="menu-top-nav">
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43" id="menu-item-43"><a href="http://www.example.com/item1.com">Elemento 1</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44" id="menu-item-44"><a href="http://www.example.com/item2.com">Elemento 2</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45" id="menu-item-45"><a href="http://www.example.com/item3.com">Elemento 3</a></li>
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46" id="menu-item-46"><a href="http://www.example.com/item4.com">Elemento 4</a></li>
</ul>

Voglio modificare il menu sopra aggiungendo un sotto-menu a "Elemento 3" utilizzando il mio plugin. Questo è l'output desiderato:

<ul class="nav-menu" id="menu-top-nav"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43" id="menu-item-43"><a href="http://www.example.com/item1.com">Elemento 1</a></li>
  <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44" id="menu-item-44"><a href="http://www.example.com/item2.com">Elemento 2</a></li>
  <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45" id="menu-item-45"><a href="http://www.example.com/item3.com">Elemento 3</a>
    <ul class="sub-menu">
      <li class="menu-item" id="menu-item-48"><a href="http://www.example.com/child1.com">figlio 1</a></li>
      <li class="menu-item" id="menu-item-49"><a href="http://www.example.com/child2.com">figlio 2</a></li>
      <li class="menu-item" id="menu-item-50"><a href="http://www.example.com/child3.com">figlio 3</a></li>
   </ul>
  </li>
  <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46" id="menu-item-46"><a href="http://www.example.com/item4.com">Elemento 4</a></li>
</ul>

Ho provato i seguenti filtri ma non mi hanno aiutato a ottenere l'output sopra indicato.

wp_setup_nav_menu_item
wp_get_nav_menu_items
wp_nav_menu_items

Soluzione temporanea 1:

add_filter('wp_nav_menu_items', 'my_custom_menu_item', 10, 2);

function my_custom_menu_item($items, $args)
{
    $parent_item_number = 3;
    $pos = nth_strpos($items, '</a>', $parent_item_number) + 4;
    $cat_id = 9;
    $args = array('numberposts' => 5, 'category' => $cat_id);
    $myposts = get_posts($args);
    if (!empty($myposts))
    {
        $str_to_insert = '<ul class="sub-menu">';
        global $post;
        foreach ($myposts as $post) : 
            setup_postdata($post);
            $str_to_insert .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        endforeach;
        $str_to_insert .= '</ul>';

        $items = substr($items, 0, $pos) . $str_to_insert . substr($items, $pos);
    }
    return $items;
}

function nth_strpos($str, $substr, $n, $stri = false)
{
    if ($stri)
    {
        $str = strtolower($str);
        $substr = strtolower($substr);
    }
    $ct = 0;
    $pos = 0;
    while (($pos = strpos($str, $substr, $pos)) !== false)
    {
        if (++$ct == $n)
        {
            return $pos;
        }
        $pos++;
    }
    return false;
}

La soluzione sopra funziona ma penso che non sia il modo corretto per ottenere il risultato desiderato. Mi piacerebbe avere una soluzione migliore da voi.

Tahir Yasin

505

sviluppo plugin menu filtri css sottomenu

Commenti

Wow, quindi nessun'altra risposta a questa domanda? Anche io sto cercando una soluzione semplice qui. Qualcosa che non implichi il parsing di stringhe. Ci deve essere un modo più facile, giusto?

rgin

14 nov 2013 19:58:41

WP supporta di default questa struttura html. La soluzione alternativa richiede solo di cambiare i nomi delle classi css del submenu. Meglio sarebbe riscrivere le tue classi css per la struttura del menu di WordPress.

Foxsk8

21 feb 2014 23:44:05

Tutte le risposte alla domanda

L'hook wp_nav_menu_items è corretto se vuoi aggiungere elementi alla struttura del WP Nav Menu. Vedi l'esempio qui sotto per aggiungere un link statico "Home". Il link è statico, proveniente dalla funzione home_url() e l'ho integrato solo negli argomenti del WP Nav Menu per i valori before e after. L'elemento li è statico, viene modificato in WordPress solo se usi un Walker per questo elemento. L'hook wp_nav_menu_items è all'interno della lista ul. Dopo aver definito la var per il contenuto di questo nuovo elemento, lo aggiungo alla lista predefinita nella var $items, impostata prima dell'output della lista. Ora restituisco semplicemente tutto il contenuto.

add_filter( 'wp_nav_menu_items', 'fb_add_home_link', 10, 2 );
function fb_add_home_link( $items, $args ) {

    $home_item =
            '<li>' .
            $args->before .
            '<a href="' . home_url( '/' ) . '" title="Home">' .
            $args->link_before . __( 'Home' ) . $args->link_after .
            '</a>' .
            $args->after .
            '</li>';

    $items = $home_item . $items;

    return $items;
}

bueltge

17.1K

5 nov 2012 15:40:05

Commenti

Sembra che tu non abbia letto la mia descrizione del problema, quindi la tua soluzione non è ciò che desidero. Non ho bisogno di aggiungere un elemento all'inizio o alla fine del menu, ma ho bisogno di un sotto-menu sotto un elemento genitore specifico. Per favore leggi la domanda, tutto è spiegato molto chiaramente.

Tahir Yasin

5 nov 2012 16:11:56

Scusa, hai ragione; ma spesso è il problema linguistico alla base. Ma cercherò una soluzione.

bueltge

6 nov 2012 00:49:35

Addy 176 · Accepted Answer · 2014-09-11T13:45:47Z

Puoi modificare il tuo menu utilizzando un walker.

include('subMenu.php');
$menu =  wp_nav_menu( array('menu' => 'YOUR-MENU-NAME','menu_class' => 'megamenu','walker' => new subMenu));

Crea un file subMenu.php nella cartella del tema e aggiungi il seguente codice.

<?php
class subMenu extends Walker_Nav_Menu {
    function end_el(&$output, $item, $depth=0, $args=array()) {

    if( 'Item 3' == $item->title ){
        $output .= '<ul class="sub-menu">
        <li class="menu-item" id="menu-item-48"><a href="http://www.example.com/child1.com">child 1</a></li>
        <li class="menu-item" id="menu-item-49"><a href="http://www.example.com/child2.com">child 2</a></li>
        <li class="menu-item" id="menu-item-50"><a href="http://www.example.com/child3.com">child 3</a></li>
        </ul>';
    }
    $output .= "</li>\n";  
    }
}

Addy

176

11 set 2014 13:45:47