8 个最佳阅读进度条 WordPress 插件(大多数是免费的)

已发表: 2022-08-02

想在 WordPress 中添加阅读进度条吗?

阅读进度条是改善网站用户体验的好方法,它为读者提供了帖子进度的视觉指示器。

如果您想向您的网站添加一个,有大量免费或负担得起的插件可帮助您添加进度条并将其设计与您网站的其余部分相匹配。

在这篇文章中,我们收集了 8 个热门选项,其中 6 个是完全免费的。

下面,我们将分享每个插件的详细信息,并简要介绍进度条的工作原理以及它们为何对您的网站有益。


什么是阅读进度条?

阅读进度条的功能几乎与名称所说的完全一样——它可以让您网站的访问者看到他们在您的帖子内容中取得了多大的进步。

通常,您会将水平条粘贴到页面的顶部或底部。 当用户滚动浏览帖子时,该栏将“填满”以指示他们与内容结尾的距离。

一些插件还让您可以选择在内容的左侧或右侧创建垂直进度条。 在这些情况下,它看起来几乎像一个滚动条。 但是,关键区别在于进度条将基于实际内容的长度,而浏览器滚动条基于页面的全长。

以下是网站使用阅读进度条的典型方式的两个真实示例……

HubSpot 添加了一个橙色进度条,该进度条直接显示在其粘性标题下方:

HubSpot 阅读进度条
HubSpot 的阅读进度条示例。

Thrive Themes 有一个绿色的阅读进度条,它也出现在粘性标题下方:

Thrive Themes 中的阅读进度条示例。
Thrive Themes 中的阅读进度条示例。

但是,您可以根据您的站点尝试不同的进度条位置。

一种立即改善网站用户体验的简单方法? 添加阅读进度条! 从这里开始️ 点击推

为什么要在 WordPress 中添加阅读进度条?

在较高的层次上,阅读进度条是提高网站可用性和用户体验的一种方式,它可以对重要指标产生更直接的影响,例如页面停留时间和跳出率。

首先,让我们谈谈一般的用户体验。

大多数人想知道他们在投入时间参与您的帖子之前会进入什么领域。 是他们可以在任务之间阅读的 5 分钟文章,还是需要认真关注的 20 分钟长文章?

进度条可以让读者在开始阅读时对您的帖子有什么期望。 为了帮助解决这个问题,一些网站除了进度条之外还添加了估计阅读时间,下面的几个插件都支持。

一旦您的访问者开始阅读,进度条也可以鼓励他们完成帖子。 例如,如果读者看到他们已经完成了 80% 的内容,他们会被鼓励完成最后 20% 的内容,因为他们已经完成了大部分帖子。

用户体验的这些改进可以对两个关键指标产生积极影响:

  • 停留时间——通过鼓励读者在开始阅读后完成一篇文章,您可以增加他们在页面上花费的时间。
  • 跳出率——通过增加访问者在您的页面上花费的时间,您将增加访问者继续与您的网站互动的机会(可能通过阅读另一篇文章),这有助于降低您的跳出率。

如果您将进度条与其他提升用户体验的策略(例如高质量的导航结构和智能分页的使用)结合起来,您可以为访问者创造一个非常好的、引人入胜的体验。

8 个最佳阅读进度条 WordPress 插件

现在,让我们进入 8 个最佳进度条 WordPress 插件,以帮助您为您的网站添加阅读进度条。

虽然您可以找到通用进度条插件,让您可以为任何内容创建自定义进度条,但本文特别关注根据页面内容长度添加阅读进度指示器的插件。

在定价方面,其中 6 个插件是完全免费的,而其余 2 个插件价格实惠,并增加了一些额外的灵活性,这是您在大多数免费选项中找不到的。

最重要的是,所有这些插件都应该适用于几乎任何 WordPress 主题。

读表

读表插件。
读表

Read Meter 是 Brainstorm Force 的一个阅读进度条插件,Brainstorm Force 是流行的 Astra WordPress 主题(我们列出了最快的 WordPress 主题)背后的同一团队。

该插件可让您自动添加一个贴在页面顶部或底部的阅读进度条。 您还可以选择显示帖子的预计阅读时间以及进度条。

