しみずしみず
2017/09/13

WordPress -『この記事は〇〇分で読めます』を実装してみる(プラグインなし、カスタムフィールドを含めたテキスト対応)

この記事は約3分で読めます。

WordPress -『この記事は〇〇分で読めます』を実装してみる(プラグインなし、カスタムフィールドを含めたテキスト対応)

WordPress

最近よく見る『この記事は〇〇分で読めます』ですが、いつか実装しようと思っておりましたが、晴れて本日実装しましたので、備忘録も兼ねてご紹介します。

また、何分で読めるか表示されている事により、今読むのか後で読んでみるかの判断材料にもなり、訪問して頂いたユーザー様にも親切かと思います。

1.仕様について

日本人の平均読書速度は分速400~600文字だそうです。

今回は600文字として実装しました。

※数字を変更する事でお好みの文字数に変更も可能です

 

2.functions.phpへ関数の追加

テーマのfunctions.phpに下記を追加します。

単純に通常のブログなら、

 

//コンテンツを読むのに必要な時間を表示
function countdown($content){
$count = round(mb_strlen(strip_tags($content)) / 600) + 1;
return “この記事は約”.$count.”分で読めます。”.$content;
}
add_action(‘the_content’,’countdown’);

 

とし、アクションフックで自動出力する方が早いですが、このブログはカスタマイズしてますので、カスタムフィールドで出力している文字数も計算しないとならないので、下記のようにし、テンプレート側に関数を記述する方式としました。

 

//コンテンツを読むのに必要な時間を表示
function countdown($content){
$count = round(mb_strlen(strip_tags($content)) / 600) + 1;
return “この記事は約”.$count.”分で読めます。”;
}

では、次はテンプレート側に記述していきます。

3.テンプレートに関数の記述

取得するテキストの概要図は以下となります。

上記のテキストを取得するため、ループ内に下記を記述。

//テキスト取得用の変数
$contenttext = “”;
//標準の投稿を代入
$contenttext .= get_the_content();
//各カスタムフィールドのループフィールド内のテキストを配列で取得
$tx = get_post_meta(get_the_ID(),’PostFild’,false);
//配列からテキストをループで取得し変数に代入
foreach ($tx as $dtl):
$contenttext .= $dtl;
endforeach;

 

これで$contenttextにブログ内の全文が格納されました!

この$contenttextを 2で作成した関数を使用して表示します。
表示したい箇所に下記を記述

echo countdown($contenttext);

無事表示されているか確認してみて下さい!

こんな感じで表示されていればOKです。
表示はCSS等でお好みにして下さい!

4.最後に

いかがでしたでしょうか?

意外と簡単に実装できたのではないでしょうか?

実装してみようと思う方のお役に立てれば幸いです。

WordPress -『この記事は〇〇分で読めます』を実装してみる(プラグインなし、カスタムフィールドを含めたテキスト対応)
しみず WEBディレクター&クリエイター

WEBディレクター&クリエイターのしみずです。 主にWeb制作に関係する業務を統括しています。

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。