3

Estou montando um tema para WordPress, e preciso adicionar uma classe active nas âncoras, o funcionamento é o seguinte:

Eu recupero a URI da página atual e comparo com o texto/valor contido dentro da âncora que é trazida automaticamente pela função wp_list_pages( 'title_li=' ) do próprio WP. Se a condição retornar true, ele adiciona a classe active, segue o código completo.

HTML:

<aside class="sidebar manual">
    <ul class="sidebar list">
        <?php wp_list_pages( 'title_li=' ); ?>
    </ul>
</aside>

JavaScript:

var uri = window.location.pathname.substring(1);
var sidebar = $('.sidebar.manual');
uri.replace('/', '');

sidebar.find('.sidebar.list li > a').each(function() {
    var linkValueTreated = $(this).text().split(' ').join('-').toLowerCase();
    if (uri == linkValueTreated || uri == '') {
        if (uri == '') uri = linkValueTreated;
        $(this).text(linkValueTreated).attr('class', 'active');
    }
});

2 Respostas 2

3

O WordPress já faz isso. Ele adiciona a classe .current_menu_item na opção que corresponde a página atual. Então basta você usar algo assim:

add_filter('nav_menu_css_class' , 'my_special_nav_class' , 10 , 2);
function my_special_nav_class($classes, $item){
    if( in_array('current-menu-item', $classes) ){
        $classes[] = 'active ';
    }
    return $classes;
}
0
0

Depois de várias tentativas finalmente consegui fazer os links funcionarem. O grande problema na realidade era que eu não estava conseguindo alterar o estado da variável uri, devido ao fato dos tipos primitivos em JavaScript serem imutáveis.

Por esse motivo, o interpretador fazia o replace dela (que posteriormente foi substituído pelo split & join), porém, descartava a modificação, e a variável voltava a seu estado inicial. Segue a minha solução abaixo:

var sidebar = $( '.sidebar.manual' );
sidebar.find( '.sidebar.list li > a' ).each(function() {
    var uri = window.location.pathname.substring( 1 );

    // Armazena em uma variável o estado (já modificado) da variável "uri".
    var uriTreated = uri.split( '/' ).join( '' );

    // Trata o valor dentro de cada item da lista
    // referenciando-as como se fossem ID's.
    var linkValueTreated = $( this ).text().split( ' ' ).join( '-' ).toLowerCase();

    // Se estiver acessando a HOME (devido ao fato da URI retornar "/"
    // e a variável "uriTreated" tratar isso removendo a "/" por "")
    // adicione a variável "uriTreated" um valor referenciando
    // a ID da lista trazida pelo WordPress.
    if ( uriTreated == '' ) uriTreated = 'bem-vindo';

    // Se a URI for igual ao nome do item da lista
    // adicione uma classe "active" no link que é
    // referenciado por $( this )
    if ( uriTreated == linkValueTreated ) {
        $( this ).attr( 'class', 'active' );
    }
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .