现在的位置: 首页 > WordPress教程 > 正文

wordpress文章目录非插件实现方法

2012年08月26日 WordPress教程 ⁄ 共 1824字 评论数 2 ⁄ 阅读 3,276 次
文章目录

百度百科的目录形式相信大家并不陌生,在内容上方都有文章目录,通过文章目录可快速到达相关位置。这种形式一方面对于用户友好,另一方面对于搜索引擎也很友好。wordpress文章目录的实现方法可以使用插件,不过如果有代码可以达到效果就最好不用插件。下面笨鸟为大家分享一下在一个博客里见到的wordpress文章目录非插件实现方法。

wordpress文章目录实现方法

打开所用主题根目录,找到functions.php文件,用EditPlus打开,将以下代码放置在第一行第一个<?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" );

然后,还需要对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;
}

代码使用方法

在编辑文章的时候,切换到HTML模式,将需要添加到目录中的标题用<h3>和</h3>括起来就可以了,如<h3>我是索引标题</h3>。当然你也可以用其他标签,如<mu>,<h2>等,将以上代码两处<h3>改成你自己的标签名称就可以了。

代码使用说明

1、使用本代码必须在html模式下,切换到可视化模式下则失效;

2、使用本代码做的内容不能用段内的,必须是顶格完整文字,否则会造成文章样式错乱;

3、所选文字不可再使用其他样式,如加粗、加色等;

修改目录标题字体样式

修改标题字体样式需要修改<h3>的样式,所以需要进入主题根目录,在css文件夹里找到css.css文件及editor-style.css文件。其中editor-style.css在控制在后台显示的样式,css.css控制在博客前台显示的样式,所以两个一定要一起修改,才能保证,在后台的修改和前台一致,保证所见即所得。如下为笨鸟的修改

h2 {font-size: 16px;line-height:185%;color: #008000;}

主题自动空两格

有些主题默认会空两格,此时可能会出现目录偏右侧,样式很不美观。此时,需要修改原空两格为0值,如,笨鸟的hotnews主题修改方式为:

#index-ul li {

background: none repeat scroll 0 0 transparent;

list-style-type: disc;

padding: 0;

margin-left: 20px;

text-indent:-1em; }

» 声明:本站文章源于个人经验总结或书籍、互联网转载,内容仅用于个人学习,请勿转载,否则后果自负!

目前有 2 条留言 其中:访客:1 条, 博主:0 条 引用: 1

  1. 老k : 2014年05月09日02:00:36  -49楼 @回复 回复

    笨鸟兄,有个插件想付费请你改造一下,有兴趣的话请联系我

给我留言

留言无头像?