WordPress目次の作り方｜プラグインなしで手作業を減らす方法

WordPress目次を作るたびに、リンクやアンカーを一つずつ設定するのは手間がかかります。

目次プラグインを使えばWordPress側で管理できますが、目次を作るために必ずプラグインが必要なわけではありません。

私は現在、目次ジャンプや「↑ 目次に戻る」に必要なルールをあらかじめChatGPTの情報源として保存し、記事作成時に再利用しています。

そのため、記事を作るたびに私がアンカーやリンクを一つずつ設定しているわけではありません。実際に行うのは、記事設計の段階で「目次に何を載せるか」を決めることが中心です。

この記事では、WordPressで目次を作る基本的な考え方と、私が実際に使っているプラグインなしの方法を紹介します。後半では、読者が同じ方法を試せるように、目次ジャンプに使っている基本ルールも紹介します。

目次

• WordPressの目次はプラグインなしでも作れる
• 私が目次プラグインを使わない理由
• ChatGPTでWordPress目次を作る実際の手順
• 目次ジャンプと「目次に戻る」はどう動いている？
• プラグイン方式とどちらが向いている？
• WordPressの目次は自分の運用に合う方法を選ぼう

WordPressの目次はプラグインなしでも作れる

WordPressの目次は、記事内の見出しへ移動するリンクをまとめたものです。

たとえば目次にある「私が目次プラグインを使わない理由」を押すと、その見出しまでページ内を移動できます。

この仕組みは、目次側のリンクと移動先の見出しに設定したアンカーIDを対応させることで作れます。

そのため、WordPressで目次を作る方法は「目次プラグインを入れる」だけではありません。プラグインを使わず、目次と各見出しをアンカーIDでつなぐ方法もあります。

私が現在使っているのも、このプラグインを使わない方法です。

ただし、私は記事を作るたびにアンカーIDを手入力しているわけではありません。必要な目次ジャンプのルールをあらかじめ保存し、ChatGPTで記事を作成するときに最初から組み込むようにしています。

私が目次プラグインを使わない理由

私が目次プラグインを使っていない一番の理由は、毎記事の作業をできるだけ減らしたいからです。

毎記事の手作業をできるだけ減らしたい

私が現在の方法で目次を作るときに実際に行うのは、「目次に何を載せるか」を決めることが中心です。

目次ジャンプや「↑ 目次に戻る」は、保存してあるルールを使ってChatGPTが記事作成時に組み込むため、WordPress上で一つずつ設定する作業はしていません。

目次作成ルールをChatGPTの情報源に保存している

この運用ができる理由は、目次ジャンプに必要なGutenberg HTMLと使用ルールを、あらかじめ記事デザイン用の情報源として保存しているからです。

そこには、目次見出し、各見出しへ移動するリンク、H2側のアンカーID、「↑ 目次に戻る」の設定方法などをまとめています。

ChatGPTには、その保存済みルールを使って記事を作るようにしています。

ChatGPTでWordPress目次を作る実際の手順

ここからは、私が実際に使っている方法を、同じように試せる形で紹介します。

難しいコードを毎記事書く方法ではありません。最初に目次ジャンプの基本ルールを用意してChatGPTへ保存しておき、次の記事から繰り返し使う方法です。

図解のように、一度ルールを用意したあとは「目次内容を決める → ChatGPTで完成形を作る → コピー → WordPressへ貼り付ける」という流れで運用しています。

① 目次作成ルールを用意する

まず、目次から見出しへジャンプし、各章から目次へ戻れる基本形を用意します。

以下は、私が実際に使っている目次部品を、読者が試しやすいように最小構成へ整理したものです。

<!-- 目次 -->
<!-- wp:heading {"anchor":"toc"} -->
<h2 id="toc" class="wp-block-heading">目次</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul class="wp-block-list">
<!-- wp:list-item -->
<li><a href="#section-1">見出し1</a></li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

<!-- 本文見出し -->
<!-- wp:heading {"anchor":"section-1"} -->
<h2 id="section-1" class="wp-block-heading">見出し1</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>ここに本文を入れます。</p>
<!-- /wp:paragraph -->

