Easy Table of Contentsで特定の記事に目次が表示されないバグ – Webサイト運営者向け

記事中に目次を自動挿入するプラグイン「Easy Table of Contents」には目次の表示条件を満たしているにも関わらず特定の記事で目次が表示されないバグがある。

ここでは「Easy Table of Contents」で特定の記事に目次が表示されない場合のワークアラウンドを紹介する。

環境
WordPress 5.5

テーマ
SANGO 2.0.7

エディタ
SANGO Gutenberg 1.5.4

原因は特殊記号やHTMLコード

このバグはWordPressのテーマにもよるが見出しに「%」などの特殊記号が含まれていたり、記事中にHTMLコードなどを記述した場合に発生する(特殊文字変換ツールで変換してもダメ)。

このようなコードが記事中に記述されていると目次が消える

そのため、見出しに「%」などの特殊記号や記事中にHTMLコードを記述しなければ目次は正常に表示される。

ただ、記事の内容によっては特殊な記号やHTMLコードを使用せざるを得ない場合もあるため、その場合は下記の方法で手動で目次を挿入しよう。

Easy Table of Contentsで目次が表示されない場合、カスタムHTMLを用いる

1. ブロッックエディタでカスタムHTMLを追加する

まず問題が起きている記事の編集画面で目次を挿入したい場所に「カスタムHTML」ブロックを追加する。

2. カスタムHTMLに目次表示用のコードをコピペする

続いてカスタムHTMLブロック内に下記のようなコードを追加する。

<div id="ez-toc-container" class="ez-toc-v2_0_11 counter-hierarchy counter-decimal">
<div class="ez-toc-title-container">
<nav>
<p class="ez-toc-title">目次</p>
<span class="ez-toc-title-toggle"></span></div>
<ul class="環境や設定によって変わる"><a class="環境や設定によって変わる" title="ラベルタイトル">ラベル</a></li></ul>
</nav>
</div>

上記のコードはあくまでテンプレートであり、Easy Table of Contentsの設定によって上記コードの細部は変わるため、正常に目次が表示されている記事のソースを表示して自分のブログ向けに調整しながらカスタムHTMLを編集するとやりやすい。

上記のように正常に目次が表示されている記事のソースを参考にして前述のコードを編集していこう。

参考までに本記事の目次のHTMLコードは以下のようになる。

<div id="ez-toc-container" class="ez-toc-v2_0_11 counter-hierarchy counter-decimal">
<div class="ez-toc-title-container">
<nav>
<p class="ez-toc-title">目次</p>
<span class="ez-toc-title-toggle"></span></div>
<nav>
<ul class="ez-toc-list ez-toc-list-level-1"><li class="ez-toc-page-1 ez-toc-heading-level-3"><a class="ez-toc-link ez-toc-heading-1" href="#%E5%8E%9F%E5%9B%A0%E3%81%AF%E7%89%B9%E6%AE%8A%E8%A8%98%E5%8F%B7%E3%82%84HTML%E3%82%B3%E3%83%BC%E3%83%89" title="原因は特殊記号やHTMLコード">原因は特殊記号やHTMLコード</a></li><li class="ez-toc-page-1 ez-toc-heading-level-3"><a class="ez-toc-link ez-toc-heading-2" href="#Easy_Table_of_Contents%E3%81%A7%E7%9B%AE%E6%AC%A1%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%80%81%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0HTML%E3%82%92%E7%94%A8%E3%81%84%E3%82%8B" title="Easy Table of Contentsで目次が表示されない場合、カスタムHTMLを用いる">Easy Table of Contentsで目次が表示されない場合、カスタムHTMLを用いる</a><ul class="ez-toc-list-level-4"><li class="ez-toc-heading-level-4"><a class="ez-toc-link ez-toc-heading-3" href="#1_%E3%83%96%E3%83%AD%E3%83%83%E3%83%83%E3%82%AF%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%81%A7%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0HTML%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B" title="1. ブロッックエディタでカスタムHTMLを追加する">1. ブロッックエディタでカスタムHTMLを追加する</a></li><li class="ez-toc-page-1 ez-toc-heading-level-4"><a class="ez-toc-link ez-toc-heading-4" href="#2_%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0HTML%E3%81%AB%E7%9B%AE%E6%AC%A1%E8%A1%A8%E7%A4%BA%E7%94%A8%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E3%82%B3%E3%83%94%E3%83%9A%E3%81%99%E3%82%8B" title="2. カスタムHTMLに目次表示用のコードをコピペする">2. カスタムHTMLに目次表示用のコードをコピペする</a></li><li class="ez-toc-page-1 ez-toc-heading-level-4"><a class="ez-toc-link ez-toc-heading-5" href="#3_%E7%9B%AE%E6%AC%A1%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%9F%E3%81%8B%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC%E3%81%A7%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B" title="3. 目次が表示されたかプレビューで確認する">3. 目次が表示されたかプレビューで確認する</a></li><li class="ez-toc-page-1 ez-toc-heading-level-4"><a class="ez-toc-link ez-toc-heading-6" href="#4_%E3%83%90%E3%82%B0%E3%81%8C%E8%A7%A3%E6%B1%BA%E3%81%97%E3%81%9F%E5%A0%B4%E5%90%88%E3%81%AB%E5%82%99%E3%81%88%E3%81%A6%E7%9B%AE%E6%AC%A1%E3%81%AE%E8%87%AA%E5%8B%95%E6%8C%BF%E5%85%A5%E3%82%92%E7%84%A1%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B" title="4. バグが解決した場合に備えて目次の自動挿入を無効にする">4. バグが解決した場合に備えて目次の自動挿入を無効にする</a></li></ul></li><li class="ez-toc-page-1 ez-toc-heading-level-3"><a class="ez-toc-link ez-toc-heading-6" href="#%E3%81%BE%E3%81%A8%E3%82%81" title="まとめ">まとめ</a></li></ul></nav></div>

3. 目次が表示されたかプレビューで確認する

カスタムHTMLの編集が終わったらプレビューして目次が正常に表示されるか確認しよう。

上記画像のように正常な記事と寸分変わらないスタイルで目次が表示されたら成功だ。

4. バグが解決した場合に備えて目次の自動挿入を無効にする

もし今後Easy Table of Contentsなどのアップデートによりこのバグが解消された場合、カスタムHTMLで目次を挿入した記事は目次が二重に表示されてしまうと思われるため、編集画面下部の「Table of Contents」の設定で目次の自動挿入を無効にする。

あとは記事を保存・更新して完了となる。

まとめ

Table of Contents PlusやEasy Table of Contentsといった目次プラグインは便利ではあるが、Table of Contents Plusは長らく更新されておらず、Easy Table of Contentsも2020年8月時点において最後の更新が4ヶ月前であるため、WordPressやエディタ、テーマの更新によって正常に動作しないことがある。

もし目次が表示される条件を満たしているにも関わらず目次が表示されない場合は本記事のワークアラウンドを試してほしい。