Подсветка активного пункта меню wordpress?

Question

[xdvz]

Добрый день!

Несколько дней ломаю голову, как реализовать эту функцию в "кастомном" меню с якорями.
Знатоки, подскажите, куда смотреть и что поменять.

Ввод меню в хидер

<div class="catalog_menu">
    <div class="container">


        <?php
        wp_nav_menu( array(
            'theme_location'  => 'second',
            'menu'            => 'main_menu',
            'container'       => 'div',
            'container_class' => '',
            'container_id'    => '',
            'menu_class'      => 'catalog_menu_wrap',
            'menu_id'         => '',
            'echo'            => true,
            'fallback_cb'     => 'wp_page_menu',
            'before'          => '',
            'after'           => '',
            'link_before'     => '',
            'link_after'      => '',
            'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
            'depth'           => 0,
            'walker'          => '',
        ) );
        ?>

    </div>
</div>

На странице

<div class="cat_menu">
 <?php if(pll_current_language() == 'en') { ?>
    <?php
      wp_nav_menu(array(
        'theme_location' => 'primary_cat',
        'menu_class' => 'menu',
        'menu' => 'меню_категорий_en',
        'container' => false
      ));
      ?>
    <?php  }
else if(pll_current_language() == 'ru') { ?>
<?php
      wp_nav_menu(array(
        'theme_location' => 'primary_cat',
        'menu_class' => 'menu',
        'menu' => 'меню_категорий',
        'container' => false
      ));
      ?>
          <?php  }  
        ?>   

</div>

<div class="cat_items">
    <?php
$_terms = get_terms( array(
    'taxonomy'     => 'catalog_category',
    'orderby'      => 'name',
    'order'        => 'DESC',
) );

foreach ($_terms as $term) :

    $term_slug = $term->slug;
    $_posts = new WP_Query( array(
                'post_type'         => 'catalog',
                'tax_query' => array(
                    array(
                        'taxonomy' => 'catalog_category',
                        'field'    => 'slug',
                        'terms'    => $term_slug,
                    ),
                ),
            ));


    if( $_posts->have_posts() ) :

        echo '<div id="'. $term->slug .'" class="cat_item">';
        echo '<h2 class="cat_title">'. $term->name .'</h2>';
        echo '<div class="cat_desc">';

Скрол к якорю

<script>
    $(function(){
  $('a[href^="#"]').on('click', function(event) {
    event.preventDefault();

    var sc = $(this).attr("href"),
        dn = $(sc).offset().top - 100;
    $('html, body').animate({scrollTop: dn}, 1000);
  });
});
</script>

Comments

[Владимир Брумер]

Решение есть от самого движка: использовать классы движка

.current-menu-item > a,.current-menu-ancestor > a,.current_page_item > a,.current_page_ancestor > a{border:solid 2px #000;....

Answer 1

[Павел]

Ну, если есть -

<script>
    $(function(){
  $('a[href^="#"]').on('click', function(event) {
    event.preventDefault();

    var sc = $(this).attr("href"),
        dn = $(sc).offset().top - 100;
    $('html, body').animate({scrollTop: dn}, 1000);
  });
});
</script>

Не вариант по этому же клику просто добавлять класс куда нужно, например на саму ссылку:
$(this).addClass('currentActive');

Если нужно только на пункт меню, можете по условию добавлять класс через JS, или задать стили для класса только меню....