Webの記録

WordPress 「この記事は●分で読めます」をプラグインなしで表示させたい時

投稿日:2013年4月3日 更新日:

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

よく他の方のブログで記事の冒頭に「この記事は●分で読めます」という表示がされているのを見かけます。

これがあると、その記事を読むかブックマークするかを判断出来て便利だなぁと思ってました。

WordPressのプラグインもあるようですが、せっかくならプラグインなしで表示したいと思ったので、他の方のブログを参考にこのブログでも表示させてみる事にしました!



人が文字を読む速度って?

よく見かける「●分で読める」という表示って、どんな基準で計算されているんだろう?ってまず思い、ちょっとググってみたら以下のように書かれているサイトを見つけました!

あなたは文章を読むのが人より早いほうだろうか、それとも遅いほうだろうか。「読書速度測定」は、1分間に読むことのできる文字の量を計測してくれるサービスだ。
日本人の平均は400~600文字/分と言われている。以下省略
1分間にどれだけ文字を読めるかを計測できる「読書速度測定」/教えて君.net様より】
http://www.oshiete-kun.net/archives/2010/10/1_14.html

このサイトで、実際に自分の読書速度を測る事が出来ました。私の結果は、1分間に522文字で、日本人の平均の読書速度だったそうです。

読書速度が分かったところで、さて実装です・・・。ここでも、さらにググって試してみました。


「この記事は●分で読めます」をプラグインなしで表示させてみる

プラグインを使用しないということで、functions.phpに記述してみました。

表示したいのは、記事の個別ページ(single)のみ。(固定ページとかは表示したくないので)

・・・そんなワケで以下のようなコードになりました。

function countdown($content){
        if ( !is_single() ) {
           // 個別ページ以外には表示しない
           return $content;
        }
	$count = round(mb_strlen(strip_tags($content)) / 600) + 1;
	return '<p class="countdown">このポストは約 '.$count." 分で読めます。</p>".$content;
}
add_action('the_content','countdown');

※全てのページに表示したい場合は、2~5行目を削除。

これで実装完了!思ったより簡単に出来て良かったです♪

あとは、cssで見た目の調整をしてオシマイです!!


参考にさせて頂いたサイト

本当に簡単に出来たのは、以下の2つのサイト様のおかげです!感謝です!!


試してないけれど、便利そう

WordPressのプラグインで実装出来る方法と、あと「●分で読めます」表示をした後に「読めましたか?」と表示してくれるという、2つの記事を見つけました。

私は今回試してないのですが、面白そうなので・・・メモとして記録します。

-Webの記録
-, ,

執筆者:


  1. ゆうママ より:

    はじめまして!

    ワードプレス超初心者です。

    『あとは、cssで見た目の調整をしてオシマイです!!』とありますが、やり方が分からなくて。。。

    例えばこのサイトのように文字を右に寄せたい場合や、文字を太字にするには、どう編集すればいいでしょうか?

    子テーマのスタイルシートを、使った方がいいでしょうか?

    どうぞ、よろしくお願いします。

    • Motoshige より:

      ゆうママさん、はじめまして。
      コメントありがとうございます。
      子テーマを使用されているなら、子テーマのスタイルシートに記述することになります。
      私が書いているコードには、「countdown」というクラスを設定しているので、スタイルシートに以下のように書いてもらえば「右寄せ」で「文字サイズが他の文字より若干小さくなる」ように設定できます。
      試してみてください。

      p.countdown {
      text-align: right;
      font-size: 90%;
      }

      • ゆうママ より:

        あれ?!

        コメント、送れていますか?

      • ゆうママ より:

        一度送ったつもりなのですが、どっかに消えたようで・・
        さっそくのお返事ありがとうございます。

        ALPHAというテンプレートを使っています。

        子テーマです。
        真ん中より下は、こちらのサイトを使わせていただきました。

        ーーーーーーーーーー
        <?php

        add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
        function theme_enqueue_styles()
        { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        }

        /**
        * ここにあなたの関数を書いてください。
        *
        */
        function countdown($content){
        if ( !is_single() ) {
        // 個別ページ以外には表示しない
        return $content;
        }
        $count = round(mb_strlen(strip_tags($content)) / 600) + 1;
        return 'この記事は約 ‘.$count.” 分で読めます。”.$content;
        }
        add_action(‘the_content’,’countdown’);

        ーーーーーーーーーーー

        子テーマのスタイルシートです。
        下半分は、教えていただいた通りにつけました。
        ーーーーーーーーーーー
        /*
        Theme Name: Alpha Child
        Template: wp-alpha
        Version: 1.0.0
        */
        p.countdown {
        text-align: right;
        font-size: 90%;
        }

        ーーーーーーーーーー

        それが、右に寄らないんです(^^;)
        ちなみに親テーマのスタイルシートの一番下にも、試しに貼ったのですが、これもうまくいかないんです。

        使っているテーマによるのでしょうか?
        何度もすみません。

        よろしくお願いします。

  2. ゆうママ より:

    追伸:

    基本的な事が分かっていないので、これも普通要るでしょ?!とか、ここじゃないでしょ?っていうレベルから、教えていただけるとうれしいです。

    どうぞ、よろしくお願いします。

  3. ゆうママ より:

    お騒がせしました。

    出来ました!!

    ALPHAのテンプレートが持つCSS編集画面に、教えていただいたものを入れたら、右に寄りました。

    ありがとうございました。

    • Motoshige より:

      ゆうママさん、返信遅くなりすみません。
      解決したそうで、良かったです!!
      ご報告ありがとうございます。安心しました^^

comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

WebサイトのURLを変更した後 .htaccessの記述して新しいURLに転送してみる

この記事は約 2 分で読めます。 ずっと運営していたサイトのURLを都合により変更(ファイルを移動)させてしまった時、ブックマークから訪問してくれた人が困らないように新しいURLへ転送する事が必要にな …

no image

WordPressテンプレートタグをメモ【コンテンツ編】

この記事は約 1 分で読めます。WordPressにはたくさんのテンプレートタグがあります。 似たようなものや、同じ結果なのに記述の仕方が何通りもあったりするので、後で「何だっけ?」って思う事もしばし …

no image

Google Maps表示用スクリプト「google_map_api_js」を試してみた♪

この記事は約 1 分で読めます。 以前「jquery.gmap3.js」を使ってGoogle Mapsを表示させてみました。(「jquery.gmap3.jsを使って、Googlemapを簡単にカスタ …

no image

右クリックで独自メニューを出して画像のコピーガード

この記事は約 1 分で読めます。 画像のコピーガードを3通り試しています。 今回は「右クリックで独自メニューを出す」方法を試してみました。 「右クリック禁止で画像のコピーガード」、 「透明画像を置いて …

no image

WordPress 複数のサイドバーを使い分ける方法。

この記事は約 2 分で読めます。 WordPressのテーマを独自で作っていて、どのページも同じサイドバーでは面白くないなぁと思い…。 記事のページ(index.phpやsingle.php等)と固定 …