将类添加到 Wordpress 菜单中的最后一项-解网

问：

我正在为 Wordpress 制作自己的模板。我只需要将类添加到最后一个菜单项。此菜单如下所示：

<ul class="navbar-nav ms-auto">
  <li class="nav-item ps-4"><a class="nav-link p-0" href="about.html">About</a></li>
  <li class="nav-item ps-4"><a class="nav-link p-0" href="contacts.html">Contacts</a></li>
  <li class="nav-item ps-4 ms-lg-4"><a class="nav-link p-0" href="#">EN</a></li>
</ul>

首先，我为我自己的类更改了标准的 WP 菜单类。

add_filter( 'nav_menu_css_class', 'change_menu_item_css_classes', 10, 4 );
function change_menu_item_css_classes( $classes, $item, $args, $depth ) {
    if ( $args->theme_location === 'top') {
        $classes = [ 'nav-item ps-4' ];
    } else {
        $classes = [];
    }
    return $classes;
}

然后我把类添加到最后一项。

add_filter( 'wp_nav_menu_objects', 'add_additional_class_on_lng_li', 100, 3 );
function add_additional_class_on_lng_li( $items ) {
    if ( ! empty( $items ) ) {
        $items[ count( $items ) ]->classes[] = 'ms-lg-4';
     }
     return $items;
}

但它没有被添加。我认为这是因为“wp_nav_menu_objects”总是先执行，然后应用“nav_menu_css_class”。你能帮我找到另一种将类添加到最后一项的方法吗？谢谢！

更新

我在解决方案方面向前迈进了一步。我只使用一个过滤器。并像这样测试代码。nav_menu_css_class

add_filter( 'nav_menu_css_class', 'change_menu_item_css_classes', 10, 4 );
function change_menu_item_css_classes( $classes, $item, $args, $depth ) {
    if ( $args->theme_location === 'top' && $item->menu_order == $args->menu->count ) {
        $classes = [ 'nav-item ps-4 ms-lg-4' ];
    } else {
        $classes = [];
    }
    return $classes;
}

它只在最后一个菜单项上添加类。但是当我使用此代码时。

add_filter( 'nav_menu_css_class', 'change_menu_item_css_classes', 10, 4 );
function change_menu_item_css_classes( $classes, $item, $args, $depth ) {
    if ( $args->theme_location === 'top') {
        $classes = [ 'nav-item ps-4' ];
    } elseif ( $args->theme_location === 'top' && $item->menu_order == $args->menu->count ) {
        $classes = [ 'nav-item ps-4 ms-lg-4' ];
    } else {
        $classes = [];
    }
    return $classes;
}

它不会将类添加到最后一个菜单项。似乎只在“如果”和“else”起作用，而不是“elseif”。

wordpress的

此外，您的函数将失败，因为在过滤器中，您说参数将传递给您的函数，但您只传递一个 - 并且只接受参数 - 项目和数组。因此，将更改为 or，将其更改为并添加到wp_nav_menu_objects3$itemswp_nav_menu_objects2args312$argsadd_additional_class_on_lng_li($items, $args)

0赞 Nikita Pelevin 6/4/2023

@disinfor我知道 Wordpress admin 中的“CSS 类”。但是这最后一项是由Polylang插件生成的，并且没有字段可以添加自定义类名。我更改了参数的数量。还是不行。当我删除“nav_menu_css_class”时，“wp_nav_menu_objects”起作用。我仍然认为，“wp_nav_menu_objects”首先执行，因为它在 HTML 生成之前更改菜单项。然后执行“nav_menu_css_class”，更改在“wp_nav_menu_objects”处生成的所有类。但我没有看到其他解决方案来替换标准的 WP 菜单类并将类添加到最后一项。

0赞 disinfor 6/4/2023

很高兴你让它工作！此外，很难知道某人对WP了解多少，这就是我提到CSS类框的原因。顺便说一句，如果 Polylang 链接始终是菜单中的最后一个（如果它是动态添加的），您可能会避免添加该类 - 并使用 CSS 以元素为目标，尽管我完全想要添加一个特定的类。祝你好运！:last-of-typeli

0赞 Nikita Pelevin 6/5/2023

@disinfor我对Polylang的某些样式使用了类似的CSS。但是我需要应用于菜单项的类来自 Bootstrap。所以CSS不适合这个目的。

答：

0赞 Nikita Pelevin 6/4/2023 #1

我想我找到了解决方案。从我的 UPDATE 部件代码中，我交换了“if”和“elseif”，这段代码对我有用。

add_filter( 'nav_menu_css_class', 'change_menu_item_css_classes', 10, 4 );
function change_menu_item_css_classes( $classes, $item, $args, $depth ) {
    if ( $args->theme_location === 'top' && $item->menu_order == $args->menu->count ) {
        $classes = [ 'nav-item ps-4 ms-lg-4' ];
    } elseif ( $args->theme_location === 'top' ) {
        $classes = [ 'nav-item ps-4' ];
    } else {
        $classes = [];
    }
    return $classes;
}

上一个：图像未涵盖 Bootstrap 5 中的所有 div

下一个：在不使用库的情况下，如何生成 Blazor 导航栏下拉控件

将类添加到 Wordpress 菜单中的最后一项

Add class to last item in Wordpress menu

评论