[美化]WordPress导航菜单添加角标

要在WordPress导航菜单中添加角标，您可以通过自定义CSS样式来实现。以下是一个简单的方法：1、为菜单项添加自定义CSS类首先，在WordPress后台，打开您的主题文件（通常是function...

要在WordPress导航菜单中添加角标，您可以通过自定义CSS样式来实现。以下是一个简单的方法：

1、为菜单项添加自定义CSS类

首先，在WordPress后台，打开您的主题文件（通常是functions.php），在其中添加以下代码：

function add_menu_badge_class($classes, $item) {
    if (in_array('current-menu-item', $classes)) {
        $classes[] = 'menu-badge'; // 添加自定义CSS类名
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_menu_badge_class', 10, 2);

2、编写CSS样式

接下来，在您的主题样式表（通常是style.css）中添加以下CSS代码来定义角标样式：

.menu-badge {
    position: relative;
}

.menu-badge:after {
    content: 'NEW'; // 角标内容
    position: absolute;
    top: -10px; // 角标位置（根据需要调整）
    right: -10px; // 角标位置（根据需要调整）
    background-color: red; // 角标背景颜色
    color: white; // 角标文字颜色
    padding: 5px; // 角标内边距
    border-radius: 50%; // 角标圆角
}

3、应用样式

保存您的更改并刷新您的WordPress网站，您应该能够看到当前活动菜单项上显示了一个角标。

请注意，以上代码仅提供了一个简单的示例，您可以根据自己的需求和设计来自定义角标的样式和位置。

如果您需要进一步的帮助或有任何疑问，请随时告诉我。