问题

使用Tabs元素时，如果你添加了大量的元素（例如Loop Grid或Loop Carousel元素）或许多元素（例如在每个选项卡中几乎创建了整个页面的内容），可能会遇到性能问题。

这些问题包括：

• 前端性能问题（页面加载缓慢）。
• Elementor编辑器中的性能问题（编辑器操作困难）。

另一个问题是，如果在选项卡内容中使用依赖JavaScript的元素，它们可能无法正常显示。例如，如果你在第一个选项卡之外的任何选项卡中使用循环轮播、Gallery Pro元素或其他依赖JS的元素，可能会遇到错误。

通过本教程中的方法，可以避免这些问题。

优点

• 性能提升：避免前端和编辑器的性能问题。
• SEO优化：每个选项卡内容都将成为独立页面，具有独立的<title>和meta-description，并且没有内容会使用display，这对SEO有积极影响。

适用场景

• 当选项卡包含大量内容时
• 当选项卡中有依赖JavaScript的元素时
• 当SEO是优先事项时（即当选项卡内容对SEO很重要时）

热门网站上的伪标签

“伪标签”是一些热门网站的流行选择，例如Google：

所有这些像标签标题一样，但实际上是指向其它页面的链接。这是一种广泛使用的设计模式。

创建伪标签

使用Nav Menu元素替换它。然后，将菜单项链接到与“标签内容”相对应的不同页面。

创建伪标签

创建页面

首先，为每个选项卡内容创建一个新页面。

这样做可以提高性能并预防错误。

接下来，为这些页面命名并发布。

创建菜单

然后，进入WordPress仪表板，依次点击“外观” > “菜单”，点击“ create a new menu”创建一个新的导航菜单。

然后，在该菜单中添加刚刚创建的所有页面，然后单击“保存”。

创建单页模板

为了确保所有“标签页”保持一致，我们将创建一个单页模板。

这个模板可以链接到某些帖子或自定义文章类型（CPT）的存档。

步骤：

1. 前往WordPress后台，依次点击“模板” > “主题构建器”。

2. 点击“添加新的单页模板”。

添加 WordPress 菜单元素

1. 创建菜单：
   • 登录到 WordPress 仪表板。
   • 前往“外观” > “菜单”。
   • 点击“创建新菜单”，为菜单命名并点击“创建菜单”按钮。
   • 在左侧的菜单项中，选择要添加到菜单的页面、文章、分类或自定义链接，然后点击“添加到菜单”按钮。
   • 可以拖动菜单项来调整顺序。完成后，点击“保存菜单”。
2. 将菜单添加到页面：
   • 前往“页面” > “所有页面”，找到您要添加菜单的页面，然后点击“编辑”。
   • 如果使用的是经典编辑器：
     • 在页面编辑器中，选择一个文本小工具或直接在页面内容中添加短代码 [menu id="menu_id"]，其中 menu_id 是你创建的菜单的ID。
     • 使用Elementor构建器
       • 打开Elementor编辑器，找到“导航菜单”小工具。
       • 将“导航菜单”小工具拖动到页面上的合适位置。
       • 在左侧面板中，选择刚创建的菜单。

3. 自定义菜单样式（可选）：
   • 如果需要自定义菜单样式，可以在主题自定义器中进行设置。
   • 前往“外观” > “自定义” > “额外CSS”，根据需要添加自定义CSS代码。

添加HTML元素

• 打开Elementor编辑器，找到“HTML”小工具。
• 将“HTML”小工具拖动到页面上的导航菜单元素的上方。

找到类似以下代码的部分，并用该代码替换它。样式已调整为与上面演示中的样式相同，这样可以节省更改所有CSS的时间。

<div class="custom-html">
  <!-- 您的自定义HTML代码 -->
  <style>
    /* 添加您自定义的CSS样式 */
    .custom-html {
      /* 示例样式 */
      padding: 10px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
    }
  </style>
  <!-- 示例内容 -->
  <p>这是一个示例HTML元素，位于导航菜单元素的上方。</p>
</div>

可能需要浏览以下CSS并根据需要进行调整。

现在，调整该容器（它应该包含HTML元素和WordPress菜单元素），直到它具有你想要的完美样式。

在需要的地方添加“帖子内容”元素。这就是“标签内容”显示的位置。

发布你的单页模板，并设置条件，使得所有“标签页”都拥有它。

添加内容

现在剩下要做的就是进入每个“标签页”并在其中添加你需要的内容。

总结：

如何通过使用伪标签替代Tabs元素来优化WordPress网站的性能和SEO？本文章讲解了创建伪标签的方法，包括创建新页面、设置导航菜单以及添加自定义HTML元素。这种技术可以避免前端加载和编辑器中的性能问题，确保JavaScript元素正确显示，并通过独立的页面结构提高SEO效果。还说明了如何创建单页模板以保持一致性和优化标签页内容。通过实施这些步骤，可以显著提升网站的用户体验和搜索引擎排名。