WordPressの目次(TOC+)を非表示にして手動で作成する方法


どもども、カスタマイズばっかりやってブログ書かないバビです。

WordPressの目次プラグインといえば「Table of Contents Plus(TOC+)」を利用している方が多いと思います。

自動で目次を挿入してくれて、設定やデザインの変更も容易で便利なプラグインです。

ですが、例えばランキング形式の記事では、

「目次を表示したくない」

「目次の一部を見えないようにしたい」

ということがあるんじゃないかと思います。

そんなとき、記事にショートコードなどを挿入することで非表示などの調整をする方法について解説します。

↓これも手動挿入した目次です。

TOC+の目次を消す/挿入する方法

TOC+の目次の表示非表示は、実はショートコードでコントロールすることができます。

[toc]挿入した箇所に目次を表示する
[no_toc]目次を非表示にする(記事のどこに入れてもOK)

これを使って、目次を消したい記事のどこかに[no_toc]を入れれば、目次を非表示にすることができます。

また、最初から非表示にしておいて、目次を入れたいときだけ[toc]で入れるなら、TOC+の設定で、「以下のコンテンツタイプを自動挿入」のチェックを外して、記事ごとに[toc]を入れるという方法もあります。

TOC+目次を非表示にする方法

全部H2までの表示にすればいいんじゃないか?

そもそもこれを思いついたのは、

「ランキング形式の記事で目次で順位発表すると、そこだけ確認して離脱するんじゃないか?」

という疑問があったからです。

記事を読んでもらうためにはランキングの結果は隠したいなと。

他の解決方法として、

  1. 目次ではH3以下は表示させない
  2. その記事だけ<h3>を使わない

という方法も考えました。

ですが、①の場合、ランキング形式の記事ではそれでもいいのですが、解説系の記事だと、目次で中身が分からないと不便です。

②の場合、SEO対策的にH3を残しておいたほうがいいと意見もあるので、手動で目次を挿入する方法を考えました。

また、for menのこの記事のカスタマイズをしていたので、どうしても目次を表示しておきたかったというのもあります。

参考 ずっといる目次へGOボタンfor men

TOC+の目次を手動で作成する方法

例えば、普段は見出しh3まで表示してるけれど、その記事だけh3を表示したくないときってありませんか?

そんなときに、自動で挿入される目次を消して、手動で挿入する方法です。

①見出しにidを追加する

普段はTOC+が自動でやってくれているのですが、<h2>のような見出しタグの後には、<span id=”XX“>というコードが自動挿入されています。

この場合、「https://〇〇.com/#XX」というのが、その見出しのURLです。

TOC目次を消してしまうと、「id=”XX“」が自動挿入されないので、まずは表示したい見出しに「id=”XX“」を入れていきます。

やり方は簡単で、テキストエディタから、<h2>のような見出しタグに、

<h2 id=”XX”>

という形で「id=”XX“」を追加していくだけです。

「XX」は任意のアルファベットや数字でOK。上からa,b,cでも1,2,3でもいいです。

②目次を作成する

例えばこのような構造の目次を挿入したい場合

  • H2見出し1
  • H2見出し2
  • H2見出し3

以下のコードを目次を表示したい場所に挿入すれば、TOC+で作成されるのと同じデザインで目次を作ることができます。

HTML
<div id="toc_container">
<p class="toc_title" style="text-align: center;">目次のタイトル</p>
<ul class="toc_list">
 	<li><a href="#i-1">H2見出し1</a></li>
 	<li><a href="#i-2">H2見出し2</a></li>
 	<li><a href="#i-3">H2見出し3</a>
</ul>
</div>
[no_toc]

「#i-1」のところは、①で見出しにつけた「id=XX」を「#XX」といったように入れてください。

目次のタイトルや各見出しのタイトルを変更します。

また、下の例のように、H3も入れたい場合は、下のコードを挿入します。

  • H2見出し1
  • H2見出し2
  • H2見出し3
    • H3見出し1
    • H3見出し2
    • H3見出し3
HTML
<div id="toc_container">
<p class="toc_title" style="text-align: center;">目次のタイトル</p>
<ul class="toc_list">
 	<li><a href="#i-1">H2見出し1</a></li>
 	<li><a href="#i-2">H2見出し2</a></li>
 	<li><a href="#i-3">H2見出し3</a>
 <ul>
 	 <li><a href="#i-3-1">H3見出し1</a></li>
 	 <li><a href="#i-3-2">H3見出し2</a></li>
 	 <li><a href="#i-3-3">H3見出し3</a></li>
 </ul>
        </li>
</ul>
</div>
[no_toc]

いちいちコピペなどをするのは面倒なので、AddQuicktagなどに登録しておくことをおすすめします。

これならもっと簡単かも

後で気付いたんですが、HTMLを多少いじれる人は、以下の方法が楽かもです。

  1. エディター画面で見出しだけ作る
  2. プレビューを表示
  3. プレビューのソースを表示して、目次と見出しをコピペ

これだと多少修正は必要ですが、いちいち見出しにid入れなくて済みます。

記事内でやたらと[no_toc]を入れるせいで目次が表示されなかったので、しかたなくこの記事の目次も手動で作りました。
合わせて読みたい

カスタマイズ記事一覧