WordPressサイトにおいて目次は必要だ。
SEO対策テンプレートとして絶大な人気を誇る賢威
はバージョン7から、目次自動生成機能が付いた。
但し、デフォルトのままだと、目次の位置と表示される見出し（タグ）に問題がある。
そこで、賢威7の自動生成目次の位置・表示タグの修正などのカスタマイズ方法をご紹介致します。
賢威7で目次を自動で表示する方法
共通設定
賢威7で目次を自動で表示するには、
管理画面（ダッシュボード）の「賢威の設定」⇒「賢威の設定（サイト内共通）」にある「投稿ごとの目次を自動で生成する」の「無効にする」にチェックを入れない。
チェックを入れると、「投稿ごとの目次を自動で生成する」が「無効」になり、目次は自動生成されない。
個別記事のみ目次生成
但し、「無効にする」にチェックを入れていても、個別記事の投稿ページの管理画面に「目次の自動生成」という項目があり、「する」を選択すると、目次が自動生成される。
個別記事のみ目次非生成
逆に「共通設定」において「無効にする」にチェックを入れいなければ、目次は自動生成されるが、個別記事の投稿ページの管理画面で「目次の自動生成」を「しない」を選択すると、目次は自動生成されない。
要は共通設定より個別記事の管理画面の設定が優先される。
賢威7の自動生成機能の問題点
賢威7の自動生成機能の問題点は以下の2点。
●目次で表示される見出し（タグ）の種類
デフォルトの目次の位置
賢威7で自動生成される目次の位置は、最初の見出しの直下である。
通常、最初の見出しは記事タイトルなので、記事タイトルの下にいきなり目次が表示されることになる。
しかし、これは考えようによっては不自然である。
まずは、記事の要約があり、目次があり、本文に続くという構成が自然だ。
目次で表示される見出し（タグ）の種類
賢威7の目次自動生成機能では、タグを全て表示する。
私の場合、hタグは、h2、h3、h4を使用している。
その為、目次がかなり長くなり非常に見づらい。
レイアウトシフト
そして、自動生成される目次は長さが一定でない為、レイアウトシフトが起こる可能性がある。
これは、ページエクスペリエンスのCLSのスコアに影響を及ぼす。
【関連記事】】
Googleページエクスペリエンスとは？レポートの見方・改善方法【徹底解説】
賢威8では、表示する見出しタグを選択できるが、賢威7では選択できない。
それなら、賢威8にバージョンアップすれば良いのではないかと言われそうだが、私が賢威7にこだわるには理由がある。
何故、賢威7？
スコアの違い
まず、以前、賢威8と賢威7をPageSpeed Insightで比較した時に賢威7の方がスコアが良かったという点。
設定が手間
次に私は複数のWordpressサイトを所有しており、テーマを変更すると色々と設定する手間が生じ、現在、その余裕がないという事。
賢威7で目次の位置と見出しタグをカスタマイズする方法
目次の位置をカスタマイズ
目次を自動生成するには、まず、目次を自動生成する設定を行う。
次に目次を表示したい場所に以下のタグを挿入する。
<div id=”keni_toc”></div>
しかし、記事毎に上記のタグを挿入するのは面倒だ。
さらに、目次を表示する位置はmoreタグ（続く）直下が自然だ。
そこで使えるのがMaster Post Advertというプラグインだ。
Master Post Advertはmoreタグ（続く）直下にタグを入れられるプラグインなので、アドセンス等の広告を挿入するのに適している。
やり方は簡単。
Master Post Advertの「Adovert code」に以下のコード（html）を貼り付けるだけ。
<div id=”keni_toc”></div>
これで、目次がmoreタグ（続く）直下に自動生成される。
しかし、これで十分ではない。
表示する見出しタグを指定する方法
「keni_toc.js」を編集
目次を自動生成するjQueryの「keni_toc.js」を編集することで、最初、うまく表示したのだが、何故か、翌日は正常に表示しなくなった。
そこで他に方法はないのか、調べてみたところ、簡単な方法が見つかった。
賢威7の子テーマのbase.cssに以下のコードを追加するだけ。
目次の表示をh2までにする方法
/* 目次の表示をh2タグまでにする（H3タグ以降は非表示） */
#keni_toc li > ol{
display: none;
}
目次の表示をh3までにする方法
/* 目次の表示をh3タグまでにする（H4タグ以降は非表示） */
#keni_toc li > ol > li > ol{
display: none;
}
上記いずれかのコードを子テーマのbase.cssに追加しない場合は、見出しタグがある記事は、全ての見出しタグが目次になる。
私は目次はh3タグまで表示する設定にしている。
