WP REST APIで見出しを取得してTOC（目次）を表示したい！

サイト運営でTOC（目次）使うことはありますよね！
Vue.jsとかReactとかネイティブアプリで見出しをいい感じに表示したいときに、そのままHTMLを取得してフロント側でTOCを作ろうとすると、バババっとちらつくか、アニメーションでごまかすかしかありません！
それが嫌な場合、Railsとかの場合は自分でやってしまえばいいと思うのですが、WP REST APIの場合どうしたら良いでしょうか…
というわけでコードを追加しましょう！

コード（WP4.7）

functions.php

function add_TOC( $data, $item, $request ) {

	$dom = new DOMDocument("1.0", "UTF-8");
	@$dom->loadHTML(mb_convert_encoding($item->post_content, 'HTML-ENTITIES', 'utf-8'));
	$xml = simplexml_import_dom($dom);
        // ここではタイトルがh1だとしてh2
	$dom_data = $dom->getElementsByTagName('h2');
	foreach ($dom_data as $d) {
   $table_of_contents[] = trim($d->nodeValue);
	}

	$data->data['toc'] = $table_of_contents;
	return $data;
}
add_filter( 'rest_prepare_post', 'add_TOC', 10, 3 );

これで見出しが表示されます！
（ここではh2だけですが、いろいろ頑張ればhxを配列やオブジェクトにして頑張ることもできると思います）

これでネイティブアプリでもSPA的なやつでもちらつくことなく、色々カスタマイズすることが出来ます！
自分の場合はクリックしたらスムーズスクロールするような感じにしました。

おわりに

いろいろやりたい放題できるのでWP REST APIは非常に便利！（バージョンアップで動かなくなる場合があります）