向Wordpress菜单ul元素添加类 [英] Add classes to Wordpress Menu ul element

问题描述

我的网站使用WordPress 外观>菜单 来创建导航链接的<ul>和子元素.

My site uses the WordPress Appearance > Menus to create the <ul> and sub elements for my navigation links.

我正在使用functions.php中的一个函数，将navbar-nav类添加到<ul>元素中，如下所示:

I am using a function in functions.php to add the class navbar-nav to the <ul> element like this:

function add_link_atts($atts) {
    $atts['class'] = "nav-link";
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_link_atts');

但是如何添加两个额外的类?即nav-fill和w-100

But how can I add 2 extra classes? namely nav-fill and w-100

我尝试了此操作，但认为它不起作用:

I tried this but don't think its working:

function add_link_atts($atts) {
    $atts['class'] = "nav-link nav-fill w-100";
return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_link_atts');

如何添加这两个额外的类?

推荐答案

要将CSS类添加到WordPress菜单，请首先转到WordPress主题中的外观">菜单".

To add CSS classes to a WordPress menu, first go to Appearance > Menus in your WordPress theme.

接下来，找到屏幕右上方的屏幕选项"选项卡.单击以打开面板，然后选中标有CSS类的框.

Next, find the Screen Options tab at the top right of the screen. Click to open the panel, and check the box labelled CSS Classes.

如果要将类别"添加到菜单中.

If you want to add Class to your Menu.

function main_menu()
{   
    wp_nav_menu( array( 'theme_location' => 'main-menu', 'container'=> false, 'menu_class'=>'nav-link nav-fill w-100'
    ) );

}

如果要将类添加到菜单a标记元素:

if you want to add class to your menu a tag element:

function add_class_to_all_menu_anchors( $atts ) {
    $atts['class'] = 'nav-link nav-fill w-100';

    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_class_to_all_menu_anchors', 10 );

这篇关于向Wordpress菜单ul元素添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！