这是您使用 Read Meter 可以获得的所有内容:

  • 顶部或底部放置- 在用户屏幕的顶部或底部显示进度条。
  • 帖子类型定位- 您可以选择仅添加某些帖子类型(包括自定义帖子类型)的阅读进度。 例如,您可以将其显示在博客文章上,但不能显示在页面上。
  • 阅读时间——自动将预计阅读时间添加到帖子的各个部分(例如标题下方)或使用简码手动放置。
  • 可自定义的颜色——您可以自定义每个元素的颜色和样式,使其与您的网站相匹配。

价格:读表是 100% 免费的。

阅读进度条

阅读进度条插件。
阅读进度条

与 Read Meter 一起,Reading progressbar 是 WordPress.org 上另一个最受欢迎的进度条插件之一。 然而,与 Read Meter 不同的是,此插件不提供添加预计阅读时间的选项——它专门用于进度条。

但是,它确实为您提供了 Read Meter 所不提供的额外定位灵活性。 例如,除了帖子类型定位之外,您还可以将进度条定位到特定模板。

以下是阅读进度条的所有内容:

  • 灵活的定位——您可以自动将进度条粘贴到页面的顶部或底部。 或者,还有一个自定义定位选项,可让您将其粘贴到任何 CSS 元素上。 例如,如果您有一个粘性标题,您可以将其粘贴在标题导航菜单下方,而不是一直粘贴在页面顶部(如上面的 HubSpot 示例)。
  • 可定制的设计- 更改进度条的高度和颜色以匹配您的网站。
  • 定位选项——您只能在某些模板和/或帖子类型上显示进度条。

价格:阅读进度条 100% 免费。

值得一读

值得一读的插件。
值得一读

Worth the Read 是最可定制的进度条 WordPress 插件之一,如果您发现以前的插件过于局限,它是一个很好的选择。

它包括大多数其他插件不提供的一些独特的放置和定位选项,以及其他一些独特的功能。 如果愿意,您还可以选择添加估计的阅读时间。

以下是值得一读的所有内容:

  • 水平或垂直定位选项——包括屏幕顶部或底部的水平进度条或屏幕左侧或右侧的垂直进度条。 垂直选项是独一无二的,因为大多数其他插件不支持它。
  • 帖子类型定位- 仅在某些帖子类型上包含您的阅读进度条。
  • 设备定位- 您可以选择关闭移动设备和平板电脑(或台式机)的进度条。
  • 评论进度- 您可以选择在阅读进度中包含评论,如果您有包含有用信息的活跃评论部分,这可能会很好。
  • RTL 支持——它是少数几个可以让您更改为 RTL 的插件之一,这对于使用 RTL 语言的网站非常有用。
  • 样式选项——自定义颜色、厚度、不透明度等。 如果您启用了评论,您甚至可以使用单独的颜色来指示评论部分何时开始在进度条上。
  • 预计阅读时间——如果您启用阅读时间,您可以自定义其功能并使用简码自动或手动放置。

价格:值得一读是 100% 免费的。

捕捉滚动进度条

Catch Scroll Progress Bar 插件设置区域。
捕捉滚动进度条

Catch Scroll Progress Bar 是另一个轻量级选项,用于向您的站点添加基本进度条。

它使事情变得非常简单,只需放置和设置进度条样式所需的最少选项。

以下是使用 Catch 滚动进度条获得的所有内容:

  • 顶部或底部位置- 将进度条粘贴到页面的顶部或底部。
  • 帖子类型定位- 仅将您的进度条添加到某些帖子类型。
  • 模板定位——在这些帖子类型中,仅在某些模板上显示。 例如,您可以将其添加到单个帖子,但不能添加到存档页面。
  • 颜色和样式选项——自定义进度条的颜色、不透明度和高度。

价格:Catch Scroll Progress Bar 是 100% 免费的。

WP阅读进度

WP阅读进度插件。
WP阅读进度

WP Reading Progress 是另一个免费的进度条 WordPress 插件,可在 WordPress.org 上找到。

与之前的插件一样,它只为您提供自定义阅读进度条所需的最少设置。 但对于大多数人来说,这就是你所需要的,这使它成为另一个可靠的选择。

这是您将通过 WP Reading Progress 获得的所有内容:

因停机时间和 WordPress 问题而苦苦挣扎? Kinsta 是旨在节省您时间的托管解决方案! 查看我们的功能
  • 灵活的定位- 自动将栏粘贴到页面的顶部或底部。 或者,您可以手动将其粘贴到任何 CSS 选择器。
  • 帖子类型定位- 仅在某些帖子类型上包含进度条。 还有一个选项可以在存档页面上启用/禁用。
  • 样式自定义——您可以自定义进度条的颜色和粗细。 但是您只能选择一种颜色,并且没有不透明度选项。

