Title: ReadSpan — Customizable Reading Time Badge & Progress Bar
Author: ibrahimhalefoglu
Published: <strong>14 Tháng 5, 2026</strong>
Last modified: 14 Tháng 5, 2026

---

Tìm kiếm plugin

![](https://ps.w.org/readspan/assets/banner-772x250.png?rev=3538645)

![](https://s.w.org/plugins/geopattern-icon/readspan_6d9298.svg)

# ReadSpan — Customizable Reading Time Badge & Progress Bar

 Bởi [ibrahimhalefoglu](https://profiles.wordpress.org/ibrahimhalefoglu/)

[Tải về](https://downloads.wordpress.org/plugin/readspan.1.0.0.zip)

 * [Chi tiết](https://vi.wordpress.org/plugins/readspan/#description)
 * [Đánh giá](https://vi.wordpress.org/plugins/readspan/#reviews)
 *  [Cài đặt](https://vi.wordpress.org/plugins/readspan/#installation)
 * [Nhà phát triển](https://vi.wordpress.org/plugins/readspan/#developers)

 [Hỗ trợ](https://wordpress.org/support/plugin/readspan/)

## Mô tả

ReadSpan adds two lightweight engagement features to your WordPress site:

**Reading Time Badge**
 A pill-shaped badge that displays estimated reading time,
injected before, after, or both sides of post content. Supports three SVG icons (
clock, book, stopwatch), custom colors, shapes, padding, and font size. Works via
shortcode too.

**Scroll Progress Bar**
 A fixed-position progress bar (top or bottom of the viewport)
that fills as the reader scrolls. Supports solid color, gradient, configurable height,
and a real-time countdown feature in the badge.

**Highlights**

 * Zero JavaScript dependencies — vanilla JS, passive scroll listener with requestAnimationFrame
   throttle
 * CSS custom properties for instant style updates
 * 24 configurable settings via a clean 3-tab admin UI with live preview
 * Mobile hide option (below 768 px)
 * Dark mode admin UI (prefers-color-scheme: dark)
 * Shortcode `[readspan]` support
 * PHP 7.4 compatible, no Composer required on production
 * Follows WordPress Coding Standards and DDD architecture

## Cài đặt

 1. Upload the `readspan` folder to `/wp-content/plugins/`
 2. Activate the plugin in **Plugins > Installed Plugins**
 3. Go to **Settings > ReadSpan** to configure

## Hỏi đáp

### Does this slow down my site?

No. Assets are only loaded on singular post/page views. The progress bar script 
is deferred (footer) and uses passive scroll events with requestAnimationFrame.

### How does the `[readspan]` shortcode work?

Enable the shortcode in **Settings > ReadSpan > Genel**. Placing `[readspan]` in
post content activates the reading progress bar and badge on that post, even if 
its post type is not in your configured list. The badge itself is always positioned
according to your **Konum** (position) setting — before content, after content, 
or both — not at the shortcode location.

### What reading speed is used?

Default is 200 words per minute. You can set any value between 100 and 400 WPM from
the settings panel.

### Does it support custom post types?

Yes — you can select which post types display the badge and bar from the settings
panel.

## Đánh giá

Không có đánh giá nào cho plugin này.

## Người đóng góp & Lập trình viên

“ReadSpan — Customizable Reading Time Badge & Progress Bar” là mã nguồn mở. Những
người sau đã đóng góp vào plugin này.

Những người đóng góp

 *   [ ibrahimhalefoglu ](https://profiles.wordpress.org/ibrahimhalefoglu/)

[Dịch “ReadSpan — Customizable Reading Time Badge & Progress Bar” sang ngôn ngữ của bạn.](https://translate.wordpress.org/projects/wp-plugins/readspan)

### Muốn tham gia phát triển?

[Duyệt code](https://plugins.trac.wordpress.org/browser/readspan/), check out [SVN repository](https://plugins.svn.wordpress.org/readspan/),
hoặc theo dõi [nhật ký phát triển](https://plugins.trac.wordpress.org/log/readspan/)
qua [RSS](https://plugins.trac.wordpress.org/log/readspan/?limit=100&mode=stop_on_copy&format=rss).

## Nhật ký thay đổi

#### 1.0.0

 * Initial release

## Meta

 *  Phiên bản **1.0.0**
 *  Cập nhật lần cuối **3 tháng trước**
 *  Số lượt cài đặt **Ít hơn 10**
 *  Phiên bản WordPress ** 5.0 hoặc cao hơn **
 *  Đã kiểm tra lên đến **6.9.7**
 *  Phiên bản PHP ** 7.4 hoặc cao hơn **
 *  Ngôn ngữ
 * [English (US)](https://wordpress.org/plugins/readspan/)
 * Thẻ
 * [badge](https://vi.wordpress.org/plugins/tags/badge/)[engagement](https://vi.wordpress.org/plugins/tags/engagement/)
   [progress bar](https://vi.wordpress.org/plugins/tags/progress-bar/)[reading progress](https://vi.wordpress.org/plugins/tags/reading-progress/)
   [reading time](https://vi.wordpress.org/plugins/tags/reading-time/)
 *  [Nâng cao](https://vi.wordpress.org/plugins/readspan/advanced/)

## Đánh giá

Chưa có đánh giá nào được gửi.

[Your review](https://wordpress.org/support/plugin/readspan/reviews/#new-post)

[Xem tất cả đánh giá](https://wordpress.org/support/plugin/readspan/reviews/)

## Những người đóng góp

 *   [ ibrahimhalefoglu ](https://profiles.wordpress.org/ibrahimhalefoglu/)

## Hỗ trợ

Có điều gì muốn nói? cần giúp đỡ?

 [Xem diễn đàn hỗ trợ](https://wordpress.org/support/plugin/readspan/)