<!-- 目次に戻る -->
<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button {"style":{"border":{"radius":"6px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#toc" style="border-radius:6px">↑ 目次に戻る</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->

このコードの意味を理解する必要はありません。

ChatGPTを利用している方は、上のコードをそのままコピーしてChatGPTへ渡してください。

そのうえで、

「今後WordPress記事を作成する際は、この目次ルールを適用してください」

と伝えればOKです。

あとは記事ごとに目次へ入れたい内容を決めれば、目次から各見出しへのジャンプと、各章から「↑ 目次に戻る」導線まで含めて作成できます。

私自身もコードの意味を理解して毎回設定しているわけではありません。

正常に動いた目次のコードとルールをChatGPTへ保存し、それを毎回再利用しています。

そのため、WordPress上でアンカーやリンクを一つずつ設定する作業はしていません。

② 目次ルールをChatGPTの情報源として保存する

私は、正常に動いた目次コードと使用ルールをまとめたファイルをChatGPTの情報源として保存しています。

そのため、一度設定したあとは、新しい記事を作るたびに目次ジャンプや「↑ 目次に戻る」の作り方を説明する必要はありません。保存したルールを毎回再利用できます。

③ 記事ごとに目次の内容を決める

新しい記事で私が実際に考えるのは、目次にどの見出しを載せるかです。

記事構成が決まれば、その見出しに合わせてChatGPTが目次側のリンクとH2側のアンカーIDを対応させます。

つまり、私は「このH2のリンク先はどこにするか」といった設定をWordPress上で毎回繰り返していません。

④ 完成した記事をコピーしてWordPressへ貼り付ける

目次を含めた記事が完成したら、ChatGPTの出力をコピーしてWordPressへ貼り付けます。

私の現在の運用では、ここが実際のWordPress入稿作業の中心です。

ChatGPTで作成したGutenberg HTMLをWordPressへ貼り付けて記事作成を時短している流れについては、別記事で詳しく紹介しています。

⑤ 公開前に目次ジャンプを確認する

自動で組み込んでいるからといって、確認まで省略しているわけではありません。

公開前には、目次の各項目を実際にクリックして目的の見出しへ移動するか確認します。

あわせて「↑ 目次に戻る」もクリックし、目次へ正しく戻れることを確認しています。

マネロボ セリフ
「毎回やるのは目次の内容を決めることが中心。ジャンプと『目次に戻る』は、保存したルールを使ってChatGPTに任せればOKだよ。」

目次ジャンプと「目次に戻る」はどう動いている？

ここでは、実際に使っている目次ジャンプの仕組みをもう少しだけ詳しく説明します。

難しい処理をしているわけではありません。目次側のリンクと、移動先になる見出し側のアンカーIDを対応させています。

目次リンクと見出しをアンカーIDでつなぐ

目次ジャンプは、目次と各見出しを内部のリンク先でつなぐことで動いています。

ただし、私の運用ではこの設定を毎回自分で行っているわけではありません。保存してあるルールを使って、ChatGPTが記事作成時に自動で組み込んでいます。

見出しを修正してもアンカーIDを変えなければリンクは維持できる

WordPressへ貼り付けたあとに、見出し名やその章の本文を修正することもあります。

この場合でも、目次と見出しをつないでいるアンカーIDを変更しなければ、目次ジャンプはそのまま使えます。

つまり、目次に表示される文章や見出しの文章そのものがリンク先になっているわけではありません。

リンク先として使っているアンカーIDを維持しておけば、文章を後から調整してもジャンプ機能まで作り直す必要はありません。

「↑ 目次に戻る」はtocへ戻している

各章の最後に設置している「↑ 目次に戻る」は、記事上部の目次へ移動するためのリンクです。

私のルールでは、目次見出しにid=”toc”を設定し、「↑ 目次に戻る」のリンク先をhref=”#toc”にしています。

これにより、記事の途中まで読んだあとでも、長いスクロールをせずに目次へ戻って次の項目を選べます。

この「目次へ戻る」導線も、記事を作るたびに私が設定しているわけではありません。保存済みのルールとして最初から記事へ組み込んでいます。

プラグイン方式とどちらが向いている？

WordPressの目次は、私のようにプラグインを使わず作る方法だけが正解ではありません。

どちらが向いているかは、毎記事の作業時間を減らしたいのか、それともWordPress側で目次をまとめて管理したいのかによって変わります。

図解のように、私が使っている方法とプラグイン方式では、重視している部分が違います。

毎記事の作業を減らしたいなら現在の方法が向いている

私のようにChatGPTを記事制作に多く使い、目次作成ルールまで情報源として保存している場合は、プラグインを追加しなくても目次を運用できます。

実際に私が毎記事行うのは、目次に何を載せるか決めることが中心です。

その後は、ChatGPTが目次ジャンプや「↑ 目次に戻る」まで含めた完成形を作り、私はその内容をコピーしてWordPressへ貼り付けます。

そのため、毎回の記事公開までの手作業を減らすことを優先するなら、この方法は相性が良いと感じています。

一括管理やデザイン変更を重視するならプラグイン方式

一方で、今後記事数が増えたあとに、すべての記事の目次デザインや表示条件をWordPress側でまとめて変更したい場合は、私の方法は向いていません。

各記事の中に目次の仕組みを持たせる運用なので、あとから全記事の目次を一括で変更したい場合には手間がかかる可能性があります。

そのような管理を重視する人は、目次プラグインを利用してWordPress側でまとめて管理する方法を検討する価値があります。

また、目次のデザインや表示条件を細かく調整したい人も、プラグイン方式の方が使いやすいケースがあります。

どちらが優れているかではなく、自分が毎記事の作業時間と一括管理のどちらを重視するかで選ぶのが重要です。

WordPressの目次は自分の運用に合う方法を選ぼう

WordPressの目次は、プラグインを使わなくても作れます。

私の場合は、目次ジャンプや「↑ 目次に戻る」に必要なGutenberg HTMLと使用ルールをあらかじめ保存し、ChatGPTの情報源として使っています。

そのため、記事を作るたびにアンカーやリンクを一つずつ設定しているわけではありません。

実際に私が行っているのは、記事設計の段階で「目次に何を載せるか」を決めることが中心です。

あとは保存済みのルールを使ってChatGPTが目次ジャンプと「↑ 目次に戻る」まで含めた記事を作成し、私は完成した内容をコピーしてWordPressへ貼り付けています。

私が目次だけでなく、WordPressの記事公開までの作業全体をどのように減らしているかは、WordPressシリーズの親記事でまとめています。