WordPress投稿に読了進捗バーを追加する方法（簡単な3つの方法）

オンラインで長い記事を読んでいて、あとどれくらい残っているかわからない、というあの感覚を知っていますか？それが、WordPress訪問者にとっての読書進捗バーが解決する問題です。

これらのシンプルな視覚的インジケーターは、読者が記事のどの程度まで読み進めたかを正確に示し、読み進めることやページに滞在することを促します。これは、明確な終点を持つ何かを完了したときに得られる満足感と同じような感覚に訴えかけます。

WPBeginnerでは、チュートリアルはスキャンしやすいように設計されているため、プログレスバーは実際には使用していません。ほとんどの人は、最初から最後まで読むのではなく、必要なセクションに直接ジャンプします。

しかし、長いブログ記事、詳細なガイド、または詳しい記事を公開している場合、読了進捗バーは読者を惹きつけ続けるのに役立ちます。

このガイドでは、シンプルなプラグインソリューションが必要な場合でも、よりカスタマイズされたものが必要な場合でも、WordPressサイトに1つ追加する3つの異なる方法を紹介します。

WordPressのブログ記事に読了進捗バーを追加するタイミング

長いブログ記事の場合、読了進捗バーを追加することは、訪問者がWordPressウェブサイトに滞在することを奨励する価値のあるツールになります。

ただし、すべてのサイトで必要というわけではありません。私たちの経験から、読了進捗バーはこれらの特定の状況で最も効果的であることがわかりました。

• 長文記事：詳細なガイドやストーリーを公開する場合、進捗バーはユーザーが最後までスクロールし続けることを奨励します。
• 線形コンテンツ：スキャンされるのではなく、最初から最後まで読む必要があるコンテンツに最適です。
• インタラクティブデザイン: リードメーターがインタラクティブ性を加えてくれます。これにより、ユーザーエクスペリエンスは明確な目的地への旅のように感じられます。

これを踏まえて、WordPressの投稿に読書進捗バーを簡単に追加する方法を見ていきましょう。以下のクイックリンクを使用して、希望する方法にスキップできます。

方法1：読書進捗インジケーター付きカスタムテーマをデザインする

WordPressの投稿に読書進捗バーを追加する1つの方法は、進捗バー機能を備えたテーマビルダーを使用することです。これにより、進捗バーのデザインがテーマの他の部分とシームレスに統合され、見た目がより美しくなります。

この方法ではテーマを変更することになるため、テーマに満足していてすぐに切り替える予定がない場合はお勧めしません。その場合は、代わりに方法2（プラグイン）または方法3（コード）を選択してください。

この方法ではThrive Theme Builderを使用します。Thrive Theme Builderには、読了率メーターの他に、ブログから企業のウェブサイトまで、さまざまな目的に合わせた数十のテーマテンプレートがあります。

何よりも、ドラッグ＆ドロップビルダーは使いやすく、初心者にも最適です。

プラットフォームの詳細については、Thrive Themesのレビューをご覧ください。

Thrive Themesの欠点は、無料版がないことです。とはいえ、Thrive Themesのクーポンコードを使用すると、初回購入時に最大50％割引になります。

ステップ 1: Thrive Theme Builder をインストールする

最初のステップは、Thrive Theme Builderをセットアップすることです。Thrive Themesのウェブサイトでアカウントにログインすることで、このプラグインにアクセスできます。

次に、Thrive Product Managerプラグインをダウンロードしてインストールします。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。

プラグインがアクティブになったら、WordPress管理エリアの製品マネージャーをクリックします。

次に、「アカウントにログイン」ボタンをクリックして、WordPressウェブサイトとThrive Themesアカウントを接続します。

その後、アカウント内のすべてのThrive Themes製品のリストが表示されるはずです。

ここで、「Thrive Architect」を選択し、「製品のインストール」ボックスにチェックを入れます。

このページビルダープラグインはテーマビルダーと連携するため、有効にする必要があります。

次に、「Thrive Theme Builder」セクションまでスクロールダウンし、「Install Theme」ボックスにチェックを入れます。

次に、「選択した製品をインストール」をクリックします。

次のページでは、Thrive Product Manager が Thrive Theme Builder をインストールおよびアクティブ化していることがわかります。

プロセスが完了したら、「テーマビルダーダッシュボードに移動」をクリックします。

次に、WordPressテーマを選択してください。

どちらを選ぶべきかわからない場合は、「プレビュー」ボタンをクリックして、まずテーマの外観を確認してください。決定したら、「選択」をクリックします。

ここでテーマビルダーウィザードに到着するはずです。

このセットアップウィザードでは、独自のロゴのアップロード、ブランドカラーをテーマに追加すること、テーマのさまざまな構造とテンプレートの設定を行います。

次のステップに進む前に、セットアップウィザードを完了してください。

