Divi 테마를 사용하는 경우 무료 Table of Contents 를 유료 처럼 사용해보자

사전 요구사항

1. Divi Theme
2. Table of contents plugin (LuckyWP Table of Contents)

목차를 표시하는 플러그인은 다양합니다.
무료, 유료의 구분에 따라 주어지는 기능도 다양합니다.
굳이 유료를 구매하지 않고도 무료 버전으로 잘 사용 중입니다.
글의 첫 헤더 이전에 자동으로 표시하도록 설정해 놓으면 알아서 글의 내용에 맞게 업데이트 되는 점은 참 마음에 듭니다. 최근에 조금 욕심이 생겨 큰 화면에서는 글 내용을 읽으면서 페이지를 아래로 스크롤 하더라도 우측 사이드바에서 항상 표시되게 하고 싶고
작은 화면에서는 어차피 화면이 작으니 기존처럼 글 내용 상단에만 보여주면 좋을 것 같다고 생각하게 됩니다. 하지만, 현재 사용 중인 플러그인 에서는 지원하지 않고 그렇다고 굳이 다른 유료 플러그인으로 갈아 타는 것도 번거로울 것 같아서
현재 사용 중인 테마(Divi) builder 의 힘을 빌려 적용해 보았습니다. 원래는 Post 가 아닌 특정 Project 에 적용하기 위해 Theme builder 에서 특정 Project 만 적용해서 사용했습니다.
이 글은 예시를 보여주기 위해 기본 블럭 에디터가 아닌 테마 빌더로 작성한 포스트 입니다.

새 Post 작성

새 글을 추가합니다.

Post 설정 수정

Post 설정에서 Table of Contents 설정을 다음과 같이 변경합니다.
Processing 만 활성화 한 상태에서 자동으로 본문에 추가되지 않게 설정했습니다.

Divi Builder 편집 모드 진입

Divi Builder 편집 화면에서 New Section 탭에 Specialty 을 선택한 다음 우측 사이드바가 있는 레이아웃을 추가해 줍니다.

Table of Contents 추가

Text 모듈을 추가한 다음 Body 에서 Visual 아닌 Text 탭을 클릭해서
Text 입력 창에 Table of Contets 의 Shortcut code(lwptoc) 를 입력해 줍니다.

레이아웃 배치

동일한 모듈을 복제해서 2개를 만들어 줍니다.
그리고, 레이아웃 배치를 다음과 같이 TOC-Body 와 TOC-Sidebar 2 군데로 나누어 줍니다.

모듈 설정 – Visibility

각 모듈 설정에 들어가서 다음과 같이 설정합니다.
Advanced 탭에서 Visibility 항목을 변경하시면 됩니다. TOC-Body 모듈은 Desktop 만 체크합니다.
TOC-Body 의 경우 작은 화면(태블릿, 스마트폰)에서 글 상단에 보여집니다.

TOC-Sidebar 모듈은 Phone, Tablet 을 체크합니다.
TOC-Sidebar 의 경우 큰 화면(데크스탑)에서 사이트에서 본문을 따라 다니면서 항상 보여집니다. 

모듈 설정 – Scroll Effects

사이드바에 위치한 모듈은 페이지 본문을 따라 글 내용을 읽으면서 아래로 스크롤 하더라도 항상 보여지게 설정해야 합니다.
TOC-Sidebar 모듈만 다음과 같이 설정을 수정합니다.
Advanced 탭에서 Scroll Effects 항목을 변경하시면 됩니다.

결과 확인

현재 보고 계신 이 글에서 브라우저 크기를 변경해 보시면
큰 화면에서는 Table of Contents 항목이 본문 내용을 따라 스크롤 하더라도 항상 우측 상단에 보여지게 됩니다.
또한, 화면을 작게 해 보시면 우측 사이드바에서는 사라지고, 글 상단에만 보여지는 것을 확인하실 수 있습니다.