オリジナルの子テーマだとSWELL（Wordpressテーマ）の目次（TOC）が表示されない問題の解決
SWELL v2.10.0での情報です。
結論
SWELLを親にした子テーマを利用する時は、
- main_content
- l-mainContent__inner
- post_content
上記のクラスを、ネストさせて存在させる。
※post_contentの下階層には記事の出力がある想定。例：<?php the_content(); ?>
<div id="main_content">
<article class="l-mainContent__inner">
<div class="post_content">
<?php the_content(); ?>
</div>
</article>
</div>
発生した問題
SWELLの記事のブロックデザインを流用したオリジナル子テーマを作成していて、独自のsingle.phpを実装していました。
そうすると、以下の画像のように、目次が表示されませんでした。
本来なら、赤枠が表示されて欲しいです。
発生した時の状態
親テーマや子テーマ（SWELL純正の子テーマ）を有効化したときは表示される
目次が出ない事象は、独自で作った子テーマの時のみ発生していました。
親テーマや、SWELLが配布している子テーマを有効化した時は問題なく目次が生成されていました。
テーマ>カスタマイズの設定は正しい
親テーマを有効化しているときは表示されたので、正しい可能性が高かったですが、理解を深めるためにも、テーマ設定のTOCに関する項目を確認してみました。
問題なく設定できていました。
つまり、親テーマにある目次生成の記述が、独自の子テーマに欠如していると考えられました。
解決までの道のり（我ながら頑張った）
解決までに至った流れを記しておきます。
今後同様の問題に遭遇したときに、解決までの思考ロジックが参考になる時があるはず。。
問題をググる
「目次、表示されない」で検索しました。
記事の通りapply_filter関数を探してみましたが見当たらず、今回の事象とは当てはまらなそうです。
他も探してみましたが見当たらず。
swellのソースコード内で、目次を挿入している記述を探す
add_tocという関数を見つけました。
内部の処理を読んでみたところ、どうやら目次の生成は行なっていないようでした。
目次の表示位置を決定して、目次を表示させる大枠をhtmlに挿入する処理でした。
つまり、記事内のh2,h3タグを読み取って目次を生成する処理はどこか別にある！
jsを発見
テーマのカスタマイズの設定値は、phpファイルのswellVarsという変数に保存されているようでした。
swellVarsが使われている部分を全検索で探しました。
すると、main.min.jsで使われていることがわかりました。
phpのswellVars変数をjsでも使えるように、値が渡されていました。
参考：phpの変数をjsに渡すとは？？
- wp_localize_script
- swellの
global_vars_on_admin関数
main.min.jsを読み込まないようにすると、swell親テーマでも目次が表示されず、main.min.jsが目次生成を担っているとわかりました。
「main.min.jsはbuildディレクトリにあり、どこかに元のファイルがあるはず。。」
見つかりませんでした。
main.min.jsをカスタマイズできる方法はないかググる
開発者向けのビルドツールなど提供されていないか探しました。（オープンソーステーマではないのでなさそうでしたが）結果、なさそうでした。
同じファイルについて質問しているフォーラムの記事を見つけました。
どうやらmain.min.jsの元ファイルを確認することは現時点で難しいようです。（そりゃそうか😅）
minify jsを読むと決意、フォーマット、コードリーディング
minifyされていてもjsであることに違いありません。
minify jsをフォーマットして読むことを決意しました。自分の中では初の試みで、投下する時間が無駄にならないか少し怖かったです。
minify jsをコピーペーストしてデバッグ用のファイルを作成しました。main-test.jsと名づけました。
main.min.jsを読み込む部分を修正して、main-test.jsを読み込むようにしました。
何をターゲットに目次が生成されているか突き止める
main-test.jsをフォーマットして、読みやすくした後は、ひたすらconsole.logで絞り込んでいきます。
結果、
main_contentクラスと、post_contentクラスが必要であると判明。
post_contentクラスは、記事にswellのブロックのスタイルを当てるために必要だったので既に追加していました。
独自の子テーマにmain_contentクラスを追記して動作していることを確認しました。
目次が生成されてる〜〜！！
カスタム投稿の記事ページでは表示されない問題に遭遇
しかし、カスタム投稿の記事ページでは表示されていませんでした。
さらなるコードリーディングでクラスを突き止める
l-mainContent__innerをセレクターにして、記事のコンテンツが入る要素を取得していることを突き止めました。
const a = d.querySelector(".l-mainContent__inner > .post_content")
動作していることを確認
".l-mainContent__inner > .post_content"を満たすようにクラスを追記しました。
目次が生成されてました〜〜〜！！！
感想
未知のバグに対峙する時、医者になった気がする。お手上げだと思っていた問題を解決できると、日常では得難い快感を覚えられる。
Discussion