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

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