WEMOブロックエディター完全対応のWordPressテーマ「SWELL」をリリースしました!コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。2019.08.16WordPressの記事から見出しを自動で探し出し、リンク付きの「目次」ナビゲーションを設置するためのスクリプトを紹介します。jQueryも一切使っていないです。プラグインを使いたくない!って方は是非参考にしてみてください。見出しタグやブログのHTML構造を確認するまずは準備として、現在使用しているテーマのHTMLソースの構造を把握しておきましょう。目次にしたい見出しは何番のHタグを使っているのかまずは見出しタグから確認していきましょう。大見出しはH2タグ、中見出しは全てH3タグで書いてあるパターンなどがあると思います。ほとんどこんな感じかと思いますが、たまに大見出しも全部h1タグだったりするので確認しておきましょう。このパターンを例にしたスクリプトを紹介していきます。記事を囲っているdivタグなどのID名またはクラス名を確認する見出しを探し出す対象範囲を限定するため、記事全体を包むラッパーのID名などを使用するので確認しておいてください。記事全体でなくとも、見出しが使われ始める本文の導入部以降が何かのタグで包まれている場合、それを使うこともできます。IDまたはクラスが付いている要素か、もしくはそのページで1回しか使われていないタグ(articleなど)で記事部分が包まれている必要があります。今回のコードでは、.post_contentというクラス名のタグで記事が囲まれていると想定したものとします。1つ目のH2タグの直前に目次用のdivタグを設置する目次を設置するためのdivタグを先に挿入しておきましょう。PHP側で先に挿入しておく方法と、JavaScriptで生成する方法の2パターンを紹介しておきます。どちらでもいいと思いますが、管理画面から見出しの生成をするかどうかを切り替えれるようにしたい場合や、アドセンスも同時に挿入したい場合などはPHPで挿入しておいた方が楽かなと思います。PHPでdivタグを先に挿入しておく方法'the_content'アクションフィルターにて、preg_match()でH2タグを探し、divタグを挿入します。functions.phpに以下のコードを記述してください。目次の生成スクリプトさて、では目次を生成するスクリプトを紹介していきます。どの深さまで目次を生成したいかによってコードが変わってくるのですが、今回は以下の2パターンを例にしたコードのみ紹介しておきます。}}H2タグだけを表示する場合よりかなりコードが長くなっています。H3だけのリストを生成していき、次にH2タグが来た時にまとめて連結しています。このような手法で、H4、H5と、見出しに表示したい見出しの深さだけコードを追加していきましょう。何もしなければ、リンク先への移動は瞬間移動してしまいますが、これをアニメーションさせるともっといい感じになります。スムーススクロールってやつですね。そのスムーススクロールを実装する方法も別の記事で紹介していますので、ぜひ参考にしてみてください。あわせて読みたい【脱jQuery!】ページ内リンクのスムーススクロールをjQueryなしで実装するコード今回はページ内リンクの遷移でよく使う、「スムーススクロール」をjQueryに頼らず実装する方法をメモしていきます。