(oneechanblog) – 人気のあるサイトの中には、記事の上部に読書プログレスバーインジケーターが表示されていることに気づきましたか？
この小さなバーは、ユーザーが記事をどれだけスクロールできるかを示し、読み続けるように促します。 これは、Webサイトの訪問者がコンテンツを読み続けるのに役立ち、全体的なユーザーエクスペリエンスを向上させることができます。
この記事では、WordPressの投稿に読書プログレスバーを追加する方法を紹介します。
WordPressにリーディングプログレスバーを追加する理由と時期
ユーザーは、滞在するか離れるかを決定する前に、Webページに数秒しか費やしません。 長い形式の記事を公開する場合、ユーザーが下にスクロールする必要があるため、ユーザーの関心を維持することは少し難しくなります。
一部のサイト所有者はインライン関連の投稿を追加しますが、他のサイト所有者はビデオや画像ギャラリーを使用してユーザーをページにとどめます。
読書プログレスバーは、ユーザーが下にスクロールするように促す小さなユーザーインターフェイスの機能強化を追加します。 また、ユーザーが読んでいる記事を読み終える動機にもなります。
多くの人気のあるWebサイトは、読書の進行状況インジケーターを使用して読者を引き付けることを好みます。 ただし、読み取りの進行状況インジケーターが微妙で、コンテンツ自体の邪魔にならないようにする必要もあります。
そうは言っても、WordPressの投稿に読書の進行状況インジケーターを簡単に追加する方法を見てみましょう。
WordPressの投稿に読書プログレスバーを追加する
ブログの投稿やページに読書の進行状況バーを表示する最も簡単な方法は、WorthTheReadなどのプラグインを使用することです。
これは無料のWordPressプラグインで、軽量で、ウェブサイトに読書プログレスバーを追加するのに役立ちます。 プラグインは複数のカスタマイズオプションを提供し、Webサイトのテーマに合わせてスタイルを変更できます。 あなたはあなたの記事の読書時間を示すためにそれを使うことさえできます。
最初に行う必要があるのは、WorthTheReadプラグインをインストールしてアクティブ化することです。 詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。
アクティベーション時に、 読む価値がある»進捗状況 WordPress管理パネルからページに移動し、[機能]タブに移動してプログレスバーインジケーターを設定します。
次に、投稿、ページ、ホームページにプログレスバーを表示するかどうかを選択できます。 カスタム投稿タイプに閲覧バーを表示するオプションもあります。
下にスクロールすると、さらに多くのカスタマイズオプションが表示されます。
[コメントを含める]オプションを有効にすると、プログレスバーの全長にコメントを含めることができます。 コメントを含める場合は、コメントの進行状況領域に別の背景色を選択することもできます。プラグインでは、読書プログレスバーの配置を選択することもできます。 デフォルトのオプションは、ほとんどのサイトで使用されている上部にあります。 ページの右、左、または下にプログレスバーを表示するように変更できます。
それ以外に、読書プログレスバーをカスタマイズするためのより多くのオプションがあります。
たとえば、バーを右から左に移動したり、固定の不透明度を使用したり、モバイルやタブレットなどのタッチデバイスでプログレスバーを有効にしたり、デバッグモードを有効にしたりできます。
完了したら、[変更を保存]ボタンをクリックすることを忘れないでください。
次に、[読み上げの進行状況]の下の[スタイル]タブに移動して、読み上げの進行状況バーの外観を編集します。
プラグインを使用すると、プログレスバーの太さを選択し、WordPressテーマに一致する前景色と背景色を選択できます。
背景色は空のプログレスバーを塗りつぶすために使用され、前景色はユーザーが下にスクロールしたときの進行状況を示すために使用されます。
プログレスバーに透明な背景を使用することもできます。 このオプションをオンにすると、背景色のオプションが上書きされ、ユーザーが記事を下にスクロールすると、前景色のみが表示されます。
スタイルを編集した後、設定を保存するために変更を保存することを忘れないでください。
これで、Webサイトの任意のブログ投稿またはランディングページにアクセスして、進行状況バーの動作を確認できます。
この記事がWordPressの読書プログレスバーの追加に役立つことを願っています。 また、最高のWooCommerceプラグインのリストと、最高のWebデザインソフトウェアを選択する方法もご覧ください。
この記事が気に入った場合は、WordPressビデオチュートリアルのYouTubeチャンネルに登録してください。 あなたはまた私たちを見つけることができます ツイッター とFacebook。
WordPressの投稿にリーディングプログレスバーを追加する方法の投稿は、WPBeginnerに最初に登場しました。