よくみる 頭に「目次」とか表示されている投稿がうらやましい。
手動で作れないことはないが、毎度投稿の度には作ってられない。
結論
以下のサイトを参考に プログラム functions.php, js の実装で対応可。
プラグイン不要！WordPressに目次を表示する方法
WordPressで作ったページに、記事の目次を追加する方法を紹介します。 自作しなくてもTable of Contents Plusなどのプラグインを使えば目次を追加できますが、プラグイン同士の相性
ワードプレスでオリジナルのjavascript（jQuery）ファイルを読み込む方法｜WEB TIPS～ホームページ制作の覚え書き
ワードプレスでブログやサイトを運営していると、オリジナルの外部javascript（jQuery）ファイルを読み込みたくなる事ってあると思います。そこで、今回はWordPressでの外部javascriptファイルの設置方法と読み込ませ方です。 まずはWordPressで使用中のテーマ内にjavascriptファイルを設置します。 …
解説
WordPress 初心者の私はすんなりはいかなかった。
必要となった知識は以下。
- 自サイト WordPress上のファイル 追加/更新方法
- jsファイルの追加方法
完成後、本ページに表示されている目次のデザインにするまでを解説する
目次の機能をどこまで組み込むかを決める
基本 上記にも記載したサイト「プラグイン不要！WordPressに目次を表示する方法」に従って作業すると目次は完成する
物事を順番に理解できるよう掲載されているので、よく読みながら作業すれば問題はないが、順番に実施すると少々二度手間が発生するので最短で実現したいのであれば、先に決めておくことがある
functions.php の編集は 2段階で紹介されているので、機能毎にどんな作業が発生するか簡単に紹介する
①デザインも表示位置も気にしないので 目次を表示したい
→編集対象は functions.php
②目次[表示] ⇔ 目次[非表示] を切り替えたい
→編集対象は functions.php(2回目の方) と js、デザイン変えたいなら style.css
③目次の表示位置を指定したい
→編集対象は functions.php(2回目の方)
①デザインも表示位置も気にしないので 目次を表示したい
ここのコードを functions.php 内に追加する「php view」
②目次[表示] ⇔ 目次[非表示] を切り替えたい
ここのコードを functions.php 内に追加する「php view」
ここのコードを jsファイルとして追加する「js view」
jsファイルの追加がわからなければ「WEB TIPS」参照。
③目次の表示位置を指定したい
ここのコードを functions.php 内に追加する「php view」
表示位置は ショートコードoutline で指定できるようになる
注意事項
目次は <h0>見出し文字</h0> で指定された箇所を正規表現で広い、HTMLへ反映される仕組みとなっている
Gutenbergで 見出しに アンカーを追加すると <h0 id=”***”> という表示になるため、目次の文字として抽出されない
※表示されないな、と思ったら Gutenberg上で HTML編集を選択し、<h0>見出し文字</h0> という表示になるよう修正すればよい
私の場合、アンカーに outline_* を全部指定するのかと思ったのだが 自動で付与されるため、投稿時に意識しなければならないのは 見出しのレベル H1～H6 だけでよい。