シンプルな WordPress 目次（TOC）スクリプト（プラグイン未使用）

WordPressには、さまざまな無料および有料目次（TOC）プラグインがあります。プラグインを使うと WordPress サイトに便利に目次を表示できます。目次プラグインは詳細な設定を提供します。

無料のプラグインには、簡単な目次（Easy Table of Contents）プラグインが多用されています。このブログでは Fixed TOCという有料プラグインがインストールされており、私が管理する一部のサイトには、自分で作成した目次スクリプトが適用されています。

目次プラグインを使用している場合は便利ですが、目次プラグインが更新されずに放置されたり、プラグインがクラッシュしたりすることがあります。実際、Easy Table of Contentsプラグインがバージョン2.0.68にアップデートされた後に致命的なエラーが発生するサイトがあり、緊急にバージョン2.0.68.1にアップデートされました。

シンプルな WordPress 目次（TOC）スクリプト（プラグイン未使用）

WordPress ブログに目次を表示したい場合簡単な目次プラグインを使用できます。無料でありながら機能も多いです。

目次プラグインは、通常、H2、H3などの見出しタグが一定数（たとえば2つ）以上ある場合に限り、目次が自動的に表示されるように設定できます。より高度な機能が必要な場合は、このブログのように有料プラグインを使用すると、スクロール時に目次アイコンが作り付けで固定され、ユーザーが目次を簡単に展開できます。

プラグインは便利な方法ですが、プラグインのクラッシュを引き起こすなど、問題を引き起こす恐れがあります。プラグインを好まない場合は、次のJavaScriptコードを使用して目次を表示できます。

document.addEventListener("DOMContentLoaded", function() {
	function smoothScrollTo(element) {
		document.querySelector(element).scrollIntoView({ 
			behavior: 'smooth' 
		});
	}

	var toc = document.createElement('nav');
	toc.id = 'table-of-contents';
	toc.setAttribute('aria-label', '목차');
	toc.setAttribute('itemscope', '');
	toc.setAttribute('itemtype', 'https://schema.org/SiteNavigationElement');

	var tocLabel = document.createElement('div');
	tocLabel.id = 'toc-label';
	tocLabel.setAttribute('itemprop', 'name');
	tocLabel.innerText = '목차';
	toc.appendChild(tocLabel);

	var ul = document.createElement('ul');
	var counter = { h2: 0, h3: 0, h4: 0 };
	var headings = document.querySelectorAll('.entry-content h2, .entry-content h3, .entry-content h4');

	if(headings.length > 1) {
		Array.prototype.forEach.call(headings, function(heading) {
			var headingLevel = heading.tagName.toLowerCase();

			if (headingLevel === 'h2') {
				counter.h2++;
				counter.h3 = 0;
				counter.h4 = 0;
			} else if (headingLevel === 'h3') {
				counter.h3++;
				counter.h4 = 0;
			} else if (headingLevel === 'h4') {
				counter.h4++;
			}

			var sectionNumber = counter.h2 + (counter.h3 ? '-' + counter.h3 : '') + (counter.h4 ? '-' + counter.h4 : '');
			var escapedText = heading.innerText.replace(/"/g, '&quot;');

			var anchor = document.createElement('a');
			var headingId = 'heading-' + sectionNumber;
			anchor.href = '#' + headingId;
			anchor.setAttribute('itemprop', 'url');
			anchor.innerText = sectionNumber + ' ' + heading.innerText;

			var li = document.createElement('li');
			if (headingLevel === 'h3') {
				li.classList.add('toc-h3');
			} else if (headingLevel === 'h4') {
				li.classList.add('toc-h4');
			}
			li.setAttribute('itemprop', 'name');
			li.appendChild(anchor);
			ul.appendChild(li);

			heading.id = headingId;
			heading.setAttribute('itemprop', 'name');
			heading.setAttribute('aria-label', sectionNumber + ' ' + escapedText);
		});

		toc.appendChild(ul);

		var firstHeading = document.querySelector('.entry-content h2, .entry-content h3, .entry-content h4');
		if (firstHeading) {
			firstHeading.parentNode.insertBefore(toc, firstHeading);
		}
	}

	var tocLinks = document.querySelectorAll('#table-of-contents a');
	tocLinks.forEach(function(link) {
		link.addEventListener('click', function(e) {
			e.preventDefault();
			var href = this.getAttribute('href');
			var target = document.querySelector(href);
			if (target) {
				target.setAttribute('tabindex', '-1');
				target.focus();
				smoothScrollTo(href);
			}
		});
	});
});

JSスクリプトは、次の記事を参照してロードできます。

WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法

簡単な方法で WPコードなどのHeader＆Footer Codesプラグインを使用して、Jaskスクリプトをフッタ領域にロードできます。これはお勧めできませんが、簡単にJSコードを追加したい場合は使用できます。 WPCodeを使用してフッタ領域に追加する場合와 を追加してください。

<script>
// JS 코드
</script>

そして、次のCSSコード WordPress 管理者ページ » デザイン » カスタマイズ » 追加のCSSに加えて、目次ボックスのスタイルを指定できます。

/* TOC */
#table-of-contents {
  background-color: #f8f9fa;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#toc-label {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 22px;
  color: #333;
  position: relative;
  display: inline-block;
   border-bottom: 4px solid #007bff;
}

