如何在WordPress帖子中添加阅读进度栏

Have you noticed how some popular sites show a reading progress bar indicator at the top of their articles? This little bar shows users how much more of the article is left to scroll and encourages them to continue reading. In this article, we will show you how to add a reading progress bar in WordPress posts.

您是否注意到某些热门网站在其文章顶部如何显示阅读进度条指示器？ 这个小条向用户显示了还剩下多少文章可以滚动，并鼓励他们继续阅读。 在本文中，我们将向您展示如何在WordPress帖子中添加阅读进度栏。

为什么以及何时应该在WordPress中添加阅读进度栏 (Why and When You Should Add Reading Progress Bar in WordPress)

Users spend only a couple of seconds on a webpage before deciding whether to stay or leave. Keeping users engaged becomes little more challenging if you publish long form articles, as they require users to scroll down.

用户在决定停留还是离开之前只花几秒钟在网页上。 如果您发布长篇文章，保持用户参与度将变得更具挑战性，因为它们要求用户向下滚动。

Some site owners add inline related posts, others use videos or image galleries to keep users on the page.

一些网站所有者添加与内联相关的帖子 ，其他一些网站所有者使用视频或图像画廊来保持用户在页面上。

A reading progress bar adds a little user-interface enhancement that encourages users to scroll down. It also motivates users to finish the article they are reading.

阅读进度条增加了一些用户界面增强功能，鼓励用户向下滚动。 它还可以激励用户完成他们正在阅读的文章。

Many popular websites like The Daily Beast, use the reading progress indicators to engage their readers. However, you also need to make sure that the reading progress indicator is subtle and does not ruin user experience on your site.

许多受欢迎的网站(例如The Daily Beast)都使用阅读进度指示器吸引读者。 但是，您还需要确保阅读进度指示器很细微，并且不会破坏您网站上的用户体验。

Having said that, let’s see how you can easily add a reading progress indicator for your WordPress posts.

话虽如此，让我们看看如何轻松地为WordPress帖子添加阅读进度指示器。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明，请继续阅读。

在WordPress帖子中添加阅读进度栏 (Adding Reading Progress Bar in WordPress Posts)

First thing you need to do is install and activate the Worth The Read plugin. For more details, see our step by step guide on how to install a WordPress plugin.

您需要做的第一件事是安装并激活Worth The Read插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

Upon activation, you need to visit Settings » Worth The Read page to setup your progress bar indicator.

激活后，您需要访问设置»值得阅读页面来设置进度条指示器。

First you need to enable the reading progress bar by checking the ‘Enable’ option. After that, you need to select where you want to display the progress bar.

首先，您需要通过选中“启用”选项来启用阅读进度条。 之后，您需要选择显示进度条的位置。

The default option is on the top which is used by most sites. You can change it to display the progress bar on right, left, or bottom of the page.

默认选项位于顶部，大多数网站都使用该选项。 您可以对其进行更改以在页面的右侧，左侧或底部显示进度条。

The plugin allows you to choose the foreground and background colors of the progress bar to match your WordPress theme. The background color is used to fill the empty progress bar and the foreground color will be used to show progress as a user scrolls down.

该插件允许您选择进度条的前景色和背景色，以匹配WordPress主题 。 背景颜色用于填充空白进度条，而前景颜色用于在用户向下滚动时显示进度。

You can also include comments in the total length of progress bar by checking the include comments option. If you are including comments, then you can also choose a different background color for comments progress area.

您还可以通过选中“包含评论”选项将评论添加到进度条的总长度中。 如果要包含评论，则还可以为评论进度区域选择其他背景颜色。

Last option on the page allows you to use a transparent background for the progress bar. Checking this option will override background color options and only the foreground color will be displayed as users scroll down an article.

页面上的最后一个选项允许您为进度栏使用透明背景。 选中此选项将覆盖背景颜色选项，并且当用户向下滚动文章时，仅显示前景色。

Don’t forget to click on the save changes button to store your settings.

不要忘记单击“保存更改”按钮来存储您的设置。

That’s all, you can now visit any single post on your website to see the progress bar in action.

就是这样，您现在可以访问网站上的任何单个帖子，以查看进度条。

The reading progress bar indicator only works on single posts. Currently it does not support pages and custom post types.

阅读进度条指示器仅适用于单个帖子。 当前，它不支持页面和自定义帖子类型 。

We hope this article helped you add a reading progress bar indicator in WordPress. You may also want to see our list of 10 WordPress plugins that will quickly help you get more traffic.

我们希望本文能帮助您在WordPress中添加阅读进度条指示器。 您可能还想查看我们的10个WordPress插件列表， 这些列表将快速帮助您获得更多流量 。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/plugins/how-to-add-a-reading-progress-bar-in-wordpress-posts/