前言

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

需要注意的点：

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

第一份代码：

在 functions.php 文件中添加如下代码：

//文章目录
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' );

在 style.css 添加如下代码：

#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;
}

第二份代码：

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

在 functions.php 文件中添加如下代码：

/**
 * 自动生成文章目录
 *
 * @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 语句中，避免无效的函数调用。

接下来在 style.css 文件中添加如下代码：

#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 等格式。