WordPress投稿にプログレスバーを追加する方法（簡単な方法）

長文コンテンツはSEOや読者への価値提供に最適ですが、一つ小さな問題があります。それは、読者は自分が何に手を出しているのかを知りたいということです。

3,000語のチュートリアルにアクセスした読者は、最初にどれくらいの労力がかかるかを知りたいと思っています。プログレスバーは、読者にコンテンツのどこにいるかを正確に示すことで、これを美しく解決します。

私たちは、コースの完了度を示すために、WPBeginnerのビデオメンバーシップサイトで使用しています。これにより、受講者は学習の進捗状況を簡単に追跡し、トレーニングを完了するためのモチベーションを維持できます。

一番良いところは？コーディングスキルや高価なプラグインなしで、WordPressサイトにプログレスバーを追加できます。このガイドでは、ステップバイステップで作成方法を詳しく説明します。

WordPress の投稿にプログレスバーを追加するタイミング

プログレスバーを追加することで、WordPressブログの記事が改善されるシナリオはいくつかあります。一般的な例をいくつかご紹介します。

• プロジェクトの進捗状況：長期プロジェクトを記録している場合、プログレスバーは読者に進捗状況を素早く視覚的に伝えます。
• コース完了：メンバーシップサイトでは、学生がコースの進捗状況を追跡できるように、これらを使用することがよくあります。
• 募金キャンペーン：目標達成までの近さを視覚的に即座に表現できます。これにより、より多くの寄付を促すことができます。
• 教育コンテンツ：学習マイルストーンや異なるトピックの難易度を示すために使用できます。
• フィットネストラッキング：ヘルスサイトでは、ワークアウトの強度、スキルの習得度、または栄養価を示すのに役立ちます。
• アンケート結果: 退屈なパーセンテージをリストアップする代わりに、カラフルなバーでデータを表示または統計を表現できます。

これを踏まえ、WordPressウェブサイトにプログレスバーを追加する簡単な2つの方法を考案しました。以下のクイックリンクを使用して、希望する方法にスキップできます。

方法1：ページビルダーでプログレスバーを追加する（よりカスタマイズ可能）

この方法は、カスタムランディングページやセールスページをデザインする場合に最適です。標準的なブログ記事にプログレスバーを挿入したいだけであれば、方法2の方が良い選択肢です。

Thrive Architectを使用します。これは、多くの異なるテンプレートとユーザーフレンドリーなドラッグ＆ドロップインターフェイスを提供する強力なページビルダーです。

ただし、この方法ではテーマを変更する必要があることに注意してください。現在のテーマに満足していて、切り替えたくない場合は、代わりに2番目の方法を検討してください。

また、Thrive Architectには無料版はありません。とはいえ、私たちの Thrive Themesクーポンコード を使用して、初回購入時に最大50%割引を受けることができます。

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

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

開始するには、Thrive Architect をセットアップする必要があります。Thrive Themes アカウントにログインし、Thrive Product Manager プラグインをダウンロードすることから始めます。

その後、Thrive Product Managerプラグインをダウンロードしてインストールします。プラグインのインストール方法については、初心者向けのガイドをご覧ください。WordPressプラグインのインストール方法で、手順を確認できます。

この段階で、WordPress管理画面の製品マネージャーをクリックしてください。

これが完了したら、「アカウントにログイン」ボタンをクリックしてサイトを接続します。

アカウント内の利用可能なすべての Thrive Themes 製品のリストが表示されるはずです。

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

その後、「Thrive Theme Builder」セクションまでスクロールし、「テーマをインストール」ボックスにチェックを入れます。

Thrive Architectはどのテーマとも連携しますが、このチュートリアルでは最高の互換性のためにTheme Builderのインストールをお勧めします。次に、「選択した製品をインストール」ボタンをクリックします。

Thrive Product Manager が Thrive Architect および Thrive Theme Builder プラグインをセットアップしているのが表示されるはずです。

完了したら、「Theme Builder Dashboard に移動」をクリックします。

この時点で、WordPressテーマを選択するだけで進めることができます。

「プレビュー」ボタンをクリックして、テーマを選択する前にテーマの外観を確認することもできます。

テーマが設定されると、テーマビルダーウィザードにアクセスできるようになります。

