• 当前位置:首页 > wordpress > 实现wordpress文章多级目录
  • 博客搬到SAE了,这个还是比较省心的。不用老是为备份担心。
  • 开启友情赞助空间
  • 无聊了:[ 探索发现 ] 一下,精彩文章等着你哦!

实现wordpress文章多级目录

2013-07-17 14:29

2,617阅览 0条评 wordpress arno

昨天换了个主题,但是很多功能都没有,都要自己加上去。于是就折腾吧。

完成这个功能需要三个东西,一个是主题functions.php中进行正则匹配和替换等,第二个是css控制样式,第三个是js添加显示和隐藏的效果。

后台functions.php部分

将下面的代码添加到主题的functions.php中,实现的功能是对文章中的H2和H3标签进行替换,加入锚点链接和加入内容到右上角。

function article_index($content)
{
 $matches = array();
 $ul_li = '';
 $r = "/<(h[2-5])>([^<]+)</(h[2-5])>/im";
 if(preg_match_all($r, $content, $matches))
 {
 foreach($matches[2] as $num => $title)
 {
 //if($num==0)
 if(true)
 {
 $content = str_replace($matches[0][$num], '<'.$matches[1][$num].' id="title-'.$num.'">'.$title.'</'.$matches[3][$num].'>', $content);
 }
 else
 {
 $content = str_replace($matches[0][$num], '<div id="content_title"><'.$matches[1][$num].' id="title-'.$num.'">'.$title.'</'.$matches[3][$num].'><span id="article-index-top"><a href="#article-index">top</a></span></div>', $content);
 }
 if($matches[1][$num] == 'h2')
 $ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>n";
 else if($matches[1][$num] == 'h3')
 $ul_li .= '<li><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>n";
 }
 $content = '<div id="article-index">
 <div id="index-title"><span id="the-index-title">正文索引</span><span id="show-index">[ 隐藏 ]</span></div>
 <div id="index-ul"><ul>' . $ul_li . '</ul></div></div>' . $content;
 }
 return $content;
}
add_filter( "the_content", "article_index" );

css控制样式

 

把下面的内容添加到主题的样式表中,这个效果和我的博客一样,具体大家可以进行更改。

 

#article-index {
float: right;
position: relative;
margin:0 0 10px 10px;
width:250px;
border-radius: 6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
-moz-border-radius:6px;
border: 1px solid #aaa
}
#article-index ul{
margin:0;
}
#article-index ul li{list-style:square;padding:0;color: #A3C159;font-size:12px;}
#index-title{
border-radius: 7px 7px 0 0;
padding: 4px 8px;
border-bottom: 1px solid #aaa;
background-color: #EEE
}
#the-index-title {
line-height: 1.6;
color: #019858;
font-weight: bold
}
#show-index{
cursor: pointer;
margin-left:8px;
margin-right:8px
}
#index-ul {
list-style: none;
padding: 4px 5px 4px 7px;
margin: 0
}

.level2{
margin-left: 20px;
}
.level3{
margin-left: 30px;
}

#content_title{
position:relative
}
#article-index-top{
position:absolute;
top:5px;
right:10px
z-index: 111;
}

 

 

js控制隐藏显示效果

 

将下面的代码添加到自己某个js的最后面(请确保不会冲突),或者新建一个js文件,在header.php中引入,如新建为wzmu.js,则添加<script type=”text/javascript” src=”<?php bloginfo(‘template_url’); ?>/js/wzmu.js”></script>

 

 

$(document).ready(function(){
 $("#show-index").click(function()
 {
 if($("#show-index").html()=="[ 隐藏 ]")
 {
 $("#index-ul").fadeOut("normal");
 $("#show-index").html("[ 展开 ]");
 }else if($("#show-index").html()=="[ 展开 ]")
 {
 $("#index-ul").fadeIn("normal");
 $("#show-index").html("[ 隐藏 ]");
 }
 else
 {
 return false;
 }
 });
});

 

 

 

本文声明

除非注明,否则文章均为 " 枫林博客 " 原创,转载时请注明文章出处。


作者信息:arno \ 2013-07-17 14:29 \ 枫林博客 \

分类标签:wordpress,

本文地址:http://www.blogfeng.com/plus-multi-level-directory-wordpress-article.html

还没有人评论哦,赶紧留下爪印吧!

发表评论

* *



​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​