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

最近的一个wordpress外贸建站项目中遇到一个需求，导航菜单下方要显示文字描述，如上图所示。这个功能其实挺简单，因为wordpress本身就自带了。

开启步骤

打开wordpress网站后台，打开【外观】-【菜单】，然后点开右上角的【显示选项】，展开之后勾选【描述】

接下来展开任意一个导航菜单项，可以看到里面出现了一个描述框，把描述填写进去就可以了。

但是到这里并不是就万事大吉了，这个功能是wordpress原生的，但是它是否能在前端显示还得看主题的脸色，有些主题在设置之后就可以显示，但有很多主题可能不行，特别是使用Mega Menu超级菜单之后。

这并不是什么问题，而且这个功能本身并没多大用，添加菜单描述之后个人感觉反而会占用太多空间，可能显得很杂乱。

---

上面这个建站项目中，客户暂时还没有要求一定得添加这个功能，但是我私下研究并测试了一下，有两个方案。（这里就以Mega Menu超级菜单为例）

方案一：使用页面编辑器

先说最简单的，Mega Menu超级菜可以直接调用页面编辑器内容，比如可以调用Elementor的模板短代码。有些主题也有类似功能，比如Blocksy高级版自带的内容块也可以，在内容块中用古腾堡编辑器制作一个Mega Menu菜单就可以了。

因为这里的菜单Mega Menu超级菜相当于就是一个页面了，编辑页面时，你一行大字输入菜单标题，下面再加一行小字写一些描述就可以了。

方案二：使用代码

如果还是要使用主题自带的Mega Menu超级菜单+原生的菜单功能，也有办法。还是经Blocksy主题为例，可以使用下面的代码（AI协助写的）。

/**
 * 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 );

代码可以添加到wp code之类的插件中，然后启用。此时只要你在后台的菜单项目中填写了描述，前端的Mega Menu菜单中就会显示描述内容了。

如果觉得默认的描述文字大小、颜色不合适，还可以使用下面的CSS来调整。

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

打开【外观】-【自定义】-【额外CSS】，把上面的CSS代码添粘贴进去就可以了，里面的颜色和字体数值可按需修改。

---

好了，今天就分享到这吧，还是觉得没啥用，哈哈，先保留在这，万一后来客户一定要加，我好回来看。