如何给WordPress网站中的文章页面添加内容目录

2种方法实现：

1、插件。如Content Index for WordPress

2、像高时银博客那亲通过代码来实现。在主题的functions.php文件中添加如下代码：

function article_index($content) {

$matches = array()

$ul_li = ''

$r = "/<h3>([^<]+)</h3>/im"

if(preg_match_all($r, $content, $matches)) {

foreach($matches[1] as $num =>$title) {

$content = str_replace($matches[0][$num], '<h3 id="title-'.$num.'">'.$title.'</h3>', $content)

$ul_li .= '<li><a href="#title-'.$num.'" 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" )

然后在发表文章时选择要做目录的词语，并用<h3>把它们括起来，如<h3>我是索引标题</h3>。

再就是添加CSS样式就可以了。

其实现这样的一个功能还是比较简单的，也就是在文章内容中插进标题标签，然后弄成目录就是了，下面是我写的一个简单的代码，用文本编辑器打开当前主题目录下的functions.php，将以下代码放到里面

function

article_index($content)

{

$matches

=

array()

$ul_li

=

''

$r

=

"/<h3>([^<]+)<\/h3>/im"

if(preg_match_all($r,

$content,

$matches))

{

foreach($matches[1]

as

$num

=>

$title)

{

$content

=

str_replace($matches[0][$num],

'<h4

id="title-'.$num.'">'.$title.'</h4>',

$content)

$ul_li

.=

'<li><a

href="#title-'.$num.'"

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"

)

方法/步骤

1

在编辑文章的时候，切换到HTML模式，将需要添加到目录中的标题用h3标签括起来就可以了。如

<h3>我是索引标题</h3>

当然你也可以用其他标签，如h1，p等，将以上代码第12行中的h3改成你自己的标签名称就可以了。

2

上

面这段代码只是在文章显示的时候插入文章目录，并不会修改你的文章内容。以上代码也不包括样式美化代码，所以只添加以上代码，文章目录看起来一篇混乱，所

以你得自己添加一些css代码来美化一下这个目录。如果你不会css，可以用我写的，将以下css代码放到主题目录下的style.css中就可以了（并

不是每个网站都适用）：

#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

}

3

以

上代码的功能比较单一，只有单级目录，不能实现多层级的复杂而完善的索引目录功能，如果你需要这些功能可以试试这以下这几个插件，使用也都比较简

单：Content

Index

for

WordPress、jQuery

Table

of

Contents

、WP-TOC

方法/步骤

输入网站的登陆地址，进入到网站管理后台，鼠标放在文章管理选项上，找到分类目录点击进入；

然后大家可以看到添加新的分类目录的文字提示，然后在第一个长条框里面输入这个分类目录的名称；

然后填写这个分类目录的别名，这儿大家一定要注意，要填写这个分类目录名称的英文或者拼音，一定不能填写汉字，切记；

然后下面的父节点是用来表现层级关系的，在我们文章较少的情况下，默认就好；

然后下面的图像描述还是有必要填写一下的，这个是分类目录的description标签内的描述，所以站在seo的角度是有必要填写的；

当这些要素全部添加完毕之后，那么我们新的分类目录就算创建完成了，然后点击下面的“添加新分类目录”即可；

然后我们就可以在网站右侧的分类目录列表中，看到我们已添加的分类目录。

---