ti-enxame.com

Como obtenho minha página de categoria única wp_nav_menu para destacar o pai?

Com o novo sistema wp_nav_menu, é possível adicionar uma categoria como um item de menu, então no meu exemplo eu tenho uma categoria 'news', que é um item de submenu de 'About'.

About (page)
--news (category)
--history (page)
--contact us (page)

O menu que destaca o CSS é selecionado a partir do pai/mãe atual e do ancestral do menu atual, de modo que, quando estou em uma seção de submenu, o item de menu de nível superior (por exemplo, 'About') é destacado quando eu visito 'news'.

Isso funciona bem, exceto quando eu visito um post na categoria "news", que corresponde a is_single () e in_category ('news').

Até onde eu posso ver no Firebug, o 'menu-pai atual' e 'atual-menu-ancestral' é aplicado ao item de menu 'notícias', no entanto, ele não é aplicado ao item de menu de nível superior 'Sobre'.

Há algo que me falta na configuração do meu menu? Eu tentei usar um walker personalizado, no entanto, parece que os antepassados ​​do menu inicial não estão sendo configurados corretamente?

Parece que a minha única solução (sem recorrer a um hack desagradável do JQuery) é criar uma página de 'notícias' que consulte as notícias, em vez de apontar para a 'categoria' de notícias.

Alguma ideia?

Obrigado, dan

Atualização com amostra de código 09/09/2010

Do jeito que é atualmente, visualizar uma única página na categoria Notícias http://www.example.com/2010/09/top-news-did-you-know/ :

<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-28"><a href="http://www.example.com/about/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-71" class="menu-item menu-item-type-taxonomy"><a href="http://www.example.com/category/events/">Events</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent current-menu-parent"><a href="http://www.example.com/category/news/">News &#038; views</a></li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type"><a href="http://www.example.com/contact-us/">Contact Us</a></li>
</ul></li>

Então você vê que "About Us" não tem nenhuma classe CSS para indicar que é pai da página atualmente visualizada.

Como eu acho que deveria funcionar (e para ser honesto, se não fizer isso, então é um bug devido à falta de implementação):

<li id="menu-item-28" class="menu-item menu-item-type-post_type current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-28"><a href="http://www.example.com/about/">About Us</a>
<ul class="sub-menu">
<li id="menu-item-71" class="menu-item menu-item-type-taxonomy"><a href="http://www.example.com/category/events/">Events</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent current-menu-parent"><a href="http://www.example.com/category/news/">News &#038; views</a></li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type"><a href="http://www.example.com/contact-us/">Contact Us</a></li>
</ul></li>

Isso tem as classes CSS current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor anexadas ao item de menu Top level. Funciona desta forma para todas as outras páginas, ou mesmo quando visualiza a categoria em si, mas não uma única página em uma categoria.

2
Dan Smart

Atualmente, isso não é possível se um item de menu de página for pai de um item de menu de categoria.

No seu exemplo if Sobre foi uma categoria e Notícias foi categoria filho então o item de menu Sobre (categoria) seria atribuído:

  • atual-pós-ancestral
  • pai do menu atual
  • atual-pós-pai
2
Chris_O

Eu também estava tendo o mesmo problema. Eu não consegui encontrar um hack de php, então eu usei um javascript:

function findAncestor(){
    var currentParentLi = document.getElementsByClassName("current-menu-parent");
    if(currentParentLi){
        var currentAncestorLi = currentParentLi[0].parentNode.parentNode;
        if(currentAncestorLi && currentAncestorLi.tagName=="LI"){
            currentAncestorLi.className += " current-menu-ancestor";
        }
    }
}

Coloque o código acima em um arquivo .js, faça referência a ele no cabeçalho da sua página e chame a função findAncestor () em window.onload, por exemplo:

<script type="text/javascript">
<!--
window.onload = function() {
    findAncestor()
}
//-->
</script>
1
Meredith Dodge

Você pode achar este fórum de discussão muito informativo, pois estou mais perto da solução.

http://diythemes.com/forums/showthread.php?39258-Category-highlighting-for-single-post-%28-wp-menu-%29 .

Pierre

0
user1060

Eu concordo com Chris_O

Então, eu tenho uma página frontal estática, 2 categoria principal + 1 subcategoria sob essas e outra página. Dirigido por Wordpress 3.0.1 e Tese 1.8, usando o menu Wordpress em vez do menu Tese.

Para destacar a categoria principal que usei: .current-post-ancestor a {background: #FFFFFF;}

(isso destaca a categoria principal quando em um único post)

Para realçar a subcategoria, usei: .sub-menu .current-post-ancestor a {background: # F0EEC2;}

(isso realça a subcategoria - na categoria principal - quando em um único post da subcategoria)

Eu gostaria que as duas "categoria principal" e "subcategoria" fossem em destaque.

Mas não consigo encontrar o truque.

Pierre

0
user1060