読了目安時間は約 6 分です。
いろんなブログで見かける『この記事は約○分で読めます』。もともと標準で実装しているテーマもありますが、Tobiが（2019年現在）使用しているテーマ【SWALLOW】にはありません。無くても問題ないのですが、アクセシビリティを考えるとあったほうがいいのかなと思いますので実装してみました。
WordPressテーマ【SWALLOW】のブログ記事に「この記事は何分で読めます」のような読了目安時間を表示する方法を紹介します。
そもそも「この記事は何分で読めます」は入れた方が良いのか？
というところですが、読了目安時間を表示すると邪魔だったり、離脱率が低下すると言われていたり…デメリットもあるようです。（前者は無視すればいいだけなのでデメリットとは言えないと思いますが、気になる方も多いようで…）
投稿記事を読む側からみると、読み終わるまでに必要な目安時間が明示されていることは、「この記事を今読むか、後で読むか」の判断基準になります。
個人的な意見ですが、私はブログ記事などを読むのは電車の待ち時間などの隙間時間であることが多く、例えば待ち時間が○分の時に『○分で読める』と明示されていればその場で読み切ろうと思いますし、読み切れなそうならリーディングリストなどに入れて後で読みます。もし目安時間が無く読んでいる間に待ち時間が終了してしまった場合、『それなら他の作業をすればよかった』『他のサイトを見ればよかった』と思いますし、多少なりともそのブログへの期待は下がります。目に見える実害はないのかもしれませんが、アクセシビリティを考えると、親切な設計とは言えないでしょう。
デメリットよりもメリットが上回るのであれば、実装してみてもよいと思います。
「何分で読めます」を実装する方法
読了目安時間を表示するには、主に2つの方法があります。
- プラグインを使う
- WordPressのテーマファイル［functions.php］を編集する（当サイト推奨！）
お手軽なのはプラグインの利用です。
ですが、［functions.php］を編集といってもコピペによる2アクションで完了しますで簡単です。プラグインをインストールして設定する時間があればできますし、プラグインを増やしすぎるのはあまり良くないので、ここでは［functions.php］を編集する方法を選択します。
テーマファイル［functions.php］を編集して読了時間を表示する
［functions.php］にコードをコピペする
WordPress管理画面から［外観］ ＞ ［テーマエディター］を選択。
［テーマのための関数(functions.php)］を選択して下記のコードをコピペして、［ファイルを更新］ボタンをクリックします。
// 「何分で読めます」を表示する
function countdown( $content ){
if ( !is_single() ) {
// 投稿ページにのみ表示する
return $content;
}
$count = round(mb_strlen(strip_tags($content)) / 600) + 1;
$header = "<p class='countdown'>この記事は約 <strong>{$count}</strong> 分で読めます。</p>";
return $header.$content;
}
add_action('the_content', 'countdown');
7行目の1分間に読む文字数（上記例だと500）は適宜変更してください。日本人の１分間の平均読書速度は400～600字と言われていますので、その間で設定するのが良いと思います。ちなみに当サイトでは500字で設定しています。
8行目の実際に表示される箇所ですが、これも好みに合わせて変更してみてください。
当サイトでは
この記事の読了目安時間は約 ○ 分です。
としています。
これだけで投稿ページで目安時間が表示されるようになります。
これでまず１ステップ。
読了目安時間を目立つようにデザインを変更する
このままでも問題ないのですが、投稿記事のリード文と同化して目立たないように感じます。
なので可読性を高めるためにデザインを変更してみましょう。
今回は枠線を付けることにします。
管理画面の［外観］ ＞ ［CSSを編集］ ＞ ［追加 CSS］へ進み、以下の一文をコピペしてみてください。
.countdown {border:1px solid #ccc;padding:0.5em}
これで枠線で囲まれて表示されるようになります。
これで２ステップ。以上です。
まとめ
というわけで、functions.phpをカスタマイズして記事の読了目安時間を表示するポイントは
- ［functions.php］にコードを追記する
- 1分間に読める文字数の目安は約400～600文字
- CSSで可読性をUP！
以上。これからもカンタンにカスタマイズできることがあれば記事にします！
