WordPressで目次を自作実装｜プラグイン不要・完全カスタマイズ可能

/**
 * 目次を自動生成
 * 
 * @param string $content 投稿本文
 * @return string 目次を含む本文
 */
function generate_table_of_contents($content)
{
	// 投稿ページ以外は処理しない（固定ページや一覧ページでは実行しない）
	if (!is_single()) {
		return $content;
	}

	// 見出しタグを取得（h2とh3を対象に、class属性なども含めて取得）
	// $matches[0] = 見出し全体、$matches[1] = レベル(2 or 3)、$matches[2] = 属性、$matches[3] = テキスト
	preg_match_all('/<h([2-3])(.*?)>(.*?)<\/h[2-3]>/i', $content, $matches, PREG_SET_ORDER);

	// 見出しが2つ未満なら目次は不要なので、本文をそのまま返す
	if (count($matches) < 2) {
		return $content;
	}

	// 目次のHTMLを組み立て開始
	$toc = '<div class="p-article__toc">';
	$toc .= '<div class="p-article__toc-title">目次</div>';
	$toc .= '<ul class="p-article__toc-list">';

	// 見出しに付与するID用のカウンター
	$index = 0;
	
	// 各見出しをループ処理
	foreach ($matches as $heading) {
		$level = $heading[1];        // 見出しレベル (2 or 3)
		$attributes = $heading[2];   // 既存の属性（class など）
		$title = strip_tags($heading[3]); // 見出しテキスト（HTMLタグを除去）
		$id = 'heading-' . $index;   // ユニークなID（heading-0, heading-1, ...）

		// 既存の属性にIDを追加（既存のclassなどを保持）
		if (strpos($attributes, 'id=') === false) {
			// id属性がない場合は追加
			$new_attributes = $attributes . ' id="' . $id . '"';
		} else {
			// すでにid属性がある場合は上書き
			$new_attributes = preg_replace('/id=["\'].*?["\']/', 'id="' . $id . '"', $attributes);
		}

		// 本文内の見出しを、ID付きの見出しに置き換え
		// preg_quote()で特殊文字をエスケープし、最後の1は「最初の1個だけ置換」を意味する
		$content = preg_replace(
			'/' . preg_quote($heading[0], '/') . '/',
			'<h' . $level . $new_attributes . '>' . $heading[3] . '</h' . $level . '>',
			$content,
			1
		);

		// 目次リストに項目を追加（h3の場合はインデント用のクラスを付与）
		$class = ($level == 3) ? ' class="p-article__toc-item--sub"' : '';
		// esc_html()で特殊文字をエスケープ（セキュリティ対策）
		$toc .= '<li' . $class . '><a href="#' . $id . '">' . esc_html($title) . '</a></li>';

		// 次の見出し用にカウンターを増やす
		$index++;
	}

	// 目次のHTMLを完成させる
	$toc .= '</ul></div>';

	// 最初のh2の前に目次を挿入
	// '$0'は正規表現でマッチした文字列（最初のh2タグ）を表す
	// 最後の1は「最初の1個だけ置換」を意味する
	$content = preg_replace('/<h2.*?>/i', $toc . '$0', $content, 1);

	// 目次とID付き見出しを含む、更新された本文を返す
	return $content;
}

// WordPressのthe_content()フィルターに、この関数をフック（登録）
// これにより、投稿本文が出力される前に、自動的にこの関数が実行される
add_filter('the_content', 'generate_table_of_contents');