wp_nav_menu (), como alterar a classe li?

13

Estou criando um menu para o meu site. A estática está assim:

<nav>
  <ul id="menu">
        <li class="item_1"><a href="#">Item 1</a></li>
        <li class="item_2"><a href="#">Item 2</a></li>
        <li class="item_3"><a href="#">Item 3</a></li>
        <li class="item_4"><a href="#">Item 4</a></li>
        <li class="item_5"><a href="#">Item 5</a></li>
        <li class="item_6"><a href="#">Item 6</a></li>
        <li class="item_7"><a href="#">Item 7</a></li>
        <li class="item_8"><a href="#">Item 8</a></li>
    </ul>

Eu consegui entender como personalizar a tag <ul> , para me livrar da tag <div> automática. Mas agora, eu quero personalizar a tag <li> para poder atribuir diferentes class name para controlar o comportamento específico através de CSS. Quando eu uso o wp_nav_menu() , a saída é a seguinte:

    <ul id="menu">
<li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-111"><a href="http://mydomain.com/dummy/fashion/">Fashion</a></li>
    <li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="http://mydomain.comdummy/documentary/">Documentary</a></li>
    <li id="menu-item-113" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-113"><a href="http://mydomain.com/dummy/events/">Events</a></li>
    <li id="menu-item-114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-114"><a href="http://mydomain.com/dummy/portraits/">Portraits</a></li>
    </ul>

Desejo me livrar do id nas tags <li> e alterar o class para refletir o nome da página à qual desejo vincular. Basicamente eu quero produzir a mesma coisa que o primeiro snippet de código neste post.

A razão pela qual eu faço isso é que eu uso imagens personalizadas que são controladas pelo meu CSS insted de texto simples.

Isso é possível? Qual estratégia devo usar para superar esse problema?

    
por Christian 26.12.2011 / 21:02

3 respostas

12

Use um andador personalizado , remova tudo o que você não precisa e adicione suas aulas. Aqui está um walker que eu uso para obter uma lista com marcação limpa: T5_Nav_Menu_Walker_Simple .

Você também pode filtrar 'nav_menu_css_class' ou 'wp_nav_menu_items' . Mas uma aula de walker é mais fácil de entender e controlar na minha opinião.

    
por fuxia 26.12.2011 / 21:48
8

vá para a aparência > menus - selecione o menu que você quer - vá para "opções de tela" no canto superior direito, selecione "classes css" - adicionar uma classe para cada item de menu ..

    
por Q Studio 22.09.2012 / 12:49
0

Como o último post mencionado, você pode adicionar suas próprias classes por meio da aparência > menus com classes CSS marcadas nas opções de tela. No walker, você pode acessar o que você entra lá via:

$item_output .= '<a'. $attributes .' class="'. $item->classes[0].'">';

Eu até usei isso para adicionar imagens pré-nomeadas no menu - um pouco flakey, mas funciona.

<img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">
    
por user2080750 13.06.2013 / 07:36