当前位置:首页 > 网站建设 > wordpress > 代码实现添加wordpress文章目录

代码实现添加wordpress文章目录

正文索引[ 隐藏 ]

最近在浏览其他的博友的博客时发现,很多的博客都添加了文章目录或者说文章索引,这种形式类似百度百科,也类似常见的wiki。我觉得这样添加文章目录有三个非常明显的好处:一是非常方便读者快速知道文章的结构和内容,方便很快找到自己的需要的内容;二是这个目录实际上来自文章作者添加的h2或者h3标签,为了这个文章目录,博主在写作的时候会更加注意文章的结构和内容,对博客质量有促进作用;第三个是使用了 H2 H3 这些标签之后,可以建立锚点链接,而 Google 现在已经可以索引内部锚点链接。对seo也是有一些作用。

之后自己通过搜索加入了这个功能,感谢DH博客提供的方法,下面将我的测试和代码分享给大家。

示例

大家可以看我博客文章内容的右上角,具体效果如下:

代码实现添加wordpress文章目录

代码

完成这个功能需要三个东西,一个是主题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 class="level2"><a href="#title-'.$num.'" title="'.$title.'">'.$title."</a></li>n";
 else if($matches[1][$num] == 'h3')
 $ul_li .= '<li class="level3"><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;
 }
 });
});

总结

至此,文章目录就已经完成,对于以前写的文章,也同样会有显示效果,以后写文章的时候,注意文章结构,添加好H标签或者设置二级标题和三家标题就能达到想要的效果了。

友荐云推荐
  • «
  • »
  • 作者:
    除非注明,本文原创:技术宅,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.jishuzh.com/web/wp/代码实现添加wordpress文章目录.html

    8 thoughts on “代码实现添加wordpress文章目录

    1. 亮说

      楼主啊~我按照你的方法去做了,可是提示有错误啊~
      网站提示
      Warning: preg_match_all() [function.preg-match-all]: Unknown modifier ‘(‘in ……/functions.php on line 8
      第八行是
      if(preg_match_all($r, $content, $matches))
      请问如何解决?

      1. 金鱼

        你的问题解决了吗????我的问题和你一样啊

        1. 亮说

          :eek: 没啊~最后用插件实现了~

    2. 我新手

      怎么替换?某内容/ 无效啊

    3. 蛋疼哥

      添加后提示第一段的第六行出错了

      1. 技术宅 (Post author) 

        可能是你空间的问题

    4. joojen

      为什么不做成一个插件呢,这样使用或者取消都方便很多

      1. 技术宅 (Post author) 

        这个的插件还是有的 我只是比较喜欢折腾代码的说呵呵

    评论已关闭.