Diviブログ投稿用のリーディングプログレスバーを作成する方法（プラグインなし）

公開: 2020-07-19

ブログ投稿テンプレートに読書プログレスバー（またはスクロールインジケーター）を追加することは、特定の記事のユーザーの読書進行状況を示すための賢い方法です。アイデアは、投稿コンテンツ上のユーザーのスクロール位置と直接相関する固定プログレスバーを投稿の上部に表示することです。ユーザーが記事に到達すると、進行状況バーがいっぱいになり始めます。ユーザーが記事の最後に到達すると、進行状況バーが100％いっぱいになります。

このチュートリアルでは、ユーザーがページ全体ではなく実際の投稿コンテンツをいつ開始および終了するか（スクロールすることで）を知るのに十分なスマートなDiviブログ投稿の読書プログレスバーを作成する方法を示します。これにより、読み取りの進行状況がより正確に示されます。

この読書プログレスバーをDiviのデフォルトのブログ投稿テンプレートまたはDiviテーマビルダーを使用したカスタム投稿テンプレートに追加する方法を説明します。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。投稿テンプレートの上部にプログレスバーがどのように固定されているかに注目してください。プログレスバーは、ユーザーが実際の投稿/記事のコンテンツに到達するといっぱいになり始め、ユーザーが投稿のコンテンツを終了すると終了します。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviテーマビルダーにインポートするには、Diviテーマビルダーに移動します。

移植性アイコンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションテンプレートがDiviテーマビルダーに表示されます。

チュートリアルに取り掛かりましょう。

パート1：既製のテンプレートのインポート

このチュートリアルでは、6番目のテーマビルダーパックから作成済みのテンプレートをいくつか使用します。投稿情報バーを追加する作業用グローバルヘッダーを提供するデフォルトのWebサイトテンプレートをインポートします。そして、ブログ投稿テンプレートをインポートして、ライブ投稿で結果をテストします。

重要：ライブサイトを台無しにしないように、これらのテンプレートをテストサイトにインポートすることをお勧めします。

デフォルトのWebサイトテンプレートをインポートする

まず、Divi用の4番目の無料テーマビルダーパックをダウンロードする必要があります。次に、ファイルを解凍します。

WordPressダッシュボードから、Divi> ThemeBuilderに移動します。次に、右上の移植性アイコンをクリックします。移植性ポップアップで、インポートタブを選択します。次に、ダウンロードしたフォルダーからデフォルトのWebサイトテンプレートJSONファイルを選択し、インポートボタンをクリックします。これにより、グローバルヘッダーとフッターを含む新しいデフォルトのウェブサイトテンプレートがインポートされます。

投稿テンプレートをインポートする

このプロセスを繰り返して、同じダウンロードフォルダーから投稿テンプレートをインポートします。移植性ポップアップを開き、投稿テンプレートのjsonファイルを選択して、インポートボタンをクリックします。これにより、サイト全体のすべての投稿に割り当てられた投稿テンプレートと、デフォルトのヘッダーフッターが提供されます。

投稿テンプレートヘッダーでグローバルを無効にする

動的な投稿情報バーを投稿テンプレートのヘッダーに追加します。ただし、投稿テンプレートにのみ投稿情報バーが必要なため、ヘッダーのグローバルを無効にして、サイト全体のすべてのヘッダーにバーが追加されないようにする必要があります。グローバルヘッダーでグローバルを無効にするには、グローバルヘッダーの設定メニューを開き、[グローバルを無効にする]を選択します。

diviダイナミック投稿情報バー

これで、ヘッダーは「カスタムヘッダー」というラベルの付いた灰色になります。準備ができたら、編集アイコンをクリックしてヘッダーレイアウトテンプレートを編集します。

diviダイナミック投稿情報バー

読書プログレスバーのデザイン

セクションと行の追加

ヘッダーレイアウトエディター内で、ヘッダーを保持している現在のセクションの下に新しい通常のセクションを作成します。

次に、セクションに1列を追加します。

