記事の詳細

今回は他のサイト様でよく見かける「この記事は約〇分で読めます。」を実装する方法を記載します。

JavaScriptを使用して実装する

まずはJavaScriptで実装する方法を記載します。

本プログラムで実装する際に、必要となる条件は下記となります。
・記事を表示するコンテンツが特定のidを付けたdivタグ等で囲われている事。

具体的には、HTMLコードが下記のようになっていれば機能します。

上記のような構造になっていれば下記のプログラムは正常に動きます。…動くはずです!

※1 日本人が1分間に読める文字は400文字~600文字のようなので、間を取って500文字で1分と設定しています。
参考記事:人は1分間に何文字読めるの?スキマ時間で読まれる文字数を推測してみよう。
※2 参考記事:JavaScriptでHTMLタグを削除する正規表現

上記プラグラムはdivタグの後に設置しなければ機能しないので注意して下さい。
このプログラムが正常に動くと、divタグの上に自動で「この記事は〇分で読めます」という文言が表示されるはずです。

実際に使ってみると、下記のようになります。

【↓divタグここから】

拙者親方と申すは、お立ち会いの中に、御存知のお方も御座りましょうが、御江戸を発って二十里上方、相州小田原一色町をお過ぎなされて、青物町を登りへおいでなさるれば、欄干橋虎屋藤衛門、只今は剃髪致して、円斎となのりまする。
元朝より大晦日まで、お手に入れまする此の薬は、昔ちんの国の唐人、外郎という人、我が朝へ来たり、帝へ参内の折から、この薬を深く籠め置き、用ゆる時は一粒ずつ、冠のすき間より取り出す。
依ってその名を帝より、とうちんこうと賜る。
即ち文字には、「頂き、透く、香い」と書いて「とうちんこう」と申す。

只今はこの薬、殊の外世上に弘まり、方々に似看板を出し、イヤ、小田原の、灰俵の、さん俵の、炭俵のと、色々に申せども、平仮名をもって「ういろう」と記せしは、親方円斎ばかり。
もしやお立ち会いの中に、熱海か塔ノ沢へ湯治にお出でなさるるか、又は伊勢参宮の折からは、必ず門違いなされまするな。
お登りならば右の方、お下りなれば左側、八方が八棟、表が三棟玉堂造り、破風には菊に桐のとうの御紋を御赦免あって、系図正しき薬でござる。

【↑divタグここまで】

いけましたね!
このプログラムを使用することで「この記事は約〇分で読めます。」の文言を自動で出すことが可能となります。

JavaScriptでの実装は以上となります

WordPressのプラグインで実装する

こちらはJavaScriptと違って実装がとんでもなく簡単です。
おおまかには、プラグインをインストールして簡単な設定をして作業完了となります。
WordPressを使っているのであれば、こちらの方が楽な作業となりますのでオススメ致します。

まずは「Insert Estimated Reading Time」プラグインをインストールする

プラグインの新規追加より「Insert Estimated Reading Time」を検索してインストールを実行します。
プラグインインストール

インストールが完了したらプラグインを有効化します。
プラグイン有効化

プラグインを有効化すると、設定のメニューに「Insert Estimated Reading Time」の項目が表示されますので、クリックして設定画面を開きます。
設定メニュー

1分間あたりの文字数を500に変更して、「変更を保存」ボタンを押します。
設定方法

投稿ページを確認すると、記事を読むのに必要な時間が自動で表示されます。
実装後

以上!簡単!

やっぱりWordPressのプラグインは凄い!

いかがでしたか?

今回のJavaScriptの方のプログラムは制作時間としては20分~30分程かかりました。
ですが、WordPressのプラグインなら同じような機能が1分程度で実装できてしまいます…。

自作のプログラムは応用ができるので便利ではあるのですが、今回の内容に関してはプラグインが優秀なのでプラグインを使いたいですね。

以前にも書いた気がしますが、やはりWordPressのプラグインは非常に優秀なので、何かプログラムを作る際には、まずは類似した機能があるかどうかを調べたほうが良いですね。
もしプラグインが見つかったら作業時間が1/10になるかもしれません!

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

Webサイト制作の際に活用するJavaScript、PHP等のプログラム関係を担当しています。過去にはC、C++、C#等を活用したソフトウェア開発も行っていました。小難しい記事を書くことが多いのですが、本人はそこまで小難しい性格……じゃなければ良いなぁと思ってます!

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

AD

ページ上部へ戻る