このオンボーディングウィザードは、独自のロゴのアップロード、テーマに追加するブランドカラーの選択、テーマのさまざまな構造とテンプレートの設定に役立ちます。

次のステップに進むことができるように、オンボーディングを完了してください。

ステップ2：WordPress投稿にプログレスバーを追加する

それでは、WordPressの記事にプログレスバーを追加しましょう。まず、ブロックエディターで新しい記事を作成することをお勧めします。

新しい記事のタイトルを入力します。その後、「Thrive Architectを起動」ボタンをクリックします。

これで、Thrive Architectを使用してブログ記事のコンテンツを作成できます。ブロックエディターと同様に機能します。

つまり、「テキストを追加するにはクリックするか、右側のパネルから要素をドラッグアンドドロップします」というセクションに、任意の要素をクリックしてドラッグアンドドロップするだけです。

エディタを使用してテキストブロックを追加する例を以下に示します。

プログレスバーを追加するプロセスは、ほぼ同じです。「+」ボタンをもう一度クリックして、「プログレスバー」ブロックを見つけてください。

その後、投稿に追加するだけです。

次に、プログレスバーのデザインを選択するよう求めるポップアップウィンドウが表示されます。

何十種類もの選択肢があり、必要に応じて後でいつでも変更できます。

選択が完了すると、メインエディタインターフェイスに戻ります。

ステップ3：プログレスバーをカスタマイズする

この段階で、左側のパネルにプログレスバーのカスタマイズオプションが表示されるサイドバーが表示されるはずです。

設定項目は多数ありますが、プログレスバーの変更方法を示すために主な項目を説明します。

メインオプションメニューでは、プログレスバーのデザインをシンプルなものからノード付きのものに変更できます。ノードは進捗状況を示すアイコンです。例としてそのデザインタイプを選択しました。

プログレスバーのラベルの配置場所、バーの高さ、プログレスバーの現在のレベルも変更できます。

パネルを下に移動すると、ノードラベルを変更するオプションが見つかります。

これらを変更するには、ラベルの横にある鉛筆の「編集」アイコンをクリックします。

次に、新しいラベルを入力します。

完了したら、「保存」アイコンをクリックします。

Thriveの素晴らしい点は、プログレスバーの他のすべての部分をカスタマイズできるため、好きなようにデザインできることです。

これらのカスタマイズオプションを実際に確認するには、プログレスバーのいずれかの要素にカーソルを合わせてクリックしてください。

ここでは、未完了の進捗状況を示すプログレスバーの部分を選択しました。

これで、左側のサイドバーに新しいオプションセットが表示されました。

上部にある「現在スタイリング中」のドロップダウンメニューをクリックすると、プログレスラベル、アイコン、ノードなど、バーの特定の部分を変更できます。

各部分を探索して、カスタマイズできることを確認してください。

いくつかの例を見てみましょう。背景バーのキャンディストライプアニメーションを無効にするには、現在スタイリング中のメニューで「グループ化された線背景」を選択します。

次に、「キャンディストライプアニメーション」ボタンをオフに切り替えます。

プログレスノード内のアイコンを変更したい場合は、ドロップダウンメニューの「現在スタイリング中」で「プログレスアイコン」に切り替えてください。

その後、上部の「状態」メニューで「通常」を選択します。

プログレスバーのアイコンを変更するための設定が表示されるはずです。

ここで、「アイコンを変更」をクリックします。

Thrive Architectには、さまざまな業界向けのアイコンライブラリがあります。とはいえ、選択したアイコンがプログレスバーに適していることを確認してください。

選択したら、「選択」をクリックするだけです。

アイコンのスタイルを変更するには、「スタイルの変更」ボタンをクリックするだけです。

ここから、選択できるいくつかの既製のアイコンデザインが表示されます。

プログレスラベルの見た目を変更するには、「現在スタイリング」ドロップダウンメニューで「プログレスラベル」オプションに切り替えます。

ここでは、ラベルの色、ハイライト、書式設定などをカスタマイズするためのオプションが表示されます。

プログレスバーの外観に満足したら、「作業の保存」をクリックして変更を保存します。

ブログ投稿をモバイル、デスクトップ、タブレットでプレビューして、すべてが素晴らしく見えるようにしてください。

デモサイトでの私たちの表示は次のようになります。

代替案：円形プログレスバーを追加する

