4种在Wordpress文章添加内容目录方式

文章目录是什么？为什么要使用文章目录功能？

TOC目录是什么？Table of content，内容目录。对于SEO的好处：跳转链接，提升用户体验，增强页面结构，Google SERP直接显示TOC片段（结构化数据），所以在长篇内容，文章上启用wordpress toc 目录是提升seo效果非常好的方式。

几种常见的文章目录实现方式

Fixed TOC教程

Fixed TOC官方购买，21美金+3美金手续费。

也可以从我这边购买（20美金/个，终身使用），有两个库存。添加鸭老师微信

官方购买插件需要手续费3美金。

购买完成直接进入后台点击下载按钮。

选择all files & documentation。

打开压缩包，里面有新版（tocer），旧版（fixed toc），推荐安装旧版，比较稳定。

旧版解压出来。

wordpress后台上传安装包，安装完成启用。

Fixed TOC设置。

第一个选项必须开。

post types看网站类型，如果是博客站只开post即可，B2B，B2C，page和post两个都打开。

Headings，建议勾选H2,H3就好。

其他保持默认。

Convert Heading into ID：把heading转化为HTML ID，建议外贸网站都打开，国内站就不需要打开。

Display In Widget就如下图。

点击外观appearance，进入外观自定义界面，选择Fixed TOC plugin，开始定制你的TOC。

位置：TOC展示的位置选择

触发按钮：展开，折叠，隐藏按钮，样式设置等。

内容：尺寸，字体，样式，形状，边框

内容头部：目录标题，颜色，字体

内容列表：字体，列表样式（黑点，数字，罗马数字，无样式），嵌套列表，加粗一级列表，启用折叠展开子目录，手风琴模式等等

效果动画：展开，隐藏过渡动画。

颜色主题：各个部分的颜色选择

自定义CSS:改变样式，动画效果等。

PC端折叠样式。

展开样式。

悬浮按钮。

隐藏样式。

侧边展开形式。

移动端悬浮TOC按钮。

移动端展开。

SEO插件 – Rank Math

Rank Math实现HTML目录方式：

常规设置，选择block就看到TOC设置入口。

按需求设置。

在需要的地方添加一个空段落。

空段落中输入 /toc选择TOC by rank math。

HTML目录设置成功。

细节设置，可以更改锚点链接，文字，设置隐藏或展示，也可以重新设定排除的Heading。

编辑器 – Gutenberg/Elementor

Gutenberg原生TOC模块。

Elementor编辑器自带的table of contents元素。

HTML+JS实现wordpress文章目录

头部或者文章任意位置添加以下代码。

<button id="toggle-toc">隐藏</button>
<div id="toc">
  <strong>文章目录</strong>
  <ul id="toc-list"></ul>
</div>

文章底部用HTML添加JS代码。

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const toggleButton = document.getElementById("toggle-toc");
    const toc = document.getElementById("toc");
    const tocList = document.getElementById("toc-list");

    // 目录展开/收起功能
    toggleButton.addEventListener("click", function () {
      if (toc.style.display === "none") {
        toc.style.display = "block";
        toggleButton.textContent = "隐藏";
      } else {
        toc.style.display = "none";
        toggleButton.textContent = "文章目录";
      }
    });

    // 自动抓取 H2/H3 并生成目录
    let headers = document.querySelectorAll("h2, h3");
    let lastH2 = null; // 记录上一个 H2，用于嵌套 H3

    headers.forEach((header, index) => {
      let id = "heading-" + index;
      header.setAttribute("id", id); // 给标题添加 ID
      let li = document.createElement("li");
      let link = document.createElement("a");
      link.href = "#" + id;
      link.textContent = header.textContent;
      li.appendChild(link);

      // 处理 H3 的嵌套情况
      if (header.tagName === "H2") {
        lastH2 = li;
        tocList.appendChild(li);
      } else if (header.tagName === "H3" && lastH2) {
        let subList = lastH2.querySelector("ul");
        if (!subList) {
          subList = document.createElement("ul");
          lastH2.appendChild(subList);
        }
        subList.appendChild(li);
      } else {
        tocList.appendChild(li);
      }
    });
  });
</script>

外观-自定义-额外CSS，添加自定义CSS。

#toc {
  display: block; /* 默认展开 */
  background: #f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

#toggle-toc {
  cursor: pointer;
  padding: 8px 12px;
  background: #046bd2;
  color: white;
  border: none;
  border-radius: 4px;
}

#toc-list {
  padding-left: 0;
}

#toc-list li {
  list-style: none;
  font-size: 14px;
  margin: 5px 0;
}

#toc a {
  text-decoration: none;
  color: #046bd2;
}

#toc a:hover {
  text-decoration: underline;
}

/* H3 标题缩进 */
#toc ul ul {
  padding-left: 15px;
  font-size: 13px;
}

完成之后的样子。