Title: ReadSpan — Customizable Reading Time Badge & Progress Bar
Author: ibrahimhalefoglu
Published: <strong>2026 年 5 月 14 日</strong>
Last modified: 2026 年 5 月 14 日

---

搜尋外掛

![](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

 由 [ibrahimhalefoglu](https://profiles.wordpress.org/ibrahimhalefoglu/) 開發

[下載](https://downloads.wordpress.org/plugin/readspan.1.0.0.zip)

 * [詳細資料](https://tw.wordpress.org/plugins/readspan/#description)
 * [使用者評論](https://tw.wordpress.org/plugins/readspan/#reviews)
 *  [安裝方式](https://tw.wordpress.org/plugins/readspan/#installation)
 * [開發資訊](https://tw.wordpress.org/plugins/readspan/#developers)

 [技術支援](https://wordpress.org/support/plugin/readspan/)

## 外掛說明

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

## 安裝方式

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

## 常見問題集

### 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.

## 使用者評論

這個外掛目前沒有任何使用者評論。

## 參與者及開發者

以下人員參與了開源軟體〈ReadSpan — Customizable Reading Time Badge & Progress Bar〉
的開發相關工作。

參與者

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

[將〈ReadSpan — Customizable Reading Time Badge & Progress Bar〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/readspan)

### 對開發相關資訊感興趣？

任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/readspan/)、查看
[SVN 存放庫](https://plugins.svn.wordpress.org/readspan/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/readspan/?limit=100&mode=stop_on_copy&format=rss)
訂閱[開發記錄](https://plugins.trac.wordpress.org/log/readspan/)。

## 變更記錄

#### 1.0.0

 * Initial release

## 中繼資料

 *  版本 **1.0.0**
 *  最後更新 **3 週前**
 *  啟用安裝數 **少於 10 次**
 *  WordPress 版本需求 ** 5.0 或更新版本 **
 *  已測試相容的 WordPress 版本 **6.9.4**
 *  PHP 版本需求 ** 7.4 或更新版本 **
 *  語言
 * [English (US)](https://wordpress.org/plugins/readspan/)
 * 標籤:
 * [badge](https://tw.wordpress.org/plugins/tags/badge/)[engagement](https://tw.wordpress.org/plugins/tags/engagement/)
   [progress bar](https://tw.wordpress.org/plugins/tags/progress-bar/)[reading progress](https://tw.wordpress.org/plugins/tags/reading-progress/)
   [reading time](https://tw.wordpress.org/plugins/tags/reading-time/)
 *  [進階檢視](https://tw.wordpress.org/plugins/readspan/advanced/)

## 評分

這個項目尚無任何評論記錄。

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

[查看全部使用者評論](https://wordpress.org/support/plugin/readspan/reviews/)

## 參與者

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

## 技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

 [檢視技術支援論壇](https://wordpress.org/support/plugin/readspan/)