WordPress(賢威)「この記事は○分で読めます!」の設定方法 

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

こんにちはFPヒデです。

今回は、WordPress(賢威)のサイトで、「この記事は○分で読めます!」の設定方法をお伝えいしますね。

たまにサイトを見ていると、「この記事は○分で読めます!」とかかれているのを目にしたことはありませんか?

これを設定すると、実際にサイトに訪れて来てくれた人の滞在時間も左右する結果もあるとお聞きしたので、私も早速設置してみました。

ご興味のある方は是非やってみてください。

『functions.php』に記述する

テーマ編集の『functions.php』に追加で記述していくのですが、わたしはこの『functions.php』の記述で何度も苦い思いを経験していますので、下の方にも記載していますが、注意して行うようにしてくださいね。
 
下記コードを記述します。 

function count_time(){
    $content = get_the_content();
    $count = round(mb_strlen(strip_tags($content)) / 600);
    if ($count == 0) {
        $count = 1;
    }
    return 'この記事は約'.$count."分で読めます。";
}

 
『テーマ編集』⇒『functions.php』に画像の様に、下の部分に追加で記述します。 

hun0
 
必ず、?>の前に記述してください。反映されなくなりますので注意しましょう。 

hun1
 

投稿記事部分に表示させるためのコード貼付け

 
下記コードを表示させたい場所に記述します。

<?php echo count_time(); ?>

 
単一記事の投稿(single.php)に表示させる例は以下の場所に記述してみました。
hun2

 
このような形で表示されているはずです。
 
hun1
 

右側に表示させるカスタマイズ

凝りだすときりがないですが、サイト投稿記事の右側に表示させるだけで非常にスッキリとするのでその方法もお伝えしますね。
 
先程『functions.php』に追記したコードを以下のコードに変更します。

function count_time(){
    $content = get_the_content();
    $count = round(mb_strlen(strip_tags($content)) / 600);
    if ($count == 0) {
        $count = 1;
    }
    return '<p class="post-time">この記事は<span class="red b">約'.$count."分</span>で読めます。</p>";
}

 
先ほどのコードに7行目のコードを追加しただけですが、記述ミスを防ぐためにもそっくりコードを置きかえます。
 

次にこれも先ほど同様に単一記事の投稿(single.php)に表示させたいのであれば、『single.php』に先ほど追記したコードに、更に記述を下記コード3行目と6行目を追加します。
 

<div class="post">
<h2 class="post-title"><?php the_title(); ?></h2>
<div class="post-hedinfo">
<p class="post-meta"><span class="post-data"><?php the_time('Y年m月d日') ?></span> <?php if (!is_attachment()) { ?>[<span class="post-cat"><?php the_category(', ') ?></span>]<?php } ?></p>
<?php echo count_time(); ?>
</div>
<?php get_template_part('social-button'); ?>

 
hun44

 
次に『design.css』の一番下部分に下記コードを貼り付けます。
 

.post-hedinfo{
    clear: both;
    overflow: hidden;
    font-size: 0.9em;
}
 
.post-hedinfo .post-meta{
    float: left;
}
 
.post-hedinfo .post-time{
    float: right;
}

 
下記画像のように記述します。
hun5
 
以上で、右側に表示させて、赤字強調させたカスタマイズの方法は完了です。
 
よりスッキリしたイメージになりましたね。 
hun4

『functions.php』記述時の注意

この『functions.php』は関数に関することが記述されているのですが、CSSなどの要領でスペースや段落に意識せずに追加記述を行うと、誤って画面が真っ白になることがありますので気をつけて行うようにしてください。

そのようになった際の対処方法も念のため載せておきますのでよかったら参考にしてみてください。
 

functions.phpの編集した後に画面が真っ白になった際の対処方法

functions.phpの編集した後に画面が真っ白になった際の対処方法はこちら
 

以上で「この記事は○分で読めます」と表示させるための設定は完了です。

 

2 Responses to “WordPress(賢威)「この記事は○分で読めます!」の設定方法 ”

  1. こんにちは!
    とっても詳しい説明、恐れ入りました。

    あれは賢威で作成したブログなんですね。

    それが、賢威でなくともできちゃうってことですね。

    こんなことが分かるFPヒデさん、素晴らしいのひとことです。

    どうもありがとう。応援していきますね。

コメントを残す

サブコンテンツ

このページの先頭へ