워드프레스에서 글 목차(TOC)를 생성하는 방법으로 여러가지 방법이 있지만, 목차 플러그인을 사용하는 것이 여러모로 작업 속도와 관리면에서 편리한 점이 많은데요. 이번 포스팅에서는 Easy Table of Contents 플러그인을 활용해서 간단하게 목차를 생성하는 방법과 플러그인의 주요 기능들에 대해서 알아보겠습니다.
워드프레스 목차란?
워드프레스 목차(Table of Contents)란 글이나 페이지의 제목(H 태그)이 나열된 본문 바로가기 링크를 말합니다. 방문자는 목차를 통해 글의 흐름과 방향성, 전체적인 맥락을 유추할 수 있으며, 목차 링크를 통해 본문 내 원하는 특정 콘텐츠로 간편하게 이동할 수 있습니다.
워드프레스 목차를 사용해야 되는 이유
목차를 사용해야 되는 가장 중요한 이유는 사이트 SEO에 도움이 되기 때문입니다. 목차를 통해 방문자는 원하는 콘텐츠로 쉽게 도달할 수 있어 이탈률을 줄일 수 있고, 방문자가 목차를 클릭하여 얻는 CTR 지수 또한 사이트 SEO 순위에 긍정적인 요소로 작용하게 됩니다. 또한 검색 엔진 추천 스니펫에도 포함되는 경우도 있기 때문에 SEO를 위해 필수로 사용하는 것이 좋습니다.
워드프레스 목차 만드는 방법(목차 플러그인)
워드프레스에서 목차를 만드는 방법으로 HTML 코드, 블록 플러그인, 목차 전용 플러그인 등 다양한 방법이 있습니다. 이 중 제일 간단하고 관리하기 편리한 방법은 목차 전용 플러그인을 사용하는 방법인데, 그 이유로는 코드를 작성할 필요가 없으며, 또한 목차와 관련된 설정을 플러그인 설정 페이지를 통해 쉽게 관리할 수 있다는 장점이 있습니다.
목차 플러그인의 경우, 사이트의 대부분의 페이지에서 작동되기 때문에 신중하게 선택하시는 것이 좋은데요. 갑자기 지원을 중단할 수 있는 플러그인이나 버그 및 오류 등을 발생시키는 플러그인을 미래를 위해 피하시는 것이 좋습니다.
다양한 목차 플러그인이 있지만, Easy Table of Contents 플러그인을 추천 드리는 이유로는 400,000개가 넘는 사이트에서 활성화된 검증된 플러그인이라는 점, 사용 방법과 설정 변경이 쉽다는 점, 꾸준한 업데이트를 통해 버그 및 성능 개선이 지속적으로 이뤄지는 활발한 플러그인이라는 점 등이 있습니다.
Easy Table of Contents 플러그인
✔️활성화 수 400,000+
Easy Table of Contents 플러그인은 워드프레스에서 가장 많이 사용되는 목차 생성 플러그인 중 하나입니다. 주요 기능으로는 자동 목차 생성, 개별 H 태그 설정, 고정 목차, 쇼트코드, 편집기 메타 박스 등 다양한 기능을 지원하며, 대부분의 기능을 설정 페이지에서 변경할 수 있어 초보자도 어렵지 않게 사용할 수 있다는 점이 장점인 플러그인입니다.
Easy TOC 플러그인 설치 방법
관리자 페이지 > 플러그인 새로 추가로 이동한 후, Easy Table of Contents를 검색하여 플러그인을 설치하실 수 있습니다.
Easy TOC 플러그인 글 목차 생성 방법
Easy table of contents는 플러그인 활성화와 동시에 자동으로 목차가 생성되며, 목차의 삽입 위치, 제목, 카운터 모양, 너비, 테마, 폰트 크기, 색상, 펼치기 및 접기 등을 플러그인 설정 페이지에서 개별로 설정하실 수 있습니다.
TIP: 만약에 목차가 보이지 않는 경우, 캐시 플러그인에서 캐시 삭제를 진행해 보시기 바랍니다.
Easy TOC 플러그인 설정 방법
플러그인의 기본 설정들에 대해서 알아보겠습니다. 목차에 표시할 H태그, 플로팅 목차, 테마 변경 등 다양한 설정을 하실 수 있는데요. 아래에서 종류 별로 하나씩 알아보겠습니다.
- [관리자 페이지 > 설정 > 쉬운 목차(Easy TOC)로 이동]
TIP: 설정 페이지에서 CTRL+F를 활용하시면 찾고자 하는 설정 항목을 더 빠르게 찾을 수 있습니다.
목차 삽입 위치 설정
설정 페이지의 위치 항목에서 목차를 삽입할 위치를 설정하실 수 있습니다. 일반적으로 첫 머리글 앞 또는 첫 단락 이후로 설정하여 사용하시면 글이나 페이지의 소개 글 이후에 목차를 표시하실 수 있습니다. 또한 단락 번호로 설정하여 특정 단락 뒤에 삽입하는 방법도 있습니다.
- 첫 머리글 앞(기본)
- 첫 머리글 이후
- 첫 단락 이후
- 단란 번호 뒤
- 맨 위
- 맨 아래
목차 펼치기 및 접기
설정에 따라 목차를 펼치거나 접은 상태로 표시할 수 있습니다. 설정 페이지의 초기 보기 항목으로 이동하여 목차를 접은 상태로 표시하고 싶은 경우, ‘처음에는 목차를 숨깁니다.’ 를 체크하시면 됩니다.
목차 제목 변경하기
플러그인 설치시 목차 제목이 Table of Contents로 기본 설정되어 있습니다. 한글로 제목을 변경하고 싶은 경우, 헤더 라벨의 값에 “목차”라고 입력하여 변경해주시면 됩니다.
목차 카운터 모양 변경하기
카운트 항목에서 목차 리스트에 앞에 표시되는 카운터 모양을 변경하 실 수 있습니다. 또한 H태그 구분을 위해 계층으로 표시는 활성화하시는 것이 좋습니다.
- 계층으로 표시: 활성화
목차 너비 및 정렬 변경하기(전체 너비)
너비와 조정 항목에서는 표시되는 목차의 너비와 정렬을 변경하실 수 있습니다. 특수한 상황이 아닌 경우, 고정 값 보다는 상대적인 값으로 설정하여 반응형으로 사용하시는 것을 추천드립니다. 컨테이너 전체 너비로 변경하고 싶으신 경우 100%로 설정하시면 됩니다.
- 상대적인 값 사용하기
목차 폰트 크기 변경하기
글꼴 옵션 항목에서, 목차에 표시되는 제목 및 하위 글꼴 폰트 크기를 변경하실 수 있습니다.
- 제목 크기: ‘목차’와 같이 리스트 위에 표시되는 목차 제목입니다.
- 글꼴 및 하위 글꼴: 목차 제목 밑에 표시되는 링크 리스트입니다.
목차 테마 및 폰트 색상 변경하기
플러그인에서 기본으로 제공하는 목차 테마를 정리해 봤습니다. 회색, 하늘색, 하얀색 ,검은색 ,투명, 사용자 정의 등 총 6가지 옵션이 있으며, 아래와 같이 목차의 기본 테마 색상을 변경하실 수 있습니다.
아래 맞춤 테마 항목으로 이동하면 배경색, 테두리, 제목, 링크, 호버, 방문한 링크 등의 색상을 개별로 변경하실 수 있습니다. 플러그인에서 제공하는 디자인 옵션 외 다른 스타일 적용하고 싶으신 경우, CSS 코드를 활용하는 방법이 있는데 이 부분에 대해서는 다음 기회에 자세하게 다뤄보겠습니다.
프로필 백업 및 복원 방법
설정 가져오기/ 내보내기 항목에서는 프로필을 설정 값을 PC에 저장하실 수 있습니다. 프로필을 백업해 두시면 다른 사이트에서도 가져오기를 통해 설정 값을 그대로 불러올 수 있습니다.
Easy TOC 유용한 추가 설정 및 기능
아래에서는 알아 두시면 유용한 Easy TOC 플러그인의 유용한 기능들에 대해서 알아보겠습니다.
Easy TOC 고정 목차 만들기
원래 위젯과 CSS 코드를 활용해서 플로팅 목차를 만드는 방법에 대해서 자세하게 다뤄볼 예정이었는데, 플러그인이 업데이트 되면서 고정 목차(Sticky TOC) 기능이 새롭게 추가되었습니다. 고정 목차 기능을 사용하고 싶으신 경우, 플러그인 설정 페이지에서 Sticky TOC 항목을 찾아서 체크하여 사용하실 수 있습니다.
목차에 표시할 H 태그 지정하기
설정 페이지의 제목 항목에서는 목차에 표시할 H 태그를 기본 값을 설정하실 수 있으며, 제목 제외 항목에서는 특정 텍스트가 포함된 제목을 목차에서 제외시킬 수 있습니다.
보통 H6 태그까지 모두 사용하는 경우는 많이 없기도 하고, H2~H3 태그가 중요하기 때문에 필요하지 않은 경우, H4 부터는 숨김 처리해서 목차를 더 깔끔하게 표시하는 방법도 있습니다. 다만 기본 설정으로는 모두 활성화해 두시고 아래 블록 편집기의 메타박스를 활용해서 페이지 별 개별 설정하시는 것을 추천드립니다.
블록 편집기 메타박스 활용하기(H 태그 지정)
블록 편집기 화면 하단의 플러그인 메타 박스를 통해, 해당 페이지 또는 글의 목차 설정을 개별로 변경하실 수 있습니다.
- ① 목차 자동 삽입 비활성화
- ② 표시할 제목 지정
- ③ 처음에는 목차 숨김(접기 및 펼치기)
목차 수동으로 삽입하는 방법(쇼트코드)
프로 버전에서는 Easy TOC 블록을 지원하지만 무료 버전에서는 쇼트 코드를 통해 목차를 수동으로 삽입할 수 있습니다. 설정 페이지의 쇼트코드 항목에서 플러그인 단축 코드를 확인하실 수 있습니다.
[ez-toc]
블록 편집기로 이동한 후, 쇼트코드 블록을 추가합니다. 단축코드 입력란에 위에서 확인한 코드를 입력하고 블록을 원하는 위치로 이동하시면 됩니다.
참고: 수동으로 목차를 삽입 시, 메타박스에서 “목차 자동 삽입을 비활성화합니다”를 체크해주세요.
마치며
워드프레스에서 목차 플러그인을 사용하는 방법과 플러그인으로 목차를 만드는 방법에 대해서 알아봤습니다. 목차는 글을 읽는 방문자에게도 도움이 되지만 사이트 SEO 측면에서도 이점이 많기 때문에 꼭 사용하시는 것을 추천드립니다.