WordPress 記事に自動的に目次を追加したい

/**
 * 目次自動追加
 */
window.addEventListener('DOMContentLoaded', () => {
  // 記事のコンテンツ
  const entryContent = document.querySelector('#contents .entry-content');

  // コンテンツ内の見出し　h2, h3
  const headlines = entryContent.querySelectorAll('h2, h3');

  // 見出しがある場合
  if(headlines.length > 1) {
    // 目次情報用配列
    const tocData = []; //toc - table of content（目次）の略

    // 各見出しにアンカーリンク用のidをつける
    headlines.forEach((headline, index) => {
      // idを生成
      const anchor_id = 'anchor' + (index + 1);

      // idをhtmlに追加
      headline.setAttribute('id', anchor_id);

      // 目次用に各見出しの[タグ,テキスト,id]を配列に格納
      tocData[index] = [headline.tagName.toLowerCase(), headline.textContent, anchor_id];
    });

    // 目次のエリアとリストを作成
    const tocWrapper = document.createElement('div');
    tocWrapper.insertAdjacentHTML('afterbegin', '<div class="toc_ttl">目次</div>');

    const tocList = document.createElement('ul');
    tocWrapper.appendChild(tocList);

    // CSSクラス追加（装飾用）
    tocWrapper.classList.add('toc_wrapper');
    tocList.classList.add('toc_list');

    // リスト格納用変数
    let listHtml = '';

    // 目次リスト作成
    tocData.forEach((data) => {
      listHtml += `<li class="tag_${data[0]}"><a href="#${data[2]}">${data[1]}</a></li>`;
    });
    tocList.insertAdjacentHTML('afterbegin', listHtml);

    // 記事タイトルの下に追加
    const entryTitle = document.querySelector('#contents .entry-title');

    entryTitle.insertAdjacentElement('afterend', tocWrapper);
  }
});