WordPress非插件添加文章目录功能

本文目录[隐藏]

1用代码实现文章目录
2使用说明
3CSS样式参考

给文章添加文章目录功能，不仅是文章条理更清楚，还有利于SEO，下面将介绍露兜老大的使用代码来实现文章目录的方法，方便喜欢折腾代码的朋友，如果你不想折腾代码，你可以试试下面的WordPress文章目录插件：TOC 和 Content Index for WordPress。

用代码实现文章目录

1.将下面的代码添加到主题的 functions.php 文件的最后一个 ?> 前面：

<span style="color: #000000; font-weight: bold;">function</span> article_index<span style="color: #009900;">&#40;</span><span style="color: #000088;">$content</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #009933; font-style: italic;">/**
     * 名称：文章目录插件
     * 作者：露兜
     * 博客：http://www.ludou.org/
     * 最后修改：2011年2月10日
     */</span>
&nbsp;
    <span style="color: #000088;">$matches</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000088;">$ul_li</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">''</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000088;">$r</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;/&lt;h3&gt;([^&lt;]+)&lt;/h3&gt;/im&quot;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #b1b100;">if</span><span style="color: #009900;">&#40;</span><span style="color: #990000;">preg_match_all</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$r</span><span style="color: #339933;">,</span> <span style="color: #000088;">$content</span><span style="color: #339933;">,</span> <span style="color: #000088;">$matches</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #b1b100;">foreach</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$matches</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$num</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$title</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000088;">$content</span> <span style="color: #339933;">=</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$matches</span><span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #000088;">$num</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'&lt;h3 id=&quot;title-'</span><span style="color: #339933;">.</span><span style="color: #000088;">$num</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&quot;&gt;'</span><span style="color: #339933;">.</span><span style="color: #000088;">$title</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&lt;/h3&gt;'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$content</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #000088;">$ul_li</span> <span style="color: #339933;">.=</span> <span style="color: #0000ff;">'&lt;li&gt;&lt;a href=&quot;#title-'</span><span style="color: #339933;">.</span><span style="color: #000088;">$num</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&quot; title=&quot;'</span><span style="color: #339933;">.</span><span style="color: #000088;">$title</span><span style="color: #339933;">.</span><span style="color: #0000ff;">'&quot;&gt;'</span><span style="color: #339933;">.</span><span style="color: #000088;">$title</span><span style="color: #339933;">.</span><span style="color: #0000ff;">&quot;&lt;/a&gt;&lt;/li&gt;n&quot;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #000088;">$content</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">&quot;n&lt;div id=&quot;</span>article<span style="color: #339933;">-</span>index<span style="color: #0000ff;">&quot;&gt;
                &lt;strong&gt;文章目录&lt;/strong&gt;
                &lt;ul id=&quot;</span>index<span style="color: #339933;">-</span>ul<span style="color: #0000ff;">&quot;&gt;n&quot;</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$ul_li</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">&quot;&lt;/ul&gt;
            &lt;/div&gt;n&quot;</span> <span style="color: #339933;">.</span> <span style="color: #000088;">$content</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #b1b100;">return</span> <span style="color: #000088;">$content</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
add_filter<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">&quot;the_content&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;article_index&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>

function article_index($content) {

/**

* 名称：文章目录插件

* 作者：露兜

* 博客：http://www.ludou.org/

* 最后修改：2011年2月10日

*/

$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">

文章目录

</div>n" . $content;

}

return $content;

}

add_filter( "the_content", "article_index" );

使用说明

在编辑文章的时候，在可视化模式下，选中文字，设置为标题3(H3)，或者切换到HTML模式，将需要添加到目录中的标题用<h3>和</h3>括起来就可以了，如<h3>我是索引标题</h3>。当然你也可以用其他标签，如<h2>，等，将以上代码第12行中的h3改成你自己的标签名称就可以了。

CSS样式参考

为了实现前台的显示效果，你可以参考下面的css

<span style="color: #cc00cc;">#article-index</span> <span style="color: #00AA00;">&#123;</span>
    -moz-border-radius<span style="color: #00AA00;">:</span> <span style="color: #933;">6px</span> <span style="color: #933;">6px</span> <span style="color: #933;">6px</span> <span style="color: #933;">6px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #cc00cc;">#DEDFE1</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">right</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">15px</span> <span style="color: #933;">15px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">6px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">200px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">23px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#article-index</span> strong <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">border-bottom</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #993333;">dashed</span> <span style="color: #cc00cc;">#DDDDDD</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">line-height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">30px</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">4px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#index-ul</span> <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding-bottom</span><span style="color: #00AA00;">:</span> <span style="color: #933;">10px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#index-ul</span> li <span style="color: #00AA00;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span> <span style="color: #993333;">repeat</span> <span style="color: #993333;">scroll</span> <span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span> <span style="color: #dc143c;">transparent</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">list-style-type</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">disc</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
    <span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>

#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;

}

#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;

}

#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;
}