DH 博客

你的位置：首页>> wordpress

wordpress主题:添加文章目录

标签： wordpress主题｜时间：2011/10/08 ｜阅读：2,367次｜ 59 评论｜

正文索引[ 隐藏 ]

1 缘起
2 示例
3 代码
3.1 后台部分
3.2 前台css部分
3.2 前台js部分
4 注意点
4.1 文章写法
4.2 与前人的不同

1 缘起

有一次，我在逛博客，看到有个博客(清水稀饭)很有意思，竟然像百度百科一样，有标题！这种标题wiki也有，是一种有助于读者快速掌握文章内容，方便读者在篇幅较长的文章中找到他们想看的内容，这个也就相当于索引。作者也提供了方法，我学着做了一个，扩展了一些功能。支持双层的标题。参考文章有：
WordPress文章目录插件

2 示例

看我的博客文章的右上角的目录索引，可以隐藏的那个。具体如图：

3 代码

要完成这个功能，需要有前台的css支持和后台的代码。这里以我的为例说明，各位看官需要更具自己的情况修改代码和css。

3.1 后台部分

后台主要实现的是对content的过滤，需要替换字符和添加目录。代码是这样的。保存为article_index.php

<?php
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" );
?>

这个文件需要在functions.php中include一下哦

#生成目录
include("article_index.php");

3.2 前台css部分

css是调整显示的，让这个好看一点。保存为article_index.css。

#article-index {
float: right;
position: relative;
margin:0 0 10px 10px;
width:180px;
border-radius: 6px;
-webkit-border-radius:6px;
-khtml-border-radius:6px;
-moz-border-radius:6px;
border: 1px solid #aaa
}
#index-title{
border-radius: 7px 7px 0 0;
padding: 0 0 1px 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{
padding-left: 10px;
}
#level3{
padding-left: 25px;
}
 
#content_title{
position:relative
}
#article-index-top{
position:absolute;
top:5px;
right:10px
z-index: 111;
}

需要在header.php中包含

3.2 前台js部分

js是用来隐藏目录和显示目录使用的。保存为article_index.js。

$(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;
		}
	});
});

需要在header.php中包含

<script src="&lt;?php bloginfo('template_directory'); ?" type="text/javascript"><!--mce:0--></script>

4 注意点

4.1 文章写法

写文章需要有条理，需要用h2 作为二级标题，h3作为三级标题。在编辑文章的时候，切换到HTML模式，将需要添加到目录中的标题用<h2>和</h2>括起来就可以了，如<h2>序言</h2>。当然你也可以用其他标签，如<h4></h4>等，需要自己修改代码哦。

4.2 与前人的不同

我这里支持二级标题，但是支持二级标题需要有很多的限制，如果需要研究的读者可以读一下代码研究一下。

分享到：更多

◄ wordpress主题:非插件post_view

wordpress安全:处理垃圾评论(续)-前台管理评论 ►

59条评论我要发表评论!

bedspreads 说到：

2011/10/16 08:33

不错的空间呀

31楼
美国主机评论博客说到：

2011/10/16 19:29

不错，学习了，谢谢

32楼
小李飞刀说到：

2011/10/16 21:31

看起来真不错的啊，

33楼
- 博主
  DH 说到：
  
  2011/10/29 11:24
  
  多谢支持！还要相互学习，多完善博客。
西安SEO顾问说到：

2011/10/16 22:51

看来博主是php高手呀。呵呵

34楼
帅哥
IT圈中人说到：

2011/10/27 20:44

哎呀妈呀，绝对支持，好东西呀。
看起来很爽

35楼
- 博主
  DH 说到：
  
  2011/10/29 11:24
  
  谢谢。其实也是参考学习人家的。
帅哥
影楼团购说到：

2011/10/28 12:48

看代码还是有点头晕的额

36楼
引产后多久可以同房说到：

2011/11/23 16:29

恩，挺不错的

37楼
ZoLxFn 说到：

2012/02/28 20:15

<!–?php 这里为什么是这个加"!–"?

38楼
- 博主
  DH 说到：
  
  2012/02/28 20:31
  
  写错了，代码拷贝错了。
  - ZoLxFn 说到：
    
    2012/02/28 23:25
    
    我说怎么会出错呢
ZoLxFn 说到：

2012/02/28 23:54

还是不行啊,按照你的方法加上了,这次不报错了,不过也不显示了.目录那一块什么也不显示

39楼
- ZoLxFn 说到：
  
  2012/02/29 16:06
  
  解决了,还是上面的错误,第6.14.19行,多”–”
  - 博主
    DH 说到：
    
    2012/02/29 18:54
    
    谢谢指正，当时拷贝的时候被过滤了。。。
- 博主
  DH 说到：
  
  2012/03/01 16:35
  
  你的博客地址是什么？我这里没有记录
  - ZoLxFn 说到：
    
    2012/03/01 17:12
    
    我在本地测试的,现在已经解决了.多谢!
    - 博主
      DH 说到：
      
      2012/03/01 20:04
      
      你现在还没有博客吧，如果有，我逛逛你的博客
      - ZoLxFn 说到：
        
        2012/03/01 22:00
        
        是啊,还没建好.建好了给你留言
    - 博主
      DH 说到：
      
      2012/03/02 12:36
      
      看来，你在偷偷打造史上最强的主题，呵呵。