Blog

WordPressの記事内のhタグを自動で取得し、ページ内ナビを作りたいという時、
どのプラグインが良いのか検証した結果、一長一短な結果でした。

条件的に「Joli Table Of Contents」を使いましたが、いろいろ検証した結果を残します。

前提

そもそも、サイトをどのように構築しているかによって、見出し取得プラグインに求めるものが違ってきます。

今回自分が必要としている要件としては、下記のものがありました。

• h1〜h6までどの見出しを取得するかを選べるか
• デザインのカスタマイズのやりやすさ
• WP管理画面からの使いやすさ
• マークアップが適切か、キーボードで操作できるか
• アコーディオン可能か
• アコーディオンを最初からオープンしているかどうかを設定で選べるか
• アコーディオンアニメーションがプラグインの機能にあるか
• 自動付与のIDが数字から始まっていないか記号ではないか
• タイトルの文字が変えられるか

私の場合は、スムーズスクロールは自分のJSを使いたいということがありました（easingの具合が他と異なるため）。

しかし、プラグインの中にはもともとスムーズスクロール機能がついてるものがあるので、その場合は自分のJSを優先して使えるかどうかを確認しました。
（ここはかなり個人によると思うし、プラグインの機能で実装できる方がいいという人が多数派だと思います）

アコーディオンのアニメーションは、プラグインでその機能があるかを確認しました。
JSでなんとでもなりますが、jQueryを組み込んでいない場合スライドダウンはちょっと面倒なので、プラグイン側でやって欲しいと思ったからです。

また、デザインはオリジナルのものに合わせる必要があったので、「テーマが充実しているか」は選択のポイントにはなりませんでした。
むしろ、テーマのCSSをオフにすることができるか、上書きしやすいマークアップかが重要でした。

自動付与のIDについて、数字や記号から始まるものが付与されるプラグインがありましたが、これらは既存JSとの兼ね合いがうまくいきませんでした。

document.querySelector()で先頭が数字のIDを取得したときは、下記のようにエラーを起こします。

p.js:4 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#1' is not a valid selector.

これが自分の使っているスムーススクロールのJSにも影響を与えてしまいました。
そのため、IDにプレフィックスをつけるなどの解決策があるものでないと使えませんでした。（ちなみに、数字だけではなく「%」も不可）

検証結果

検証してみたプラグインは下記です。
2023/5/1時点の最新

• SimpleTOC - Table of Contents Block（バージョン 6.0.4）
• Easy Table of Contents（バージョン 2.0.47.1）
• Rich Table of Contents（バージョン 1.3.95）
• Table of Contents Plus（バージョン 2302）
• Joli Table Of Contents（バージョン 2.0.8）

WordPress バージョンは6.2です。

プラグイン共通だったこと

プラグイン全体に共通していたのは、「HTMLは触ることができない」ということです。
プラグインから自動的に出力されるものを使うことになります。
CSSでスタイルを上がきすることはできるので、デザインが決まっている場合は上書きしてなんとかすることは可能です。

ですが、HTMLはアコーディオンアニメーションを実装する上でかなり重要なポイントでした。クラスをつけられない・構造を変えることができないので、どんなHTMLが出力されるかを確認する必要があります。

HTMLが基本的には変えられないので、マークアップも確認すべきところです。これに関しては、

• キーボードで操作できるか
• スタイリングの上書きの手間と天秤にかけて、許容できるマークアップかどうか

で判断しました。

記事への追加の仕方は、

• ショートコードを使う
• 場所をあらかじめ設定しておき、自動的に追加
• グーテンベルグのブロックで追加

のどれかのパターンでした。
個人的にはグーテンベルグブロックでの追加が手軽でよいなという印象でした。

それぞれのプラグインの特徴

それぞれのプラグインの感想は下記です。

SimpleTOC - Table of Contents Block

CSSなしのHTMLだけの機能を追加できるシンプルなものです。管理画面はこれだけです。

CSSでのスムーススクロールを使うなら、idが%で始まっていても特に問題なかったですが
今回はそうではなく、既存の構成と合わなかったのでそこが残念でした。

おそらくタイトルの文字列の日本語をエンコードしたか何かで、%から始まる長い文字列が付与されているのだと思います。

