COLUMN
コラム
【プラグインなし】WordPressのブログ記事に目次を付ける方法（特定のタームのみ対応も）
WordPressの記事内に目次があると記事内容がすぐに分かり、欲しい情報がすぐに手に入ります。
プラグインを使って簡単に作る方法もありますが、今回はプラグインなしで導入する方法をご紹介します。
コピペで簡単に設定できるので、WordPressのカスタマイズを自身で行っている方はぜひ参考にしてみてください。
プラグインなしで目次を付ける方法
プラグインなしで記事に、目次をつける方法を紹介します。
基本的にfunctions.phpに以下のコードをコピペするだけで完了です。
今回は特定のターム（複数）のみに出力させました。
また一番初めのh2の前に目次を入れています。
function add_custom_toc_before_first_h2($content) {
if ( is_singular('カスタム投稿タイプ名') ) {
global $post;
// 特定タームの条件（必要に応じて変更）
if ( has_term(['ターム1','ターム2'], 'タクソ名', $post) ) {
// h2見出しを全部取得
preg_match_all('/<h2[^>]*>(.*?)<\/h2>/i', $content, $matches);
if ( !empty($matches[1]) ) {
$toc = '<div class="toc">';
$toc .= '<h2>目次</h2><ul>';
foreach ( $matches[1] as $index => $heading ) {
$id = 'toc-' . ($index+1); // アンカー用IDを生成
// 見出しタグにIDを付与
$content = preg_replace('/<h2([^>]*)>' . preg_quote($heading, '/') . '<\/h2>/i',
'<h2$1 id="'.$id.'">'.$heading.'</h2>',
$content, 1);
$toc .= '<li><a href="#'.$id.'">'.$heading.'</a></li>';
}
$toc .= '</ul></div>';
// 最初の<h2>の直前に目次を挿入
$pattern = '/(<h2[^>]*>)/i';
$content = preg_replace($pattern, $toc . '$1', $content, 1);
}
}
}
return $content;
}
add_filter('the_content', 'add_custom_toc_before_first_h2');そして出力されるものは以下です。CSSで自由にカスタマイズしてください。
<div class="toc">
<h2>目次</h2>
<ul>
<li><a href="#toc-1">見出し1</a></li>
<li><a href="#toc-2">見出し2</a></li>
<li><a href="#toc-3">見出し3</a></li>
</ul>
</div>h3まで目次に含めたい場合のコード
h3まで目次に含めた場合は以下のコードを使います。
function add_custom_toc_before_first_h2($content) {
if ( is_singular('カスタム投稿タイプ名') ) {
global $post;
// 特定タームに限定（必要なければ消してOK）
if ( has_term(['ターム1','ターム2'], 'タクソ名', $post) ) {
// h2とh3を全部取得
preg_match_all('/<(h2|h3)[^>]*>(.*?)<\/\1>/is', $content, $matches, PREG_SET_ORDER);
if ( !empty($matches) ) {
$toc = '<div class="toc">';
$toc .= '<h2>目次</h2><ul>';
$prev_level = 2; // 最初はh2想定
$count = 1;
foreach ( $matches as $match ) {
$tag = strtolower($match[1]); // h2 or h3
$text = trim(strip_tags($match[2]));
$id = 'toc-' . $count++;
// 見出しにIDを付与
$content = preg_replace(
'/<' . $tag . '([^>]*)>' . preg_quote($match[2], '/') . '<\/' . $tag . '>/is',
'<' . $tag . '$1 id="'.$id.'">'.$match[2].'</' . $tag . '>',
$content,
1
);
// 目次リスト作成
if ($tag === 'h2') {
if ($prev_level == 3) {
$toc .= '</ul></li>'; // h3階層を閉じる
} elseif ($prev_level == 2) {
$toc .= '</li>'; // 前のh2を閉じる
}
$toc .= '<li><a href="#'.$id.'">'.$text.'</a>';
$prev_level = 2;
} elseif ($tag === 'h3') {
if ($prev_level == 2) {
$toc .= '<ul>'; // h2の下にh3が来たらul開始
}
$toc .= '<li><a href="#'.$id.'">'.$text.'</a></li>';
$prev_level = 3;
}
}
// 閉じタグ整合
if ($prev_level == 3) $toc .= '</ul></li>';
else $toc .= '</li>';
$toc .= '</ul></div>';
// 最初の<h2>の前に目次を挿入
$content = preg_replace('/(<h2[^>]*>)/i', $toc . '$1', $content, 1);
}
}
}
return $content;
}
add_filter('the_content', 'add_custom_toc_before_first_h2', 20);出力イメージは以下です。
<div class="toc">
<h2>目次</h2>
<ul>
<li><a href="#toc-1">見出し1</a>
<ul>
<li><a href="#toc-2">小見出し1-1</a></li>
<li><a href="#toc-3">小見出し1-2</a></li>
</ul>
</li>
<li><a href="#toc-4">見出し2</a></li>
</ul>
</div>ワードプレスの記事に目次を付けるメリット
ワードプレスの記事内に目次を入れることには、たくさんのメリットがあります。
目次はユーザーにとって便利なものだけではなく、SEOの観点からもメリットがあります。
全体の記事の流れを把握できる
目次があると、その記事の全体の流れや書いてある内容を把握できます。
また目次にアンカーリンクを打っておけば、ユーザーが読みたい場所にすぐに移動することもできます。
特定の情報のみを求めているユーザーにとっては、他の情報は必要ありません。いらない情報を読んでいるうちに「このページには求めている情報はないな」と感じれば、途中離脱することになるでしょう。
SEO効果が期待できる
目次を入れることは、利便性を高めます。
利便性が高いページ（ユーザーが求めている箇所にすぐ飛べるなど）は、ユーザーエクスペリエンスを向上しGoogleから良質なコンテンツを提供していると判断されやすいです。
また内部リンク効果により「セクションごとに整理された構造をしたページ」として認識されやすくなります。
従って結果的にSEO効果が期待できます。
検索結果に目次が表示されることもある
記事に目次を入れると、検索結果に目次が表示されることもあります。
ユーザーが自分の欲しい情報が目次によって表示されることで、ページへのクリック率（CTR）を上げることができます。
まとめ｜プラグインなしでWordPressの目次は簡単に作れる
プラグインを入れるとどうしてもメンテが大変になったり、Webサイトが重くなってしまいます。
プラグイン導入は簡単なので多用してしまいがちですが、今回のような簡単な作業ではできる限り自分で作業するようにしましょう。
この記事を書いた人
広島県呉市のホームページ制作｜leben（小口 悠）
1992年山口県生まれ。広島を拠点に活動するフリーランスWebデザイナー。ホームページ制作歴5年以上。 中小企業や個人事業主向けに、WordPressでのオリジナルデザイン・SEO対策を行っています。
2025.9.11
2025.9.25