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

2021 8/14

2020.10.11 2021.08.14

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

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

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

あいうえおLIFE

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

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

本記事の内容

WordPressで目次をプラグインなしで手作りするメリット
WordPressで目次をプラグインなしで手作りするデメリット
目次をプラグインなしで手作りするやり方とテンプレート

本記事の信頼性

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

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

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

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

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

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

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

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

手作り目次のメリット

HTMLのaタグのリンク元作り
IDタグをつけること
アンカリングの構成が理解できるようになる

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」の違い
「li」って何？

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

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

前者は、１、２、３、４のように「li」でリストが順序記号ついて増えていく
後者は、●、●、●のように「li」でリストを丸ポチのようにふやしていくことができます

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

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

あいうえおLIFE

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

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

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

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

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

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

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

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

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

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

詳しく解説します。

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

記事の場所で、目次を入れたい位置に、ブロックエディタで＋ボタンを押して呼び出していきます
カスタムHTMLのブロックをつくり、そこにHTMLコードを書きます
コピペOKなので、HTMLコードをペーストして、サンプルの目次内容を記事内容に合わせて編集します

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

対象の見出し（H2やH3）の場所で、HTML編集を呼び出す
HTML編集可能になるので、H2タグやH3タグのあとに、id=" "を指定していく
例：「目次の大見出し1」の「a href="#a1"」と、「本文の大見出し1」の「H2 id="a1"」と一致するように編集していきます

<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ですので、ぜひお使いください。