各所で書かせていただいている通り、【HABONE】テーマは「こんな機能がテーマに最初からあったらいいのに．．」というのを調べ、コードについて理解した上で機能を追加していっています。

どうしても追加したい機能の中には、もくじ（TOC）の生成機能があり、ここ数日いろいろな方法を見てテストとコード理解に努めてきました。

しかしながら、どうしてもうまくいかないケースがあり、このままだと、テーマ自体の発展や日常その他の作業に支障をきたす可能性が出てくるため、一時断念することとしました。

また折を見てチャレンジしていこうと考えています。

そこで、今回は、【HABONE】テーマへTOC機能を追加する方法について、プラグインを使う方法と、コードのコピペで動作する方法の2種類を紹介しますので、やりやすい方で実装いただければと思います。

このサイトでは前者のプラグインを使った方法を用いて以下のようなもくじを表示させています

ページ上部へ戻る▲

プラグインを使ってもくじ機能を実装する方法

とても有名なプラグイン（多分ご存じの方も多いでしょう）に「Table of Contents Plus」というのがあります。

設定画面も日本語化されていますので使いやすく、定評のあるプラグインで、【HABONE】テーマを使ったサイトでも問題なく動作します。

プラグインの新規追加で「Table of Contents Plus」と探されるか、以下のページからダウンロードしてインストールしてください。

公式ページ：https://wordpress.org/plugins/table-of-contents-plus/

なお、私が管理する別のサイトで公開している解説記事も併せて読んでいただければと思います。

投稿や固定ページ本文へ目次を生成して表示できるプラグイン「Table of Contents Plus」の機能と使い方

上記記事の中で1点、ショートコードのないページでスクリプトとCSSを読み込まないようにして、もくじのないページの動作への影響を抑える方法を紹介していますので、その部分だけ抜粋します。

方法としては子テーマのfunctions.phpへ以下のコードを追記するだけです。

/***** Table of Contentsプラグインの処理 *****/
/* 一旦スタイルとスクリプトを無効にする */
function ha_tocp_dequeue_scripts(){
     wp_dequeue_style( 'toc-screen' );
	 wp_dequeue_script( 'toc-front' );
}
add_action( 'wp_enqueue_scripts', 'ha_tocp_dequeue_scripts');

/* tocショートコードがある場合のみ有効にする */
function ha_tocp_enqueue_scripts() {
 global $post;
 if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'toc') ) {
     wp_enqueue_style( 'toc-screen' );
	 wp_enqueue_script( 'toc-front' );
 }
}
add_action( 'wp_enqueue_scripts', 'ha_tocp_enqueue_scripts');

もくじの自動挿入をしている場合は、表示されなくなりますのでご注意ください

ページ上部へ戻る▲

プラグインを使わない方法

今回自力での実装で大きな問題となったのが、再利用ブロックの中に見出しがあった場合にTOCへ反映されなかったことです。

その問題がなく、日本語で丁寧に解説いただいている以下のページがあります。

WordPress プラグインなしで記事の見出しから目次を作成

この手順通りに実装すれば、プラグインなしでもくじコンテンツを挿入することができます（もちろん【HABONE】テーマでも実装確認済です）。

スタイルについては自身で調整いただく必要はあるかも知れません

いずれの方法でも大丈夫ですので、もくじ機能が必要な方は追加ください。