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

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

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

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

しかし、長いブログ記事、詳細なガイド、または詳細な記事を公開している場合、読書プログレスバーは人々を引き付けるのに役立ちます。

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

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

長いブログ記事の場合、読了進捗バーを追加することは、人々をWordPressウェブサイトに留まらせるための貴重なツールになります。読者は、どれだけ読んだか、あとどれくらい残っているかを知ることができます。

読者は記事の終わりに近づいていることがわかると、スクロールを続ける可能性が高くなります。プログレスバーは、読了を促すことができます。

さらに、読了メーターを追加することで、コンテンツにインタラクティブ性が加わります。読書が明確な目的地に向かう旅のように感じられるようになります。

ただし、コンテンツを考慮することが重要です。当社のテストを通じて、読書進捗バーは、コンテンツが線形に消費される必要がある場合に最も効果的であることがわかりました。とはいえ、迅速でスキャン可能な参考資料に焦点を当てた当社のウェブサイトのようなウェブサイトには必要ないかもしれません。

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

• 方法1：読書進捗インジケーター付きカスタムテーマをデザインする
• 方法2：無料プラグインで読了進捗バーを追加する
• 方法3：コードで読書進捗バーを追加する
• WordPressブログの読者を惹きつけるための追加のヒント

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

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

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

この方法では、Thrive Theme Builderを使用します。読書進捗バーに加えて、Thrive Theme Builderには、ブログから企業のウェブサイトまで、さまざまな目的のテーマテンプレートが多数用意されています。

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

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

Thrive Themesの1つの欠点は、無料バージョンがないことです。とはいえ、Thrive Themesクーポンコードを使用して、最初の購入から最大50％割引を受けることができます。

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

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

次に、Thrive Product Managerプラグインをダウンロードしてインストールします。詳細については、WordPressプラグインのインストール方法に関する初心者向けガイドをご覧ください。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でもフォローできます。