現在の接続環境は
です

記事内にプロモーションが含まれています。

WordPress カスタマイズ 伝えたいこと 備忘録

プロモーションを含みます

記事の閲覧時間や所要時間の目安を表示する方法(今は需要ないかも…。)

所要時間目安: 2

This session is using  IPv4  is established in

今日は2025年7月6日です。

この記事は2017年1月15日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く・戻る

2025年7月6日 (日曜日)↓における週間月間人気記事トップ3は?↓

  • 本日
  • 週間
  • 月間
  1. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 1PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  2. スロットルバルブ洗浄

    スロットルバルブクリーナーでスロットルバルブ洗浄と効果 1PV

    人間も同じですが、いい状態で長く乗るには車もメンテナンスが重要です。 良くない状態というのは一番最悪なのがエンジンオイルを車検の時しか交換しないとか…。orz…。 オイル関係は人間で言う血液に相応する…

    もっと読む

  1. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 28PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

  2. プロステージ

    エクストレイルおすすめエンジンオイルにプロステージSの10W-40を試してみた 27PV

    車にとってエンジンオイルは心臓部であるエンジンを保護するための重要な潤滑剤(潤滑油)です。他にもクーラント液やブレーキフルードなどのオイル関係はありますが、一番シビアな環境にあるエンジンを直接保護する…

    もっと読む

  3. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 24PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…

    もっと読む

  1. プロステージ

    エクストレイルおすすめエンジンオイルにプロステージSの10W-40を試してみた 27PV

    車にとってエンジンオイルは心臓部であるエンジンを保護するための重要な潤滑剤(潤滑油)です。他にもクーラント液やブレーキフルードなどのオイル関係はありますが、一番シビアな環境にあるエンジンを直接保護する…

    もっと読む

  2. ECUリセット

    ECUをリセットする方法。アイドリング不安定だったのでしょうがなく 22PV

    過去の記事で、車も人間と同じようにメンテナンスは大事です。 と記載しました。 ですが、メンテナンスのし過ぎもいかがなものかという感じになりました。(メンテナンスしないのはもっと悪いですが…。) その記…

    もっと読む

  3. カーナビテレビが見れなくなったICカードが正常に動作しませんでした

    ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法 19PV

    本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

    もっと読む

以前は結構流行っていた「この記事は何分で読めます。」という閲覧所要時間表示と言うものがあります。

ユーザビリティの為に概ねの記事の文字数で「何分何秒」と表示させていたアレです。

しかし、最近ではそのナリをひそめてしまっている気がします。

アドセンス336pxPC閲覧記事下表示1つ目コード

この記事を読む方へのオススメ

メルカリ招待コード:

忘れない内に記事の閲覧所要時間(所要時間)を表示させる方法を残しておきたいと思います。

結構、簡単と言えば簡単なのですが…。

前提条件として、

人によって読む速度が異なりますので、600文字を1分程度かかって読むという計算式にての閲覧所要時間表示方法になります。

ということは…。

閲覧所要時間を算出するコードについてのロジックは単純で、
記事の文字数と読む速度(文字/分)から算出しています。

読む速度は、ざっとこんなもんだろうということで、600(文字/分)としています。読む速度は個人差がありますし、読む速度に影響するパラメータは他にもあるのですが、あくまで概算値の提供が目的なので複雑なことはしていません。

 

具体的にな方法です。

以下のコードをテンプレート.php内に追記します。

 

<?php
 $numchar = mb_strlen( strip_tags($post-> post_content), "UTF-8");
 $readtime = ceil($numchar/600);
 echo $readtime;
 ?>

 

この上記内にある600という数値を任意に変えることで、
上記の計算式は変更可能なので500にしたのであれば1分間に500文字の読むスピードにての閲覧時間表示(閲覧所要時間表示)になります。

 

※あまりにも長い閲覧所要時間が表示されると、( ̄◇ ̄;)エッそんなにかかっっちゃうの?とも思われ兼ねないので数値は適当に設定してみるのも良いかもしれませんね。

 

閲覧時間表示(閲覧所要時間表示)させたい任意部分(位置)に以下のコードを記載(追記)します。

 

<p class="meta_read_time">
 閲覧所要時間: 約
 <span class="ft14px">
 <?php
 $numchar = mb_strlen( strip_tags($post-> post_content), "UTF-8");
 $readtime = ceil($numchar/600);
 echo $readtime;
 ?>
 </span>
 分
 </p>

 

これで以下のような感じで表示されるようになります。

「閲覧所要時間: 約XX分」

と表示するコードです。

 

最後にCSSにて整形します。

 

p.meta_read_time {
 font-size: 12px;
 }

 .ft14px {
 font-size: 14px;
 font-weight: bold;
 }

 

上記CSSはフォントサイズをboldによって強調していますが、
今現在では通常表示程度の少し小さめのフォントサイズとboldによる強調は必要ないかもしれませんね。

=通常の大きさのみで充分かもれませんね。

まとめ

今はナリをひそめている所要時間表示(閲覧時間表示)ですが、

今後また流行る?かも?しれませんので備忘録として一応残しておきました。

また、
今でももしかしたら需要があるのかもしれないと思いつつ記事にさせて頂きました。

ちょっとだけブログなどのエッセンスにいかがでしょうか?

表示例)

CSSでいろいろなデザインにすることは可能ですが、

上記のCSSですと無難な感じですが以下のようにも・・・・・・。

閲覧所要時間表示例

 

デザインはいろいろと試してみて自分で納得のいく感じのものに仕上げてみてください!!

あなたにおすすめ


Multiplex 広告

あなたが訪問してから

0 秒経過 🎉

入学入社まであと…入学入社祝いはどんなPresent(プレゼント)でどのように過ごされますか?

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告

Total598


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

-WordPress, カスタマイズ, 伝えたいこと, 備忘録

目次に戻る

目次に戻る


コメントを表示(0)

コメントを書く

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


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

新着コメント