「記事を読む時間」の文言などを変更する方法

はじめに

以下を実現します。

Cocoonの「記事を読む時間」のカスタマイズ

WordPressテーマ「Cocoon」の「記事を読む時間」のカスタマイズを紹介する記事です。PHPを用いて要素の文体を変更したり、CSSを使ってデザインをアレンジする方法を解説しています。

mycus-tom.com

Cocoon設定→本文→記事を読む時間「記事を読む時間の目安を表示する」をオンにすると、記事を読むのに必要な所要時間を表示することができます。

しかし、標準機能のままでは、出力されるHTMLの構造や「この記事は約〇分で読めます。」といった文言を自由に変更することができません。

そこで、既存の計算ロジックを活かしつつ、HTMLや文言を自分好みに変更します。

この記事では、この方法について説明します。

完成イメージ

本ページに完成イメージを反映させます。

実装手順

以下のコードをfunctions.phpに追加します。

// 独自の「記事を読む時間」を追加
add_action('singular_entry_content_before', function () {
  $original_visible = $GLOBALS['my_original_read_time_visible'] ?? false;

  if (!$original_visible) {
    return;
  }

  $expanded_content = get_post_field('post_content', get_the_ID());
  $minutes = get_time_to_content_read($expanded_content);
  ?>
  <div class="read-time">
    読了目安：<span class="read-time__value">約<?= esc_html($minutes); ?>分</span>
  </div>
  <?php
});


// Cocoon設定（本文）の記事を読む時間を取得
add_filter('theme_mod_content_read_time_visible', function ($current_mod) {
  if (is_admin()) {
    return $current_mod;
  }

  // Cocoon設定値を退避
  if (!isset($GLOBALS['my_original_read_time_visible'])) {
    $GLOBALS['my_original_read_time_visible'] = $current_mod;
  }

  // 標準の表示をオフ
  return false;
});

参考：Cocoon以外のテーマで「読了時間」ブロックを自動挿入する方法

Cocoon以外のテーマの場合、WordPress 6.9でサポートされた、標準の「読了時間」ブロックを用いることで同様のことが可能です。

「記事を読む所要時間」実装について

いつもお世話になっております。 WordPress 6.9 正式版が使用できるようになりましたが、その中で記事の所要時間を表示できる機能がブロックとして提供されるようになっております。こちらはおそらくFSEテーマ向けの機能と思われますので直...

users.xwrite.jp

WordPress「所要時間」ブロックとCocoonの違い

●注意点 アクションを求めるものではありません。メモとして残しクローズとします。 WordPress、Cocoonと考え方の違い、各々の仕様と言う認識です。 -----------------------------------------...

wp-cocoon.com

実装手順

以下のコードをfunctions.phpに追加します。

// 本文を変更
add_filter('the_content', function ($content) {
  if (!is_singular()) {
    return $content;
  }

  // 「所要時間」ブロックを展開
  $block_markup = '<!-- wp:post-time-to-read /-->';
  $block_html   = do_blocks($block_markup);

  $read_time_html = '<div class="read-time">読了目安：<span class="read-time__value">' . $block_html . '</span></div>';

  return $read_time_html . $content;
}, 9);


// フロント用JS・CSSを追加
add_action('wp_enqueue_scripts', function () {
  ob_start();
  ?>
  .read-time {
    border-bottom: 4px double #eee;
    border-top: 4px double #eee;
    text-align: center;
  }
  .wp-block-post-time-to-read {
    display: inline;
  }
  <?php

  $handle = 'post-read-time';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());
});

さいごに

今回紹介した方法を使えば、Cocoon既存の計算ロジックを最大限に活かしながら、テーマの標準機能だけでは変更できなかったHTML構造や文言を自分好みに自由に変更することができます。