价格:WP阅读进度是100%免费的。

阅读时间

高级阅读时间插件。

Reading Time 是此列表中第一个仅提供高级版本的阅读进度插件。

但是,它仍然相当实惠,并通过 Envato 的 CodeCanyon 市场提供终身更新。

您可能需要考虑阅读时间而不是免费替代品,主要有两个原因:

  • 8 种以上的预设样式——您可以获得一些独特的样式选项,例如在进度条内使用垂直条而不是实心填充(如上图所示)。
  • 高级定位规则——除了定位帖子类型和模板之外,您还可以通过非常具体的规则(例如用户角色、URL、设备等)来定位进度条。

您还可以获得插件所期望的所有“标准”功能:

  • 灵活的定位——除了自动顶部或底部放置,您还可以使用自定义定位将进度条粘贴到任何 CSS 选择器。
  • 样式选项——除了 8 种以上的预设样式之外,您还可以获得自定义进度条颜色和高度的常规选项。

价格:Reading Time 费用为 15 美元,附带单个站点的终身更新和 6 个月的支持。

阅读位置指示器

阅读位置指示器插件。
阅读位置指示器

阅读位置指示器是 WordPress.org 上的另一个轻量级免费进度条插件。

它不会为您提供大量设置,但一个独特的选项是它允许您为阅读进度条使用自定义渐变(除了纯色)。

这是阅读位置指示器所获得的一切:

  • 顶部或底部位置- 没有 CSS 选择器定位,但您可以添加偏移量。
  • 帖子类型定位- 将您的进度条定位到特定的帖子类型。
  • 样式自定义选项——从纯色或渐变色样式中进行选择。 您还可以调整进度条的粗细。

价格:阅读位置指示器是 100% 免费的。

钢筋

高级 ReBar 插件。
钢筋

ReBar 是另一个高级阅读进度条 WordPress 插件,通过 Envato 的 CodeCanyon 市场销售。

与阅读时间一样,以下是它提供的一些独特功能,可能值得花钱:

  • 8 种以上的预设样式——您可以获得许多超越纯色填充的独特样式,例如塑料、渐变、iOS 样式等。
  • 高级定位规则——除了定位帖子类型之外,您还可以通过非常具体的规则(例如用户角色、URL、设备等)来定位进度条。
  • 无限滚动支持——ReBar 仍然适用于无限滚动布局,这使其成为这些网站的绝佳选择。 您可以基于 CSS 选择器定义滚动区域,它将为无限滚动中的每个帖子生成一个唯一的进度条。

以下是其他一些值得注意的功能:

  • 水平和垂直样式——在页面顶部或底部放置一个水平进度条,或者在页面左侧或右侧放置一个垂直进度条。
  • 可自定义的样式——除了 8 种以上的预设样式,您还可以自定义进度条的颜色和高度/宽度。
  • RTL 支持——您可以反转 RTL 语言的进度条。

价格:ReBar 售价 15 美元,附带单个站点的终身更新和 6 个月的支持。

查看这些免费且易于使用的阅读进度条插件 - 其中 6 个完全免费! 点击推文

概括

这总结了我们收集的 8 个最佳阅读进度条 WordPress 插件。

对于添加基本进度条的最简单选项,您可以考虑使用 Read Meter 或 Reading progressbar 等插件。

另一方面,如果您想免费获得最大的可定制性,您可能希望从 Worth the Read 开始,因为它包含许多其他插件不提供的独特选项和功能。

如果您想超越进度条的纯色填充颜色,您可能还需要考虑 CodeCanyon 的高级选项——阅读时间或 ReBar。 同样,这些插件最独特的细节是它们都带有 8 种以上的预设样式和更高级的定位选项。

每个插件在风格和功能方面都有自己独特的风格,因此值得一试,以找到适合您网站的选项。

它们中的大多数在 WordPress.org 上都有免费版本,这使得测试它们变得很容易。 如果您使用 Kinsta 托管您的网站,您可以轻松地创建一个临时网站来安全地测试每个插件在您的网站上的外观。

要查找可以改进您网站的其他一些插件,您还可以浏览我们精选的最佳 WordPress 插件的完整列表。