Question

I use a CSS framework and a custom menu for wordpress :

<?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;       
        ?>

Result :

    <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>

And what I want : (If I'm on the page "Page 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>

I don't find hook, walker_menu, or an other solution to add a class on the current menu (like "current-menu-item on the original Wordpress menu)

Any idea ?

Thank you !

Answer 1

您是否有理由在活动时使用其他课程？您可以使用:active

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

然后你的CSS就像：

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

Answer 2

尝试类似下面的内容

添加到$menuParameters current arg。

 $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。如果你删除它，我会期望以下结果：

<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>

Wordpress：自定义菜单，添加类＆＃34;当前菜单项＆＃34;在<a> tags

2 个答案: