2025.05.08

【WordPress】記事の読了時間を計算表示するショートコードを作成してみた！

鈴木俊吾（すずしん）

記事内に商品プロモーションを含む場合があります

【WordPress】記事の読了時間を計算表示するショートコードを作成してみた！

こんにちは、鈴木俊吾（すずしん）です。

あなたは、ブログの記事を読むことはありますよね？
その際に、記事をどれくらいの時間で読了できるか、気になったことはありませんか？

私は、ブログを読む際に、記事の長さや内容によって、どれくらいの時間がかかるのかを考えることがあります。
特に、長い記事や難しい内容の記事は、読むのに時間がかかることがあります。
そのため、記事の読了時間を知ることは、読者にとって非常に重要な情報だと思います。

そこで、私はWordPressをカスタマイズしまして…。
記事の読了時間を計算して表示するショートコードを作成してみました！
このショートコードを使うことで、記事の読了時間を簡単に表示できるようになります。

今回の記事では、記事の読了時間を計算して表示するショートコードの作成方法を紹介します。
このショートコードを使うことで、あなたのブログの記事に読了時間を表示することができるようになります。
機能の実装自体は意外と簡単です。
ちょっとの時間があればできると思いますので、ぜひあなたも試してみてください。

Contents

ブログ記事に読了時間を表示することのメリット
読了時間を計算・表示するためのショートコードの作成方法
まとめ：あなたも試してみてください！

ブログ記事に読了時間を表示することのメリット

記事の読了時間を表示することには、いくつかのメリットがあります。

読者の利便性向上: 読者は記事を読む前に、どれくらいの時間がかかるかを知ることができるため、時間の使い方を考えることができます。
コンテンツの質の向上: 読了時間を表示することで、読者は記事の内容をより深く理解しようとするかもしれません。これにより、コンテンツの質が向上する可能性があります。
SEO効果: 読者が記事を最後まで読むことで、SEO効果が期待できるかもしれません。読了時間を表示することで、読者の興味を引き、記事を最後まで読んでもらえる可能性が高まります。
読者のエンゲージメント向上: 読了時間を表示することで、読者は記事に対する興味を持ちやすくなります。これにより、読者のエンゲージメントが向上する可能性があります。
シェアの促進: 読了時間を表示することで、読者は記事をシェアしやすくなるかもしれません。特に、短い記事は気軽に読めるためシェアされやすい傾向があります。

ブログ記事をどれくらいの時間で読めるかをあらかじめ知ることができる。
これは、読者にとって非常に便利な情報となります。
読了時間を表示することで、読者の利便性を向上させることができますよね。

「これくらいの時間ならちょっと読んでみようかな？」
「この内容なら、一旦キープして時間があるときにじっくり読もう！」
といった感じで、読者は記事を読むかどうかを判断することができるようになります。

読了時間を計算・表示するためのショートコードの作成方法

WordPressには、『ショートコード』という機能があります。
これは、WordPressの投稿やページに特定の機能を追加するための簡単な方法です。
具体的には、[ shortcode ]という形式で書くことで、特定の機能を呼び出すことができます。
※実際には、[]の間のスペースは無くします。

ここでは、記事の読了時間を計算して表示するショートコードを作成する方法を紹介します。
[ reading-time ]というショートコードを作成し、記事の読了時間を表示するようにします。

WordPressで、ショートコードを作成するには、functions.phpファイルにコードを追加します。
もしくは、functions.phpファイルを管理するプラグインを使うこともできます。
私の場合は、『Code Snippets』というプラグインを使って、functions.phpファイルを管理しています。
このプラグインを使うことで、functions.phpファイルを直接編集することなく、ショートコードを追加することができます。
直接編集するのが不安な方は、ぜひこのプラグインを使ってみてください。

ショートコードの作成

以下のコードをfunctions.phpファイルに追記します。
もしくは、『Code Snippets』プラグインを使って、新規にスニペットを作成します。

// 読了時間を計算してショートコードを登録
function calculate_reading_time() {
    // 投稿本文を取得
    $content = get_post_field('post_content', get_the_ID());
    // HTML タグを除去して文字数を取得
    $text = wp_strip_all_tags($content);
    $char_count = mb_strlen($text);
    // 1 分あたりの文字数目安（600文字）
    $chars_per_min = 600;
    // 計算：分 = 文字数 ÷ 1分当たり文字数（切り上げ）
    $minutes = ceil($char_count / $chars_per_min);
    return '<div class="reading-time">読了時間：約<span class="minute">'.$minutes.'</span>分</div>';
}
add_shortcode('reading-time', 'calculate_reading_time');

簡単にこのコードを説明すると…。

まず、get_post_field()関数を使って、投稿の本文を取得します。
次に、wp_strip_all_tags()関数を使って、HTMLタグを除去します。
その後、mb_strlen()関数を使って、文字数を取得します。
そして、1分あたりの文字数を600文字と仮定して、計算します。
最後に、計算した読了時間をHTMLで表示します。
このコードを追加することで、[ reading-time ]というショートコードが使えるようになります。

ショートコードの使い方

ショートコードを作成したら、実際に使ってみましょう。
『外観』→『ウィジェット』から、ウィジェットエリアにショートコードを追加することができます。
私の場合、『記事はじめ』の部分にショートコードを追加しています。
実際には、[]の間のスペースは無いです。

[ reading-time ]

これで、記事の読了時間が表示されるようになります。
普通、読了時間は記事の上部に配置するのが一般的です。

CSSのカスタマイズ

上記のショートコードで読了時間を表示した場合…。
出力されるHTMLは、例えば以下のようになります。

<div class="reading-time">読了時間：約<span class="minute">5</span>分</div>

このHTMLに対して、CSSを使って見た目をカスタマイズすることができます。
私の場合は、以下のようにCSSを設定しています。

.reading-time {
    padding: 5px;
    border: 1px dashed #999999;
    text-align: right;
}
.reading-time .minute {
    color: #cc0000;
    font-size: 1.25em;
    font-weight: bold;
}