WordPress文章页面增加文章目录或目录索引 提升文章内容质量和阅读体验

前言

　　文章目录索引是网站内容管理中不可或缺的功能，利用文章目录索引，优化文章结构提升内容质量、文章可读性和阅读体验。

使用方法

一、在网站后台打开主题文件编辑器，点击模板函数（functions.php），将以下代码粘贴到文件内。

// 构建文章多级目录索引
function buildDirectory($titleIndexArr, $titleContentArr, &$index, &$html)
{
	$size = sizeof($titleIndexArr);
	$flag = $index == 0;
	$html .= $flag ? '<ol id="index-ol">' : '<ul id="index-ul">';
	while ($index < $size) {
		$title = trim(strip_tags($titleContentArr[$index])); // 标题内容
		$h = $titleIndexArr[$index]; // 几级标题
		$html .= '<li><a href="#title-' . $index . '" title="' . $title . '">' . $title . "</a></li>";
		if ($index == $size - 1) { //最后一个
			$index++;
			break;
		}
		$next_h = $titleIndexArr[++$index]; // 下个标题是几级标题
		if ($h < $next_h) { // 子标题递归
			buildDirectory($titleIndexArr, $titleContentArr, $index, $html);
			if ($index >= $size || $h > $titleIndexArr[$index]) {
				break;
			}
		} else if ($h > $next_h) {
			break;
		}
	}
	$html .= $flag ? '</ol>' : '</ul>';
}
function article_index($content)
{
	$html = '';
	$matches = array();
	// 当前设置 [2-3]即 h2 到 h3 ，可以自己修改下面正则
	$r = '/<h([2-3])(.*?)>(.*?)<\/h[2-3]>/is';
	// preg_match_all 函数用于执行一个全局正则表达式匹配。$r=正则，$content=文章内容，$matches=作为输出参数输出所有匹配结果
	preg_match_all($r, $content, $matches);
	$num_match = count($matches[0]);
	// 用于文章页，同时h标签个数大于1个才生效
	if ( is_single() && ($num_match > 1) ) {
		foreach ($matches[1] as $key => $value) {
			// strip_tags() 函数剥去字符串中的 HTML、XML 以及 PHP 的标签
			$title = trim(strip_tags($matches[3][$key])); //文章标题
			// 文章原标题添加锚点
			$content = str_replace($matches[0][$key], '<h' . $value . ' id="title-' . $key . '"' . $matches[2][$key] . '>' . $title . '</h' . $value . '>', $content);
		}
		$titleIndexArr = $matches[1];
		$titleContentArr = $matches[3];
		$index = 0;
		$html .= "\n".'<div id="article-index-show">目录</div><div id="article-index"><div id="article-index-top"><strong>文章目录</strong><span id="article-index-hide">隐藏</span></div>';
		buildDirectory($titleIndexArr, $titleContentArr, $index, $html);
		$html .= '</div>'."\n";
	}
	return $html. $content;
}
add_filter('the_content', 'article_index');

二、在当前主题添加CSS代码。

#article-index{position:fixed;top:50%;transform:translateY(-50%);left:0;width:156px;max-height:76%;padding:0 10px;font-size:14px;border-radius:0 6px 6px 0;background-color:#fff;box-shadow:0 0 5px rgba(0, 0, 0, .4);overflow:auto;z-index:99;display:none;}
#article-index-top{position:sticky;top:0;z-index:92;background:#fff;}
#article-index strong{display:block;font-size:16px;padding:10px 0 12px 5px;}
#index-ol{list-style:square;}
#index-ol li{padding:0;margin-left:-15px;line-height:24px;position:relative;list-style-position:inherit;word-break:break-all;}
#index-ul{list-style:circle;margin:0;padding:5px 0 5px 8px;}
#index-ul li:before{display:none;}
#article-index-show{position:fixed;top:50%;transform:translateY(-50%);left:0;display:block;
width:50px;height:36px;line-height:36px;text-align:center;font-size:14px;border-radius:0 36px 36px 0;color:#fff;background-color:#0088dd;cursor:pointer;}
#article-index-hide{position:absolute;right:0;top:5px;display:block;
width:32px;height:32px;line-height:32px;text-align:center;font-size:12px;border-radius:100%;background-color:#d2ddff;cursor:pointer;}
#article-index-hide:hover{color:#fff;background-color:#0088dd;}

三、在当前主题的页脚文件footer.php添加JavaScript代码。

<script type="text/javascript">
//文章目录展示切换
jQuery(document).ready(function(){
	jQuery("#article-index-hide").click(function(){
		jQuery("#article-index").hide(100);
		jQuery("#article-index-show").show(200);
	});
	jQuery("#article-index-show").click(function(){
		jQuery("#article-index").show(200);
		jQuery("#article-index-show").hide(100);
	});
});
 
//文章目录锚点点击平滑滚动
jQuery(document).on('click', '#article-index a[href^="#"]', function(e) {
	var id = jQuery(this).attr('href');
	var $id = jQuery(id);
	if ($id.length === 0) {
		return;
	}
	e.preventDefault();
	var pos = $id.offset().top;
	jQuery('body, html').animate({scrollTop: pos});
});
</script>