Thrive Architect には、ブロックコレクション内にフィルカウンターと呼ばれる別の種類のプログレスバーもあります。フィルカウンターブロックは円形のプログレスバーのように見え、統計情報を表示するのに適しています。

追加するには、右側のサイドバーにある「+」ボタンをクリックし、「Fill Counter」要素を見つけます。次に、投稿の任意の場所にドラッグアンドドロップします。

追加すると、フィルカウンターをカスタマイズするためのオプションが表示されます。

主に、フィルカウンターのサイズ、フィルパーセンテージ、色、およびパーセンテージ値がカウンターに視覚的に表示される値と一致するかどうかを変更できます。

フィルカウンター内の数字をクリックして、その外観を変更することもできます。

色、フォントの種類、さまざまなデバイスでの表示などを自由に編集できます。

パーセンテージの下のテキストを変更したい場合は、テキスト自体をクリックしてください。

その後、フィルカウンターの説明を入力できます。

完了したら、作業内容を保存することを忘れないでください。

代替案: Thrive Architectは好きではありませんか？ SeedProdページビルダーにも、テーマやカスタムページに追加できるプログレスバーブロックがあります。

SeedProd の使い方については、カスタム WordPress テーマの作成方法に関するガイドをご覧ください。

方法 2: 無料のプログレスバープラグインを使用する (迅速かつ簡単)

この方法は、ページビルダーを使いたくない場合に最適で、シンプルで無料のWordPressプログレスバープラグインが必要なだけの場合に役立ちます。

このために、無料のUltimate Blocksプラグインを使用します。これは、WordPressエディターに多数の追加Gutenbergブロックを追加します。

このプラグインの素晴らしい点は、プログレスバーブロックが無料で利用できることです。ただし、プラグインのプロバージョンにアップグレードすると、より多くの Gutenberg ブロックとカスタマイズオプションを利用できます。

プラグインの詳細については、Ultimate Blocksレビューをご覧ください。

まず、WordPress プラグインをインストールして有効化します。完了したら、ブロックエディターを開いて新しい投稿を作成するか、既存の投稿を編集できます。

次に、ページ上の任意の場所にある「+」ボタンをクリックし、「プログレスバー」ブロックを選択します。

これで、投稿にプログレスバーブロックを正常に追加できました。このWordPressデザイン要素をさらにカスタマイズして、ニーズに合わせましょう。

右側のブロック設定サイドバーを見ると、いくつかのカスタマイズオプションが表示されます。「一般」タブでは、プログレスバーのパーセンテージ位置を、バーの上部から内部、または下部に変更できます。

「ストライプ」デザインを無効または有効にし、現在の進捗状況の値を変更することもできます。

次に、数値設定をカスタマイズできます。

ここでは、例としてあまり役に立たないため、パーセンテージを表示しないことを選択しました。

ただし、表示することを選択した場合は、数値プレフィックス（マイナス記号のような、数値の前に表示される記号）と数値サフィックス（通貨記号のような、数値の後に表示される記号）を変更できます。

次はレスポンシブコントロールです。

プログレスバーは投稿内でスペースを取る可能性があるため、タブレットやモバイルデバイスなどの小さい画面で投稿が表示されているときに非表示にしたい場合があります。

プログレスバーをよりインタラクティブにしたいですか？アニメーション効果の追加を検討してください。この機能を有効にすると、視聴者がスクロールしてプログレスバーが表示される際にアニメーション効果が適用されます。

アニメーションスタイルを選択し、遅延期間を設定して、プログレスバーが適切なタイミングで表示されるようにすることもできます。

「スタイル」タブに切り替えて、プログレスバーのデザインをカスタマイズしましょう。

上部では、デザインを線形から円形または半円形のプログレスバーに変更できます。バーのデザインに境界線の半径を追加して、長方形でシャープな見た目よりも円形に見せることもできます。

ここでは、ラインプログレスバーを使用することにしました。

しかし、円形および半円形のプログレスバーは次のようになります。

下にスクロールすると、プログレスバーの太さを変更して、さらに目立たせることができます。

プログレスバー、背景バー、ラベルの色をウェブサイトのデザインに合わせて変更することもできます。読みやすくするために、背景とよく対照される色を選択するようにしてください。

変更できるもう 1 つの要素は、プログレスバーのパディングとマージンです。

