前言

WordPress 文章添加文章目录之后，可以使得行文更加有条理，用户可以点击目录链接，来实现跳转到对应的标题。这里分享两份代码，第一份是网络上找到的代码，第二份是我重写优化了之后的。效果如下：

需要注意的点：

1. 在 WordPress 管理后台中，转到 “ 外观 ” -> “ 主题编辑器 ”。
2. 确认你当前正在编辑的主题是你正在使用的主题。
3. 在 “ 文件 ” 列表中找到 style.css 和 functions.php 文件，并确保它已被正确地引入。
4. 在 functions.php、style.css 文件中添加以下代码，并保存更改。

第一份代码：

//文章目录
function article_index($content) {
$matches = array();
$ul_li = '';
$r = '/<h([2-6]).*?\>(.*?)<\/h[2-6]>/is';
if(is_single() && preg_match_all($r, $content, $matches)) {
foreach($matches[1] as $key => $value) {
$title = trim(strip_tags($matches[2][$key]));
$content = str_replace($matches[0][$key], '<h' . $value . ' id="title-' . $key . '">'.$title.'</h2>', $content);
$ul_li .= '<li><a href="#title-'.$key.'" title="'.$title.'">'.$title."</a></li>\n";
}
$content = "\n<div id=\"article-index\">
<strong>文章目录</strong>
<ul id=\"index-ul\">\n" . $ul_li . "</ul>
</div>\n" . $content;
}
return $content;
}
add_filter( 'the_content', 'article_index' );

#article-index {
-moz-border-radius: 6px 6px 6px 6px;
border: 1px solid #DEDFE1;
float: right;
margin: 0 0 15px 15px;
padding: 0 6px;
max-width: 200px;
line-height: 23px;
}
#article-index strong {
border-bottom: 1px dashed #DDDDDD;
display: block;
line-height: 30px;
padding: 0 4px;
}
#index-ul {
margin: 0;
padding-bottom: 10px;
padding-left: 0px;
}
#index-ul li {
background: none repeat scroll 0 0 transparent;
list-style-type: disc;
padding: 0;
margin-left: 20px;
}

第二份代码：

本份代码我重写了一下部分，按需添加。

/**
* 自动生成文章目录
*
* @param string $content 文章内容
* @return string 处理后的文章内容
*/
function generate_article_index($content) {
$matches = array(); // 用于存储正则匹配结果的数组
$index_list = ''; // 用于存储文章目录的 HTML 代码
$regex = '/<h([2-6]).*?\>(.*?)<\/h[2-6]>/is'; // 匹配标题的正则表达式
if(is_single() && preg_match_all($regex, $content, $matches)) { // 如果是单篇文章，并且存在标题
foreach($matches[1] as $key => $value) {
$title = trim(strip_tags($matches[2][$key])); // 获取标题文本，去除标签和首尾空格
$content = str_replace($matches[0][$key], '<h' . $value . ' id="title-' . $key . '">'.$title.'</h2>', $content); // 在标题前添加 ID，用于目录链接定位
$index_list .= '<li><a href="#title-'.$key.'" title="'.$title.'">'.$title."</a></li>\n"; // 生成目录链接列表
}
$content = "\n<div id=\"article-index\">\n<strong>文章目录</strong>\n<ul id=\"index-ul\">\n" . $index_list . "</ul>\n</div>\n" . $content; // 在文章内容前添加自动生成的目录
}
return $content;
}
add_filter( 'the_content', 'generate_article_index' );

改进的地方如下：

1. 将函数名改为更加语义化的 “generate_article_index”。
2. 将一些变量名更改为更加易读的名称。
3. 在注释中添加了更多的细节。
4. 将目录列表的 HTML 代码赋值给一个字符串，然后在最后统一添加到文章内容中，避免在循环中频繁修改文章内容的字符串，提高了性能。
5. 在最外层的 div 标签中添加了一个换行符，使 HTML 代码更加易读。
6. 将目录列表的生成和文章内容的修改都放在一个 if 语句中，避免无效的函数调用。

#article-index {
border-radius: 6px;
border: 1px solid #DEDFE1;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
float: right;
margin: 0 0 15px 15px;
padding: 0 6px;
width: 200px;
line-height: 1.5;
font-size: 14px;
}
#article-index strong {
border-bottom: 1px dashed #DDDDDD;
display: block;
margin-bottom: 10px;
padding-bottom: 10px;
font-size: 16px;
font-weight: 600;
}
#index-ul {
margin: 0;
padding-bottom: 10px;
}
#index-ul li {
list-style-type: disc;
margin-left: 20px;
margin-bottom: 5px;
font-size: 14px;
}
#index-ul a {
color: #333333;
text-decoration: none;
}
#index-ul a:hover {
color: #0073AA;
}

我们添加了以下样式：

• box-shadow – 添加一个阴影效果
• font-size – 增加了字体大小
• margin-bottom – 增加了目录标题下方的间距
• font-weight – 增加目录标题的粗细程度
• margin-bottom – 增加了目录项之间的间距
• color – 修改了链接的默认颜色
• text-decoration – 取消链接的下划线
• :hover – 增加链接的鼠标悬停样式

如果有什么疑问和错误，请按照文章内容配置，有疑问请留言，另外记得给你的文章加标题，并且设置好 H2，H3 等格式。