Você quer destacar a página atual no menu de navegação ou na barra lateral? Destacar a página atual facilita a navegação.
As funções de menu do WordPress (wp_nav_menu, wp_list_pages) adicionam automaticamente a classe current_page_item ao li que contém o link ativo. Portanto, tudo o que precisamos fazer é usar a mesma classe para destacar a página atual.
Instruções:
Tudo o que você precisa fazer é adicionar este código ao arquivo style.css do seu tema:
/* Highlight using list element */
li.current_page_item{
background:#999;
color:#fff;
}
/* Highlight using link element */
li.current_page_item a{
text-decoration:underline;
background:#666;
}
Observação: Se esta é a primeira vez que você adiciona trechos de código no WordPress, consulte nosso guia sobre como copiar / colar trechos de código corretamente no WordPress, para não quebrar acidentalmente seu site.
Se você gostou deste trecho de código, considere conferir nossos outros artigos no site, como: Melhores Construtores de Páginas do WordPress (Comparados).
onde encontro o "arquivo style.css do tema" na versão gratuita do wordpress?
Obrigado. Eu procurei em alguns lugares, mas sua solução funcionou. Eu realmente aprecio!
Olá Robert, fico feliz que nossa solução tenha funcionado para você.
Siga-nos no Facebook e no Twitter para mais guias interessantes. 🙂
Funciona bem, obrigado!
Este código funciona se o menu tiver um tear. Caso contrário, ele destaca o link de primeiro nível e todas as subcategorias nele.
Por exemplo, você estaria em “home>sobre>notícias” e ele destacaria todas as categorias de “home” em vez de apenas “notícias”.
Meu tema adiciona a classe CSS `.current-menu-item`.
Pode ser diferente dependendo do tema, mas o processo ainda é o mesmo.
funciona como um encanto e me poupou um tempo valioso. Obrigado
Muito obrigado!!!!
olá senhor, é bom, mas eu quero mudar a cor do link, não a cor de fundo, por favor, ajude-me
A cor seria controlada pela propriedade
color, como:li.current_page_item a{ color:#666; }
acho que você só precisa adicionar isso ao seu CSS e não à página functions.php. Funcionou perfeitamente no meu CSS.
Obrigado
Obrigado, o trecho foi atualizado.