【Cocoon】滞在時間が13.8%もUPする『この記事は○分で読めます』を実装してみた

Wordpressの子テーマを編集 デザイン
この記事は 約8 分で読めます。

日々沢山のブログを読んでいるとたまに『この記事は○分で読めます』みたいに書いてあるブログを見かけます。
私も初めて見た時は『ぉ!これすげー!』ってなりました。

何故か?

だって、記事を全部読もうと思ってブログを訪問するわけですよね?
そこで右端を見ると、スクロールバーがめちゃくちゃ小さくなっていたらゲンナリしてしまいませんか?

また理解しにくい文章だった場合などは読み飛ばしてしまう事もしばしばありますよね?

最悪の場合はブラウザバーック!なんて事にもなり大変な機会損失をしているわけです。

しかし、そんな時に読了時間がある事で、あぁ思ってる程の長い記事では無いな?と言う目安になる事で、読了時間を最初に提示して滞在時間が13.8%も上がったと言う報告がありました。

ソース元: IdeaxIdea ドットインストール田口さんのブログ たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法・・・
PR

読了時間を入れるとなぜ滞在時間が上がるのか?

直帰率改善

読了時間とは単純にブログの記事を全て読み終わるのに掛かる所要時間の事ですが、これを頭に書いておく事で、ブックマークに入れて後日読むことにするか、今読み終える事が出来るかの目安になります。

この違いは非常に大きいと思いませんか?

読了時間の近くにSNSブックマークなどを置いておくと更に、『はてブ』などのブックマークのクリック率も上がりSEO的にも有効な被リンクを獲得できる仕組みにも変化出来るのです。

滞在時間が上がる理由(メリット)

  1. 読了目安時間で文章のボリュームを認識出来た
  2. ブックマークを獲得出来るかも知れない
  3. ブックマークして後からじっくり読んだ
  4. 腰を据えて読む気になる(集中力が上がる)
  5. 5分と書かれていて5分以内に読もうとするチャレンジ精神

と、たった1行を記事の頭に付けておくだけで、こんなに沢山のメリットがあるのです。

1行だけだからたいして邪魔にもなりません。

読了時間の妥当性

人が文章を読む速度の平均は1分間500文字~800文字と言われていますので、600文字を1分として基準値を設けて3000文字なら5分で読めますと言う風に表示する事にしています。

もちろん人によって文章を読む速さに個人差がありますので、一概に1分間で500文字!とは言い切る事は出来ませんが、一般的な速度で計算するのが妥当かと思います。

この文章が一体何分で読めるのか?と言う目安がある事で、これ何メーターあるの?50メーターです。と言われれば、その距離が分かるのと同じで今から走ろうとする人にとっては良い心構えになると思います。

もくじと一緒に表示しておく事で、『あぁこの記事は長いから必要な所(知りたい所)だけ読もう』と言う選択にも繋がります。

『○分で読めます』の表示が嫌いな人も居る

もちろん、『○分で読めます』の表示が嫌いな人も居ます。その理由は

余計なお世話だよー読みたかったら勝手に読むし!

と言う方です、実際に6分以内だったら読もうと思うけど、それ以上だったらブックマークにするか、必要な所だけ探して読む(もくじが必要)と言う方が一定数存在しているようです。

Cocoonに『○分で読めます』を実装するサンプルコード

取りあえず能書きはこれくらいにしておいて、実際のコードをWordPressに実装してみようと思います。
色々コードが書かれているブログが沢山あったのですが、実装方法についてはWordpressのカスタマイズについて理解している前提の記事ばかりでしたので、私のブログでは出来るだけ丁寧に解説したいと思います。
まずは私がこのブログで使っているWordPressテーマのCocoonに実装してみたいと思います。

サンプル-コードに関して参考にしたブログは以下の通りです。
参考ブログ: 固定ページにこの記事はOO分で読めますを表示する方法

手順① 小テーマのFunction.phpに以下を記述する

小テーマとは、親テーマCocoonのChild-masterのフォルダを意味しています。
Cocoonは子テーマにもFunction.phpが空で用意されていますが、存在しない場合は新しいファイルをFTPやファイルマネージャーからアップロードして下さい。

function countdown($content){
	if ( !is_single() ) {
		// 個別のページ以外は表示しない
		return $content;
	}
	$count = round(mb_strlen(strip_tags($content)) / 600) + 1;
	return '<span class="countdown"><i class="fa fa-clock-o"> </i> この記事は <strong>約'.$count.' 分</strong>で読めます。</span>'.$content;
}
add_action('the_content','countdown');

CocoonではFontAwesomeがデフォルトで導入されていますので<i class=”fa fa-clock-o”>の部分でタイマーのアイコンを表示するようにしています。

手順② Contents.phpに表示を追加する

Cocoonのテーマではtmp/content.php のファイルが記事の表示部分になりますので、好きな場所に以下の記述を追加すると『この記事は○分で読めます』を追加する事が出来ます。

一般的なテーマの場合は小テーマフォルダのsingle.phpに記述すると表示出来るはずです。

<?php //記事本文の表示
countdown($content); // ←この行が『約○分で読めます』の部分
the_content(); ?>

上記を追加して完了です。下記画像の76行目を見て下さい。Cocoonで76行目にこの記述があります(Ver1.01)

滞在率を伸ばす方法

