#热门

[WordPress教程] wordpress实现文章内部索引代码 -静鱼客栈

最近在其他Wordpress博客上看到类似百度百科的文章索引的功能，觉得如果文章太长时可以制作文章索引，让访问者看得更清晰，于是我查询了相关的文章索引资料，给大家讲解下如何给wordpress实现文章内部索引代码。

<code>
/* 文章索引 */
function postIndex($content) {
if(is_single()){
$arr = array();
$makeLi = '';
$replace = "/<list>([^<]+)<\/list>/im";
if(preg_match_all($replace, $content, $arr)) {
foreach($arr[1] as $num => $title) {
$content = str_replace($arr[0][$num], '<h4 id="part-'.$num.'">'.$title.'</h4>', $content);
$makeLi .= '<li><a href="#part-'.$num.'" rel="external nofollow"  title="'.$title.'">'.$title."</a>".$my_content."</li>\n";
}
$content = "\n<div id=\"postIndex\">
<ul>\n" . $makeLi . "</ul>
</div>\n" . $content;
}
}
return $content;
}
add_filter( "the_content", "postIndex" );
// -- END ----------------------------------------

文章内部索引代码使用

<code>
<list>标题1</list>
内容1。。。。。。
<list>标题2</list>
内容2。。。。。。

文章内部索引代码css

<code>
/*文章索引*/
#article-index{float:right;margin:12px 0 0px 10px;padding:0 6px;width:200px;border:1px solid #DEDFE1;-moz-border-radius:6px 6px 6px 6px;background:#fff;line-height:24px}
#article-index span{display:block;padding:0 5px;border-bottom:1px dashed #DDDDDD;font-size:15px;line-height:30px}
#article-index-ul{margin:0;padding:3px 0 5px 0;line-height:22px;font-size:14px}
#article-index-ul li{padding:0;background:none repeat scroll 0 0 transparent;list-style-type:disc}

注意：这个功能比较简单，只能调用一个类标题！