Como adicionar submenu a um menu gerado por wp_nav_menu usando o plugin

11

Eu tenho um menu gerado pelo wp_nav_menuqual se parece

<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">Item 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">Item 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">Item 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">Item 4</a></li>
</ul>

Eu quero modificar o menu acima adicionando um submenu ao "Item 3" usando meu plug-in, então abaixo está a saída desejada.

<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">Item 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">Item 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">Item 3</a>
    <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>
  </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">Item 4</a></li>
</ul>

Eu tentei seguir os filtros, mas eles não me ajudaram a obter a saída acima.

wp_setup_nav_menu_item
wp_get_nav_menu_items
wp_nav_menu_items

Solução alternativa 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;
}

A solução acima funciona, mas acho que não é uma maneira adequada de alcançar o resultado desejado. Eu adoraria ter uma boa solução sua.

Tahir Yasin
fonte
Uau, então não há outra resposta para esta pergunta? Também estou procurando uma solução simples aqui. Algo que não envolve a análise de strings. Tem que haver uma maneira mais fácil, certo?
rgin
O suporte do WP cancela essa estrutura html. A solução alternativa só precisa alterar os nomes de classe do submenu css. Melhor é reescrever suas classes de css para a estrutura de menus do wordpress.
precisa saber é o seguinte

Respostas:

2

Você pode modificar seu menu usando o walker.

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

crie um arquivo subMenu.php na pasta do tema e adicione o código abaixo.

<?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
fonte
0

O gancho wp_nav_menu_itemsestá correto se você adicionar itens à estrutura do menu Nav do WP. Veja o exemplo abaixo para adicionar um link estático "Home". O link é estático, a partir da função home_url()e eu coloquei isso apenas nos argumentos do WP Nav Menu para os valores antes e depois. O item li é estático, só é alterado no WordPress, se você usar um Walker para esse elemento. O gancho wp_nav_menu_itemsestá dentro da lista ul. Após definir o var para este novo conteúdo do item, adiciono-o à lista padrão no var $items, configurada antes da saída da lista. Agora, apenas um retorno de todo o conteúdo.

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
fonte
Parece que você não leu minha declaração do problema, portanto sua solução não é a que eu quero, não preciso anexar um item no início ou no final do menu, mas preciso de um submenu em um item pai específico. Por favor, leia a pergunta, todas as coisas são explicadas com muita clareza.
Tahir Yasin
Desculpe, sim, você tem razão; mas frequentemente o problema da linguagem é o pano de fundo. Mas vou ver uma solução.
bueltge