it-swarm-pt.tech

Por que Custom Nav Menus geram tantas classes em itens de lista? Posso gerenciar isso de alguma forma?

Abaixo está um exemplo. 3 classes anexadas a cada item, exceto o item atual, que tem 6. Posso reduzir isso de alguma forma?

<ul id="menu-global-nav" class="sf-menu">
<li id="menu-item-63" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-5 current_page_item menu-item-63"><a href="#">Home</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-30"><a href="#">Services</a>
   <ul class="sub-menu">
   <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-39"><a href="#">Case Studies</a></li>
   <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-38"><a href="#">Story Discovery</a></li>
   </ul>
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-32"><a href="#">Company</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-29"><a href="#">Why Case Studies?</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="#">Case Study Showcase</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27"><a href="#">Resources</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-26"><a href="#">Online Store</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-25"><a href="#">Contact Us</a></li>
</ul>
6
Ray Gulick

Eu vou contra a maioria desta vez :)

Sim, pode ser uma boa ideia desmembrá-lo. Pessoalmente, estou mantendo apenas as classes de tipo current-xxx e substituindo-as por activee active-parent (para itens pai ou ancestral ativo).

Por quê?

  • em torno da web, active tornou-se a classe padrão para itens de menu ativos (além disso WP tem convenções de nomenclatura de classe inconsistentes entre seus próprios nomes de classe).
  • você começa a escrever menos regras CSS; a largura de banda que você salva pode não ser muito, mas certamente torna o arquivo CSS mais legível

Código atualizado:

// for custom menus 
add_filter('nav_menu_css_class', 'normalize_wp_classes', 10, 2);

// for the page menu fallback (wp_list_pages)
add_filter('page_css_class', 'normalize_wp_classes', 10, 2);

/**
 * @param  $classes array
 * @param  $item object
 * @return array
 */
function normalize_wp_classes(array $classes, $item = null){

  // old classes to be replaced with 'active'
  $replacements = array(
    'current-menu-item',
    'current-menu-parent',
    'current-menu-ancestor',
    'current_page_item',
    'current_page_parent',
    'current_page_ancestor',
  );

  // if any of the classes above are present,
  // return an array with a single class ('active')
  return array_intersect($replacements, $classes) ? array('active') : array();
}

Atualização: Para qualquer pessoa que use este código, a classe active-parent não é mais necessária (a menos que você ainda precise do suporte IE 6). Usando o seletor filho (>) você pode efetivamente estilizar o pai ativo e o filho ativo da maneira que quiser.

7
onetrickpony

Modificado do código de One Trick Pony, pois não funcionou para mim com uma versão atual de WP (3.5.1).

As classes tracejadas adicionadas como WP agora incluem versões sublinhadas e tracejadas das classes de hierarquia de páginas.

Alterado array_diff -> array_intersect como diff retorna todas as classes ao invés da lista filtrada.

// for custom menus
add_filter('nav_menu_css_class', 'normalize_wp_classes', 10, 2);

// for the page menu fallback (wp_list_pages)
add_filter('page_css_class', 'normalize_wp_classes', 10, 2);

/**
 * @param  $classes array
 * @param  $item object
 * @return array
 */
function normalize_wp_classes($classes, $item){

  // old class => new class
  $replacements = array(
    'current-menu-item'     => 'active',
    'current-menu-parent'   => 'active-parent',
    'current-menu-ancestor' => 'active-parent',
    'current_page_item'     => 'active',
    'current_page_parent'   => 'active-parent',
    'current_page_ancestor' => 'active-parent',
    'current-page-item'     => 'active',
    'current-page-parent'   => 'active-parent',
    'current-page-ancestor' => 'active-parent'
  );

  // do the replacements above
  $classes = strtr(implode(',', $classes), $replacements);
  $classes = explode(',', $classes);

  // remove any classes that are not present in the replacements array,
  // and return the result

  return array_unique(array_intersect(array_values($replacements), $classes));
}
4
Nicholas Turbanov

Todas essas classes são úteis para conectar em javascript para algo como superfish, não apenas por causa do IE6.

Além disso, sem uma classe como current_page_item, você não poderá destacar a página atual na navegação.

Flexibilidade é a chave. Adicione todas as classes, únicas para itens exclusivos na lista, dê ao designer final muita flexibilidade no estilo. Mas eu concordo, isso é um monte de classes. Um programador HTML decente, designer poderia fazer o equivalente com muito menos código.

EDIT: Feito mais claro o que eu quis dizer, sem desrespeito pretendido

4
Dan Gayle

A função wp_nav_menu permite modificar o ID e a Classe para o contêiner e o menu. Mas não os elementos do LI.

Se você der uma olhada no source onde está construindo os elementos do LI (função start_el ()); Você pode ver que está usando o filtro nav_menu_css_class; O filtro pegará o array que você deu (de strings) e o usará para construir as tags de classe.

Nota: Pelo que vejo no código, se você passar uma matriz vazia. O Wordpress ainda incluirá o atributo class para o elemento LI, apenas estará vazio.

4
Ryan Gibbons

Eu não recomendaria reduzi-lo. Sim, a marcação pode parecer inchada, mas essa é a maneiraonlyque você pode realmente restringir o estilo se quiser que seu site tenha uma boa aparência, digamos, no IE6. Tenha em mente que o IE6 não suporta nativamente múltiplos seletores (ou seja, li.menu-item.current irá quebrar e usar como padrão o li.current), então se você está fazendo algum CSS sofisticado e quer que ele funcione com o IE6, é melhor ter muitos seletores de classe disponíveis do que não o suficiente.

Então, na realidade, vocêpoderiapare a lista para class = "menu-item" ... mas se você vai ter um menu com mais de um tipo de post, você Vai precisar de menu-item-type-post_type ... e se você quiser fazer uma filtragem mais sofisticada, você também se beneficiará da classe menu-item ##.

Lembre-se, ninguém provavelmente verá o código real por trás do seu site, e ter várias classes definidas não afetará nada.

2
EAMann

@Ray Gulick: Eu odeio mergulhar, mas concordo com @Dan Gale, @EAMann e @ Insanity5902. O "inchaço" não causa nenhum problema tangível e permite que um designer tema o menu de várias maneiras flexíveis.

Estou curioso porque o "inchaço" incomoda você? Eu sei que não é bonito, mas ao lado ninguém vai ver isso. Se é uma preocupação de desempenho que são centenas de outras coisas para resolver primeiro como reduzir solicitações HTTP e raspar os tamanhos de suas imagens, o último dos quais provavelmente terá uma ordem de magnitude maior benefício.

2
MikeSchinkel