【WordPress】目次をプラグインなしで手作りするには？【テンプレあり】

目次をプラグインなしでやりたい人

ブログテーマをJINで作り始めてだいぶ経過したけど、現在はプラグインでRich Table of Contents（以下RTOC）の自動目次生成を思考停止で使ってます。

コロブさんのブログ見て、できれば「SEO的にはHTMLでコード書いて作成したら良い」と書いてあったけどどうやるの？

あいうえおLIFE

こんにちは！あいうえおLIFE（@pledge17uchs）です。

今日はこんな疑問に答えていきます。

ぼくは記事をブロックエディタで書いていますが、19記事100万ブロガーのコロブさんの記事を見てテンプレートを作って、記事を書くようになりました。

テンプレートを作らずに、書いている人は1度こちらのコロブさんの記事をどうぞ。

最後に、手作りの目次作成の手順とテンプレートを掲載したので、必ず最後までお読みください。

運営者：あいうえおLIFE

• HTML名刺とプロフ（日々メンタルアップ）
• モッピーでコインチェックをセルフバックし、元手5万円を取引後、報酬1万円GET
• ブログをWordPressで始め、ブログ運営、カスタマイズ、登録販売者、動画編集にまつわる記事をアップ
• ブロックエディタ完全対応テーマSWELLに変更後、収益UP（レビュー記事）
• 鬼滅の刃の記事が上位表示されSEOに自信をもつ

こんにちは

WordPressで目次をプラグインなしで手作りするメリット

cocoonユーザーは考えずとも、自動生成されていて、JINや他のテーマに関しては、自動生成できないので、RTOCのプラグインでやっているのではないでしょうか？

WordPressで目次を手作りできるメリットを下記で詳しく解説します。

1-1：目次から見出しへ飛ぶコードの書き方の理解ができる

RTOCプラグイン入れとく→自動でできるので、目次をポチると思考停止で見出しへ飛ぶっていう感覚ですが、それを脱却できるはず。

手作り目次のメリット

1-2：あるあるな目次じゃないので目をひくデザイン

上記の目次デザインはかなり見受けるようになりましたね。

RTOCは無料でこのクオリティなので、ヤバすぎです。。

手作りで目次作成している人自体が少ないので、実践すれば珍しく思われること間違い無いです。

1-3：Google先生がキーワード拾いやすくなる

手作り目次でaタグ使って、href属性を用いながら、IDを書いて、H2やH3見出しにIDを指定してそろえて書くことで、Google先生のSEO評価も上がると、コロブさんも語られていました。

HTMLをしっかりと書いてあげると、言語が通じる（Web上で）。

Google先生とコミュニケーションがスムーズにいくんだと思います。

WordPressで目次をプラグインなしで手作りするデメリット

この辺は何を基準にするかによります。

ブロックエディタは確かに、直感的でわかりやすいのですが、肝心な部分は手書きできるようになりたいですよね。

そのなかでも、WordPressで目次を手作りするデメリットを下記で3つあげてみます。

2-1：ある程度HTMLの知識や慣れがないとしんどい

はじめは目次と見出しがリンクするテンプレートだけ見ても「なんのこと？」「もうやめよっかな」ってなるくらい難しく感じる。

上記が理解できないとチンプンカンプンになります。

「ol」は順序を指定する箇条書きで、「ul」は順序指定しない箇条書きです。

2-2：読者に困ることはない

シンプルに見やすくなるので、知りたいことがあるかないか判別しやすい。

あいうえおLIFE

おしゃれすぎると、逆に内容よりもデザインに目がいってしまうことが多いのでは無いでしょうか？

そうなると、内容を読み飛ばされる可能性があります。

2-3：Google先生は嫉妬するかもしれない

HTMLコードをしっかり綺麗に書いてWeb制作している人がGoogle先生は好きになるかもですが、好きすぎて逆に嫉妬してしまうかも。

あれだけすごいアルゴリズムを持っているGoogle。

人間みたく、Google先生もツンデレの要素をお持ちでしょう。

嫌われるくらい、SEO評価好かれてみたいものですね。

目次をプラグインなしで手作りする手順とテンプレート

時間がない方は、ここから作業してもらうと、手作りで目次作成できると思います。

ぼくはすでに、RTOCのプラグインを削除してしまいました。

詳しく解説します。

3-1：ブロックエディタでカスタムHTMLを使用して目次作成

3-2：各見出しaタグとIDをそろえる

<a>タグとセットなのは、「＃ID」で、飛ばす先（着地点）は「id="ID名"」。

3-3：目次と見出しのHTMLはこれ

目次の手書きHTML（各見出しへ飛ばす）が下記。

<strong>Contents（目次）</strong></p>
<ol>
 <li><a href="#a1">大見出し1つ目</a>
  <ul>
   <li><a href="#a2">1-1見出し3</a></li>
   <li><a href="#a3">1-2見出し3</a></li>
   <li><a href="#a4">1-3見出し3</a></li>
  </ul>
 </li>
 <li><a href="#a5">大見出し2つ目</a>
   <ul>
    <li><a href="#a6">2-1見出し3</a></li>
    <li><a href="#a7">2-2見出し3</a></li>
    <li><a href="#a8">2-3見出し3</a></li>
   </ul>
 </li>
 <li><a href="#a9">大見出し3つ目</a>
   <ul>
    <li><a href="#a10">3-1見出し3</a></li>
    <li><a href="#a11">3-2見出し3</a></li>
    <li><a href="#a12">3-3見出し3</a></li>
   </ul>
 </li>
 <li><a href="#a13">まとめ|あああ</a>
 </li>
</ol>

下記が「手書き目次」と一致する、記事の本文（大見出し1つ目から）のHTMLの中身。

<h2 id="a1">大見出し1つ目</h2>
<img src="画像URL" width="100%" height="100%" alt="大見出し1">
<h3 id="a2">1-1見出し3</h3>
<h3 id="a3">1-2見出し3</h3>
<h3 id="a4">1-3見出し3</h3>
<h2 id="a5">大見出し2つ目</h2>
<img src="画像URL" width="100%" height="100%" alt="大見出し1">
<h3 id="a6">2-1見出し3</h3>
<h3 id="a7">2-2見出し3</h3>
<h3 id="a8">2-3見出し3</h3>
<h2 id="a9">大見出し3つ目</h2>
<img src="画像URL" width="100%" height="100%" alt="大見出し1">
<h3 id="a10">3-1見出し3</h3>
<h3 id="a11">3-2見出し3</h3>
<h3 id="a12">3-3見出し3</h3>
<h2 id="a13">まとめ|あああ</h2>

ブロックエディタだと、HTML編集することないですが、目次と見出しだけはチャレンジしてみましょう。

こちらの目次と見出しのHTMLコードサンプルはコピペOKですので、ぜひお使いください。

まとめ|プラグイン便利だが良し悪し

ぼくも上記は同様に思っていました。

とはいえ、ブロックエディタ使いつつも、テキストエディタみたくHTML書いてブログやりたいって思いません？

コロブさんのブログ記事を読んでHTML書いてみたらしっかりと理解できました。

まずは、下記。

SWELLテーマなら、目次生成はプラグインなしですよ。

それでは、今日はここまで読んでいただき、ありがとうございました！