개발, 플러그인 | 목차 TOC 생성 방법

정라잇 | 최근 수정일 : 22년 07월 07일

개요

Table of Contents(줄여서 TOC)는 목차라는 뜻을 워드프레스에서 이 기능을 어떻게 만들어야 할 지 많은 고민을 해왔고 아쉽게도 수정이 어려운 플러그인이 보편적으로 사용되었습니다.

직접 만드는 방법을 연구하여 적용하는 단계까지 왔으며, 어떻게 하면 되는지에 대해 공유하고자 합니다

자바스크립트 라이브러리

목차 생성은 자바스크립트로 구현해야 서버 부하가 적게 걸립니다. 그러니 서버에서 실행되는 PHP 로 만드는 것 보다 아래와 같은 자바스크립트 코드로 TOC(목차) 를 만드는 것이 바람직한 일입니다.

Generate a table of contents (michna.com)

<!-- 외부 링크 적용 -->
<script src="http://michna.com/jstoc.js"></script>

<!-- 외부 링크 적용 -->
<script src="/jstoc.js"></script>

적용방법은 두가지가 있습니다. 첫번째는 외부 링크 적용 방법 두번째는 링크를 클릭하여 (우측마우스 or 컨트롤 + S) 자료를 다운받은 뒤 서버에 임베딩 적용하는 방법이 있습니다. HTML 코드 마지막에 붙여넣야 합니다.

어떤 것이어도 작동하기에 위의 두 코드 중 자신에게 맞는 방법을 사용하면 됩니다.

활용방법

<h1>제목 영역</h1>

<div id="jstoc" class="more1">
    <p style="font-weight: bold">테이블 컨텐츠</p>
</div>

<h2>부제목</h2>
<p>내용</p>
<h2>부제목</h2>
<p>내용</p>
<h2>부제목</h2>
<p>내용</p>

<!-- 외부 링크 적용 -->
<script src="http://michna.com/jstoc.js"></script>

완성된 코드를 html로 붙여넣기 하면 정상적으로 작동되는 모습을 볼 수 있습니다. SEO 에 좋은 코드는 <h1>태그 = 제목, <h2>태그 = 부제목, <h3> ~ <h6> 태그 = 소제목 <p> 태그 = 내용 으로 활용해야 합니다.

<div id="jstoc" class="more1">
    <p style="font-weight: bold">테이블 컨텐츠</p>
</div>

jstoc 라이브러리는 id 값이 jstoc 인 경우 목차를 생성해냅니다. 그리고 코드 아래에 적힌 h2 이후의 태그를 파악하여 값을 가져오게 됩니다.

이 라이브러리를 사용하는데 지켜야 할 공식이 있습니다. 위에서 <h1> 태그를 활용했다면 아래에서는 무슨 일이 있어도 <h1> 태그를 활용하면 안됩니다. 물론 SEO에도 좋지 않습니다. 부제목은 <h2>태그 를 권장합니다.

링크를 걸어보기

이 TOC는 영어 기반으로 만들어진 코드입니다. 메뉴얼 설명에서는 단어의 첫번째 알파벳을 링크로 가져온다고 써있지만 한국어는 인식하지 못합니다. 그렇지만 편법을 만들어서 활용할 수 있습니다.

일반적으로 목차에서 활용되는 링크는 #링크 로 되어있으며 부제목의 id의 값이 일치하는 경우 목차를 클릭했을 때 해당 위치로 이동한다는 점을 이해해야 합니다.

영어가 전혀 적혀있지 않으면 첫번째 링크는 #ci 입니다.
영어가 하나라도 적혀있다면 해당 문자의 첫번째 알파벳으로 이름을 짓습니다.

사용법이 좀 어려운데, 아쉽게도 코드를 새로 짜야 해결될 문제로 보입니다.

CSS 적용하기

<style>
.more1 {
    padding: 30px;
    font-size: 17px;
}
</style>

<div id="jstoc" class="more1">
    <p style="font-weight: bold">테이블 컨텐츠</p>
</div>

해당 라이브러리는 class 태그를 지원합니다. 위의 방법을 활용해 사용하면 사이트에 긍정적인 방향으로 사용할 수 있어보입니다.