WordPressで記事の文字数と読了時間をタイトル下に表示する方法

// 記事の文字数と読了時間を表示する関数
function shisyamo_read_time_and_count() {
    global $post;
    $content = strip_tags( $post->post_content );
    $word_count = mb_strlen( $content );
    $read_time = ceil( $word_count / 400 ); // 約400文字＝1分で計算
    echo '<div class="read-meta">';
    echo '<span class="read-item"><span class="dashicons dashicons-edit" aria-hidden="true"></span>' . number_format( $word_count ) . ' 文字</span>';
    echo '<span class="read-item"><span class="dashicons dashicons-clock" aria-hidden="true"></span> 約 ' . $read_time . ' 分で読めます</span>';
    echo '</div>';
}

// 本文の直前（タイトル下）に表示する
function shisyamo_add_read_meta_after_title( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        ob_start();
        shisyamo_read_time_and_count();
        $meta = ob_get_clean();
        return $meta . $content;
    }
    return $content;
}
add_filter( 'the_content', 'shisyamo_add_read_meta_after_title', 5 );

// フロント側でもDashiconsを有効化
function shisyamo_load_dashicons_front_end() {
    wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'shisyamo_load_dashicons_front_end' );

.read-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-left: 4px solid #0073aa;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  margin-bottom: 16px;
}

.read-item {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
}

.read-item .dashicons {
  line-height: 1;
  vertical-align: middle;
  position: relative;
  top: 0;
  color: #0073aa;
}

// 本文の直前に挿入する（本文上に出す）
function shisyamo_prepend_read_meta_to_content( $content ) {
    if ( is_single() && in_the_loop() && is_main_query() ) {
        ob_start();
        shisyamo_read_time_and_count();
        $meta = ob_get_clean();
        return $meta . $content;
    }
    return $content;
}
add_filter( 'the_content', 'shisyamo_prepend_read_meta_to_content', 5 );