블로그에 글을 작성할 때 본문에 소제목을 넣으면 왠지 완성한 글도 체계가 있어 보인다. 만약 글 한 편의 분량이 많다면 소제목(H2)과 소소제목(H3, H4..)만 여러 개 나올 수 있는데 TOC를 설정해두면 방문자도 한 눈에 글 구성을 파악할 수 있어서 좋다.
TOC는 Table Of Contents의 줄임말로 쉽게 목차의 개념으로 보면 된다. 코딩이 가능하면 직접 구현해도 되겠지만, 워드프레스 설치형을 사용 중이라면 플러그인 설치를 통해 간단하게 기능을 구현할 수 있다.
* 본문 내용이 짧거나 소제목을 넣지 않는다면 굳이 설치하지 않아도 된다.
1. 쉬운 목차 플러그인 설치

워드프레스에 TOC 목차 플러그인은 다양하지만, 그 중 ‘쉬운 목차 TOC’는 무료 버전도 기능이 좋아서 사용 유저가 많다. (박스의 헤딩 글자를 클릭하면 해당 본문 위치로 이동함) 플러그인을 설치하면 위 예시 본문의 목차 박스를 보일 수 있는데 진행 방법도 어렵지 않다.

먼저 워드프레스 대시보드 – 왼쪽 메뉴 플러그인 – Add New Plugin 클릭 후



새 화면이 나오면 오른쪽 위 검색 창에 ‘easy table’을 입력하면 플러그인 정보를 볼 수 있다. 인스톨과 활성화 버튼까지 클릭하면 블로그에도 설치와 적용이 완료된다.
2. 쉬운 목차 기본 설정

소제목이 많아도 위처럼 계층으로 나타낼 수 있는 점은 쉬운 목차 TOC의 장점으로 보인다. 몇 가지 옵션 설정을 통해 원하는 대로 커스터마이징이 가능한데 아래부터 주요 옵션을 살펴보자.
* 경로 : 워드프레스 대시보드 – 왼쪽 플러그인 – Installed Plugins – 쉬운 목차 ‘Settings’

– Position : 목차 박스의 위치 설정 (기본은 본문 첫 헤딩 위)
– Show when : 헤딩이 몇 개 이상일 때 목차를 보일 지 설정
– Display Heading Label : 옵션 해제 시 목차 박스의 ‘Table of Contents’ 안 보임
– Header Label : 목차 박스의 ‘Table of Contents’ 문구 변경 (ex – 목차)

– Toggle View : 옵션 해제 시 목차 박스의 토글 화살표 감춤
– Initial View : 옵션 체크 시 목록을 감추고 토글 클릭 시 목차가 열림
* 위 옵션을 체크하면 모바일/PC 따로 설정 가능
– Show as Hierarchy : 옵션 해제 시 소제목이 크기와 상관 없이 일렬로 나열 (계층화 삭제)
– Counter : 목차 박스 소제목 앞의 숫자를 다양한 기호·문자로 변경

– Device Target : 목차 박스를 어떤 기기에서 보여줄 지 설정(Select 기본 상태로 두면 모바일/PC 둘 다 적용)
– Headings : 본문 내 어떤 소제목(H1~H6) 크기를 목차 박스에 보일 지 설정 (예로 H2, H3만 체크하면 나머지 크기의 소제목은 TOC 박스에 안 나옴)


마지막으로 Sticky TOC 옵션을 체크하면 PC 화면 좌측 왼쪽에 TOC 버튼이 유저를 따라 다닌다.

Index 버튼을 클릭하면 화면 왼쪽에 길게 TOC 공간이 열린다.
모든 옵션 체크를 마쳤다면 플러그인 설정 화면을 맨 아래로 내려서 왼쪽의 ‘Save Changes’ 버튼을 클릭하면 적용할 수 있다.
* 설정 화면의 Appearance 목록에서 Alignment 메뉴의 Left, Center, Right 값을 설정하면 본문 내 목차 박스 위치를 조정할 수 있다
관련 글
워드프레스 관련 글 모음