开启WordPress菜单描述功能(附填写后不生效的解决方案）

在 WordPress 外贸建站项目中，常需在导航菜单下方显示文字描述。该功能 WordPress 原生支持，但前端是否显示取决于主题兼容性，尤其在启用 Mega Menu（超级菜单）时可能失效。以下提供两种解决方案。

开启原生描述功能

进入 WordPress 后台，依次点击【外观】-【菜单】，点击右上角【显示选项】，勾选【描述】复选框。

展开任意菜单项，即可看到新增的描述输入框。填写内容并保存后，若主题支持，前端将自动显示描述。需注意，部分主题或 Mega Menu 插件可能忽略此设置，且过多描述可能导致布局杂乱。

方案一：利用页面编辑器构建

针对 Mega Menu 超级菜单，可直接调用页面编辑器内容。例如，使用 Elementor 模板短代码，或利用 Blocksy 高级版的内容块功能，通过古腾堡编辑器制作菜单。

由于 Mega Menu 本质上等同于一个页面区域，编辑时可直接排版：首行大字作为菜单标题，次行小字撰写描述，灵活控制样式与布局。

方案二：添加代码强制输出

若需保留主题原生 Mega Menu 结构并显示描述，可通过代码实现。以 Blocksy 主题为例，将以下代码添加至 WP Code 等代码管理插件中：

/**
 * Blocksy Mega Menu: 强制输出菜单项 Description
 */
add_filter( 'walker_nav_menu_start_el', function( $item_output, $item, $depth, $args ) {
    // 只对主菜单生效，可按需改 theme_location
    if ( ! empty( $item->description ) ) {
        // 把描述插在 </a> 前面或后面，包一层 span
        $desc = '<span class="ct-menu-item-description">' . esc_html( $item->description ) . '</span>';
        // 插在 </a> 闭合前，或 $item_output 末尾，看主题结构
        $item_output = str_replace( '</a>', '</a>' . $desc, $item_output );
    }
    return $item_output;
}, 10, 4 );

启用代码后，后台填写的菜单描述将在前端 Mega Menu 中显示。若默认样式不符，可添加以下 CSS 进行微调：

.ct-menu-item-description {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: -8px;
    line-height: 1.4;
}

操作路径：【外观】-【自定义】-【额外 CSS】。可根据实际需求修改字体大小、颜色及间距参数。