Deseja destacar a página atual na navegação ou no menu da barra lateral? O destaque da 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 temos de fazer é usar a mesma classe para destacar a página atual.
Instruções:
Tudo o que você precisa fazer é adicionar esse 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 corretamente trechos de código no WordPress para não danificar acidentalmente seu site.
Se você gostou desse snippet de código, considere dar uma olhada em nossos outros artigos no site, como: Melhores construtores de páginas do WordPress (comparados).
where do i find the “theme’s style.css file” on the wordpress free version?
Thank you. I have looked in a few places, but your solution worked. I really appreciate it!
Hey Robert, glad our solution worked for you.
Please follow us on Facebook and Twitter for more interesting guides. 🙂
Work’s fine thanks !
This code works if menu has one tear. Otherwise it highlights first level link and all sub categories in it.
For example you would be at “home>about>news” and it would highlight all “home” categories instead of just “news”.
My theme adds the CSS class `.current-menu-item`.
Might be different depending on the theme, but the process is still the same.
works like a charm, and saved me some valuable time. Thanks
Thank you so much!!!!
halo sir, its good but i want to change link color not back ground color plz help me
The color would be controlled by the
colorproperty, such as:li.current_page_item a{
color:#666;
}
i think you only need to add this to your CSS and not the functions.php page. It worked just fine in my CSS.
Thank you
Thanks, the snippet has now been updated.