WP Smart Reading Progress Bar

A lightweight, customizable reading progress bar for WordPress. It provides visual feedback to readers by showing how far they have scrolled through a post, improving engagement and user experience.

[日本語の解説は英語の後にあります]

Key Features

• Performance Focused (Vanilla JS): Built with pure JavaScript (no jQuery). This ensures minimal impact on site loading speed and Core Web Vitals.
• Highly Customizable: Easily adjust the bar's color, thickness (height), and position (top or bottom) via the admin settings.
• Conditional Loading: You can choose specific post types (e.g., Posts, Pages, or Custom Post Types) where the progress bar should appear.
• Responsive Design: Works perfectly on desktops, tablets, and smartphones.

Installation

1. Upload the wp-smart-reading-progress-bar folder to your /wp-content/plugins/ directory.
2. Activate the plugin through the 'Plugins' menu in WordPress.
3. Go to Settings > Reading Progress to customize the appearance and visibility.

Technical Details

This plugin uses the IntersectionObserver or scroll event listeners in a highly optimized way to ensure smooth rendering without causing "layout shift" or browser lag.

主な機能（日本語）

読者の「あとどれくらいで読み終わるか」を可視化し、離脱率を防ぐスマートなプログレスバーです。

• パフォーマンス重視（バニラJS）: jQueryなどの外部ライブラリに依存せず、純粋なJavaScriptで動作します。サイトの読み込み速度（Lighthouseスコア等）への影響を最小限に抑えます。
• 柔軟なカスタマイズ: バーの色、太さ、表示位置（ページ上端または下端）を管理画面から直感的に変更できます。
• 適用先の限定: 投稿、固定ページ、またはカスタム投稿タイプなど、プログレスバーを表示したいページの種類を個別に選択可能です。
• 完全レスポンシブ: PCはもちろん、スマホやタブレットでもスムーズに動作します。

インストール

1. wp-smart-reading-progress-bar フォルダを /wp-content/plugins/ にアップロードします。
2. 管理画面の「プラグイン」から有効化してください。
3. 「設定」 > 「Reading Progress」からデザインと適用先を設定できます。