为你的wordpress任意主题添加文章目录功能【多个方案】

在WordPress中添加文章目录功能可以帮助读者快速导航到文章的特定部分，提升用户体验。以下是几种实现文章目录功能的方法：

方法一：使用插件

这是最简单的方法，适合不熟悉代码的用户。

1. 安装并激活插件：

   • 登录WordPress后台，进入“插件” > “安装插件”。

   • 搜索“Table of Contents Plus”或“Easy Table of Contents”等插件。

   • 安装并激活插件。

2. 配置插件：

   • 激活插件后，进入“设置” > “Table of Contents”或“Easy Table of Contents”进行配置。

   • 通常可以设置自动生成目录、显示位置、标题级别等。

3. 使用插件：

   • 插件通常会自动在文章中添加目录，你也可以在编辑文章时手动插入短代码（如[toc]）来生成目录。

方法二：手动添加目录（使用HTML和CSS）

如果你熟悉HTML和CSS，可以手动为文章添加目录。

1. 编辑文章：

   • 在WordPress编辑器中，切换到“文本”模式（而不是“可视化”模式）。

   • 在文章开头插入目录的HTML代码，例如：

      

     <div id="toc">
         <h2>目录</h2>
         <ul>
             <li><a href="#section1">第一部分</a></li>
             <li><a href="#section2">第二部分</a></li>
             <li><a href="#section3">第三部分</a></li>
         </ul>
     </div>

      

     运行 HTML

2. 添加锚点：

   • 在文章的各个部分添加对应的锚点，例如：

      

     <h2 id="section1">第一部分</h2>
     <p>这里是第一部分的内容。</p>
     
     <h2 id="section2">第二部分</h2>
     <p>这里是第二部分的内容。</p>
     
     <h2 id="section3">第三部分</h2>
     <p>这里是第三部分的内容。</p>

      

     运行 HTML

3. 添加CSS样式：

   • 你可以通过主题的自定义CSS功能或子主题的style.css文件为目录添加样式，例如：

      

     #toc {
         background: #f9f9f9;
         border: 1px solid #ddd;
         padding: 10px;
         margin-bottom: 20px;
     }
     #toc ul {
         list-style-type: none;
         padding-left: 0;
     }
     #toc ul li {
         margin: 5px 0;
     }

方法三：使用主题自带功能

一些高级WordPress主题可能自带文章目录功能。

1. 检查主题设置：

   • 进入“外观” > “主题设置”或“自定义”选项，查看是否有文章目录的相关设置。

2. 启用目录功能：

   • 如果主题支持，通常可以在文章编辑页面或主题设置中启用目录功能。

方法四：使用代码片段

如果你熟悉PHP，可以通过添加代码片段来实现文章目录功能。

1. 编辑主题文件：

   • 打开主题的functions.php文件（建议使用子主题以避免主题更新时丢失修改）。

   • 添加以下代码：

      

     function add_table_of_contents($content) {
         if (is_single()) {
             $toc = '<div id="toc"><h2>目录</h2><ul>';
             $pattern = '/<h2(.*?)>(.*?)<\/h2>/';
             preg_match_all($pattern, $content, $matches);
             foreach ($matches[2] as $key => $title) {
                 $toc .= '<li><a href="#section' . $key . '">' . $title . '</a></li>';
                 $content = str_replace($matches[0][$key], '<h2 id="section' . $key . '">' . $title . '</h2>', $content);
             }
             $toc .= '</ul></div>';
             $content = $toc . $content;
         }
         return $content;
     }
     add_filter('the_content', 'add_table_of_contents');

2. 保存并测试：

   • 保存functions.php文件并刷新文章页面，查看是否成功生成目录。

总结

• 插件：最简单，适合大多数用户。

• 手动添加：适合熟悉HTML和CSS的用户。

• 主题自带功能：如果主题支持，直接启用即可。

• 代码片段：适合开发者或熟悉PHP的用户。

根据你的需求和技术水平选择合适的方法。