WordPress菜单插入短代码显示为纯文本，如何显示Skype SVG图标？

嘿，这个问题我之前也踩过坑——WordPress菜单系统默认只会直接输出文本内容，不会自动触发短代码的解析逻辑，所以你把短代码粘到菜单的Link Text里，它自然只会显示成纯文本。下面给你两个实用的解决方案，按需选就行：

方案一：用钩子强制解析菜单中的短代码 #

这是最稳妥的方法，只需要在主题的functions.php里加一段代码，让WordPress在输出菜单项标题时自动处理短代码：

// 让菜单支持短代码解析
add_filter('nav_menu_item_title', 'enable_shortcode_in_menu', 10, 4);
function enable_shortcode_in_menu($title, $item, $args, $depth) {
    // 可选：指定只解析特定位置的菜单（比如主菜单，替换成你的菜单位置名）
    if ($args->theme_location === 'primary') {
        return do_shortcode($title);
    }
    // 其他菜单保持原样输出
    return $title;
}

代码说明： #

• nav_menu_item_title钩子会在每个菜单项标题输出前被调用，我们在这里用do_shortcode()函数把标题里的短代码转换成实际的SVG图标内容。
• 如果你的网站有多个菜单，可以通过theme_location指定只解析特定菜单（比如主菜单primary），避免全局解析可能带来的意外问题。如果不需要限制，直接去掉if判断，返回do_shortcode($title)即可。

方案二：直接在菜单中插入SVG HTML（无需短代码） #

如果你的短代码只是单纯输出SVG Sprite的图标，也可以跳过短代码，直接在菜单里插入HTML代码：

1. 进入Appearance > Menus，点击右上角的「Screen Options（屏幕选项）」。
2. 勾选「Custom Links」下的「Title Attribute」（确保能正常编辑链接文本）。
3. 添加一个自定义链接（URL可以填#或者Skype的跳转链接，比如skype:your-username?call）。
4. 在「Link Text」里直接粘贴你的SVG代码，比如：

   <svg class="skype-icon" width="24" height="24"><use xlink:href="#skype-sprite-id"></use></svg>
   

   记得替换#skype-sprite-id为你实际的SVG Sprite中Skype图标的ID。

注意事项： #

• 有些主题可能会自动转义HTML代码，导致SVG显示不出来，这时候还是方案一更靠谱。
• 确保你的SVG Sprite已经正确加载到网站的头部或底部，不然图标会显示不出来。

最后提醒：修改完代码后记得清空网站缓存（包括浏览器缓存），不然可能看不到实时效果哦！

内容的提问来源于stack exchange，提问作者zakharov.arthur