セクション設定

セクション設定を開き、以下を更新します。

パディング：0px上、0px下

行設定

セクション設定が追加されたら、行の設定を開き、以下を更新します。

背景色：＃2b2b2b

[デザイン]タブで、以下を更新します。

側溝幅：1
幅：100％
最大幅：100％
パディング：0px上、0px下

Dividerモジュールを使用したスクロールバーの作成

プログレスバーの幅は徐々に大きくなり、空のコンテナ/行を占有します。これを構築するために、カスタムの背景色を持つ仕切りモジュールを使用します。プログレスバーの外観を設定した仕切りを設計したら、ページを下にスクロールしながら、適切なタイミングで仕切りの幅を広げるために必要なコードを追加します。

仕切りモジュールを追加

カラム内に新しい分周器モジュールを作成します。

次に、仕切りの表示を無効にします。代わりに、プログレスバーの色として機能する背景色を追加します。以下を更新します。

仕切りを表示：いいえ
背景グラデーションの左の色：＃ff4349
背景のグラデーションの正しい色：＃fe7f47
グラデーション方向：90度

[デザイン]タブで、進行状況バーの高さを更新します。

高さ：20px

[詳細設定]タブで、次のように仕切りにカスタムCSSIDを指定します。

CSS ID：scrollBar

後でjQueryの機能のスクロールバーをターゲットにするためにこれが必要になります。

プログレスバーのパーセンテージカウンターラベルを追加する

プログレスバーのパーセンテージカウンターラベルを追加するには、仕切りモジュールの下にテキストモジュールを追加します。

次に、次のHTMLを本文のコンテンツに追加します。

<p>Reading Progress: <span></span></p>

span我々が移入するためのjQueryを使用するためのタグは、ここで重要なspan割合カウンターでタグを。

[デザイン]タブで、以下を更新します。

テキストフォント：Heebo
テキストフォントの太さ：太字
テキストフォントスタイル：TT
テキストテキストの色：#ffffff
テキストテキストサイズ：13px
テキスト文字の間隔：3px
テキスト行の高さ：1em

次に、左側のパディングを少し更新します。

パディング：10px左

[詳細設定]タブで、テキストモジュールに列/行の中央の絶対位置を指定します。これにより、ドキュメント内の実際のスペースを占有せず、バー内の垂直方向の中央に配置されたままになります。

位置：絶対
場所：左中央

テキストモジュールを終了する前に、CSSクラスを追加して、jQueryコードでターゲットにできるようにします。

CSSクラス：et-progress-label

jQueryコードの追加

プログレスバーに必要な魔法の機能を与えるには、必要なjQueryコードを追加する必要があります。

これを行うには、テキストモジュールの下に新しいコードモジュールを追加します。

次に、次のコードを貼り付けます。

<script>
(function($) {
    $(document).ready(function(){
        var winHeight = $(window).height();
        var $scrollBar = $('#scrollBar');
        var $progressLabel = $('.et-progress-label p span');   
        var $postContent = $('.et-post-content');
        $scrollBar.css('width', 0);
        $progressLabel.html('0%');
        $(window).scroll(function(){
            var postContentHeight = $postContent.height();          
            var postContentStartPosition = $postContent.offset().top;
            var winScrollTop = $(window).scrollTop();
            var postScrollTop = postContentStartPosition - winScrollTop;
            var postScrollableArea = postContentHeight - winHeight;
            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);
            if (postScrollTop > 0) {
                $scrollBar.css('width', 0);
                $progressLabel.html('0%');
            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {
                $scrollBar.css('width', (postScrollPercentage + '%'));
                $progressLabel.html( Math.round(postScrollPercentage) + '%');
            } else if (postScrollTop < -postScrollableArea) {
                $scrollBar.css('width', '100' + '%');
                $progressLabel.html('100%');
            }
        });
    });
})( jQuery );
</script>

