Javascriptでオリジナルテーマに記事内目次を表示しよう！

今回はWordpressのオリジナルテーマに記事内目次を表示してみましょう！

① プラグイン必要なし

② Javascriptで簡単設置

③ 解説付きでコピーOK

WordPress記事内目次を自作で設置するコード紹介

では早速コードはこちらになります。

See the Pen 目次js自作 by ALcuesto (@ALcuesto) on CodePen.

解説

かなりシンプルなコードにしているので、HTML・CSS・javascriptの理解がある方はわかりやすいかと思います。

まずjsファイルの

let content_ID = document.getElementById(‘content_heading_box’);let h2_elements = content_ID.querySelectorAll(‘h2,h3’);let i = 1;for (let h2_element of h2_elements) {    h2_element.setAttribute(“id”, “aaa” + i);    i++;}

のコードで、HTMLファイルにある、

 <section id=”content_heading_box”>
……</section>

の中身を確認して、この中にh2タグとh3タグがあれば、上から順に id = “aaa1″、id = “aaa2″と数字だけを1ずつ増やしてid名を付けていきます。

これは、目次をクリックした時にその見出し（h2やh3）の部分にスクロールさせる為にidを付与しています。

次に、jsファイルの下記の部分

for (let h2_element of h2_elements) {
let h2Text = h2_element.textContent;
let headingList_text = document.createElement(‘a’);
headingList_text.href = (‘#’ + h2_element.id);
if (h2_element.tagName === ‘H2’) {
headingList_text.setAttribute(“class”, “table_of_content_h2”);
}
if (h2_element.tagName === ‘H3’) {
headingList_text.setAttribute(“class”, “table_of_content_h3”);
}
headingList_text.append(document.createTextNode(h2Text));
let headingList = document.getElementById(‘headinglist_box’);
headingList.append(headingList_text);
}

ここでは、見出し（h2やh3）の文章を取得して、その文章にaタグ（リンクタグ）を付与。

headingList_text.href = (‘#’ + h2_element.id); の部分で、すでに追記したid名のaaa1やaaa2をaタグのhrefに設定。

CSSでスタイリングする為に、h2の時とh3の時に付けるclass名を分ける。

この内容を、HTMLの　 <div id=”headinglist_box”></div>　の中に表示して！

という内容になっています。

jsファイルの下部の

document.getElementById(‘table_of_content_title’).onclick = function() {    document.getElementById(‘table_of_content_title’).classList.toggle(‘active’);    document.getElementById(‘headinglist_box’).classList.toggle(‘active’);}

に関しては、クリックで表示 非表示を切り替える為に設定しています。

これだけでほぼ完成！あとは、CSSでご自身の希望のデザインに色や幅などを調整していくだけです！

いかがでしょうか。

記事内目次はプラグインを使えば簡単に表示できますが、プラグインはサイトの表示スピードを重くしたり、希望のデザインが上手く反映できなかったりと不都合が出てくることも。

記事内目次は今回ご紹介したとおり、簡単な記述で作成できるので、WordPressのオリジナルテーマを作成されている方はぜひ自作での導入もご検討してみてくださいね！

では今回はこの辺で。