ワードプレス内で目次生成のjQueryが動かない

Question

-実現したいこと
以下のページを参考に、
ワードプレスでh2・h3タグから自動で目次生成できるようにしようとしました。
https://plusers.net/wordpress_toc

-問題点
上記の内容の通り、footer.phpと記事を記載したが目次が表示されない。
記述前と何も変わらず、動かない状況です。

▼footer.php（</body>の直前に記述）

//目次生成
<script type="text/javascript">
jQuery(function($) {
    var idcount = 1;
    var toc = '';
    var currentlevel = 0;
    jQuery("article h2,article h3", this).each(function() {
        this.id = "toc-" + idcount;
        idcount++;
        var level = 0;
        if (this.nodeName.toLowerCase() == "h2") {
            level = 1;
        } else if (this.nodeName.toLowerCase() == "h3") {
            level = 2;
        }
        while (currentlevel < level) {
            toc += "<ol>";
            currentlevel++;
        }
        while (currentlevel > level) {
            toc += "</ol>";
            currentlevel--;
        }
        toc += '<li><a href="#' + this.id + '">' + jQuery(this).html() + "</a></li>\n";
    });
    while (currentlevel > 0) {
        toc += "</ol>";
        currentlevel--;
    }
    if (jQuery("article h2")[0]) {
        jQuery("#toc").html('<div class="mokuji">CONTENTS</div>'+ toc);
    }
});
</script>
//目次生成
</body></html>

▼記事内

<div id='toc'></div>
<h2>基本情報</h2>
<h3>品川区の場合</h3>

おわかりになる方、アドバイスいただけますと幸いです。
何卒よろしくお願いいたします。

Answer 1

セレクタが効いてません。
articleで囲えば良いです。

<article>
<div id='toc'></div>
<h2>基本情報</h2>
<h3>品川区の場合</h3>
</article>

Comments

[NN77]

ありがとうございます。動きました！