WordPress 纯代码实现文章目录功能效果

在创作长篇文章时，为了提高阅读体验和SEO优化效果，添加文章目录是非常有用的。虽然可以使用插件实现这个功能，但我们也可以通过纯代码来实现。

需求说明

当文章内容很长且有多个标题时，可以为文章添加目录，便于读者快速导航。这不仅增强了文章的相关度，还能提升用户的阅读体验和SEO优化效果。

步骤一：在 functions.php 文件中添加 PHP 代码

首先，在当前主题的 functions.php 文件中添加以下代码：

function article_list($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.'</h' . $value . '>', $content);
            $ul_li .= '<li><a href="#title-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
        }
        $content = "\n<div id=\"article-list\">\n<strong>文章目录</strong>\n<ul id=\"list-ul\">\n" . $ul_li . "</ul>\n</div>\n" . $content;
    }
    return $content;
}
add_filter('the_content', 'article_list');

这段代码实现了文章目录的主要功能，通过匹配文章内容中的 H2 到 H6 标签，将其内容提取出来并生成目录。

步骤二：在 style.css 文件中添加 CSS 代码

接着，在当前主题的 style.css 文件中添加以下 CSS 代码来设置目录的样式：

#article-list {
    -moz-border-radius: 6px;
    border: 1px solid #DEDFE1;
    float: right;
    margin: 0 0 15px 15px;
    padding: 0 6px;
    width: 300px;
    line-height: 23px;
}

#article-list strong {
    border-bottom: 1px dashed #DDDDDD;
    display: block;
    line-height: 30px;
    padding: 0 4px;
}

#list-ul {
    margin: 0;
    padding-bottom: 10px;
}

#list-ul li {
    background: none repeat scroll 0 0 transparent;
    list-style-type: disclosure-closed;
    padding: 0;
    margin-left: 20px;
    color: #ff6900;
}

#list-ul a {
    color: #4c4c4c;
}

#list-ul a:hover {
    color: #009cee;
}

@media screen and (max-width: 568px) {
    #article-list {
        width: 100% !important;
    }
}

CSS 代码设置了目录的宽度、边框、字体颜色等样式，使其在不同屏幕尺寸下都能有良好的显示效果。

总结

通过以上步骤，我们在 WordPress 中实现了一个简单的文章目录功能，适用于长篇文章的阅读体验优化。如果有任何问题或不清楚的地方，欢迎随时留言询问。

以上就是通过纯代码实现文章目录功能的全部内容，供大家参考和使用。