wordpressにて、記事の所用時間を表示させる方法

この記事は約619秒で読めます。

どうも!こうすけです。

今日は記事に所要時間を表示させる方法を紹介したいと思います。
所要時間とは、記事を読むのにおおよそかかる時間のことです。
記事の所要時間を表示すると色々とメリットがあるみたいなので、載せて損はないと思います。

1. 記事の所用時間を表示させるメリット

まず、所要時間を表示させることで読者がその記事を読むのにどれくらいかかるのか判断しやすくなります。みなさんも、所要時間が書かれてないとその記事にどれくらい時間がかかるのなんてわかりませんよね?

読者のことを考えてあげるなら、その記事を読むのにどれぐらい時間がかかるのか判断できるものを表示させてあげるのは必要なことだと思いますよ。

2. 記事の所用時間を表示させる方法

ネットで調べた限り、記事に所要時間を表示させる方法は2通りあるので紹介したいと思います。

2.1. プラグインを利用する。

まず一つ目の所要時間を表示させる方法として、プラグインを利用する方法があります。

以下に手順を示します。

①「estimated」ダウンロードする。「estimated」ダウンロード先

②ダウンロードした「estimated」のファイルを該当ブログにFTPにてアップロードする。
また、プラグインの新規追加画面の上部に「プラグインのアップロード」というボタンがあり、そこからダウンロードした「estimated」をアップロードすることも可能です。

③該当ブログのダッシュボードより、「estimated」を有効化する。

以上で終了です。記事を確認してみると所要時間が表示されるはずです。

ただこのプラグイン、不備があって、該当ブログのホーム画面で記事を一覧表示しており、その記事に記事の内容を抜粋している場合以下のような表示になってしまいます。
自分以外のブログで確認してないので、絶対とは言い切れませんが、大体は以下のような不備が発生すると思います。



※自分が運営している別のブログの画像です。

上記を見てわかると思いますが、示した箇所に所要時間が二重で表示されてますよね?(上の水色破線で表示されてる所要時間は自分がソースコードを直接直して表示させたものです。その方法は後で説明します。)

「estimated」では、ホームやカテゴリーに記事の内容を表示させている場合に不備が発生することがあります。これでいいのであれば構いませんが普通は嫌だと思いますので、もし不具合が発生した場合、次のテーマを直接編集する方法をお勧めします。

2.2. ソースに直接修正する

ではテーマのファイルを直接編集する方法をご紹介します。

まず、該当ブログのダッシュボードより「外観」の「テーマ編集を選択してください。

選択すると以下のような画面が表示されます。


この画面でテーマを直接編集していきます。

以下の所要時間を表示させるためのソースコードを今からいう箇所にコピペしてください。

<?php
$mycontent = $post->post_content;
$word = mb_strlen(strip_tags($mycontent));
$m = floor($word / 600)+1;
$s = floor($word % 600 / (600 / 60));
$time = ($m == 0 ? '' : $m) ;
$times = ($s == 0 ? '' : $s) ;
?>
この記事は約<b><font color=#cc0000><?php echo $time; ?></font></b>分<b><font color=#cc0000><?php echo $times; ?></font></b>秒で読めます。

2.3. 記事内に所要時間を表示したい場合

記事内に所要時間を表示したい場合は「single.php」を編集しましょう。テーマ編集画面の右側にファイルが一覧で表示されていると思いますが、single.phpファイルを選択してください。選択するとsingle.phpファイルの中身が表示されます。
ソースコードの挿入箇所は自分が挿入したい箇所によって変わりますが、今回は以下のように表示させる方法を説明したいと思います。


まず、single.phpファイル内に「the_content()」か「the_excerpt()」という記述があると思うので、探してください。「the_content()」か「the_excerpt()」は記事の内容(文章と言えばいいのかな)を表示させるためのものです。

もし、画像のように記事の上に表示させたい場合は、「the_content()」か「the_excerpt()」の上に所要時間を表示させるためのソースコードを貼り付けてください。

そうすると、画像のように所要時間が表示されます。

もし探してもなかった場合はおそらく別のファイルで記事の内容を表示させてると思うので、そのファイルが何かを特定しましょう。

おそらく、「single.php」ファイル内に「get_template_part()」の記述がないでしょうか?

この記述によって別のファイルを読み込むことができ、「get_template_part()」の()内に読み込まれるファイル名が記載されています。
その中に「the_content()」か「the_excerpt()」の記述があるので、その上に所要時間を表示するためのソースコードを表示させましょう。

ちなみにget_template_part()の()内がget_template_part( ‘template-parts/content’, ‘single’ );となっていればcontent-single.phpを指していることになります。

このファイル内に「the_content()」か「the_excerpt()」の記述があると思うので、探してみましょう。

一応、自分のブログで貼り付けた後の状態のソースコードを記載しておきます。
参考にしてください。


ちなみに、上記のソースコードを貼り付けても水色の破線は表示されません。
水色破線はCSS(スタイルシート)でデザインをカスタマイズしているため、CSSを編集するといった知識が必要になります。
CSSについてはまた別の機会に。

2.4. 別のところで所要時間を表示させたい場合

記事内以外にももしかしたら表示させたい場合があるかもしれません。例えば、ホーム画面の記事を一覧で表示させている箇所、カテゴリー内で記事一覧で表示させている箇所、そういった場合も記事内で所要時間を表示させた方法で表示することができます。
ただ、ファイルが「single.php」ファイルではないです。
ホーム画面であれば、「index.php」ファイル、カテゴリー画面であれば「category.php」ファイル、アーカイブ画面であれば「archive.php」ファイルを編集していきましょう。

3. 最後に

読者のことを考えると所要時間を表示させるのは大切なことです。ちょっとしたことですが大切なことだとは思いますので、wordpressにてブログを書いている方は表示させることをお勧めします。

この記事がいい!!と思ったらいいねツイートよろしく!!

 

作成者: kosuke

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です