ワードプレスの投稿本文に目次リンク自動生成 javascriptで実装

記事が役立ったら下部でご評価を！
(1 投票, 平均: 4.00 / 5)
読み込み中...

ワードプレスでブログを投稿する際に、目次を作って、その後のタイトルにリンクを飛ばしたいという方いますよね。そこで今回はネットで拾った記事を参照 (w) に細かいやり方を解説します。

実際に実装するとこんな感じになります。

参照したコード

https://www.marorika.com/entry/create-toc

2021年現在でも動作します。貴重なソースコードありがとう！！！

<!-- 目次を作成する先 -->
<div id="toc"></div>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var contentsList = document.getElementById('toc'); // 目次を追加する先(table of contents)
        var div = document.createElement('div'); // 作成する目次のコンテナ要素

        // .entry-content配下のh2、h3要素を全て取得する
        var matches = document.querySelectorAll('.entry-content h2, .entry-content h3');

        // 取得した見出しタグ要素の数だけ以下の操作を繰り返す
        matches.forEach(function (value, i) {
            // 見出しタグ要素のidを取得し空の場合は内容をidにする
            var id = value.id;
            if(id === '') {
                id = value.textContent;
                value.id = id;
            }

            // 要素がh2タグの場合
            if(value.tagName === 'H2') {
                var ul = document.createElement('ul');
                var li = document.createElement('li');
                var a = document.createElement('a');

                // 追加する<ul><li><a>タイトル</a></li></ul>を準備する
                a.innerHTML = value.textContent;
                a.href = '#' + value.id;
                li.appendChild(a)
                ul.appendChild(li);

                // コンテナ要素である<div>の中に要素を追加する
                div.appendChild(ul);
            }

            // 要素がh3タグの場合
            if(value.tagName === 'H3') {
                var ul = document.createElement('ul');
                var li = document.createElement('li');
                var a = document.createElement('a');

                // コンテナ要素である<div>の中から最後の<li>を取得する。
                var lastUl = div.lastElementChild;
                var lastLi = lastUl.lastElementChild;

                // 追加する<ul><li><a>タイトル</a></li></ul>を準備する
                a.innerHTML = value.textContent;
                a.href = '#' + value.id;
                li.appendChild(a)
                ul.appendChild(li);

                // 最後の<li>の中に要素を追加する
                lastLi.appendChild(ul);
            }
        });

        // 最後に画面にレンダリング
        contentsList.appendChild(div);
    });
</script>