在WordPress站点中，默认导航菜单的链接点击后要么当前页跳转，要么新标签页打开，无法把内容直接塞进页面里预留的iframe区域。如果希望用户点击菜单项时，目标页面在网站布局内的某个iframe中加载，而不是离开当前框架，就需要借助自定义菜单类和前端脚本拦截跳转。这种方式对主题侵入小，也便于后期维护。
理解WordPress菜单结构与iframe的关系
WordPress后台的菜单管理器允许为每一个菜单项设置「CSS类（可选）」字段，这个字段在前端会被输出为<li>标签的class属性。我们通常利用这个入口，给需要特殊处理的菜单项打上标记，例如iframe-menu-item。这样在前端DOM中，就能用JavaScript准确选中这些节点，而不影响其他普通菜单。
iframe本质上是一个独立的浏览上下文，通过在页面中放置一个<iframe>元素并修改其src属性，就能在不刷新整页的前提下更换内嵌内容。WordPress本身不提供把菜单链接和某个iframe绑定的UI，因此我们必须自己建立「菜单项class → 点击行为 → 改写iframe.src」的映射逻辑。理清这一点，后续代码就只是DOM操作。
还需要注意，WordPress菜单输出的HTML通常由主题或导航块控制，但不管哪种方式，只要保留了class字段输出，我们的方案就通用。有些主题会过滤空class，这时可以在「外观-菜单-屏幕选项」中勾选「CSS类」确保输入框可见。理解这种结构依赖，能避免后期找不到钩子的问题。
具体实现：添加自定义类与拦截脚本
首先在后台「外观-菜单」里，展开某个菜单项，在「CSS类（可选）」中填入iframe-menu-item，保存菜单。然后在页面模板或页脚处放置一个固定的iframe，例如给其id设为site-iframe。接下来用一段JS绑定点击事件，阻止默认跳转并改写iframe地址。
下面是一段可直接放进子主题footer.php或通过「自定义HTML」小工具输出的脚本。它查询所有带指定类的链接，监听点击后提取href并赋值给iframe。
document.addEventListener('DOMContentLoaded', function () {
// 选取所有带 iframe-menu-item 类的菜单链接
var links = document.querySelectorAll('.iframe-menu-item a');
var frame = document.getElementById('site-iframe');
links.forEach(function (link) {
link.addEventListener('click', function (e) {
e.preventDefault(); // 阻止整页跳转
var target = link.getAttribute('href');
if (frame && target) {
frame.src = target; // 将地址写入 iframe
// 可选：滚动到 iframe 区域
frame.scrollIntoView({ behavior: 'smooth' });
}
});
});
});
这段代码没有依赖jQuery，原生API即可运行。如果站点已加载jQuery，也可以改写为$(function(){ $('.iframe-menu-item a').on('click', ...) })形式。重点是e.preventDefault()必须调用，否则浏览器仍会执行链接默认行为。把iframe放在首页固定位置，用户点击菜单后视觉上就像局部刷新。
对于使用块主题（FSE）的站点，可以把上述脚本注册为独立JS文件并用wp_enqueue_script挂载，避免直接改模板。这样在主题更新时不会丢失。同时，菜单类的添加方式不变，仍然是在导航块的音乐菜单项「高级-CSS类」中填写。
处理多级菜单、移动端与边界情况
当菜单存在子项时，只需确保父级和子级都加上同一个类，或者利用CSS选择器.iframe-menu-item匹配其后代链接。如果父级仅用于展开子菜单而不跳转，可以只对子项加类，脚本中的querySelectorAll自然只命中真实链接。多级结构下要避免给父级<a>绑定事件导致展开被拦截，因此建议精准加到具体链接项。
移动端常见问题是导航变为汉堡菜单，点击后菜单收起。我们可以在改写iframe后顺带关闭移动菜单容器，例如添加document.querySelector('.menu-toggle').click()模拟关闭。另外，跨域iframe可能因X-Frame-Options拒绝加载，这时应只把同域或允许嵌入的页面作为目标，否则iframe会空白。可以在后台用自定义字段存「是否允许iframe」标记做校验。
还有一点，如果菜单链接指向外部站点且对方不允许嵌入，应提供降级：在脚本里捕获iframe的load事件，若发生跨域错误则改回新窗口打开。下面示例展示简单的降级处理思路，提升可用性。
frame.addEventListener('load', function () {
try {
// 尝试访问内容，跨域会抛错
var doc = frame.contentDocument;
if (!doc) throw new Error('cross');
} catch (err) {
// 跨域或加载失败，改新标签打开
window.open(frame.src, '_blank');
}
});
通过上述组合策略，WordPress菜单链接就能稳定地自定义为特定iframe目标，既保留原生菜单管理体验，又实现内嵌展示，适合做文档站、后台式门户等场景。