Loading…

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

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

本日の人気記事BEST10

所要時間目安: 約2


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

所要時間表示閲覧時間表示

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

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

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



スポンサーリンク

目次に戻る


スポンサーリンク

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

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

前提条件として、

人によって読む速度が異なりますので、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ですと無難な感じですが以下のようにも・・・・・・。

閲覧所要時間表示例

 

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

data-full-width-responsive="true"
data-full-width-responsive="true"

おすすめの記事一部広告


コメントを閉じる

comment

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

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

WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリ人気記事

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

+ クリックで展開します

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

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



この記事が良かったら
いいね!お願いします(#^.^#)

WordPressデビュー津々浦々の
最新情報をお届けします

言えないことはTwitterで!!



目次に戻る