両方の設定は、基本的にプログレスバーとその周囲の他のブロックとの間の間隔を制御します。

上下にある他のブロックにプログレスバーが近すぎないようにしたい場合は、両方の値を増やすことができます。

次に、プログレスバーにラベルまたは説明を追加すると、読者はビジュアルからより多くのコンテキストを得ることができます。

プログレスバーの上に、テキストを入力するだけです。ブロックのツールバーの設定を使用して、テキストの配置やスタイルを変更することもできます。

プログレスバーの外観に満足したら、ブロックエディターで「公開」または「更新」をクリックするだけです。

プログレスバーがすべてのデバイスで正しく表示されることを確認するために、モバイル、デスクトップ、タブレットで投稿を表示することも検討してください。

これで、WordPressの投稿にプログレスバーを正常に追加できました。

デモウェブサイトでのプログレスバーは以下のようになります：

よくある質問：WordPressでプログレスバーを追加する

ここでは、読者がプログレスバーについてよく尋ねる質問をいくつか紹介します。

1. 読書進捗バーと静的進捗バーはいつ使い分けるべきですか？

長い投稿で読者のエンゲージメントを維持したい場合は、読了プログレスバーの使用をお勧めします。スクロールすると、記事のどのくらいを読んだかを示すように満たされます。

これは、離脱率を減らしたいチュートリアル、ガイド、またはブログ投稿に効果的です。

静的なプログレスバーは、資金調達の進捗、プロジェクトの完了、スキルレベルなど、固定された目標を追跡するのに適しています。これらのバーはユーザーがスクロールしても動きませんが、「完了率60%」や「調達額300ドル/目標500ドル」のように、設定されたパーセンテージまたは値を表示します。

読書中のエンゲージメントを高めることが目標であれば、スクロールベースのバーを選択してください。進捗状況や成果を表示したい場合は、静的なバーを選択してください。

2. プログレスバーを使用する際のベストプラクティスは何ですか？

プログレスバーをより効果的にするためのヒントをいくつかご紹介します。

• シンプルに保つ – 細くて控えめなバーが最適で、コンテンツから注意をそらしません。
• ブランドに合わせる – 色とサイズをカスタマイズして、サイトのスタイルに合わせることができます。
• 適切な場所を選択する – ほとんどの読者は画面の上部にあることを期待しています。
• モバイルでテストする – 一部のバーは小さな画面では見栄えが悪くなります。必要に応じて無効にしてください。
• オプション：読了時間の追加 – 投稿にかかる時間の目安を設定するのに役立ちます。

クリーンで適切に配置されたプログレスバーは、速度を低下させることなくユーザーエクスペリエンスを向上させることができます。

3. プログレスバーを追加するとサイトが遅くなりますか？

ほとんどの最新のプログレスバープラグインは軽量であり、サイトの速度に目立った影響を与えることはありません。

ただし、コードが不十分なプラグインや肥大化したプラグインは、特にモバイルでパフォーマンスに影響を与える可能性があります。安全を保つために：

• 評価の高い信頼できるプラグインを使用してください。
• インストール後にサイトの速度をテストしてください。
• ロード時間に影響する場合は、モバイルでバーを無効にしてください。

プラグインの選択に注意している限り、プログレスバーを追加してもSEOに悪影響を与えることはなく、エンゲージメントを高めることさえできます。

WordPressサイト向けのボーナスデザイン要素

WordPressウェブサイトに他のビジュアル要素を追加したいですか？以下の記事をご覧ください。

• WordPress投稿にドロップキャップを追加する方法
• WordPressにカウントダウンタイマーウィジェットを追加する方法
• WordPressにスクロールニュースティッカーを追加する方法
• WordPressにアニメーション背景を追加する方法
• WordPressで数字カウントアニメーションを表示する方法
• WordPressサイトにハロウィンの効果をもたらす方法
• WordPressでローテーションするお客様の声を追加する方法
• WordPressにアイコン付きのフィーチャーボックスを追加する方法
• WordPressでYouTube動画をフルスクリーン背景として追加する方法

このチュートリアルがお役に立ち、WordPressの投稿にプログレスバーを追加する方法を学べたことを願っています。また、おすすめのWordPressテーマビルダーや、WordPressウェブサイトの編集方法に関するガイドもぜひご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。