全百科精品资源分享
免费优质资源下载平台

亲测纯代码WordPress文章内容添加锚点目录功能 支持多级目录

播放按钮

WordPress是功能强大的博客程序,全百科使用的就是WordPress。在平常发布的文章中,有些文章由于篇幅及内容比较多,导致文章有很长的页面,给读者带来不好的体验,那是不是通过设置锚点来为文章做个目录引导呢?当然可以实现,全百科说过很多次WordPress只要你想得到的功能基本都有插件,但今天全百科为大家介绍的并不是使用插件,只需添加两段代码就能实现。还附有2款目录样式供你选择哦。

一、锚点目录代码

我们在主题Functions.php文件中加入下面代码。

// by:全百科
//url:http://www.quanbaike.com
//文章目录
function article_index($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.'</h2>', $content);
$ul_li .= '<li><a href="#title-'.$key.'" title="'.$title.'">'.$title."</a></li>\n";
}
$content = "\n<div id=\"article-index\">
<strong>文章目录</strong>
<ul id=\"index-ul\">\n" . $ul_li . "</ul>
</div>\n" . $content;
}
return $content;
}
add_filter( 'the_content', 'article_index' );

二、CSS样式代码

然后再在主题的“main.css”文件中添加下面样式代码

样式1

#article-index {
-moz-border-radius: 6px 6px 6px 6px;
border: 1px solid #DEDFE1;
float: right;
margin: 0 0 15px 15px;
padding: 0 6px;
width: 200px;
line-height: 23px;
}
#article-index strong {
border-bottom: 1px dashed #DDDDDD;
display: block;
line-height: 30px;
padding: 0 4px;
}
#index-ul {
margin: 0;
padding-bottom: 10px;
}
#index-ul li {
background: none repeat scroll 0 0 transparent;
list-style-type: disc;
padding: 0;
margin-left: 20px;
}

样式2

/*目录效果*/

.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文章内容添加锚点目录功能 支持多级目录

样式1截图:纯代码WordPress文章内容添加锚点目录功能 支持多级目录

样式2截图:纯代码WordPress文章内容添加锚点目录功能 支持多级目录

样式2截图:纯代码WordPress文章内容添加锚点目录功能 支持多级目录

Free Download WordPress Themes
Download Premium WordPress Themes Free
Download WordPress Themes
Premium WordPress Themes Download
free online course
download lava firmware
Download Nulled WordPress Themes
online free course

本文由全百科网分享提供,分享更多精品资源,帮助你我共同成长。

赞(0)
本站内容均来自网络收集,转载内容不代表本网站的观点及意见,仅供用户参考和借鉴。如对稿件内容及版权问题有疑议,请及时联系全百科官方邮箱: smtsg@foxmail.com全百科网 » 亲测纯代码WordPress文章内容添加锚点目录功能 支持多级目录

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址