wp_nav_menu (), como alterar a classe <li>?

16

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>

Consegui entender como personalizar a <ul>tag e me livrar da <div>tag automática . Mas agora, quero personalizar a <li>tag para poder atribuir um classnome diferente para controlar o comportamento específico por meio do CSS. Quando eu uso a wp_nav_menu()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>

Eu quero me livrar do idnas <li>tags e mudar o classpara refletir o nome da página que deseja vincular. Basicamente, quero exibir a mesma coisa que o primeiro trecho 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 em vez de texto sem formatação.

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

theme-development menus navigation cristão
fonte
Aqui você pode adicionar classe diferente em ul> li> a sdtuts.com/wordpress-add-custom-class-in-wp_nav_menu-links
Rameez Soomro

Respostas:

14

Use um andador personalizado , remova o que você não precisa e adicione suas aulas. Aqui está um caminhante 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 classe de caminhantes é mais fácil de entender e controlar na minha opinião.

fuxia
fonte
Obrigado Toscho, acabo de descobrir que, na nova versão do Wordpress (3.3), podemos adicionar classes personalizadas aos itens de menu que resolvem meu problema. Eu tentei o script que você me sugeriu (T5_Nav_Menu_Walker_Simple) que tira tudo do <li>, como podemos controlar quais elementos queremos manter?
Christian
1
@ Christian Você pode mudar o andador conforme necessário, é apenas um exemplo muito básico. Para ver quais informações estão disponíveis, adicione um print_r( $item, TRUE )a cada li. Então decida o que fazer com isso. :)
fuxia
Isso me indicou a direção certa, o que eu precisava era o wp_nav_menu , mas precisava alterar o parâmetro 'container_class', para trabalhar no meu caso de uso específico, onde, em alguma condição, troquei o menu principal por outro, mas precisava do classes sejam consistentes para css.
D. Dan
10

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

Q Studio
fonte
1

Configurando a <li>classe para nav-link, como o bootstrap 4.3 precisa:

function add_menu_link_class($atts, $item, $args)
{
    $atts['class'] = 'nav-link';
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_menu_link_class', 1, 3);

Você também pode desconfigurar o idatributo nessa matriz.

cweiske
fonte
0

Como o último pôster mencionado, você pode adicionar suas próprias classes através de menus de aparência> com classes CSS marcadas nas opções da tela. No caminhante, você pode acessar o que entra lá via:

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

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

<img src="theme/images/navigation/'.$item->classes[0].'" width="48" height="48">
user2080750
fonte