見出しラベルの文字列が「目次」のみで変えられないので注意が必要です。いらなければCSSで非表示にするなどの対応が必要です。

マークアップは、見出しラベルはh2タグ、リストはulタグとシンプルです。
アコーディオンになった時はh2の代わりにbuttonタグが使われ、良い感じでした。オリジナルのCSSも当てやすいです。

アコーディオンを最初から開いておけるような設定や、特定の見出しを除外する機能はありません。

Easy Table of Contents（無料版）

ショートコードでの挿入および自動挿入も可能です。
あらかじめ「最初の見出しの前」などの位置と、対象の投稿タイプを設定しておきます。
有効にした投稿タイプでは、各投稿の画面に「Table of Contents」という設定項目が現れます。
非表示にしたい場合は、ここで非表示設定にでき、そのほかいろいろ投稿ごとに設定できます。

投稿ごとに設定できるのは下記の項目です。

「プラグインの CSS スタイルの読み込みを禁止」する設定があり、CSSカスタマイズは容易…かと思いきや、マークアップの特にボタンの部分にちょっとクセがあります。
svg要素でボタンが入っており、いらなければCSSでdisplay:noneする必要があります。
それを除けば上書きはやりやすい方かと思いました。

こちらも、idに%が付与されるのが気になりました。タイトルの日本語がURLエンコードされて付与されます。既存JSとの兼ね合いがうまくいかず残念でした。

また、記事内の見出し（アンカーの飛び先の見出し）に、余計なspanタグが追加されidが付与されます。

<h4><span id="%EF%BC・・・"></span></h4>

場合によっては見出しのスタイルが崩れるので、できればこのようなマークアップの変更はしてほしくなかった感があります。

アコーディオンのアニメーションは、jQueryで実装されているようです。
<?php wp_head(); ?>をheader.phpにいれていたら動作します。

出力されるHTMLは、見出しラベルはpタグ、リストはnav > ulタグです。
ボタンはsvgアイコンとaタグとinput(checkbox)でした。
pタグで見出しを作っているのと、checkboxをボタンがわりにするのが個人的に好きではないので、気になるところではありました。

全体的に、設定項目が多く、テーマも用意されているので合う人には合うだろうという印象でした。

ちなみにPro版もあり、そちらではグーテンベルグブロックを使った挿入なども可能なようです。

Rich Table of Contents

もし、「目次のデザインが決まってなくてプラグインにデザインを任せたい」「目次はH2から始まる」のなら一番おすすめしたいのはこれかと思いました。

設定画面のデザインが見やすく、ショートコードの説明も管理画面にあります。

「プラグインのCSSを読み込まない」設定があり、デフォルトのCSSを完全にオフにできます。出力されるHTMLも単純なので、CSSカスタマイズは容易です。

ショートコードにオプションが設定でき、投稿ごとに目次のテキストを変えたり、各種設定を上書きすることが可能です。

現時点で、H2見出しがなくh3から始まる場合に、JSが動作しなくなるバグがあります。（アコーディオンの開閉ができなくなります）
H3から始まることもあると思うので、改善されたら嬉しいです。

デフォルトでは開閉ボタンに「OPEN」とテキストが入っています。このテキストはかえられますが、なしにはできませんでした。
「開閉ボタンを非表示にする」という項目はありますが、これはアコーディオン自体がなくなります。アコーディオンを自前のJSにし、ボタンを擬似要素で作るなどしてもよいのですが、button要素がなくなるしアクセシビリティの観点からは微妙になっていまいます。
このあたりで、スタイルの上書きがちょっと微妙だと感じました。

idには「rtoc」というプレフィックスがつくので、既存JSと当たらず、結果スムーススクロールで悩むことはなく、ありがたかったです。
他のプラグインは日本語に最適化していないがための不具合があるような気がしますが、こちらは管理画面もわかりやすい日本語だし、日本語でもテストされているのではと思えるくらいの安心感がありました。

Table of Contents Plus

ショートコードでの挿入および自動挿入が可能です。
あらかじめ「最初の見出しの前」などの位置と、対象の投稿タイプを設定しておきます。

なんだか仕様がEasy Table of Contentsとかぶるところが多いのですが、兄弟か何かなんでしょうか…（不明）

「Easy Table of Contents」と違い、投稿ごとに設定をオーバーライドするフィールドは表示されませんでした。

