当前位置：首页 > CMS教程 > 正文

如何快速创建WordPress目录树

使用插件自动生成目录树，或在区块编辑器中添加目录区块，也可手动编写HTML列表代码实现多级导航结构。

在WordPress中创建目录树（TOC）能提升内容可读性、优化SEO并增强用户体验，以下是两种主流方法,根据技术能力选择：

插件法（推荐新手）

插件选择原则：优先选更新频繁、高评分、兼容性强的主流插件。
推荐插件：

  1. Table of Contents Plus

    • 超过10万安装量，评分4.3+（⭐️⭐️⭐️⭐️）
    • 操作步骤：
      • 安装插件：后台 → 插件 → 新增 → 搜索“Table of Contents Plus” → 安装启用
      • 自动生成：编辑文章时，在正文中插入短代码 [toc]
      • 自定义设置：
        • 位置：设置 → TOC+ 中调整显示位置（如标题前/后）
        • 层级：支持H2-H6标题，默认抓取H2-H3
        • 样式：修改颜色、边框等匹配网站主题
    • 优势：自动锚点跳转、移动端自适应、支持多语言

  2. Easy Table of Contents

    如何快速创建WordPress目录树 第1张

    • 专为深度内容设计，可排除特定页面
    • 特色：自动为长文章生成TOC，阈值可设（如≥3个标题时触发）

手动代码法（适合开发者）

适用场景：追求轻量化、避免插件依赖或深度定制样式。
步骤：

  1. 添加PHP函数到主题
    打开主题的 functions.php 文件（务必用子主题，避免更新丢失），插入代码： 

    function auto_generate_toc($content) {
    if (is_single()) {
        // 正则匹配文章中的标题（H2-H4）
        preg_match_all('/<h([2-4])(.*?)>(.*?)<\/h[2-4]>/i', $content, $headings);
        if (!empty($headings[0])) {
            $toc = '<div class="toc-wrapper"><ul class="toc-list">';
            foreach ($headings[0] as $key => $heading) {
                $level = $headings[1][$key];
                $title = strip_tags($headings[3][$key]);
                $anchor = 'section-' . $key;
                $toc .= "<li class='toc-item toc-level-{$level}'><a href='#{$anchor}'>{$title}</a></li>";
                // 为标题添加锚点ID
                $content = str_replace($heading, '<h' . $level . ' id="' . $anchor . '"' . $headings[2][$key] . '>' . $title . '</h' . $level . '>', $content);
            }
            $toc .= '</ul></div>';
            // 在文章开头插入目录
            $content = $toc . $content;
        }
    }
    return $content;
}
add_filter('the_content', 'auto_generate_toc');

  2. 添加CSS样式
    在主题的 style.css 中自定义目录树外观：

    如何快速创建WordPress目录树 第2张

    .toc-wrapper {
    background: #f9f9f9;
    border-left: 3px solid #0073aa;
    padding: 15px;
    margin-bottom: 30px;
}
.toc-list { list-style: none; padding-left: 0; }
.toc-item { margin: 8px 0; }
.toc-item a { 
    text-decoration: none; 
    color: #333;
    transition: color 0.3s;
}
.toc-item a:hover { color: #0073aa; }
.toc-level-3 { padding-left: 20px; } /* 子层级缩进 */

方法对比与选择建议

维度 插件法 手动代码法
难度 ⭐️ 无需技术基础 ⭐️⭐️⭐️ 需代码能力
定制灵活性 ⭐️⭐️ 依赖插件选项 ⭐️⭐️⭐️ 完全自由
性能影响 ⭐️⭐️ 轻度（选优化好的插件） ⭐️⭐️⭐️ 接近零开销
维护成本 ⭐️ 自动更新 ⭐️⭐️ 需手动适配主题更新

推荐选择：

  • 普通用户：用 Table of Contents Plus，5分钟快速上线
  • 开发者：手动实现 + 缓存优化，最大化加载速度

SEO与用户体验优化技巧结构规范**

  • 用H2用H3-H4，保持层级清晰
  • 避免跳过层级（如H2→H4），否则影响SEO可读性
  1. 目录位置
    • 长文章（≥1500字）置于首屏，帮助用户快速导航
    • 可禁用，避免冗余
  2. 移动端适配

    测试折叠效果：确保小屏幕目录可滚动、点击流畅

  3. 数据统计

    用Google Analytics监测目录点击率，优化重要内容位置

    如何快速创建WordPress目录树 第3张

风险提示：

  • 手动代码需测试主题兼容性，避免与现有JS冲突
  • 插件停更可能导致安全破绽，定期检查更新记录

引用说明：

  • WordPress插件库数据来自Table of Contents Plus官方页面
  • 代码安全标准参考WordPress开发者手册
  • SEO建议依据Google搜索中心E-A-T指南
0

相关文章