WordPress实现文章目录功能

2020-11-29 194Browse 1Like 2Comments

浏览网页经常看到,文章开头有一个目录,点击就跳转过去很方便。HTML通过锚点来实现。是很方便的。

对于长篇幅的文章非常有必要,合理使用文章目录功能,可以帮助访客快速了解文章的内容结构。

 在wrodpress里也有这样的插件。下面介绍这些,是自动生成文章目录插件

WPJAM Basic

WPJAM Basic 是我爱水煮鱼博客多年来使用 WordPress 来整理的优化插件,主要功能,就是去掉 WordPress 当中一些不常用的功能,比如文章修订等,还有就是提供一些经常使用的函数,比如获取文章中第一张图,获取文章摘要等。

对系统要求比较高,PHP需要7.0以上

在后台安装插件,也可以上传安装,也可以搜索,点击安装。

装好在扩展管理找到--》文章目录。然后选 中。

 可以显示到几级,脚本,上课从设置,JS和CSS

编辑文章的时候,文章中的子标题需要按照 h2 h3 排好,插件会自动抓取的。

 第一次用这个功能,写文章的时候每个段落前用H2 标题,保存发布,也没有见出来。折腾半天。

还是没有出来。

有找到下面的插件。

Easy Table of Contents

插件主页搜索Easy Table of Contents,安装比较简单。安装好之后便启用了,在设置-Table of Contents有相关设置,需要开启目录的页面,位置,展示层级等等,

中文界面设置起来也很方便

后台选择设置 启用支持和自动插入把 文章和界面t勾选,这样就会在文章中插入目录。

其他设置,位置可以最上面,也可以右边浮动。标签名字,也是文章目录的名字。这个一般设置,文章目录。

红筐里的,设置一下。其他详细设置就不在说了。

保存后,写文章如下格式。

     《h2》标题1《/h2》

     内容。这里写好好好多内容。图片呀。。。。。。。

  《h2》标题2《/h2》

     内容。。。。。。。

  《h2》标题3《/h2》

     内容。。。。。。。

设置的时候有三个H2才会生成目录。所以一个不会生成。两个也不会生成。最少三个。才可以生成。这个可以自已设置。

这个插件用的人很多。

下面这个插件,我们现在用的。设置比较方便。

LuckyWP Table of Contents

特色

  • 自动插入目录(配置文章类型和位置)。
  • 搜索引擎优化友好:目录代码已经准备好由Google用于结果页面上的代码片段。
  • 通过短代码、古腾堡区块或小工具插入。
  • “经典编辑器”工具栏上的按钮。
  • 古腾堡区块分为“普通区块”。
  • 设置显示目录的最小标题数。
  • 设置目录标题的深度。
  • 按级别或文本跳过标题。
  • 层次或线性视图。
  • 计数项:按顺序或嵌套的十进制或罗马数字。
  • 可定制的外观:宽度、浮动、标题字体大小和重量、项目字体大小、颜色。
  • 颜色方案(深色、浅色、白色、透明、继承自主题)和覆盖颜色的能力。
  • 切换显示或隐藏(可选)
  • 可定制标签。
  • 平滑滚动(可选)。
  • 设置平滑滚动的顶部偏移量。
  • 用<!–noindex–&gt括起目录;标记(可选)。
  • URL中的哈希值相当高(比如example.com/faq/#如何做到这一点)。
  • RTL支持。
  • 可用覆盖特定文章的全局设置。
  • 与WordPress主题和插件高度兼容。

在后台安装启用后,在左边设置里可以找到”目录“打开进行设置

常规里就可设置多少个标题数.

外观设置用的多了。
可定制的外观:宽度、浮动、标题字体大小和重量、项目字体大小、颜色。
颜色方案(深色、浅色、白色、透明、继承自主题)和覆盖颜色的能力。

自动插入

按图设置就可以。位置的话可以自已选

支持的位置:

  • 第一个标题之前;
  • 在第一个标题之后;
  • 第一个区块之后(段落或标题);
  • 文章内容顶部;
  • 文章内容的底部。

这个是很多人喜欢的原因。可以选的多。目录,主要这几个项目。

保存更改就可以了。

也可以。在不同文章设置不同的样式。

不同的位置呀。配色方案。。。

在写文章的时候,右下角有一个文章目录。可以在这里自定义。

自定义内容,和上面的差不多。

其他插件

Table of Contents Plus

GutenTOC – Advance Table of Content for Gutenberg
等等。

这里就不多介绍了。

xiaoyaoxi

保持饥渴的专注,追求最佳的品质

Comments

  • xiaoyao
    xiaoyao

    这些插件很实用。

    2020-11-29
  • xiaoyao
    xiaoyao

    WPJAM Basic 不显示的原因估计对服务器要求高,云主机。有root权限的才行

    2020-11-30