wordpress 中如何添加文章目录索引 -wordpress教程

吾爱互联

                                <b>[文章目录]</b>
                                <ul id="index-ul">
<li>添加代码</li>
<li>添加样式</li>
</ul>
                        </div>
为了能够给访问者更好的阅读体验，可以在自己的网站添加文章目录索引功能，目前添加这种功能的方法有二种:
1，就是用两个插件来实现  分别是 <span style="color: #000000;">Content Index for wordpress  和  WP-TOC  这两个插件都是国内作者开发的</span>
<span style="color: #000000;">可以到网站后台在线安装</span>
自己可以去尝试下，提供好多的功能，这里我就不多说了
2，就是自己编写函数代码调用来实现
具体的添加方法如下步骤：
一：<br />
<h2 id="title-0">添加代码
在你主题的函数模板functions.php文件里添加如下代码
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt"><span class="keyword">function</span> article_index(<span class="vars">$content</span>) {</li>
<li>    <span class="vars">$matches</span> = <span class="keyword">array</span>();</li>
<li class="alt">    <span class="vars">$ul_li</span> = <span class="string">''</span>;</li>
<li></li>
<li class="alt">    <span class="vars">$r</span> = <span class="string">"/<h3>([^<]+)<\/h3>/im"</span>;</li>
<li></li>
<li class="alt">    <span class="keyword">if</span>(preg_match_all(<span class="vars">$r</span>, <span class="vars">$content</span>, <span class="vars">$matches</span>)) {</li>
<li>        <span class="keyword">foreach</span>(<span class="vars">$matches</span>[1] <span class="keyword">as</span> <span class="vars">$num</span> => <span class="vars">$title</span>) {</li>
<li class="alt">            <span class="vars">$content</span> = <span class="func">str_replace</span>(<span class="vars">$matches</span>[0][<span class="vars">$num</span>], '<h2 id=<span class="string">"title-'.$num.'"</span>>'.<span class="vars">$title</span>.'</h2>', <span class="vars">$content</span>);</li>
<li>            <span class="vars">$ul_li</span> .= '<li><a href=<span class="string">"#title-'.$num.'"</span> title=<span class="string">"'.$title.'"</span>>'.<span class="vars">$title</span>.<span class="string">"</a></li>\n"</span>;</li>
<li class="alt">        }</li>
<li></li>
<li class="alt">        <span class="vars">$content</span> = <span class="string">"\n<div id=\"article-index\"></span></li>
<li><span class="string">                <b>[文章目录]</b></span></li>
<li class="alt"><span class="string">                <ul id=\"index-ul\">\n"</span> . <span class="vars">$ul_li</span> . <span class="string">"</ul></span></li>
<li><span class="string">            </div>\n"</span> . <span class="vars">$content</span>;</li>
<li class="alt">    }</li>
<li></li>
<li class="alt">    <span class="keyword">return</span> <span class="vars">$content</span>;</li>
<li>}</li>
<li class="alt"></li>
<li>add_filter( <span class="string">"the_content"</span>, <span class="string">"article_index"</span> );</li>
</ol>
</div>
&nbsp;
二：<br />
<h2 id="title-1">添加样式
样式是最头痛的一个问题，下面这个代码添加到博主主题的style.css文件里，即可，不是适合所有主题，大家可根据自己主题自己改样式啊
<div class="dp-highlighter">
<div class="bar"></div>
<ol class="dp-c" start="1">
<li class="alt"><span class="comment">/* 文章目录 */</span></li>
<li></li>
<li class="alt">#article-index {background:#F7F7F7;-moz-border-radius: 6px 6px 6px 6px;border: 1px solid #DEDFE1;float: right;margin: 5px 0 5px 15px;padding: 0 6px;width: 280px;line-height: 24px;}</li>
<li>#article-index b {border-bottom: 1px dashed #DDDDDD;display: block;line-height: 30px;padding: 0 4px;}</li>
<li class="alt">#index-ul {margin: 0;padding-bottom: 5px;}</li>
<li>#index-ul li {background: none repeat scroll 0 0 transparent;list-style-type: disc;padding: 0;margin-top: 5px;margin-bottom: 5px;margin-left: 20px;}</li>
<li class="alt">#index-ul a{text-decoration:none;}</li>
</ol>
</div>
当然如果你感觉这个样式不是很好看，可以对这个样式进行修改添加代码等操作，可以达到你想要的效果
好了，一个简单的文章目录索引功能就这样实现了