优化 Elementor 导航菜单：解决 W3C 验证错误与更新兼容性问题

Elementor 导航菜单的 W3C 验证问题

在使用 elementor 构建页面时，其生成的导航（zuojiankuohaophpcnnav>）元素有时会包含一些非标准的 html 属性，例如 migration_allowed 和 migrated。这些属性虽然可能在 elementor 内部用于某些功能逻辑（如图标迁移），但它们并非 html5 规范所允许的属性，因此在 w3c 验证器中会报告为错误。

典型的 W3C 验证错误信息如下所示：

Error: Attribute migrated not allowed on element nav at this point.
<nav migration_allowed="1" migrated="0" role="navigation"
class="elementor-nav-menu--main elementor-nav-menu__container
elementor-nav-menu--layout-horizontal e--pointer-none">

这类错误虽然通常不会直接影响网站的功能或用户体验，但对于追求代码规范性、SEO 优化以及遵循 Web 标准的开发者而言，解决这些验证错误是必要的。

临时解决方案：修改 Elementor 核心文件

一种直接且快速的解决方案是修改 Elementor 插件的核心文件，将导致 W3C 验证错误的属性注释掉。

操作步骤：

1. 通过 FTP 客户端或主机的文件管理器访问您的 WordPress 网站文件。
2. 导航至 wp-content/plugins/elementor/includes/widgets/nav-menu.php 文件。
3. 打开 nav-menu.php 文件，并查找包含 migration_allowed 和 migrated 属性的 $this->add_render_attribute 方法调用。根据 Elementor 版本的不同，这通常在文件的第 1276 行附近。
4. 将这两行属性的定义注释掉。

示例代码修改：

找到以下代码段：

    $this->add_render_attribute( 'main-menu', [
        'migration_allowed' => Icons_Manager::is_migration_allowed() ? '1' : '0',
        'migrated' => $is_migrated ? '1' : '0',
        // Accessibility
        'role' => 'navigation',
    ] );

将其修改为：

    $this->add_render_attribute( 'main-menu', [
        //'migration_allowed' => Icons_Manager::is_migration_allowed() ? '1' : '0', // 注释掉此行
        //'migrated' => $is_migrated ? '1' : '0', // 注释掉此行
        // Accessibility
        'role' => 'navigation',
    ] );

保存并上传修改后的文件。刷新您的网站页面，并重新运行 W3C 验证，这些特定的错误应该会消失。

重要注意事项：

采风问卷

采风问卷是一款全新体验的调查问卷、表单、投票、评测的调研平台，新奇的交互形式，漂亮的作品，让客户眼前一亮，让创作者获得更多的回复。

20

查看详情

• 非更新兼容性： 这种直接修改插件核心文件的方法不是更新兼容的。这意味着每当 Elementor 插件更新时，您的修改将会被覆盖，您需要重新执行上述步骤。这对于维护来说是一个负担，并且可能在更新后导致网站行为异常，如果 Elementor 依赖这些属性进行某些内部逻辑的话。
• 潜在风险： 虽然注释掉这些属性通常不会导致 Elementor 导航菜单的功能性问题，但理论上，如果 Elementor 的某些新功能或内部逻辑在未来开始严格依赖这些属性，可能会引发未知的问题。

长期解决方案：更新兼容的方法

鉴于直接修改核心文件带来的维护问题和潜在风险，我们强烈建议采用更具更新兼容性的长期解决方案。

1. 创建自定义 Elementor 导航菜单小部件

最彻底且更新兼容的解决方案是开发一个自定义的 Elementor 导航菜单小部件。通过自定义小部件，您可以完全控制生成的 HTML 结构和属性，从而避免添加任何非标准的属性。

实现思路：

• 注册自定义小部件： 使用 Elementor 提供的 API 注册一个新的小部件。您可以通过创建自定义插件并在其中定义小部件类来实现。
• 设计小部件控件： 根据需求为导航菜单添加自定义选项，例如选择菜单、布局样式、响应式断点等。
• 渲染 HTML： 在小部件的 render() 方法中，编写自定义的 HTML 输出逻辑。在此阶段，您可以利用 WordPress 的 wp_nav_menu() 函数来获取和渲染菜单，并对其输出进行精细控制，确保只包含符合 W3C 标准的属性和元素。

这种方法虽然需要一定的开发知识（PHP、WordPress 和 Elementor API），但它能提供最大的灵活性和控制力，确保您的网站在未来 Elementor 更新时仍能保持 W3C 验证通过。

2. 探索 Elementor 过滤器和动作 (Hooks)

Elementor 提供了丰富的过滤器 (filters) 和动作 (actions) 机制，允许开发者在不修改核心文件的情况下，改变或扩展插件的行为。

• 查找相关钩子： 尝试查找 Elementor 在渲染导航菜单或其属性时提供的相关过滤器。例如，elementor/widget/render_content 或更具体的钩子可能允许您在内容输出前进行修改。然而，对于直接移除 Elementor 内部通过 add_render_attribute 方法添加的特定属性，可能没有一个直接且易于使用的过滤器。
• DOM 操作（复杂）： 在某些情况下，您可以使用 PHP 的 DOMDocument 类在 Elementor 渲染完小部件内容后，对其 HTML 输出进行解析和修改，移除不必要的属性。这种方法相对复杂，且可能对网站性能产生轻微影响。

对于本教程中讨论的特定属性 (migration_allowed, migrated)，由于它们是在 Elementor 内部通过 add_render_attribute 方法直接添加到元素的渲染属性中的，通过一般的过滤器来移除它们可能比较困难。最稳妥的更新兼容方法仍然是创建自定义小部件。

总结

解决 Elementor 导航菜单的 W3C 验证错误，短期内可以通过修改核心文件来快速实现。然而，这种方法缺乏更新兼容性，且存在一定的维护风险。为了实现长期的、稳定的、符合 Web 标准的解决方案，强烈建议投入精力开发自定义 Elementor 导航菜单小部件。这不仅能彻底解决验证问题，还能提供更精细的控制，使您的网站在 Elementor 更新后依然保持高质量的代码标准。在选择解决方案时，请权衡即时效果与长期维护成本。

以上就是优化 Elementor 导航菜单：解决 W3C 验证错误与更新兼容性问题的详细内容，更多请关注php中文网其它相关文章！