WordPress：自定义菜单，在<a>标签</a>上添加“当前菜单项”类

Question

我为CSSpress使用CSS框架和自定义菜单：

<?php
        $menuParameters = array(
            'theme_location' => 'menu-1',
            'menu_id' => 'primary-menu',
            'container'       => false,
            'echo'            => false,
            'items_wrap'      => '%3$s',
            'depth'           => 0,
        );

        $output = strip_tags(wp_nav_menu($menuParameters),'<a>');
        $output = preg_replace('/<a/', '<a class="nav-item"', $output);
        echo $output;       
        ?>

结果：

    <div class="nav-right nav-menu">
<a class="nav-item" href="/">Page1</a>
<a class="nav-item" href="/"> Page2</a>
<a class="nav-item" href="/"> Page3</a>
    </div>

而我想要的是：（如果我在“页面2”页面上）

    <div class="nav-right nav-menu">
<a class="nav-item" href="/">Page1</a>
<a class="nav-item current-menu-item" href="/"> Page2</a>
<a class="nav-item" href="/"> Page3</a>
    </div>

我找不到在当前菜单上添加类的钩子，walker_menu或其他解决方案（例如原始Wordpress菜单上的“ current-menu-item”）

任何想法 ？

谢谢 ！

Answer 1

在活动时要使用其他类是否有原因？ 您可以使用:active

请参阅： https ： //www.w3schools.com/cssref/sel_active.asp

然后您的CSS就像：

.nav-item :active{ background:yellow;}

Answer 2

试试下面的东西

将current参数添加到$menuParameters中。

 $menuParameters = array(
            'theme_location' => 'menu-1',
            'menu_id'        => 'primary-menu',
            'container'      => false,
            'current'        => max( 1, get_query_var('paged') ), // added this
            'echo'           => false,
            'items_wrap'     => '%3$s',
            'depth'          => 0,
        );

    $output = strip_tags(wp_nav_menu($menuParameters),'<a>');

    $output = preg_replace('/<a/', '<a class="nav-item"', $output);

    $output = preg_replace('/current', 'current-menu-item', $output); // added this

    echo $output;       
    ?>

如果这不起作用，请稍微玩$output的第二个preg_replace或将其删除，然后仅在活动项目只有current类而不是current-menu-item时引用该活动current-menu-item 。 如果将其删除，我期望得到以下结果：

<div class="nav-right nav-menu">
    <a class="nav-item" href="/">Page1</a>
    <a class="nav-item current" href="/"> Page2</a>
    <a class="nav-item" href="/"> Page3</a>
</div>