#table-of-contents ul {
  list-style: none;
  padding: 0;
  margin-left: 20px;
}

#table-of-contents ul li {
  margin-bottom: 10px;
  position: relative;
}

#table-of-contents ul li a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

#table-of-contents ul li a:hover {
  color: #007bff;
}

#table-of-contents ul li.toc-h3 {
  margin-left: 15px;
}

#table-of-contents ul li.toc-h4 {
  margin-left: 30px;
}

GeneratePress テーマに適用すると、次のように目次が表示されます。

実際の目次操作ここで確認することができます。

スタイルはCSSに調整してください。基本的なCSSを理解すれば、ある程度の修正が可能でしょう。チャットGPTやClaude AI などの人工知能（AI）にお願いし、好きなスタイルのコードを要求することも可能です。

カスタムコードを使用する利点

直接コードを作成して維持することは容易ではないかもしれませんが、直接コードを作成して使用する場合には良いことがいくつかあります。

カスタマイズの容易さ
- カスタムコードを使用すると、デザイン、レイアウト、機能など、目次のあらゆる側面をユーザーが望むように制御できます。
- 特定の要件に合わせて目次を簡単に変更して調整できます。
軽さ(軽量)
- 通常、プラグインよりも軽いです。
- 不要な機能やコードなしで必要な機能だけを実装することが可能です。
- サイトの速度への影響を最小限に抑えることができます。
依存性の減少
- プラグインへの依存性が減少します。
- プラグインの互換性の問題や潜在的なセキュリティリスクを防ぐことができます。

最後に、

目次プラグインを使用すると、ユーザーが投稿の構造を簡単に把握し、必要なものに移動できるため、ユーザーエクスペリエンス（UX）を改善し、SEO（検索エンジン最適化）の向上にも役立ちます。

WordPressでは、Easy TOCなどの無料の目次プラグインを使用できます。プラグインを使用したくない場合は、この記事で紹介されている目次スクリプトを使用すると考えることができます。

この記事に記載されているコードは、ティーストーリーなどにも適用できます。実際に寀ーブログまた、上記のコードに似たスクリプトを使用して自動目次を表示しています。

もしコードにバグやエラーがある場合は、この記事のコメントでお知らせいただければ反映して修正させていただきます。

シンプルな WordPress 目次（TOC）スクリプト（プラグイン未使用）

カスタムコードを使用する利点

最後に、

参照

コメントを残す

コメント応答キャンセル

シンプルな WordPress 目次（TOC）スクリプト（プラグイン未使用）

シンプルな WordPress 目次（TOC）スクリプト（プラグイン未使用）

カスタムコードを使用する利点

最後に、

参照

コメントを残す

コメント 応答キャンセル

コメント応答キャンセル