Na maioria dos casos, ao usar os menus de navegação do WordPress, você pode simplesmente adicionar classes CSS do painel de administração do WordPress. Recentemente, ao trabalhar em um projeto, nos encontramos em uma situação problemática. Nós queríamos adicionar uma classe personalizada a um item de menu específico somente em páginas de publicação única. Depois de olhar por um tempo, não conseguimos encontrar nenhuma solução. Nosso último recurso foi perguntar no twitter. Otto (@ Otto42) respondeu dizendo que é possível usando filtros, mas não há documentação para o filtro.
Depois de olhar no núcleo por um tempo, descobrimos a solução. O que você precisa fazer é colar o seguinte código em seu arquivo functions.php:
// Filtragem de uma classe no item de menu de navegação
add_filter ('nav_menu_css_class', 'special_nav_class', 10, 2);
função special_nav_class ($ classes, $ item) {
se (is_single () && $ item-> title == 'Blog') {
$ classes [] = 'item atual do menu';
}
retornar $ classes;
}
O código acima é simplesmente verificar se é uma única página de publicação, e o título do item do menu é Blog. Se o critério for combinado, é adicionar uma classe “Current-menu-item”. Precisamos adicionar uma classe personalizada para fazê-la funcionar com este design em que estamos trabalhando.
Se você não sabe já, basicamente, o que queríamos fazer era manter o item do blog destacado no menu quando o usuário estava em uma única publicação. Isso permitiu que eles percebessem que as publicações individuais fazem parte do blog. Isso normalmente não faz sentido, mas no projeto em que estamos trabalhando, ele faz sentido.
Se você estivesse desesperado procurando esse código, esperamos que este artigo tenha ajudado. Você também pode verificar outras variáveis de $ item. Alguns exemplos são: $ item-> ID, $ item-> título, $ item-> xfn
Edit rápido: depois de publicar este artigo no twitter, um dos nossos usuários @dbrabyn apontou que poderíamos ter feito isso com CSS Body classes. Por exemplo:
.single #navigation .leftmenublog div {display: inline-block! important;}
Basicamente, o que fizemos foi adicionar uma div adicional para exibir um ícone de seta no nosso menu. Esta seta só seria mostrada se a classe tivesse passado ou selecionada. Caso contrário, foi configurado para exibir: nenhum; Ao usar a classe do corpo, acabamos de fazer a exibição do elemento div somente para a classe de menu específica.