正在载入...

上次 @倡萌 童鞋发邮件问我,我的WordPress文章内容目录(内容索引列表)怎么实现的,先介绍5种实现WordPress文章内容目录(内容索引列表)方法,其中有5款实现WordPress文章内容目录(内容索引列表)的插件,1种是直接在fuctions.php添加代码实现,下面先从省事的插件开始介绍:


Content Index for WordPress 锚文本内容索引

WordPress Content Index for WordPress 锚文本内容索引插件,名字很长,但是作者就是这么长的一个名字。

在文章里添加一个内容索引,表现为锚文本的形式。可以在后台进行配置,控制显示的样式。好久没有更新了,根据平时收集的问题,以及几位热心博主给出的建议,此次更新做了比较多的更改,尝试性的修复内存溢出的问题,具体是不是解决了还希望大伙帮忙留意下~

看到百度百科里的功能,感觉还是比较有必要的,特别是文章比较长的时候。在wordpress.org也看到过,但是不能进行设置,还是自己做个比较放心,改起来也舒服,而且,可以增加些内链,增加些锚文本,增加些关键词,反正总比没有的好就是了。

啊…嗯…本文就是最好的演示。下面会有更具体的使用说明及演示。

插件设置
进入wordpress后台管理,设置->文章内索引

  1. 启用方式
    开启 – 默认所有文章开启,可以在单个文章中设置为禁用(类似于黑名单);
    关闭 – 默认所有文章禁用,可以在单个文章中设置为启用(类似于白名单)。
  2. 位置:设置索引栏在文章中的显示位置,居左和居右均为文章环绕型的,会占用文章的部分位置。选择顶部则会在文章标题的下方,内容(摘要)的上方显示,不占用文章内容位置;
  3. 为索引添加编号:是否在索引项目前添加编号,如果出现h1~h5不同的标签,插件会自动识别并显示出层级关系。
    wp-content-index-screenshot索引自动编号
  4. 为正文中的heading添加编号:实现类似office里边段落编号的功能。如下图:
  5. 标题:索引栏的标题,可以设置是否开启。如果开启本选项,还可根据需要进行显示文字的设置,若为空,那么将显示插件默认的“文章内索引”字样。
  6. 层级关系:是否显示不同层级间的缩进。开启此功能,如“4”“4.1”“4.1”将相对于他的父级“4”进行缩进(无论从视觉还是代码结构均);关闭此功能,所有索引将会按照自然顺序显示,1、2、3、4、5、6…… 同样,无论是视觉还是代码。
  7. 隐藏按钮:是否显示隐藏按钮并开启隐藏索引栏的功能,设置此项主要是为了减少较长或过宽的索引栏对文章内容的影响,关闭后更易于用户阅读;
  8. 显示无内容项:是否显示空的索引。
    如果您在文章中添加了<h3></h3>,标签中并没有任何内容,但是,本插件仍然会给此标签建立一个索引,索引的名称是自动进行编号的。
  9. 显示索引(空)项:是否显示表示层级关系却无实际意义的空项。
    请看实例:
    <h2>索引2</h2>
    <h3>索引3</h3>
    h2后面紧跟着h3时,将会显示出层级关系,比如 1 和 1.1
    但是如果出现另一种情况,如:
    <h2>索引2</h2>
    <h4>索引4</h4>
    h2后面跟着h4,按照正常的层级关系怎样都是说不通的,中间差了一层h3,但是插件仍然显示出 1 和 1.1.1 ,它们之间是有个自动添加的 “1.1” 的。这个1.1便是本选项所要控制的对象。
  10. 摘要相关:每篇文章都是可以有摘要的。如果您没有撰写摘要,此选项不会又任何效果。也就是说,此选项只会作用在添加了摘要的文章。
    开启第一层选项,摘要将会自动显示到文章顶部;
    开启第二层选项,摘要将会作为第一项出现在索引栏中。

插件所使用的css样式存放在独立的样式表中,未在后台加入控制。样式表目前会自动加载,如需自定义,请在wordpress主题的样式表中进行样式重置。

在文章中使用

在文章中添加h1~h6标签即可,插件会自动识别层级关系,最后根据设置来输出。

2.42 版开始,可在文章中进行禁用设置!如果某个文章或页面不想使用此功能,可以勾选进行屏蔽。
2.45 版此功能得到优化,可以使用两套配置,根据需要进行设置,类似于黑名单、白名单。

插件文件列表
style.css – 默认样式,现在设置为自动加载
wp-content-index.php – 插件主文件
wp-content-index-zh_CN.*o – 语言包…只有中文。恩,只有中文就够了
官方下载
http://wordpress.org/extend/plugins/wp-content-index/


WP-TOC

WordPress文章内容目录(内容索引列表)WP-TOC插件使用方法:

