WordPressのブログ記事にシークバーを追加すると、読者は記事のどのあたりを読んでいるのかが一目でわかり、より快適な読書体験を提供できます。
今回は、そんなシークバーを簡単に追加できるプラグイン「WP Reading Progress」の使い方を解説します。
PCだとあまり感じませんが、スマホだとどのぐらいの長さの記事なのか全く分からないですからね。
ちなみにシークバーっていうのは、こんな感じのやつのことね！
ステップ1：プラグインのインストール
まずは、「WP Reading Progress」プラグインをインストールします。
手順
- WordPressダッシュボードにログイン：WordPressの管理画面にアクセスします。
- プラグインの検索：左側のメニューから「プラグイン」→「新規追加」をクリックします。
- プラグインのインストール：検索バーに「WP Reading Progress」と入力し、見つかったプラグインをインストールして有効化します。
プラグインを入れる時は必ず「有効」にするのを忘れないようにね！
ステップ2：プラグインの設定
次に、プラグインの設定を行います。
手順
- 設定メニューに移動：ダッシュボードの左側メニューから「設定」→「WP Reading Progress」をクリックします。
- 基本設定：シークバーの表示位置（上部または下部）やバーの色、幅などを設定します。
- 表示ページの設定：シークバーを表示したいページや投稿タイプを選択します。全ページに表示したい場合は「全ての投稿とページ」を選択しましょう。
- 変更を保存：設定が完了したら「変更を保存」をクリックして、設定を適用します。
ステップ3：カスタマイズ
WP Reading Progressプラグインは、簡単にカスタマイズができるので、自分好みに調整しましょう。
手順
- カスタムCSSの追加：プラグイン設定内の「カスタムCSS」セクションに、自分好みのデザインを追加できます。例えば、バーの高さや角の丸みを調整することが可能です。
- プレビュー：プレビュー機能を使って、設定したシークバーがどのように表示されるか確認します。
このサイトでは下記の通り設定しています。
Stick the bar to this element
➡bottom
Color of the progress bar
➡#25f40e
Progress bar thickness
➡.9vh
Make bar start at 0%
➡Yes pleaseにチェック
Show reading progress on
➡postとpageにチェック
それ以外の項目は空欄＆チェックなしです！
ステップ4：テストと調整
最後に、実際にサイト上でシークバーの動作を確認し、必要に応じて調整を行います。
手順
- サイトを表示：設定が反映されているか確認するために、実際にサイトを表示します。
- 動作確認：シークバーが正しく表示され、スクロールに合わせて動作するか確認します。
- 微調整：必要に応じてプラグイン設定やカスタムCSSを調整し、理想的な見た目と動作に仕上げます。
まとめ
WP Reading Progressを使用して、簡単にシークバーを追加することができました。
これにより、ユーザーのナビゲーションが向上し、より良いユーザーエクスペリエンスを提供できるようになりますので、ぜひ試してみてください！
スマホでブログを見ている時には本当にありがたい機能です。
ちなみに、『ろずマガ』のWordPressテーマはAFFINGER6EXだよ！
