賢威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で目次の位置と見出しタグをカスタマイズする方法

目次の位置をカスタマイズ

目次を自動生成するには、まず、目次を自動生成する設定を行う。

次に目次を表示したい場所に以下のタグを挿入する。

しかし、記事毎に上記のタグを挿入するのは面倒だ。
さらに、目次を表示する位置はmoreタグ（続く）直下が自然だ。

そこで使えるのがMaster Post Advertというプラグインだ。
Master Post Advertはmoreタグ（続く）直下にタグを入れられるプラグインなので、アドセンス等の広告を挿入するのに適している。

やり方は簡単。
Master Post Advertの「Adovert code」に以下のコード（html）を貼り付けるだけ。

これで、目次が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タグまで表示する設定にしている。