「CSS ファイルを除外」にチェックをいれると、デフォルトのCSSを完全にオフにできるので、CSSカスタマイズは容易です。

アコーディオンのデフォルトの開閉状態は、「最初は目次を非表示」のチェックボックスで設定できます。
開閉状態はクッキーに保存されていて、開いた状態でブラウザをリロードすると、設定で「最初は目次を非表示」にしていても、開いた状態となります。（バグと勘違いしかけました）

アコーディオンのアニメーションは、JSで実装されています。WPデフォルトのjQueryがなくても動きました。

idは、タイトルに英数字が入っていればそれが使われます。「common系のcssファイル名について」という見出しであれば、「commoncss」というidが付与されます。
最初に出てくる英数字が数字だった場合、前述したようにJSとの競合が起こりました。
英数字がタイトルに含まれていない場合に使われる文字列「アンカーのデフォルト接頭辞」の設定項目がありますが、できれば全てのタイトルでこれが優先されるような仕様だとよかったです。

マークアップは、タイトルにpタグが使われているのと、ボタン部分がaタグなのが若干気になりました。

記事内の見出し（アンカーの飛び先の見出し）に、余計なspanタグが追加されidが付与されます。

<h4><span id="%EF%BC・・・"></span></h4>

場合によっては見出しのスタイルが崩れるので、できればこのようなマークアップの変更はしてほしくなかった感があります。

デフォルトのCSSを完全にオフにしてもアコーディオンのアニメーションがついているのが、他と比べてありがたい仕様でした。

Joli Table Of Contents

グーテンベルグのブロックで挿入可能で、管理画面の見た目もなかなか良いです。

検証時点で一つ残念だったのが、上記の右端にある目のアイコンで表示非表示を設定可能であるにもかかわらず、その部分にバグがあり、機能しません。

とはいえ、目のアイコンで表示を変えられるのは他のプラグインにはない機能なので、ここを「使わない」という判断をするならば有力なプラグインです。

このプラグインを他のものを比較した時に思ったのは、
実装する側は頑張る必要があるが、フロントの見た目やWordPressを使う人（クライアント）にとってマイナスがほとんどない
という点です。（あえて言うなら見えるところにバグがある）

機能的に要件を満たさなくてだめかなと思っても、カスタマイズや設定でなんとか乗り越えられるようになっています。

CSSは完全にオフにはできないですが、「Theme　>　no theme」を選択することによって、ベースのCSS以外の装飾部分はオフにすることができます。
しかし個人的にはベースのCSSに「outlin:none!important」が入っているのをどうにかしたいと思いました。
!importantであっても、「STYLES > CUSTOM CSS」の項目で上書きが可能でした。

アコーディオンのアニメーションはデフォルトではありません。自前のJSで実装する必要があります。

マークアップについては、ボタンはdivになっていました。キーボードで移動した時にフォーカスがあたらないので、気になる点です。
アコーディオンを最初から開いておく仕様なら許容範囲ですが、閉じている場合はJSでtabindexを与える処理が必要となりそうです。

目のマークを押すと非表示にできる機能のバグが発生するのは、タイトルに英数字が入っている時です。
タイトルに英数字が入ることはよくあるので、残念ながらこの機能を使うことはできません。

「HEADINGS > HEADINGS HASH」で、idのルールを変えることができます。
デフォルトでは数字がつく仕様になっているので、変更しておいた方が無難です。

まとめ

汎用的にこれから使っていくなら、無難にどんな要件でも対応できるものが良いと思い、とりあえずは「Joli Table Of Contents」を使うことにしました。

が、マークアップがいまいちだったり、アコーディオンのアニメーションは自前だったり、実装する身としては辛いところがあります。

idが日本語をエンコードしただけのものは、JSと組み合わせた時に使いづらいのも、プラグイン選定のポイントになりました。そもそも、日本語を想定したプラグインが少ないのかもしれないです。
その点「Rich Table of Contents」は行き届いている感じがしました。

JSとの競合がなければ、「Easy Table of Contents」「Table of Contents Plus」も選択肢に入ります。
機能だけ見れば不足はなく、CSSの上書きもやりやすいです。

また期間を空けて、機会があれば検証してみたいと思います。