STORKのfunctions.phpを編集して「何分で読めます」を表示する方法

前回の記事ではブログに「この記事は何分で読めます」を表示する目的やその時間の根拠、またWordPressのブログに設定するには3つの方法があることを紹介しました。

今回は、STORKのテーマを使ったWordPressブログでに「何分で読めます」を表示する方法の中で、テーマファイルのfunctions.phpを編集するやり方についてまとめた記事です。

<復習>「この記事は何分で読めます」の実装方法のまとめ

前回の記事のまとめですが、読了時間をブログに表示するには、大きく以下の3つの方法があります。

「この記事は何分で読めます」をブログに表示する方法
  1. JavaScriptを使用する
  2. WordPressのテーマファイルfunctions.phpを編集する
  3. WordPressのプラグイン「Insert Estimated Reading Time」や「Reading Time WP」を利用する

目安の読了時間って入れた方がよいの?について、また、WordPressのプラグイン「Insert Estimated Reading Time」や「Reading Time WP」使って時間を表示する方法については、それぞれ別の関連記事を参考にしてくださいね★

ブログに目安の読了時間を表示するプラグイン「Reading Time WP」の設定と表示方法まとめ

2019年4月25日

ブログに何分で読めますを表示するプラグイン「Insert Estimated Reading Time」の使い方

2019年3月26日

STORKテーマのWordPressブログで「何分で読めます」を表示する方法

2019年2月13日

テーマファイルfunctions.phpを編集して読了時間を表示する

WordPress管理画面の「外観」から「テーマエディター」へ進みます。
STORKのfunctions.phpを編集して「何分で読めます」を表示する方法

テーマのための関数(functions.php)」を選択してコードを挿入し、「ファイルを更新」ボタンをクリックします。
STORKのfunctions.phpを編集して「何分で読めます」を表示する方法

挿入するコードはこんな感じです。

function countdown( $content ){
    if ( !is_single() ) {
        // 記事詳細ページにのみ表示する
        return $content;
    }
    $count = round(mb_strlen(strip_tags($content)) / 500) + 1;
    $header = "

この記事は約 {$count} 分で読めます。

"; return $header.$content; } add_action('the_content', 'countdown');

必要に応じて、6行目の1分間に読む文字数(上記例だと500)を変更してください。また、7行目の日本語表記の部分は、適宜変更すればOKです。

ブログ記事詳細ページでは、目安時間がこのように表示されます。
STORKのfunctions.phpを編集して「何分で読めます」を表示する方法

目安時間のレイアウトを調整する

このままでもOKといえばOKですが、記事のリード文と混ざってしまう印象があるので、枠線を付けるなどの装飾をしてあげると良いでしょう。

目安時間のレイアウト調整をしますので、管理画面の「外観」から「CSSを編集」をクリックして追加 CSSへ進み、
STORKのfunctions.phpを編集して「何分で読めます」を表示する方法

以下のようなスタイルを足します。

.countdown {border:1px solid #ccc;padding:0.5em}

すると、ブログではこんな感じで表示されるようになりました、
STORKのfunctions.phpを編集して「何分で読めます」を表示する方法

functions.phpをカスタマイズして「この記事は何分で読めます」を表示する方法は以上でです。

なお、他にもプラグインを使って表示する方法も紹介していますので、このブログ記事の最後の関連記事リンクから参考にしてもらえればと思います★

STORKのfunctions.phpを編集して「何分で読めます」を表示する方法のまとめ

最後に、functions.phpをカスタマイズして記事の読了目安時間を表示するポイントを以下に挙げておきます。

  1. さほどややこしいカスタマイズではないので、プラグインを使うよりもfunctions.phpを編集する方がオススメ
  2. 1分間に読める文字数は400〜600文字の間で指定すると良い
  3. CSSで装飾しておくと、より見やすくなってGOOD

ブログに目安の読了時間を表示するプラグイン「Reading Time WP」の設定と表示方法まとめ

2019年4月25日

ブログに何分で読めますを表示するプラグイン「Insert Estimated Reading Time」の使い方

2019年3月26日

STORKテーマのWordPressブログで「何分で読めます」を表示する方法

2019年2月13日
関連記事

コメントを残す