そして最後のステップでは、セクションを固定位置にする必要があります。ヘッダーコンテンツを含む上記のセクションの後ろのセクションが非表示になるため、これを最後に保存しました。

プログレスバーを含むセクションのセクション設定を開き、以下を更新します。

位置：固定
Zインデックス：998

次に、ヘッダーコンテンツを含む上部セクションの設定を開き、次のようにZインデックスを更新します。

Zインデックス：999

これで、プログレスバーは最初はヘッダーの上部の後ろに隠れます。次に、ユーザーが投稿を下にスクロールすると、ページの上部に固定されていることがわかります。

変更を保存することを忘れないでください。

ボディエリアテンプレートの投稿コンテンツモジュールにセレクター（CSSクラス）を追加します。

現在、コードは、クラス「et-post-content」を持つ要素を投稿のメイン投稿コンテンツとして認識するように記述されています。

投稿の本文にカスタムテンプレートを使用しているため、そのCSSクラスをテンプレートの投稿コンテンツモジュールに適用して、ユーザーが投稿を下にスクロールしたときにコードが読み取りの進行状況を適切に計算できるようにする必要があります。

これを行うには、テーマビルダーで投稿テンプレートの本文領域テンプレートを開きます。

投稿コンテンツモジュール設定を開き、次のCSSクラスを追加します。

CSSクラス：et-post-content

次に、変更を保存します。

完了したら、レイアウトとテーマビルダーへの変更を保存します。

diviダイナミック投稿情報バー

最終結果

結果を実際に確認するには、Webサイトでライブ投稿を開きます。ページを下にスクロールする余地があるように、投稿に十分なコンテンツが含まれていることを確認してください。

Diviのデフォルトの投稿テンプレート（カスタムテンプレートではない）でリーディングプログレスバーを使用する

投稿にカスタム本文テンプレートを使用しておらず、Diviのデフォルトのブログ投稿テンプレートに読書プログレスバーを追加したい場合は、コード内の単一のCSSクラスを更新するだけです。

まず、投稿テンプレートのカスタム本文領域が削除されていることを確認します。

次に、カスタムヘッダーテンプレートレイアウトを開き、このコード行を置き換えてコードモジュールを更新します…

 var $postContent = $('.et-post-content');

これとともに…

 var $postContent = $('.entry-content');

クラス「entry-content」は、ブログ投稿のコンテンツを含むデフォルトの投稿テンプレートのdivをターゲットにします（タイトル、注目の画像、上記のメタデータ、および記事の実際の長さを歪める以下のコメントを除く）。

結果

これは、デフォルトの投稿テンプレートを使用した投稿の結果です。

最終的な考え

この読み取りプログレスバーは、ページ/ドキュメント全体のスクロールの進行状況を表示する通常のスクロールインジケーターよりもはるかにスマートです。このバーは、ユーザーが読む実際の投稿コンテンツのみを対象とし、読書の進行状況を正確に示します。これは、長いコピーとコメントがありがちなブログに最適です。私はまた、オンラインコースで、それらの学生に継続するための追加のモチベーションを与えるために素晴らしい働きをします！

コメントでお返事をお待ちしております。

乾杯！

Diviブログ投稿用のリーディングプログレスバーを作成する方法（プラグインなし）

スニークピーク

レイアウトを無料でダウンロード

無料でダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

パート1：既製のテンプレートのインポート

デフォルトのWebサイトテンプレートをインポートする

投稿テンプレートをインポートする

投稿テンプレートヘッダーでグローバルを無効にする

読書プログレスバーのデザイン

セクションと行の追加

セクション設定

行設定

Dividerモジュールを使用したスクロールバーの作成

仕切りモジュールを追加

プログレスバーのパーセンテージカウンターラベルを追加する

jQueryコードの追加

ボディエリアテンプレートの投稿コンテンツモジュールにセレクター（CSSクラス）を追加します。

最終結果

Diviのデフォルトの投稿テンプレート（カスタムテンプレートではない）でリーディングプログレスバーを使用する

結果

最終的な考え

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。