사전 요구사항
- Divi Theme
- 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 항목이 본문 내용을 따라 스크롤 하더라도 항상 우측 상단에 보여지게 됩니다.
또한, 화면을 작게 해 보시면 우측 사이드바에서는 사라지고, 글 상단에만 보여지는 것을 확인하실 수 있습니다.
0 Comments