WordPress 纯代码实现文章内容添加锚点目录功能

本站使用的自动锚点目录功能是使用纯代码实现的，其实已经有很多很多错的插件了，但是我还是比较喜欢使用代码来折腾。预览效果看查看本站的文章目录。

下面我们一步一步来使用代码实现文章内容锚点目录功能

PHP 代码部分

function article_toc($content) {
	$matches = array();
	$ul_li = '';
	$r = '/<h([2-6]).*?\>(.*?)<\/h[2-6]>/is'; // for SEO-friendly, contents table only identify <h2> ~ <h6>
	if (is_single() && preg_match_all($r, $content, $matches)) {
		$preValue = 2;
		$hStack = new SplStack();
		foreach ($matches[1] as $key => $value) {
			$title = trim(strip_tags($matches[2][$key]));
			$content = str_replace($matches[0][$key], '<h' . $value . ' id="toc-' . $key . '">' . $title . '</h'. $value . '>', $content);
			// The following part implements the hierarchy of contents table
			if(!$hStack->isEmpty()){
				if($hStack->top() == $value){
					$ul_li .= '<li><a href="#toc-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
				} elseif($hStack->top() < $value){
					$ul_li .= "<ul>\n" . '<li><a href="#toc-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
					$hStack->push($value);
				} elseif($hStack->top() > $value){
					while($hStack->top() > $value){
						$ul_li .= "</ul>\n";
						$hStack->pop();
					}
					$ul_li .= '<li><a href="#toc-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
				}
			} else{
					$ul_li .= '<li><a href="#toc-' . $key . '" title="' . $title . '">' . $title . "</a></li>\n";
					$hStack->push($value);
			}
		}
		$content = "\n<div id=\"toc\">
		<strong>文章目录</strong><span>[隐藏]</span>
		<ul id=\"toc-ul\">\n" . $ul_li . "</ul>
		</div>\n" . $content;
	}
	return $content;
}
add_filter( 'the_content', 'article_toc');

把上面代码复制到主题的functions.php文件中即可。

代码解释

add_filter的使用基于WP的Hook机制，Hook是WP中将用户代码与内核代码联系起来的桥梁，通过它，用户自定义的主题或插件可以在不直接改变内核代码的前提下对WP框架进行一定的自定义修改，比如我们这里就是通过Hook机制的Filter Hook修改了wp_content()函数的输出，这里越讲会越复杂，要进一步了解，看看WP的Plugin Handbook。

代码中第一个关键的点是用正则表达式匹配出我们需要的内容，为了符合SEO优化，我们建议文章子标题只使用<h2> ~ <h6>，我们的代码也只对<h2> ~ <h6>级别的标题进行统计。定义一个正确的正则表达式pattern很重要，关于变量$r的细节大家认真看一下应该没有问题。pattern定义完之后使用preg_match_all()函数进行正则匹配。

foreach循环中的if-else语句块是实现目录分级缩进的关键，这里我使用了PHP标准库的SPL栈结构，通过对栈顶元素的判断来决定需不需要给当前目录再套一层<ul></ul>标签，对这部分的理解建议还是看代码为主，比大段的文字说明更易于理解。

跳出foreach循环之后就是给当前的文章内容添加目录的H5代码。这样就OK了。

CSS 代码部分

css样式根据个人需要修改。

#toc {
float:right;
max-width:184px;
min-width:120px;
padding:6px;
margin:0010px10px;
border:1pxsolid#EDF3DE;
background:white;
border-radius:6px;
position: relative;
font-size: 12px;
}
#toc p {
margin:04px;
font-size: 14px;
}
#toc strong {
border-bottom:1pxsolid#EDF3DE;
display:block;
}
#toc span {
display:block;
margin:4px0;
cursor:pointer;
position: absolute;
top: 0;
right: 10px;
}
#toc ul{
margin-bottom:0;
margin: 5px5px5px15px;
}
#toc li{
margin:2px0;
}
#toc small {
float:right;
}

把上面css代码复制到style.css文件中。

预览效果

WordPress 纯代码实现文章内容添加锚点目录功能

关注公众号『窗外天空』

获取更多建站运营运维新知！
互联网创业、前沿技术......