WordPress 推定読了時間をプラグイン無しで表示する方法

2020/07/30

読了時間: 約4
推定読了時間

こんにちは、鈴木俊吾(@suzushin7)です。

他の方のブログ記事を読んでいると…。
時々、WordPress製のブログ記事に推定読了時間表示されていることがあります。

推定読了時間を表示すると、読者が記事をその場で読むか後で読むかの目安になります。
つまり、ユーザビリティの向上に役立つのではと考えられます。
また、ユーザーの滞在時間が延びるという噂も聞きますね。
それなりにメリットは多そうな気がしますよ。

ところで…。
私のブログ、推定読了時間は今まで表示していませんでしたよ…。
機能を実装するのが面倒くさいのかなと思っていましたので…。

でも、よくよく考えてみたら、意外と楽にできるということを確認。
せっかくなので、この機会に機能追加をしてみることにしました。

今回の記事では、WordPressのブログ記事に、推定読了時間を表示させる方法について解説してみます。
ちなみに、WordPressプラグインは使わないという方針です。
結構簡単に実装できますよっ。

スポンサーリンク

WordPressブログ記事に推定読了時間を表示する方法

ブログ記事上に、推定読了時間を表示させる方法というのは、いくつかのやり方が考えられますが…。
ここでは、記事本文の先頭に推定読了時間を挿入するというアプローチで行ってみようと思います。

機能実装の流れとしては、以下のようになります。
基本的にコピペで大丈夫ですので、数分もあれば終わります。

1.functions.phpに、推定読了時間を表示する処理を追加
2.見た目(CSS)の調整
3.動作確認

functions.phpに、推定読了時間を表示する処理を追加

ここが最大のポイント。
functions.phpに、推定読了時間を表示させる機能を追加します。

WordPressメニューの「外観」→「テーマエディタ」を選択。
すると、デフォルトでは現在利用しているテーマのスタイル(CSS)を設定する画面になっていると思います。
画面右側のファイル一覧から、functions.phpをクリックしてください。

functions.phpの編集画面になったら、以下のコードを追記します。
注意深く、正しくコピペしてくださいね。
万が一エラーが出ると、真っ白な画面になってしまいますので…。

function show_estimated_reading_time($content) {
	$cpm = 800;
	$length = mb_strlen(strip_tags($content));
	$time = floor($length / $cpm) + 1;
	$ert = '<div class="estimated-reading-time">読了時間: 約<span class="minute">'.$time.'</span>分</div>';
	return $ert . $content;
}
add_filter('the_content', 'show_estimated_reading_time');

$cpmは、1分間に読むことができる文字数を設定しています。
ここでは暫定的に800文字としていますが…。
もちろん、好みに合わせて変更しても構いません。

この処理がやっていることは単純です。
まず、記事本文からタグを取り除いた部分の文字数を数えます。
文字数を$cpmで割って1を加えると、記事を読み切るまでの時間が分かります。
後は、その時間を表示させる処理をするだけ。
実際には、本文の前に追加しています。

推定読了時間のスタイルを設定できるように、classの指定をしています。
estimated-reading-timeは、推定読了時間全体を表すクラス。
minuteは、推定読了時間の○分の部分を表すクラスです。
次のステップで、具体的なスタイル(CSS)の設定をしていきます。

見た目(CSS)の調整

何も見た目(CSS)の設定を指定していない状態だと若干寂しいので…。
点線のボーダーを付けて、さらに○分の部分を赤文字で少し大きめに表示させてみることにします。

WordPressメニューの「外観」→「カスタマイズ」と進みます。
そして、左側のメニューの一番下にある「追加CSS」をクリック。
編集画面になりますので、以下のコードをコピペで追記します。

.estimated-reading-time {
	margin: 10px;
	padding: 5px;
	border-top: 2px dashed #aaaaaa;
	border-bottom: 2px dashed #aaaaaa;
	text-align: right;
}
.estimated-reading-time .minute {
	font-size: 125%;
	font-weight: bold;
	color: #f55022;
}

ここでは、ボーダーの設定と○分の部分の文字設定をしています。
上下点線ボーダー、○分のところは赤太文字・少し大きめの文字に。

もちろん、これは単なる見た目の部分ですので…。
CSSが分かる方は、お好きなように値をいじっても構いませんよ。

動作確認

上記の手順が終わったら、動作確認です。
あなたのブログ上にある、好きな記事を表示させてみてください。
記事本文の前に、さきほど設定したとおりに推定読了時間が表示されていれば成功です。
以上で、今回の設定は完了。

推定読了時間

ひとこと

今回の記事では、WordPressのブログ記事上に推定読了時間を表示させる方法について解説してみました。
同じことをプラグインでも実現できるのですが…。
これくらいなら、直接実装してしまったほうが楽。
プラグインが増えて、動作が重くなるのも防げますし。

読者の利便性を考えると…。
今回のように、推定読了時間は表示させておいた方が良いのでは?

基本的には、コードのコピペだけでできますので…。
ぜひあなたも機能を実装してみてはいかがでしょうか?

(Today: 1 PV, Total: 19 PV)

スポンサーリンク