【プラグインなし】WordPressの記事ページにシンプルな「目次」を表示させる方法

jQuery(function($) {
  var toc = ''; // 目次のHTMLを保持する変数
  $("article").find("h2, h3").each(function() { // 記事内のh2とh3要素を見つける
    var level = this.nodeName.toLowerCase() === "h2" ? 1 : 2; // 見出しのレベルを決定する
    toc += '<li><a href="#' + this.id + '">' + $(this).text() + "</a></li>\n"; // 目次に見出しのリンクを追加
  });
  if (toc) { // 目次が空でない場合のみ、目次を挿入する
    $("#toc").html('<div class="mokuji">目次</div><ol>' + toc + '</ol>'); // 目次を表示する
  }
});

<div id='toc'></div>

#toc {
  margin: 30px 40px; /* 目次の上下左右のマージン */
  padding: 20px; /* 目次の内側の余白 */
  text-align: center; /* テキストの中央揃え */
  border: solid 1px #ccc; /* 目次の境界線 */
}

.mokuji {
  font-size: 1.2em; /* 目次のタイトルのフォントサイズ */
  font-weight: bold; /* 目次のタイトルの太字 */
  color: #333; /* 目次のタイトルの色 */
}

#toc ol {
  margin-top: 10px; /* 目次項目の上部のマージン */
  margin-bottom: 0; /* 目次項目の下部のマージン */
  padding: 0; /* 目次項目の内側の余白 */
  text-align: left; /* テキストの左揃え */
}

#toc ol li {
  font-size: .95em; /* 目次項目のフォントサイズ */
  margin-bottom: 1em; /* 目次項目の下部のマージン */
  list-style-position: inside; /* リストアイテムのマーカーの位置 */
  color: #000070; /* 目次項目の色 */
  border-bottom: 1px dotted #ddd; /* 目次項目の下線 */
}

#toc ol a {
  text-decoration: none; /* リンクの下線を削除 */
  color: #000070; /* リンクの色 */
}

#toc ol a:hover {
  opacity: .5; /* マウスオーバー時のリンクの透明度 */
}

#toc ol>ol {
  margin: 0; /* ネストされたリストのマージン */
  padding-left: 15px; /* ネストされたリストの左側のパディング */
}

#toc ol>ol li {
  font-size: 1em; /* ネストされたリストのフォントサイズ */
  font-weight: 500; /* ネストされたリストの太字 */
}

@media (max-width: 599px) {
  #toc {
    margin: 30px 0; /* モバイルデバイス用の目次のマージン */
  }
}