这是一篇完整的「WordPress文章目录」插件完整教程,我们将使用「 Easy Table of Contents 」这款插件,在 WordPress 文章,自动生成大纲目录。
在文章加入索引目录,站在读者角度,可让他们在阅读前,迅速掌握文章重点,快速找到想看的段落,优化用户体验。
站长角度,新增 WordPress文章目录,妥善运用标题标签(H1、H2、H3 等 .. ),可更方便 Google 爬虫抓取网站内容,有助提升 SEO 排名! 更多 WordPress SEO 插件推荐。
制作「WordPress文章目录 」后,还可使用「Q2W3 Fixed Widget for WordPress」插件,将文章目录固定在侧边栏,读者就不用回到文章最顶端,才能找到想看的章节。
本文章节如下。
- 1. Easy Table of Contents 是什么?
- 2. Easy Table of Contents 安装启用+设定
- 3. 目录基础设定+外观修改
- 4. 添加文章目录
- 5. 添加+固定侧边栏目录(额外分享)
- 常见问题
1. Easy Table of Contents 是什么?
![wts-01-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-01-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
Easy Table of Contents 是一款优质的 WordPress文章目录插件,可在任何地方(文章、页面等 .. )自动生成目录。
新增文章后,站长可能会需要新增索引目录,方便读者阅读、搜索章节内容。 有了目录,也更方便 Google 爬虫抓取内容,有助于提升 SEO 排名。
Easy Table of Contents 会抓取文章中的标题标签,自动生成目录,对于网站文章较多的站长来说,非常方便。 更多 WordPress 插件推荐清单。
同时后台已有中文版本,对于英文不好的站长来说,是一款容易上手的插件。
2. Easy Table of Contents 安装+启用
这个章节,我们会安装+启用 Easy Table of Contents 插件。
前往 WordPress 后台 > 安装插件 > 搜索「 Easy Table of Contents 」插件,安装+启用。
![wts-02-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-02-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
3. 目录基础设定+外观修改
Easy Table of Contents 安装+启用完成后,我们就可以进行基础设定:)
前往 WordPewss 设置 > 内容目录,即可进入 Easy Table of Contents 的设置页面。
小备注:本文以生成文章目录为范例,若需生成其他类型目录,也可参考下方教程做设定。
常见设置
第一个块,我们会先看到「 常规设置」。 将启用目录内容类型 、 自动插入内容目录的内容类型 」勾选文章类别。
显示位置可依据站长习惯调整,这边我维持预设,设定在内文第一个标题前也就是跟本文一样的形式。
![wts-03-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-03-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
接着往下滑,我们变更显示条件为 1,这样文章中标题数只要为 1 个以上(含 1 个)时,便会自动生成目录,就比较不会因为有条件不足,而看不到目录的问题。
我们可选择是否显示目录标题,调整标题为中文字。 其余项目可依照站长需求进行调整。
![wts-04-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-04-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
内容目录外观
接着下滑,第二个区块可以调整目录的外观样式,像是:宽度、对齐方式、字体大小 / 粗细等 .. 设定。
最后的「外观样式」选项,先选「自定义」才能自由修改颜色样式。
![wts-05-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-05-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
下滑可以看到颜色修改选项,可更改项目如下:
![wts-06-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-06-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
高级设置
这个区块可对目录表单进行更多细项修改。
我们先将锚点小写、使用连字号选项选选,接着往下的标题层级,全部选选。
另外,站长可自行决定哪些标题层级将会被 Easy Table of Contents 插件,给自动收录到目录列表中(这个依自己需求调整即可)。
![wts-07-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-07-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
往下可以设定生成目录时,自动被系统排除的标题。
可以参照 Easy Table of Contents 说明,加入「 * 」或「 | 」 符号,进行标题排除。
![wts-08-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-08-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
4. 添加文章目录
基础设定完成后,下一步就是在文章上新增目录。
新增文章
前往 WordPress 后台 > 文章 > 添加文章。
![dpp-add-post5-2 WordPress 文章页面 :新增 WordPress 文章](https://img.itaoda.cn/wp-content/uploads/2023/05/dpp-add-post5-2.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
在这边,我们依序输入文章标题、内容。
特殊需求:指派标题层级
在上个章节的进阶设定,我们已勾选全部标题层级,让 Easy Table of Contents 插件去判读这些标题层级,来自动生成目录。
如果有特别需求(例如:希望单一文章目录只显示 H2 标题,不显示 H3 标题),可以参考下图设定。
滑到你的文章下方,找到想显示的标题层级分别勾选即可(这边的优先级别比较高)。
![wts-16-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-16-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
小备注:若没有特殊需求的站长,上图可以不用特别勾选,因为只要在 Easy Table of Contents 进阶设定中,有勾选标题层级,插件就会判读该文章有哪些文章标题是需抓取的,而自动产生目录啰!
文章目录上线
发布、更新文章后,到前台刷新检查,会发现文章目录已被自动抓取!
![wts-10-3](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-10-3.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
5. 添加+固定侧边栏目录(额外分享)
除了在文章中生成标题,我们也能将文章目录新增+固定于侧边栏。
这样的好处是,当访客下滑阅读长文时,可随时从侧边栏目录点击想看的段落,不用再上滑寻找。
本章节,会带领大家新增侧边栏目录,并使用Q2W3 Fixed Widget for WordPress 固定小工具插件,来帮助侧边栏目录固定在文章中。 用简单几个步骤完成!
Step1:新增文章目录至侧边栏
前往 WordPress 后台 > 外观 > 小工具,搜索「 内容目录 」并加入到 Main Sidebar 侧边栏,然后修改标题、颜色等 ..,最后储存设定。
![wts-11-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-11-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
前往前台文章刷新检查,发现侧边栏目录新增成功啰~
![wts-12-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-12-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
小备注:本文使用 WordPress 新版区块小工具 进行教程,若想使用传统小工具,可安装 Classic Widgets(传统小工具)插件,参考相关内容学习唷:)
Step2:安装 Q2W3 插件
前往 WordPress 后台 > 安装插件 > 搜索 Q2W3 Fixed Widget for WordPress 插件,安装+启用。
![wts-13-3](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-13-3.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
Step3:勾选固定目录在侧边栏上
安装插件后,我们回到 WordPress 外观 > 小工具,点击“ 内容目录 ”,勾选“ 固定这个小工具 ”选项,进行储存。
![wts-14-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-14-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
Step4:显示成果一览
前往前台文章,上下滚动测试,发现侧边栏目录固定成功啰~
![wts-15-1](https://img.itaoda.cn/wp-content/uploads/2023/05/wts-15-1.png?imageMogr2/auto-orient/format/webp/blur/1x0/quality/60|watermark/2/text/5rqQ56CB56S-/font/5b6u6L2v6ZuF6buR/fontsize/1200/fill/IzAwMDAwMA==/dissolve/6/gravity/Center/dx/10/dy/10|imageslim)
常见问题
如何制作 WordPress文章目录?
使用 Easy Table of Contents 插件,即可自动抓取文章中的标题标签(如:H1、H2、H3 等 .. ),并生成目录,对于文章内容庞大的站长来说,是一款优质的「 WordPress 文章目录 」生成插件。
除此之外,还能修改目录样式外观,使样式更贴近网站设计风格唷。 更多 Logo 设计+网站配色分享。
为什么要制作 WordPress文章目录?
在文章加入索引目录,可让读者迅速掌握文章重点,快速找到想看的段落,优化用户体验。
将标签标题汇整成目录,会更方便 Google 爬虫获取网站内容,可有效提升文章的 SEO 排名。
如何将文章目录新增+固定在侧边栏?
将目录新增至侧边栏,可前往 WordPress 外观 > 小工具,找到「 内容目录 」小工具,新增至 Main Sidebar(主要侧边栏)即可。
新旧版小工具的新增大同小异,可参考文章+影片同时学习。 更多 WordPress 新版区块小工具教程。
最后,使用 Q2W3 Fixed Widget for WordPress 工具固定插件,即可将目录固定至侧边栏中,上下滚动时,读者便可在侧边栏搜寻想看的段落。
想要调整侧边栏的文章 /商品排序,有推荐的插件吗?
Category Order and Taxonomy Terms Order 插件可以帮助网站的文章分类、商品分类进行排序,让访客可优先点击指定选项。
原文链接:https://www.itaoda.cn/blog/12056.html,转载请注明出处。
评论0