最佳答案

要在WordPress文章中添加目录并在前端显示，您可以按照以下步骤进行操作：

1. 在编辑WordPress文章时，使用标题标签（如<h2>、<h3>等）来分隔不同的章节或段落。例如，使用<h2>标签来表示主要章节，使用<h3>标签来表示子章节。

2. 在主题的functions.php文件中添加以下代码段，以使WordPress自动生成目录：

```php

<?php

function add_table_of_contents($content) {

// 正则表达式匹配所有标题标签

preg_match_all('/<h2>(.*?)<\/h2>/', $content, $matches);

if ($matches) {

$table_of_contents = '<h2>目录</h2><ul>';

// 根据匹配到的标题生成目录链接

foreach ($matches[0] as $match) {

$title = strip_tags($match);

$id = sanitize_title($title);

$table_of_contents .= '<li><a href="#' . $id . '">' . $title . '</a></li>';

}

$table_of_contents .= '</ul>';

// 将目录插入文章内容之前

$content = $table_of_contents . $content;

}

return $content;

}

add_filter('the_content', 'add_table_of_contents');

?>

3. 保存并上传functions.php文件到您的WordPress主题文件夹中。

4. 稍后在文章编辑器中，您将看到目录自动添加在文章内容的开头。它会列出文章中所有的<h2>标题，并且每个标题都会被链接到相应的部分。

5. 您可以根据需要自定义目录的样式，例如调整字体、颜色和间距等。可以使用CSS来修改目录的外观。找到你的主题文件夹中的style.css文件，然后在其末尾添加以下CSS代码：

.entry-content ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.entry-content ul li {
margin: 0;
}
.entry-content ul li a {
text-decoration: none;
color: #555;
font-weight: bold;
}
.entry-content ul li a:hover {
text-decoration: underline;
}

保存并上传style.css文件到您的WordPress主题文件夹中。

这样，在前端访问您的文章时，目录将显示在文章内容的开头，并且具有自定义的样式。

其他答案

要在WordPress的文章中添加目录，并在前端显示它，你可以按照以下步骤进行操作：

1. 编辑文章：在WordPress的后台，选择要编辑的文章。

2. 插入标签：在文章的适当位置（通常是开头或者副标题下方），插入“[toc]”标签。这个标签将用于生成目录。

3. 保存文章：保存文章并发布或更新它。

在前端显示文章目录的方式有几种，下面是两种常见的方法：

方法1：使用插件

1. 安装插件：在WordPress的后台，选择“插件”>“安装插件”，搜索并安装 “Table of Contents Plus” 插件。

2. 配置插件：在插件安装完毕后，选择“设置”>“TOC+”，根据你的需求自定义目录的样式和显示方式。

3. 更新文章：回到文章编辑页面，确保目录标签“[toc]”已经存在，然后保存并更新文章。

4. 查看前端：在前端浏览你的文章，你会看到一个具有链接的目录出现在文章的适当位置。

方法2：使用HTML和CSS

1. 在文章中插入目录：在文章的合适位置，使用HTML标签和CSS样式创建目录。例如：

目录

章节1
章节2
章节3



章节1

这是第一章的内容。
章节2

这是第二章的内容。
章节3

这是第三章的内容。

2. 使用CSS进行样式化：在你的主题的CSS文件中，添加适当的样式以美化目录的外观。

#toc {
background-color: #f2f2f2;
padding: 10px;
}
#toc ul {
list-style-type: none;
padding: 0;
}
#toc li {
margin-bottom: 5px;
}
#toc a {
color: #000;
text-decoration: none;
}

3. 更新文章：保存并更新文章后，在前端查看你的文章，你会看到一个带有链接的目录显示在文章的适当位置。

无论你选择哪种方法，都可以根据你的需求和喜好进行自定义。