ステップ2：シングル投稿テンプレートに読書進捗バーを追加する

テーマがセットアップされたら、テーマテンプレートに読了率メーターを追加しましょう。WordPress投稿にのみ読了メーターバーを表示したいので、単一投稿テンプレートを編集するだけで済みます。

これを行うには、Thrive Theme Builder の「テンプレート」タブに切り替えます。次に、「デフォルト投稿」テンプレートを見つけて「編集」をクリックします。

これでテーマビルダー内に入ったはずです。テンプレートを編集するための左側のサイドバー、テンプレート自体のプレビュー、さらにブロックを追加したりテンプレートのスタイルを変更したりするための右側の小さなツールバーがあるはずです。

読了メーターを追加するには、左側のサイドバーを下にスクロールし、「読書進捗インジケーター」設定を見つけます。トグルをクリックして有効にするだけです。

プログレスバーを追加した後、編集するための設定がさらにいくつか表示されるはずです。

まず、ヘッダーの下に追加するか、ビューポートの上（ヘッダーのすぐ上）に追加するかを選択できます。最初のオプションを選択した場合は、ヘッダーが固定されるように設定する必要があることを確認してください。これは後で説明します。

次に、プログレスバーの色を変更できます。色選択をクリックするだけで実行できます。

次に、テーマカラーのいずれか（テーマの事前定義されたカラースキーム）を選択できます。または、「テーマカラーからリンク解除」をクリックして、テーマの一部ではないまったく異なる色を選択することもできます。

「テーマカラーからリンク解除」オプションを選択すると、色の不透明度も調整できます。

この方法で、プログレスバーが背景に対してどれだけ不透明に見えるかを調整できます。とはいえ、プログレスバーの色がユーザーの読書を妨げるほど鮮やかでないようにするのが最善です。

色に満足したら、「適用」をクリックするだけです。

最後に、進捗バーの高さを調整できます。

テーマビルダーを使用すると、バーのサイズを最大10ピクセルまで変更できます。これにより、プログレスバーが大きすぎないようになります。これを念頭に置いて、プログレスバーがはっきりと見えるように、5から10の間のサイズをお勧めします。

バーの外観に満足したら、「作業を保存」をクリックして変更を保存してください。

ステップ3：ヘッダーをスティッキーにする（オプション）

読書進捗バーをヘッダーの下に表示することを選択した場合、この手順に従う必要があります。それ以外の場合はスキップできます。

まず、左側のサイドバーを上にスクロールして、「ヘッダー」をクリックします。

サイドバーにヘッダーをカスタマイズするための別の設定が表示されるはずです。

ヘッダーセクションまでスクロールダウンし、「編集」をクリックしてください。

次に、「スクロールの動作」タブを開きます。

次に、「固定」を選択する必要があります。テーマによっては、進捗バーが表示されるように、画面上部からの距離を1pxに変更する必要がある場合もあります。

残りの設定はそのままにして、下部にある「完了」をクリックしてください。

ステップ4：読了時間インジケーターを追加する（オプション）

Thrive Theme Builderでできることのもう1つは、投稿を最初から最後まで読み終えるのにかかる推定読書時間を表示することです。これにより、ユーザーは記事を読むのにかかる時間を確認でき、利用可能な時間に合わせてコンテンツを選択できます。

まず、投稿メタデータを表示するブロックをクリックします。

これは、ブログ投稿の著者、カテゴリ、タグなどの情報を表示する、単一投稿テンプレートの一部です。

次に、ツールバーの「動的なテキスト」アイコンをクリックします。

ここでは、最初のドロップダウンメニューで「コンテンツ」、2番目のドロップダウンメニューで「残り読書時間（分）」を選択する必要があります。

その後、「挿入」をクリックします。

ポストメタに「残り0分」という新しいテキストが表示されるはずです。このテキストはお好みに合わせて調整できます。

今回は、「remaining」という単語を削除することにしました。

完了したら、「作業を保存」をクリックすることを忘れないでください。

ステップ5：読書進捗インジケーターのプレビュー

プログレスバーの設定が完了したら、ブログ記事にアクセスしてバーが機能していることを確認できます。

サイトでバーをライブで表示するのではなくプレビューしたい場合は、下部にある「プレビュー」ボタンをクリックするだけです。Thrive Theme Builderを使用すると、デスクトップ、タブレット、モバイルでウェブサイトをプレビューできます。

必要に応じて、いくらでも変更してください。

ここに、私たちの読書進捗バーの外観を示します。

方法2：無料プラグインで読了進捗バーを追加する

WordPressの投稿に無料でシンプルな読了進捗バーを追加したい場合は、Catch Scroll Progress Barプラグインを使用できます。

この読書進捗バープラグインは、ページや投稿に自動的に読書メーターを表示し、好みに合わせて簡単にカスタマイズできます。

まず、WordPress管理画面にプラグインをインストールします。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをお読みください。

