Wordpress Easy Table of Contents(TOC) 플러그인 설치 및 기본설정

 

개요

TOC란 웹문서의 목차를 말합니다. 위키백과나 나무위키 등에서 흔히 볼수 있습니다. 워드프레스의 페이지나 포스트의 컨텐츠를 작성하고 HTML을 이용해서 목차를 직접 생성 해줘도 되지만 여간 귀찮은 일이 아닐 수 없습니다. TOC플러그인은 HTML의 H태그를 이용해서 목차를 자동으로 생성 해줍니다. 그중 간단하게 설정해서 사용 할 수 있는 플러그인중 하나인 Easy Table of Contents 플러그인을 설치후 설정 해보겠습니다.

 

나무위키의 TOC

위키피디아의 TOC

 

 

플러그인 설치

먼저 워드프레스 관리자 화면에서 플러그인 메뉴 하단의 새로추가 버튼을 클릭 합니다.  워드프레스 플러그인의 종류는 다양하며, 많은 플러그인중 필요한 플러그인을 고르기란 참 쉽지가 않은것 같습니다. 직접 하나씩 설치해서 사용을 해보는 수 밖에 없는데.. 종류가 너무 많아서 모두 사용 해보기에는 한계가 있겠지요.. 

 

검색창에 Easy Table of Contents 를 입력후 검색 해주세요. TOC 플러그인은 여러 종류가 있지만 이 플러그인은 설정이 간편해서 저는 자주 사용하고 있습니다.

 

 

플러그인을 설치후 활성화 버튼을 클릭하면 워드프레스 관리자 화면에서 설정>Table of Contents 메뉴가 활성화 됩니다.

위 화면은 설치하면 나오는 기본 화면 입니다. 아쉽게도 전체 한글화는 되어있지 않네요.

그렇지만 크게 어려운 내용이 없어서 하나씩 설정 하면서 플러그인을 사용 하면 됩니다.

 

저는 페이지와 포스트에만 적용하기 위해서 다음과 같이 체크박스를 활성화후 적용을 하였습니다.

 

 

일반 설정 메뉴

일반 설정에서 다음과 같은 옵션을 지정할 수 있습니다

• Enable Support : 어느 유형의 페이지에 TOC를 적용 할 것인가에 대한 설정
• Auto Insert : TOC 자동 적용 여부
• Position : TOC를 삽입할 위치 입니다. 첫번째 제목앞, 첫번째 재목뒤, 맨위, 맨아래 옵션을 선택할수 있습니다
• Show when : 제목이 몇개 이상 있을때 보여줄것인가를 설정. 기본값은 4개 입니다.
• Display Header Label : 목차의 헤더를 표시할것인가에 대한 설정 입니다
• Header Label : 목차의 헤더에 적용될 라벨을 설정 합니다. 기본값은 Table of Contents이지만 한글도 지원 합니다.
• Toggle View : 보이기/숨기기 기능
• Initial View : 페이지의 초기 랜더링시 숨길것인지에 대한 설정
• Show as Hierarchy : 계층구조로 표시
• Counter : 표시 숫자의 형태
• Smooth Scroll : 목차 클릭시 본문으로 이동할때 부드러운 스크롤을 설정 할 것인가에 대한 내용 입니다.

저는 다음과 같이 세부 사항을 설정하고 저장 하였습니다.

 

TOC 작동 확인

TOC 플러그인 설정을 마쳤다면 잘 동작 하는지 테스트를 해보겠습니다.

워드프레스에서 새로운 포스트를 하나 발행 하는데 H태그를 이용해서 소제목을 작성 하면서 문서를 만들어 갑니다.

 

먼저 제목을 입력하고, 일반 텍스트 블럭으로 내용을 입력하였습니다.

 

 

제목으로 사용될 글자를 입력후 블럭의 형태를 제목으로 변경 합니다. 제목 블럭에서는 H1, H2, H3, H4, H5, H6 태그를 선택할 수 있으며, 이때 선택된 태그들을 기초로 TOC가 작동하여 제목의 계층을 자동으로 표시 해줍니다.

 

이런식으로 H태그를 이용하여 제목을 입력하고 내용을 작성 합니다. 이제 TOC가 작동 하는지 보기 위해 미리보기 버튼을 이용하거나 공개 버튼을 이용해서 게시글을 발행 합니다.

 

보이시나요? 저는 게시글 본문에 입력하지 않은 목차가 자동으로 만들어져서 상단에 자리잡고 있습니다.

 

 

접기/펼치기 버튼도 잘 동작 하구요. 목차에서 제목을 클릭하면 그에 해당하는 위치로 스크롤도 되는것을 확인 할 수 있습니다. H태그만 입력해주면 그럴싸한 목차가 자동으로 생성되니 너무 좋은 기능의 플러그인 입니다. 티스토리 블로그에도 TOC기능을 주입할 수 있지만 JS파일을 업로드하고, HTML과 CSS를 설정해야 하는 번거로움이 있습니다. 하지만 워드프레스는 플러그인을 설치하고 클리 몇번 만으로 잘 동작하는 TOC가 설치 됩니다.

 

마치며

TOC는 컨텐츠를 소비하는 사용자에게 편리한 기능을 제공 해줍니다. 더불어 검색엔진의 입장에서 잘 정돈된 웹문서로 인식 시켜 줄수도 있는 기능입니다. TOC의 링크를 클릭하는 시점에서는 javascript만 동작해서 컨텐츠간의 innerLink 액션에는 속하지 않지만 플러그인을 더 많이 연구를 한다면 대형 포털의 클릭로그를 수집하는 용도로도 활용 해볼 수 있는 기능 입니다. 다음 시간에는 워드프레스 안에서 관련된 글을 목차 형태로 만들어 주는 Yet Another Related Posts Plugin 플러그인에 대해서 알아 보겠습니다.