WordPress欲思主题添加文章目录功能

如文章标题所说如何给wordpress 主题的文章内容添加导航目录？这个也是我最近在看自己写过的文章时，突发想要添加这么一个需求，主要是发现如果文章太长的话对于浏览者浏览文章时很费劲，尤其是特别长的文章，用户体验不好。有了这个导航功能就可以随时定位到我们想要看的内容，一步到位，让浏览者省时省力，相当于一个传送门。所以站在用户角度去想，有必要实现这一功能。而且，给文章添加文章目录功能，不仅使文章条理更清楚，还有利于 SEO。好了，废话少说，喜欢折腾代码的朋友一起和码云笔记前端博客来看一下如何实现 WordPress 主题文章导航功能吧。

先看一下效果：

一、通过插件的方式实现文章导航功能

接触 WordPress 的同学都知道，很多插件都可以满足我们一些日常项目需求，对于不想折腾代码以及不会代码的朋友，推荐下载插件：TOC和Content Index for WordPress插件不是本章的要点，这里不多说。如果想用插件，可以百度一下，或者后台插件里搜索安装使用。

二、纯代码实现

以下代码的源码是我在网上搜出来的，但是呢不能满足我们的需求，经过修改可以匹配 h2 和 h3 标签，只需要将下面代码加到主题的 functions.php 文件中最后一个”?>”前就可以了。

function article_index($content) {
    $matches = array();
    $ul_li = '';
    //匹配出 h2、h3 标题
    $rh = "/<h[23]>(.*)<\/h[23]>/im";
    $h2_num = 0;
    $h3_num = 0;
    //判断是否是文章页
    if(is_single()){
         if(preg_match_all($rh, $content, $matches)) {
            // 找到匹配的结果
            foreach($matches[1] as $num => $title) {
                $hx = substr($matches[0][$num], 0, 3);      //前缀，判断是 h2 还是 h3
                $start = stripos($content, $matches[0][$num]);  //匹配每个标题字符串的起始位置
                $end = strlen($matches[0][$num]);       //匹配每个标题字符串的结束位置
                if($hx == "<h2"){
                    $h2_num += 1; //记录 h2 的序列，此效果请查看百度百科中的序号，如 1.1、1.2 中的第一位数
                    $h3_num = 0;
                    // 文章标题添加 id，便于目录导航的点击定位
                    $content = substr_replace($content, '<h2 id="h2-'.$num.'">'.$title.'</h2>',$start,$end);
                    $title = preg_replace('/<.+>/', "", $title); //将 h2 里面的 a 链接或者其他标签去除，留下文字
                    $ul_li .= '<li class="h2_nav"><a href="#h2-'.$num.'" class="tooltip" title="'.$title.'">'.$title."</a></li>\n";
                }else if($hx == "<h3"){
                    $h3_num += 1; //记录 h3 的序列，此熬过请查看百度百科中的序号，如 1.1、1.2 中的第二位数
                    $content = substr_replace($content, '<h3 id="h3-'.$num.'">'.$title.'</h3>',$start,$end);
                    $title = preg_replace('/<.+>/', "", $title); //将 h3 里面的 a 链接或者其他标签去除，留下文字
                    $ul_li .= '<li class="h3_nav"><a href="#h3-'.$num.'" class="tooltip" title="'.$title.'">'.$title."</a></li>\n";
                }   
            }
        }
        // 将目录拼接到文章
        $content =  $content . "<div class=\"post_nav\"><strong class=\"post_title\">文章目录</strong><ul class=\"post_nav_content\">\n" . $ul_li . "</ul></div>\n";
        return $content;
    }elseif(is_home){
        return $content;
    }
}
add_filter( "the_content", "article_index" );

然后就是需要在主题的 style.css 中填入以下 css 样式即可：

/*目录效果*/

.post_nav {
	position: fixed;
	top: 50%;
	right: 50%;
	z-index: 20;
	display: block;
	overflow: hidden;
	margin-top: -24px;
	margin-right: 620px;
	width: 164px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #DEDFE1;
	background: #fff
}

.post_title {
	width: 144px;
	border-bottom: 1px dashed #ddd;
	display: block;
	line-height: 30px;
	margin-left: 10px;
}

.post_nav .post_nav_side {
	position: absolute;
	top: 0;
	left: 5px;
	width: 0;
	min-height: 40px;
	border: 1px solid #eaeaea;
	border-top: 0;
	border-bottom: 0;
	background-color: #eaeaea
}

.post_nav .post_nav_content {
	position: relative;
	overflow: hidden;
	overflow-y: scroll;
	margin: 10px 0;
	padding-left: 10px;
	height: auto;
	max-height: 520px;
	list-style: none;
	text-indent: 0
}

.post_nav .post_nav_content li {
	height: 22px;
	line-height: 22px
}

.post_nav_content li a.tooltip {
	opacity: 100!important
}

.post_nav .post_nav_content li a {
	display: inline-block;
	overflow: hidden;
	height: 22px;
	line-height: 25px;
	max-width: 146px;
	color: #333;
	vertical-align: top;
	text-decoration: none;
	-webkit-text-overflow: ellipsis
}

@media screen and (max-width:1440px) {
	.post_nav {
		margin-right: -240px;
		background: #f7f7f7
	}
}

以上关于WordPress欲思主题添加文章目录功能的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。