WordPress 实现自动添加文章目录功能

在 WordPress 主题中实现文章目录可以使用插件或者手动编写代码实现。

使用插件

在 WordPress 后台插件页面搜索 “table of contents” 或 “article index” 等关键字，可以找到很多可以生成文章目录的插件。例如，Table of Contents Plus 插件可以自动生成文章目录，并提供许多定制选项。

手动编写代码

要手动实现文章目录，需要在 WordPress 主题的文章模板文件（通常是 single.php）中编写代码。

首先，你需要获取文章中所有的标题元素，例如 h1, h2, h3 等。可以使用 WordPress 内置的函数 get_post_format() 获取文章内容，然后使用正则表达式匹配所有的标题元素。

然后，你可以使用 WordPress 内置的函数 wp_list_pages() 来生成一个包含文章目录的 HTML 列表。例如：

$content = get_post_format();
preg_match_all('/<h([1-6])>(.*?)<\/h[1-6]>/', $content, $matches);

$html = '<ul>';
foreach ($matches[2] as $key => $title) {
    $html .= '<li><a href="#section-' . $key . '">' . $title . '</a></li>';
}
$html .= '</ul>';

echo $html;

在上面的代码中，我们已经使用了正则表达式来匹配文章中的所有标题元素，并生成了一个文章目录的 HTML 列表。现在，我们可以使用 preg_replace() 函数来为文章中的每个标题元素添加一个 ID，以便在文章目录中的链接可以指向它们。

代码示例如下：

$content = get_post_format();
preg_match_all('/<h([1-6])>(.*?)<\/h[1-6]>/', $content, $matches);

$html = '<ul>';
foreach ($matches[2] as $key => $title) {
    $replacement = '<h' . $matches[1][$key] . ' id="section-' . $key . '">' . $title . '</h' . $matches[1][$key] . '>';
    $content = str_replace($matches[0][$key], $replacement, $content);
    $html .= '<li><a href="#section-' . $key . '">' . $title . '</a></li>';
}
$html .= '</ul>';

echo $html;
echo $content;

要在 WordPress 中使用上述代码，可以在主题的 functions.php 文件中添加一个自定义函数，然后在文章模板文件（通常是 single.php）中调用这个函数。

function display_article_index() {
    global $post;
    $content = get_post_format();
    preg_match_all('/<h([1-6])>(.*?)<\/h[1-6]>/', $content, $matches);

    $html = '<ul>';
    foreach ($matches[2] as $key => $title) {
        $replacement = '<h' . $matches[1][$key] . ' id="section-' . $key . '">' . $title . '</h' . $matches[1][$key] . '>';
        $content = str_replace($matches[0][$key], $replacement, $content);
        $html .= '<li><a href="#section-' . $key . '">' . $title . '</a></li>';
    }
    $html .= '</ul>';

    echo $html;
}

然后，在文章模板文件（single.php）中调用这个函数。例如，你可以在文章内容前面添加如下代码：

<?php if (is_single()) : ?>
    <div class="article-index">
        <?php display_article_index(); ?>
    </div>
<?php endif; ?>

这样，就可以在文章页面中自动生成文章目录了。

调用文章目录代码的最佳位置是在文章模板文件（single.php）中的文章内容之前。

例如，你可以在文章模板文件（single.php）的开头添加如下代码：

<?php if (is_single()) : ?>
    <div class="article-index">
        <?php display_article_index(); ?>
    </div>
<?php endif; ?>

<?php the_content(); ?>

这样，文章目录就会出现在文章内容之前，并且只会在文章页面（is_single() 为 true）中显示。