WordPressに目次を自動生成する方法！設定方法

2021年1月25日

記事に目次があるだけで大まかな内容が把握できるのと、
もし読みたい箇所が決まっているならすぐに飛んで読めるので目次はあると便利です。

Table of Contents Plus というプラグインを入れて目次を表示することができます。

「見出し」に設定された目次をもとに記事の目次を自動生成してくれます。

Table of contents plusのインストール

ダッシュボード > プラグイン > 新規追加 に移動します。

Table of Contents Plus とキーワードを入力して検索すると表示されますので、
「今すぐインストール」をクリックしましょう。

Active をクリックして有効化しましょう。

無事Table of Contents Plus がダウンロードされたと思います。
略称でTOC+と呼ばれています。

では、TOC+の設定していきましょう。

TOC+の設定

基本設定を行いたい場合は
ダッシュボード > 設定 > TOC+ で基本設定が可能です。(defaultでも問題ないです)

私の基本設定はこんな感じです。

位置は最初の見出し前(デフォルト)でいいと思います。

表示条件は3つ以上にしました。

postにチェックをつけることで、投稿した記事に目次が表示されるようになります。

見出しテキストは、例を見てお好みでどうぞ。こだわりが特になければ「もくじ」とひらがなで良いと思います。

階層表示はお好みで。あった方が個人的には助かります。

番号振りは特になくてもいい気がします。あってもいいですが。。

スムーズ・スクロール効果を有効化をチェック入れると、スクロールで移動するようになります。jQueryで動くので若干動きが重くなる疑惑もあります。ここでは外しておきました。

あとはプレゼンテーションもお好みで決めてください。

詳細設定をしたい場合は hide をクリックしましょう。

私の上級者向けの設定はこのようになっています。

テーマの見出し記号を保持は、チェックマークを入れないともくじが崩れたのでチェック付けました。

見出しレベルは、H2とH3くらいでいいかと思います。
あまり多すぎても目次がごちゃごちゃしてしまいます。

これでTOC+の設定は以上です。

テーマでLION Mediaを使っていると

LION Mediaはデフォルトで
目次が表示されるようになっているので、目次が2つになってしまいました。。

LION Mediaはチェックマークなどで目次を消せそうになかったので、
functions.phpを編集してLION Mediaの目次は強制的に削除したいと思います。

ダッシュボード > 外観 > テーマエディタ に移動します。

親テーマのLION MEDIA へ移動します。

function.phpを編集します。

5689行目付近に移動して、
if ($outline != ” && $count >= $number) { の行から return $content まで
行の先頭に //を追加してコメントアウトしましょう。
(※ コメントアウトすることでプログラムの効果をなくしています。)

//2021/1/24 lionmediaの目次表示をコメントアウト
//    if ($outline != '' && $count >= $number) {
//        // 目次を装飾します。
//        $decorated_outline = sprintf('
//		<div class="outline">
//		  <span class="outline__title">目次</span>
//		  <input class="outline__toggle" id="outline__toggle" type="checkbox" '.$close.'>
//		  <label class="outline__switch" for="outline__toggle"></label>
//		  %s
//		</div>', $outline);
//        // カスタマイザーで目次を非表示にする以外が選択された時＆個別非表示が1以外の時に目次を追加します。
//		if ( get_option('fit_post_outline') != 'value2' && get_post_meta(get_the_ID(), 'outline_none', true) != '1' && is_single() ) {
//        	$shortcode_outline = '[outline]';
//        	if (strpos($content, $shortcode_outline) !== false) {
//            	// 記事内にショートコードがある場合、ショートコードを目次で置換します。
//            	$content = str_replace($shortcode_outline, $decorated_outline, $content);
//        	} else if (preg_match('/<h[1-6].*>/', $content, $matches, PREG_OFFSET_CAPTURE)) {
//            	// 最初のhタグの前に目次を追加します。
//            	$pos = $matches[0][1];
//            	$content = substr($content, 0, $pos) . $decorated_outline . substr($content, $pos);
//        	}
//		}
//    }
	return $content;

これでLION Mediaの目次が非表示になりました。

設定を変更した後にも目次が表示される場合は、
キャッシュが使われている可能性がありますのでスーパーリロード(Shist + command + R)してください。