投稿の推定読書時間と単語数をDiviで表示する方法（ReadingTime.jsを使用）

一部の人々（私を含む）は、ブログ投稿の長さ、またはさらに重要なことに、読むのにどれくらいの時間がかかるかについて少し頭を上げて感謝しています。 これを行うための優れた方法は、ブログ投稿の上部に推定読書時間や単語数を表示することです。 この機能は、medium.comなどの人気のあるブログで見られます。 邪魔になったり、ユーザーがコンテンツを操作するのを邪魔したりする必要はありません。 しかし、それはウェブ上のコンテンツをむさぼり食うことに多くの時間を費やす人々にとって素晴らしいUXブーストを追加することができます。

このチュートリアルでは、Diviブログの投稿に推定読書時間と単語数を追加するためのすばやく簡単な方法を紹介します。 これから使用するreadingTime.jsライブラリは、シンプルで軽量で、Diviサイトに簡単に実装できます。 さらに、読み上げ時間のスタイルと配置、および単語数の配置をより細かく制御できます。 このすべては、別のプラグインに依存する必要はありません！

Divi Theme Builderを使用して、推定読書時間と単語数をブログ投稿テンプレートに追加します。 したがって、テンプレートに追加されると、読み取り時間と単語数がサイト全体のすべての投稿に適切に表示されます。

始めましょう。

スニークピーク

これは、Diviの投稿テンプレートに追加する読み取り時間と単語数の概要です。

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

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

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

無料でダウンロード

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

ダウンロード

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

テンプレートをアップロードする方法

Diviテーマビルダーに移動します

テンプレートをアップロードするには、WordPressWebサイトのバックエンドにあるDiviThemeBuilderに移動します。

ウェブサイトテンプレートをアップロード

次に、右上隅に2つの矢印の付いたアイコンが表示されます。 アイコンをクリックします。

[インポート]タブに移動し、この投稿でダウンロードできたJSONファイルをアップロードして、[Diviテーマビルダーテンプレートのインポート]をクリックします。

Diviテーマビルダーの変更を保存

ファイルをアップロードすると、すべての投稿に割り当てられた新しい本文領域を持つ新しいテンプレートが表示されます。 テンプレートをアクティブ化したらすぐに、Diviテーマビルダーの変更を保存します。

チュートリアルに取り掛かって、これを最初から作成する方法を学びましょう。

Diviで投稿推定読書時間と単語数を表示する方法

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. Diviテーマビルダーに移動します
2. ページの右上にある移植性アイコンをクリックします。
3. [移植性]ポップアップで[インポート]タブを選択します。
4. Divi Business Consultant Postテンプレートファイルを選択/インポートします（ここからダウンロード）。
5. インポートボタンをクリックします

その後、投稿テンプレートを編集できるようになります。

投稿テンプレートへのテキスト/ HTMLの追加

投稿テンプレートを編集するには、カスタム本文領域の編集アイコンをクリックします。

投稿レイアウトエディターで、レイアウトの上部にある投稿メタデータを含む行の下に新しい1列の行を追加します。

完了したら、テキストモジュールを新しい行に追加します。

テキストモジュールの設定で、（テキストタブを使用して）本文内に次のHTMLを貼り付けます。

<p>Reading Time: <span style="color: #edbb5f;" class="eta"></span> ( Word Count: <span style="color: #edbb5f;" class="word-count"></span> )</p>

覚えておくべき重要なことは、クラス「eta」のスパンタグは、最終的に投稿コンテンツの推定読み取り時間を表示することです。 また、クラス「word-count」のspanタグは、投稿コンテンツの単語数を表示します。

読書時間テキストのスタイリング

[デザイン]タブで、テキストスタイルを次のように更新します。

• テキストフォント：ポピンズ
• テキストフォントの太さ：太字
• テキストフォントスタイル：TT
• テキストテキストの色：#ffffff
• テキストテキストサイズ：14px（デスクトップ）、12px（電話）
• テキスト文字の間隔：2px
• テキストの配置：中央

行のスタイリング

テキスト設定が完了したら、行の設定を開き、以下を更新します。

• 側溝幅：1
• 幅：100％
• 最大幅：100％

[詳細設定]タブで、位置を更新します。

• 位置：絶対
• 場所：左下

コードの追加

推定読書時間と単語数を生成するために必要なコードを追加するには、最初に、テキストモジュールの下にコードモジュールを追加します。

いくつかのカスタムコードでreadingtime.jsライブラリを使用して、投稿コンテンツ領域、読み取り時間ターゲットクラスeta 、および単語数ターゲットクラスword-countをターゲットにします。

次のコードをコードブロックに貼り付けて、スクリプトタグでコードをラップしていることを確認します。

(function($) {
$(document).ready(function(){
$('.et_pb_post_content').readingTime({
readingTimeTarget: $('.eta'),
wordCountTarget: $('.word-count'), 
wordsPerMinute: 275,
lang: 'en',
});
}); 
})( jQuery );

コードについて

ターゲットクラスet_pb_post_contentは、投稿コンテンツを保持するDiviの投稿コンテンツ領域を指定するために使用されるものです。これにより、コードは、読み取り時間をカウントおよび推定するために必要なテキストを認識します。 たとえば、本文をターゲットとして使用した場合、コードは記事のコンテンツだけでなく、ページ全体のすべてのコンテンツ/テキストを計算します。

readingTimeTargetは、テキストモジュールのspanタグに追加したクラスに対応するクラスetaに割り当てられます。 そして、 wordCountTargetは、テキストモジュールの他のspanタグに追加するword-countクラスに割り当てられます。

また、1分あたりの単語数（現在は275）を自由に更新して、自分がどうあるべきかを表現してください。 もちろん、これは表示される読み取り時間に影響します。 私が調査したところによると、平均的な成人は1分間に約300語を読みます。 さらに、いつでも言語値を更新できます。 たとえば、テキストをフランス語で表示する場合は、「en」を「fr」に置き換えることができます）。 詳細については、githubのドキュメントを確認してください。

テンプレートレイアウトとテーマビルダーを保存します。

次に、[Divi]> [テーマオプション]> [統合]に移動します。

次に、スクリプトタグを使用してライブラリをヘッダー領域に追加します。

src="https://cdnjs.cloudflare.com/ajax/libs/reading-time/2.0.0/readingTime.min.js"

このように見えるはずです…

最終結果

今、あなたがする必要があるのは、あなたのサイトのライブブログ投稿にアクセスして、投稿コンテンツの上部にある推定読書時間と単語数を確認することです。

最終的な考え

投稿の推定読書時間と単語数をDiviブログの投稿に追加するのは驚くほど簡単です。 さらに、投稿テンプレートのどこに要素を表示するかを選択し、組み込みのDiviデザイン設定を使用してスタイルを設定できます。 うまくいけば、これは便利になるでしょう！

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

乾杯！