激活该插件后,在文章中插入[toc depth="2"]即可,2表示h2、h3、h4…等都会被插进目录,类推[toc depth="3"]则表示h3、h4…等都会被插进目录。

WP-TOC插件,好久没有更新了,但是不用担心,能用的。

wp toc 插件演示截图

下载地址:http://wordpress.org/extend/plugins/wp-toc/


Auto Anchor List

WordPress 文章内容目录(内容索引列表)Auto Anchor List 插件 使用方法

比WP-TOC插件先进的地方是,Auto Anchor List有后台,跟wp-toc相似,很久没有更新了,但是功能完善,无需更新。

先看看后台:

WordPress 文章内容目录(内容索引列表)Auto Anchor List 插件后台演示

Auto Anchor List显示效果:

显示效果:文章内容目录(内容索引列表)Auto Anchor List 插件

Auto Anchor List 下载http://wordpress.org/extend/plugins/auto-anchor-links/


Seo Friendly Table of Contents

WordPress文章内容目录(内容索引列表)Seo Friendly Table of Contents 插件使用方法:

编辑文章时,在文章内容前面插入以下代码即可。

[toc="1,2,3" title="目录"]
其中”1,2,3″表示 H1,H2,H3,根据自己博客文章结构设置。

“目录”可以改成自己喜欢的文字。

这样的效果比较适合教程类内容或者比较长的文章使用。

Seo Friendly Table of Contents演示(作者官方网站):
http://www.webfish.se/wp/plugins/seo-friendly-table-of-contents

Seo Friendly Table of Contents下载:

http://wordpress.org/extend/plugins/seo-friendly-table-of-contents/


jQuery Table of Contents

与上面介绍Seo Friendly Table of Contents插件比,添加了jquery。
这是港台同胞制作的插件 jQuery Table of Contents 使用方法

插件 jQuery Table of Contents 使用方法

设定
jQuery TOC安装后,设定也很简单:

jQuery content selector:指定你WordPress文章区域(

)使用的ID或类别,我使用的主题是#content .contenttext,默认的设是则是.single .entry,使用不同的布景必须指定为使用的样式ID或类别。
Header Taq:要形成目录的标题标签,默认是h2,本网站则使用h3。
你瞧,简单几个步骤就让网页有了目录,对于内容较长的文章可是更方便阅读了。

jQuery Table of Contents设置
下载地址:http://wordpress.org/extend/plugins/jquery-table-of-contents/


文章目录免插件的简单实现方法

文章目录免插件的简单实现方法使用方法:

演示,看本站的目录

其实现这样的一个功能还是比较简单的,也就是在文章内容中插进标题标签,然后弄成目录就是了,下面是我写的一个简单的代码,用文本编辑器打开当前主题目录下的functions.php,将以下代码放到,将以下代码放到 <?php 下面就可以(记得用UTF-8编码保存,否则中文会乱码):

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\">
<strong>文章目录</strong>
<ul id=\"index-ul\">\n" . $ul_li . "</ul>
</div>\n" . $content;
}

return $content;
}

add_filter( "the_content", "article_index" );
使用说明
在编辑文章的时候,切换到HTML模式,将需要添加到目录中的标题用<h3>和</h3>括起来就可以了,如<h3>我是索引标题</h3>。当然你也可以用其他标签,如<h1>,<p>等,将以上代码第12行中的h3改成你自己的标签名称就可以了。

上面这段代码只是在文章显示的时候插入文章目录,并不会修改你的文章内容。以上代码也不包括样式美化代码,所以只添加以上代码,文章目录看起来一篇混乱,所以你得自己添加一些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;
}

来源:
http://www.ludou.org/wordpress-content-index-plugin.html


推荐建议

喜爱折腾的,就直接使用露兜的方法吧,就是最后这种方法。

功能最强大的是Content Index for WordPress 锚文本内容索引,如果你的文章很长,需要分节,这个插件很适合你。

jQuery Table of contents使用了jquery技术,可能比较利于网站速度。

各取所需,欢迎各位留言交流使用体验。

本文链接:

关键词:Auto-Anchor-List, Content-Index-for-WordPress, jQuery-Table-of-Contents, Seo-Friendly-Table-of-Contents, WordPress, WP-TOC, 下载, 互联网, 内容索引列表, 插件, 文章内容目录,

(全文完        )

Comments

6 条评论(网友评论:5 条,博主回复:1 条)快速评论

  1. 看起来设置好复杂的样子 先mark下

  2. 对了 想问下博主为什么要把标签加nofollow呢 新手求指教

    • wentong.org/# 和wentong.org在搜索引擎看来是两个不同的网址。加了nofollow,防止搜索引擎误认为内容重复。

  3. 很赞!好好研究一下。

  4. 很赞!好好研究一下。

你需要 登录 才可以回复.