Adicione a classe 'has_children' ao pai li ao modificar Walker_Nav_Menu

22

Estou escrevendo uma classe walker personalizada para o wp_nav_menu e quero poder especificar se um li contém um submenu. Então, quero que minha marcação seja:

<li class="has_children [other-wordpress-classes]">
    <a class="parent-link">Some item</a>
    <ul class="sub-menu">

Eu sei como adicionar e remover as classes bem, eu apenas não consigo encontrar nada para me dizer se o item atual tem itens filhos.

Alguma idéia?

Obrigado antecipadamente.

    
por patnz 10.05.2011 / 09:46
fonte

5 respostas

23

start_el() deve obter essa informação em seu parâmetro $args , mas ela aparece WordPress só preenche isto se $args é uma matriz , enquanto que para os menus de navegação personalizados é um objeto. Isso é relatado em um ticket do Trac . Mas não há problema, você pode preencher isso em si mesmo, se você também substituir o método display_element() no seu walker personalizado (porque este é o lugar mais fácil para acessar a matriz de elemento filho):

class WPSE16818_Walker extends Walker_Nav_Menu
{
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output )
    {
        $id_field = $this->db_fields['id'];
        if ( is_object( $args[0] ) ) {
            $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
        }
        return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }

    function start_el( &$output, $item, $depth, $args ) {
        if ( $args->has_children ) {
            // ...
        }
    }
    
por Jan Fabry 10.05.2011 / 10:45
fonte
7

Atualização: A partir do WordPress 3.7 (outubro de 2013), as classes CSS foi adicionado para indicar itens e páginas do menu filho nos menus de temas - não é necessário usar um andador personalizado, pois ele é tratado no núcleo do WordPress.

As classes CSS são nomeadas menu-item-has-children e page_item_has_children .

Para uma solução completa para qualquer um com pressa (crédito para a resposta anterior de Jan Fabry), veja a implementação completa abaixo.

Saída da navegação no modelo do seu tema:

wp_nav_menu( array(
    'theme_location' => 'navigation-primary',
    'container' => false,
    'container_class' => '',
    'container_id' => '',
    'menu_class' => '',
    'menu_id' => '',
    'walker' => new Selective_Walker(),
    'depth' => 2
    )
);

Em seguida, inclua o seguinte no functions.php :

do seu tema
class Selective_Walker extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
        $id_field = $this->db_fields['id'];

        if ( is_object( $args[0] ) ) {
            $args[0]->has_children = !empty( $children_elements[$element->$id_field] );
        }

        return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }

    function start_el( &$output, $item, $depth, $args ) {
        if ( $args->has_children ) {
            $item->classes[] = 'has_children';
        }

        parent::start_el(&$output, $item, $depth, $args);
    }
}

A saída HTML resultante será semelhante à seguinte:

<ul>
    <li><a href="#">Home</a></li>
    <li class="has_children"><a href="#">About</a>
        <ul class="sub-menu">
            <li><a href="#">Our Mission</a></li>
        </ul>
    </li>
    <li><a href="#">Services</a></li>
    <li class="has_children"><a href="#">Products</a>
        <ul class="sub-menu">
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>                
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>

Para mais informações sobre o uso da classe walker do WordPress, veja Entendendo a Classe Walker .

Aproveite!

    
por rjb 06.03.2013 / 20:30
fonte
2

Esta função é exatamente o que você quer ter. Ele também mostra uma maneira bastante eficaz de modificar itens de menu do navegador. Além disso, você pode abri-lo para funções mais avançadas (por exemplo, tema filho) por meio do filtro de itens:

/**
 * Classes for a navigation named "Topnav" in the nav location "top".
 * Shows examples on how to modify the current nav menu item
 * 
 * @param (object) $items
 * @param (object) $menu
 * @param (object) $args
 */
function wpse16818_nav_menu_items( $items, $menu, $args )
{
    # >>>> start editing

    // examples for possible targets
    $target['name'] = 'Topnav';
    // The targeted menu item/s
    $target['items'] = array( (int) 6 );

    # <<<< stop editing

    // filter for child themes: "config_nav_menu_topnav"
    $target = apply_filters( 'config_nav_menu_'.strtolower( $target['name'] ), $target );

    // Abort if we're not with the named menu
    if ( $menu->name !== $target['name'] ) 
        return;

    foreach ( $items as $item )
    {
        // Check what $item contains
        echo '<pre>'; print_r($item); echo '</pre>';

        // First real world example:
        $item->classes = 'span-4';

        // Second real world example:
        // Append this class if we are in one of the targeted items
        if ( in_array( (int) $item->menu_order, $target['items'] ) )
            $item->classes .= ' last';
    }

    return $items;
}
add_filter( 'wp_get_nav_menu_items', 'wpse16818_nav_menu_items', 10, 3 );

E sim, há - em quase todos os casos - não há necessidade de um andador personalizado.

    
por kaiser 10.05.2011 / 21:36
fonte
1

Se você quiser fazer uma lista suspensa, você pode fazer isso apenas com o css. fazer nav personalizado no WP com crianças, o WordPress atribui automaticamente subclasse de classe para filho ul. Experimente este CSS

    nav li {position:relative;}
   .sub-menu {display:none; position:absolute; width:300px;}
    nav ul li:hover ul {display:block;}

Você pode querer adicionar um pouco de jQuery para apimentar um pouco, mas isso deve dar a você um menu suspenso de trabalho.

    
por alexndm 10.05.2011 / 10:07
fonte
-1
if ( $this->has_children ) {
    $item_output .= 'has_children';
}
    
por yaroslav 13.11.2015 / 19:20
fonte

Tags