1、前言
本文带你认识一款生成、添加同时显示文章内容目录的 WordPress 插件“LuckyWP Table of Contents”。
在一篇有很长内容的文章中定位到想去的章节是困难的，更何况要求快速和准确。这时候，添加文章目录列表到文章页面就显得非常必要。
本着不重复造轮子的原则，使用 WordPress 现成的插件可以提供生成内容目录的功能，比如“LuckyWP Table of Contents”。
插件的主页： https://wordpress.org/plugins/luckywp-table-of-contents/ 。
由于写文章时用的是英文版的 WordPress，所以本篇文章会有英文的界面说明。
更新文章时的 WordPress 已经换成中文版，所以该插件的界面也安装了简体中文的语言包。
2、安装插件“LuckyWP Table of Contents”
本次安装选择通过WP后台的插件在线安装的方式：
导航到“Plugins -> Add New”页面，然后搜索“LuckyWP Table of Contents”。
选择如下的进行安装就行了：
点击图片查看大图
3、配置插件
依次展开“设置（Settings） -> 目录（Table of Contents）”进入插件的设置页面。
该插件有“常规（General）”、“外观（Appearance）”、“自动插入（Auto Insert）”、“处理标题（Processing Headings）”和“其他（Misc.）”等设置章节，它们分别涵盖行为、展现、位置、范围和其他有用的杂项。
3.1 “General”（常规）
3.1.1 层次与编号
3.1.1.1 最小标题数（Minimal Count of Headings）
如果文章内容的标题数低于这个数，那么系统将不会显示目录。
保留默认值即可。
3.1.1.2 深度（Depth）
生成目录的最大标题层次数目。
比如设置为5,则只能够生成五层的目录层次。
保留默认值即可。
3.1.1.3 层级展示（Hierarchical View）
允许层级展示的意思是目录的项将会进行缩进。
否则就没有缩进。
一般设置为缩进，这样更容易看到目录的层次结构，易于访客找到目标标题。
笔者勾选了此选项。
没有层级展示的效果：
有层级展示的效果：
3.1.1.4 计数（编号，Numeration）
一般情况下文档的目录不仅有层次结构缩进，而且在标题的前面还有编号。
而此选项就是选择编号的风格。
- “Without numeration”：表示没有编号
-
“Decimal numbers (nested)”：表示嵌套的十进制数字
-
“Decimal numbers”：表示十进制数字，没有嵌套关系
-
“Roman numbers (nested)”：表示嵌套的罗马数字
-
“Roman numbers”：表示没有嵌套的罗马数字
嵌套的实例：
点击图片查看大图
非嵌套的示例：
点击图片查看大图
3.1.1.5 计数后缀（编号后缀，Numeration Suffix）
此选项设置的后缀将放置于目录编号之后，如 1.3)。
默认是“None”。
其中有点“.”和由英文收括号“)”可选。
笔者选择收括号。
3.1.2 标题、隐藏和标签
- 标题（Title）：
设置所生成目录的标题，默认是“Contents”。
笔者设置为“目录”。
-
切换显示/隐藏（Toggle Show/Hide）：
启用（勾选）就显示该按钮，点击它可对目录进行显示或隐藏。
笔者勾选了此选项。
-
“显示”标签（Label Show）：
当上述按钮是“显示”状态时，显示的文本由此选项设定。
笔者设置为“显示”。
-
“隐藏”标签（Label Hide）：
与上一选项类似。
此处设置的是隐藏目录按钮的文本。
笔者设置为“隐藏”。
-
目录默认是否隐藏（By default, items of contents will be hidden）：
勾选选项则表示当访问文章时一开始文章目录将被隐藏，直到点击“显示”按钮才显示出目录。
按需设置。
3.1.3 行为
-
平滑滚动（Smooth Scroll）：
不用多说，勾选就是了。
-
滚动时偏移顶部的高度（Scroll Offset Top）：
该选项只有在上一个选项启用的情况下才会出现。
表示点击目录项时浏览器视口滚到相应的标题时，标题偏移（离）视口顶部的长度。
默认即可。
点击“保存更改（Save Changes）”保存修改。
修改后的配置：
点击图片查看大图
3.2 “Appearance”（外观）
3.2.1 目录的宽度和字体
3.2.1.1 宽度（Width）
该选项指目录所在HTML元素要占用多少宽度。
它有三种选择：
- “Auto”：自动，即根据目录项的最大宽度而自动调整。
点击图片查看大图
-
“Full Width”：全宽，即尽可能占用父元素的全部宽度。
点击图片查看大图
-
“Custom Value”：自定义宽度值。
- 单位是百分号“%”，意思是目录容器宽度占用父元素宽度的相对大小比例。
- 单位是像素“px”，这里是目录容器的宽度被此值绝对地指定。
笔者比较喜欢“全宽”这个值，感觉好看点。
3.2.1.2 浮动（Float）
这里的浮动不支持上面“Width”值为“Full Width”，若是其他值则支持。
浮动的值有：
- “None”：默认值，表示自然位置。
- “Left”：左侧，相当于CSS属性
float:left;。 - “Right”：右侧，设置这个时，目录容器会往右靠。
- “Right without flow”：右浮动，即是靠右，但不流动。笔者估计是有
float:right;，但后面的元素不看齐。 - “Center”：中间。
笔者选择“左侧”。
3.2.1.3 标题字型大小（Title Font Size）：
这里有两个选择：
- “Default”：默认值。
- “Custom Value”：自定义值。
若选择这个，将会有多个大小单位可选。
一般情况下保持默认值就够了。
3.2.1.4 标题字体粗细（Title Font Weight ）
“Weight”表示字体的粗细，这里有多种选择，选择一个自己看得顺眼的就行了。
3.2.1.5 项目字型大小（Items Font Size）
就是目录列表中的标题条目的字体大小。
同样有“默认（Default）”和“自定义（Custom Value）”，后者还有多种单位作为选择，字体大小调整适合就够了。
其实默认值（“Default”）也够用了。
3.2.1.6 配色方案（Color Scheme）：
选择一个你认为好看的就行了。
笔者选择“透明（Transparent）”。
3.2.2 覆盖配色方案颜色（Override Color Scheme Colors）：
顾名思义，就是覆盖上面“Color Scheme”所选择的方案的配色。
这里颜色既可在拾色板上选取，也可以输入十六进制的RGB值。
点击图片查看大图
点击十六进制文本输入框旁的“Clear”按钮可重置颜色，变为默认颜色。
- 背景颜色（Background Color）：设置目录容器的背景颜色。
-
边框颜色（Border Color）：设置边框的线条颜色。
-
标题颜色（Title Color）：设置目录标题颜色。
-
链接颜色（Link Color）：设置目录中条目链接的字体颜色。
-
悬停链接颜色（Hover Link Color）：设置条目链接在鼠标指针在其上方悬停时该条目字体的颜色。
-
已访问链接颜色（Visited Link Color）：设置条目链接被访问（点击）过后的颜色。
点击“保存更改（Save Change）”保存修改。
此时笔者的配置：
点击图片查看大图
3.3 “Auto Insert”（自动插入）
要想把目录插入到文章正文，那么就必须开启这个“自动插入目录”（Auto Insert Table of Contents）。
把方框勾选就是开启。
开启之后还是不能立即在文章中看到目录，还要设置“文章类型”（Post Type），意思是在哪些类型的文章中能看到目录。
可选的“文章类型”有“文章（Post）”、“页面（Page）”和“媒体（Media）”三种，其中，“文章”在WordPress中就是默认的文章一般通过“文章（Posts） -> 写文章（Add New）”创建的文章就是“Post”类型。
而，“页面（Page）”指的是通过“页面（Pages） -> 添加页面（Add New）”创建的页面。
最后一个“Media”（媒体），上传到WP的图片和视频都属于这个。
笔者除了“Media”不勾选外，其余的都勾选了。
至于“Position”（位置），设定目录将在文章内容中的哪个位置出现。
位置的可能有：
- “Before first heading”（在第一个标题之前）。
-
“After first heading”（在第一个标题之后）。
-
“After first block (paragraph or heading)”（在第一个区块之后，文本块可以是段落或者标题）。
-
“Top”：在文章的顶部，在文章任何实际内容之前显示。
-
“Bottom”：在文章任何实际内容之后显示。
笔者选择了“在第一个标题之前”（Before first heading）。
点击“ 保存更改（Save Changes）”保存修改。
当前的配置如下：
点击图片查看大图
3.4 “Processing Headings”（处理标题）
此部分只有一个选项“始终用于文章类型”（Always for Post Types）。
它有三个候选框：
- “Post”（文章）。
-
“Page”（页面）。
-
“Media”（媒体）。
据笔者做的实验，即使不勾选这三项的任何一项，也不影响嵌入到文章内容中的目录。
做另一个实验时发现，这个选项影响到显示到小部件（Widgets）的目录。
如果没有选择任何一项，那么点击小部件中的目录中的条目，它不会跳转到文章的任何一个标题。
只有勾选了相应的文章类型，点击小部件中的目录条目才会跳转到文章相应的位置（标题）。
有备无患，笔者把“Post”和“Page”都勾选了。
点击“保存更改（Save Changes）”保存修改。
当前的配置如下：
点击图片查看大图
3.5 “Misc.”（其他）
3.5.1 “Skip Headings”（跳过标题）
- “By Level”(按层次)：
生成目录时会忽略在这个选项中勾选中的标题层次。
比如，笔者勾选了“H1”,那么只要是HTML标签“
<h1>”的内容就不会出现在目录中。 -
“By Text”（按文本）：
如果标题包含文本框中的规则，则不显示该标题。
文本框下面的话是这样说的：
指定要从目录中排除的标题（每行一个）。 使用星号 * 作为通配符来匹配任何文本。
3.5.2 “Hash”（哈希值）
说实话，笔者不知道为什么要在杂项选项中有这个奇怪的区域名称。
看文字意思，它应该是设置文章中标题锚点的风格。
- “Hash Format”（哈希格式）：
锚点生成的风格：
- As heading (#Example_Heading_Text)：此项应该是根据标题的文字翻译成英文字母作为锚点文本，比如中文被译成不带音标的拼音。
- As heading without transliterate (#“Auto-Insert”（自动插入）)：此项直接使用标题的文字作为锚点文本。
- Counter (#lwptoc1, #lwptoc2, …)：这个就把按文章标题出现的次序计算锚点文本，这些锚点文本格式是“#lwptoc{NUM}”，其中的“{NUM}”是标题出现的次序，以阿拉伯数字表示。
笔者喜欢第二种风格，有利于 SEO。
-
“Convert to lowercase”（转换为小写）：
若是勾选它，那么插件会将锚点文本中的所有英文字母转换为小写。
-
“Replace underscores _ with dashes -”（将下划线_替换为破折号-）:
替换下画线“_”为连接号“-”。
笔者勾选了它。因为 URL 中连接号不用被编码。
3.5.3 “SEO”（搜索引擎优化）
-
在目录容器的前后增加“
<!--noindex-->”标签：点击图片查看大图
-
在目录的条目链接“a”标签增加“rel=”nofollow””属性：
点击图片查看大图
3.6 “Other Settings”（其他设置）
-
在文章类型中显示面板“目录”（Show Panel “Table of Contents” in Post Types）：
对于这个，笔者不知道它的意思。
-
列出标记标签（List Markup Tags）：
这个用来设置作为包裹目录中每个条目的外层HTML标签。
这里有三个候选项：“DIV”、“UL/LI”和“OL/LI”。
笔者觉得，既然目录是列表型的结构，那么应该选用“列表”。
而“UL/LI”是无序列表，“OL/LI”是有序列表。
故笔者选用无序列表作为容器。
-
额外的CSS类（Additional CSS Class(es)）：
这里填写的内容是应用到目录最外层HTML元素所属的CSS类，把内容添加到该元素的“class”属性中。
这样做，插件笔者的意图应该是让插件用户对目录列表有更大的自由控制权。
点击“保存更改（Save Changes）”保存修改。
最终的配置如下：
点击图片查看大图
4、总结
本文详尽地讲述了WordPress插件“LuckyWP Table of Contents”如何设置与添加和显示文章目录相关的选项，并且在部分重要的选项配置之余用图片对比了应用选项前后的效果，或者用的是文字来详细描述。
该插件除了在文章内容中插入目录列表，还可以将目录放进“小工具（Widgets）”中。
鉴于本人的相关知识储备以及能力有限，本博客的观点和描述如有错漏或是有考虑不周到的地方还请多多包涵，欢迎互相探讨，一起学习，共同进步。
本文章可以转载，但是需要说明来源出处!
本文使用的部分图片来源于网上，若是侵权，请与本文作者联系删除： admin@icxzl.com