完了したら、WordPressダッシュボードのCatch Scroll Progress Barに移動します。進捗バーの設定が表示されるので、セットアップしてください。

このプラグインを使用すると、進捗バーの位置を上から下に変更できます。ただし、通常の上の位置のままにしたい場合は、そのままにしておくこともできます。

カスタマイズできるもう1つのことは、背景色と前景​​色です。

背景色は、スクロール前の空のバーの色です。一方、前景色は、読者がページをスクロールするにつれて進捗を示すためにバーを塗りつぶします。

次に、背景色と前景色の透明度を制御する不透明度です。範囲は0から1で、1は不透明、0は透明または見えない状態です。

気に入った不透明度レベルが見つかるまで、自由に数値を調整してください。

次に、進捗バーの高さと境界線の半径を調整できます。

高さについては、1から8の間が最適ですが、それ以上は避けることをお勧めします。そうしないと、進捗バーが大きすぎるように見える可能性があります。

ボーダーラディウスは、プログレスバーの角がどれだけ丸く見えるかを制御します。見た目が気に入らない場合は、「0」と入力するだけです。

このプラグインでは、進捗バーを表示するテンプレートを、ホームページ、ブログページ、アーカイブとカテゴリ、および/または単一の投稿またはページから選択することもできます。

通常、読了進捗バーはWordPressブログの投稿に追加するだけで十分です。この場合、テンプレート条件設定で「単一ページ/投稿」のみを選択しました。

「進捗バーを適用する投稿タイプを選択」の「投稿」オプションも確認しました。これは、進捗バーをブログ記事にのみ表示したいからです。

それでも、あなたのウェブサイトに最適な条件を確認することを自由にしてください。

プログレスバーの設定に満足したら、「変更を保存」をクリックしてください。

これで、モバイルまたはデスクトップでブログ投稿をプレビューすると、進捗バーが表示されるはずです。

方法3：コードで読書進捗バーを追加する

カスタムコードを使用して、WordPressサイトに読書進捗バーを追加することもできます。

多くの場合、チュートリアルではコードをテーマのfunctions.phpファイルに直接追加するように指示されます。しかし、わずかな間違いでもサイトが壊れる可能性があるため、お勧めしません。

代わりに、WPCodeプラグインの使用をお勧めします。これは、WordPressのコアファイルを編集せずにWordPressにカスタムコードを追加する最も簡単で安全な方法です。

WPCode を徹底的にテストした結果、信頼性が高く初心者にも優しいソリューションであることがわかりました。

数回クリックするだけでサイトに追加できる、既製のコードスニペットのライブラリが組み込まれており、読了進捗バー用のものも含まれています。機能や推奨理由の詳細については、WPCodeレビューをご覧ください。

開始するには、無料のWPCodeプラグインをインストールしてアクティブ化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するチュートリアルを参照してください。

プラグインを有効化したら、WordPressダッシュボードからコードスニペット » ライブラリに移動します。

そこから、ライブラリで「スクロール進捗バー」を検索し、マウスカーソルを合わせ、「スニペットを使用」ボタンをクリックします。

WPCode がコードを自動的に追加します。

このプラグインは、バックグラウンドで適切な「自動挿入」メソッドも自動的に選択します。

その後、行う必要があるのは、スイッチを「非アクティブ」から「アクティブ」に切り替えるだけです。

次に、「更新」ボタンをクリックします。

これで、ウェブサイトでブログ投稿を表示できます。

以下のようなシンプルなプログレスバーが表示されるはずです。

WordPressブログの読者を惹きつけるための追加のヒント

一見の訪問者を熱心な読者に変えたいですか？お任せください！

読者を引きつけるためのヒントが満載の、専門家によるWordPressチュートリアルをご覧ください。

• WordPressの投稿ごとに異なるスタイルを設定して、コンテンツを視覚的に魅力的にしましょう。
• カスタムシェイプディバイダーを作成して、テキストを区切り、読者をコンテンツに誘導しましょう。
• 絵文字を追加して、個性を表現し、ブログに楽しさを加えましょう。
• リピーター訪問者向けに新しい投稿をハイライトして、再訪問を促しましょう。
• WordPressの投稿でテキストをハイライトして、読者のために重要なポイントを強調しましょう。
• ブログ投稿にシンプルでエレガントな脚注を追加して、調査結果を示しましょう。
• WordPressサイトでローテーションするお客様の声を表示して、訪問者を感動させましょう。
• WordPressサイトにフォントリサイザーを追加して、すべての人がコンテンツにアクセスできるようにしましょう。

この記事がWordPressで読了進捗バーを追加するのに役立ったことを願っています。また、WordPressウェブサイトの編集方法に関する完全ガイドや、ウェブサイトデザイングラフィックの最適なCanva代替ツールの専門家による厳選リストもご覧ください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。