ですがWordPressの小テーマの場合は、そもそもtmp/content.phpのファイルがありません。
ですのでファイルマネージャーかFTPを利用して『tmp』フォルダを新規で作ります

そして親テーマのフォルダにある cocoon-master/tmp/content.php をコピーしてファイルを編集したファイルを小テーマに新しく作ったtmpフォルダに設置して完了です。

小テーマに設置する場合の補足事項

小テーマとは

小テーマとは上記のように2つインストールしたCocoonテーマのChildと書かれている方のテーマの事です。

Wordpressの子テーマを編集

作業の全体像は上記の図のようになります。
Cocoonの場合は子テーマにFunction.phpが用意されていますので、そちらに①のコードをコピペします

他のテーマもオススメのテーマとして私が紹介しているテーマについては後日、説明詳細を記載して行こうと思っていますが、私が持っていない有料のテーマの場合は説明詳細の手順を書く事が出来ませんのでご了承ください。

手順③ CSSで見た目を目立つように装飾する

当ブログではこのような装飾をしています。
もし良かったらマネしてみて下さい。

CSSで装飾する

.countdown{
position:relative;
background: yellow;
padding: 0.3em;
}
.countdown:after{
content: "";
position:absolute;
top:0;
right:0;
width:0;
height:0;
border-style: solid;
border-color: transparent #fff transparent transparent;
border-width: 25px 15px 25px 0;
}

『約○分で読めます』の記述を考えてみる

さて以上で『約○分で読めます』の記述が実装出来たかと思います。

この約○分で読めますの記述は滞在率を13.8%もUPするのだから、表示の仕方次第ではもっと無限の可能性を秘めているのではないか?と思うんです。

例えば・・・

  • この記事を5分を読んでみよう!よーいドン!
  • この記事を読むには5分以上掛かるかも知れません
  • この記事はみんな5分で読んでます。あなたは何分掛かりますか?
  • この記事を5分で読めたら天才!
  • 記事の最後に『はい!ジャスト5分で読めましたね!』と表示する
  • この記事は20分以上掛かりますのでブックマークしといて下さい。
  • この記事は30分以上掛かるので『後で読む』に追加して下さい。

こんな記述を表示する事で、また新たな扉が開かれるかも知れませんね(笑

この記事を読んだあなたにオススメしたい記事

オススメの記事【Googleアクセスアップ対策】Googleの評価が低いページを整理して滞在率とCV率をアップさせる方法

コメント

  1. 大変有益な情報ありがとうございます。

    このページに書かれている通りにやったところ、エラーが出て、子テーマのtmp/content.phpの中身がすべて消えてしまう事象が起きました。

    私は自力で解決できたので大丈夫ですが、今後同じことをされる方への防止の意味でコメントを残させていただきます。

    原因は「手順① 小テーマのFunction.phpに以下を記述する」のコードでした。

    1. return … $content; の部分のシングルクォーテーションで改行しているが、開業せずにすべて1行のままにしておいた方が良いです。これがエラーの根本原因です。
    「return ‘<span … '.$content;」まで、すべて1行が望ましいです。
     現状のコードのままではエラーとなり、content.phpの中身が消える事象がでました。

    2.に対して、閉じるタグがありません。エラーはでませんが、表示が崩れます。

    提案
    3. の部分はにしました。私の好みになってしまいますが、意味的にはこちらだと思いました。

    • devisense より:

      ダイブツ@はばたく理系さま

      コメント頂きまして有難う御座います
      ご指摘頂きました件2件、早速修正させて頂きました^^;

      tmp/content.phpの中身が消える事態は経験した事が無いですが記述が全て消えると言うのは怖いですね

      自己解決されたと言う事で良かったです。

  2. みきや より:

    こんにちは!
    大変有益な情報ありがとうございます
    ここに書いてある通りにしたら記事が終わった後にまた記事が始まるという現象が起きてしまったんですが、どうしてでしょう?
    初心者なのでよく仕組みがわかってないです、すみませんがよろしくお願いします

    • devisense より:

      >> みきやさん

      実は私も実装しようと試行錯誤していた際にその状態になりました。

      私の場合は、countdown($content)の$contentの部分をcount(the_content());としていたのが原因でした。

      Cocoonの変数から引っ張るだけでOKなので、基本的にはFunctionの記事のPHPをコピペで大丈夫です。

      ただみきやさんの状態が分からないので詳しくは言えないです

      • みきや より:

        すみません、そしてありがとうございます

        ①の通りやってFunction.phpにコードをコピペしたのですが、記事が終わった後にまた同じ記事が始まってしまいます

        色々とありがとうございます

      • みきや より:

        すみません、1つ気づいたのですが76行目にthe_content(); ?>と書いてありcontdownって記述がされていません
        何か関係あったりするのでしょうか?よろしくお願いします

        • devisense より:

          >> みきやさん

          もちろん無関係ではありません。

          この記事のコードを全く同じ状態にして下さい。
          シングルコーテーションやダブルコーテーションについては全角文字にエスケープされている可能性があるので注意して下さい。

          それにそもそもcontdownの記述が無ければ、OO分で読めますの表示は出ないはずです。

          • みきや より:

            色々ありがとうございます
            手順1と3だけやったら正常になりました

            手順2をやるとおかしくなるみたいです
            手順2の意味ってなんなんでしょうか?質問ばかりですみません・・・

トップへ戻る