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

Mar 4, 2023 | 0 comments

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

Learn more on this topic

Related Blog Posts

워드프레스 디버깅

워드프레스 디버깅

워드프레스는 기본적으로 최초 발행일을 표시하게 되어있다. 하지만 난 최초 발행일 뿐만 아니라 최종 수정시점을 표시하기 위해 아래 포스팅에서 작성한 것처럼 마지막 수정일 포함해서 반환하게 수정했었다 https://blog.kkomzi.net/24777 그 이후 며칠 아무 이상 없이 사이트가 잘 작동하는 줄 알았다 하지만 언제 부턴가 관리자 Dashboard 페이지가 일부만 표시되고 나머지 위젯들이 표시가 되지 않았다 정상적인 상황에서는 Site Health Status 가...

read more
워드프레스에서 특정 블럭이 포함된 글을 찾아서 불필요한 블럭 플러그인 정리하기

워드프레스에서 특정 블럭이 포함된 글을 찾아서 불필요한 블럭 플러그인 정리하기

Wordpress 를 사용하면서 필요한 Block 을 찾기 위해서 여러가지 플러그인을 설치하며 사용해 보고 있습니다. 이전에 설치한 플러그인 중에 정리를 하고 싶은데 이미 다른 포스팅에 사용한 적이 있다면 해당 포스트를 검색해서 대체 가능한 블록으로 모두 교체해 준 다음 폴러그인을 삭제하고자 합니다. 검색을 해보니 DB 에서 특정 텍스트를 찾아주는 플러그 인도 있었습니다. 하지만, 특정 Block 를 정확히 지정해서 찾아주는 무료(유료조차 찾을 수 없었음) 플러그인을 찾지...

read more
워드프레스 대표 이미지 사이즈 조정 방법 수정하기

워드프레스 대표 이미지 사이즈 조정 방법 수정하기

포스트 상단에 표시되는 Feather image 의 경우 테마 또는 기타 설정에 따라 다르게 표시되겠지만 현재 사용 중인 테마에서 작은 이미지가 등록된 경우 원본 이미지의 사이즈 보다 크게 확대가 되면서 비트맵 이미지의 특성으로 인해 깨져 보일 수 밖에 없습니다. 그래서 Additional CSS 에 다음과 같이 CSS 를 추가해서 좀 더 자연스럽게 표시될 수 있게 수정하였습니다. object-fit - CSS: Cascading Style Sheets | MDN...

read more

Join in the conversation

Leave a Comment

0 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

무료 온라인 전광판

전광판

텍스트를 입력하고 텍스트 효과 및 배경효과 를 변경해서 전체화면으로 표시할 수 있는 전광판 용도로 사용하실 수 있습니다. 각종 스포츠 및 공연 관람시 응원 용도로 사용이 가능합니다.

Carousel

여러개의 슬라이드를 추가하여 프레젠테이션 및 이미지 슬라이드 용도로 사용하실 수 있습니다. 브라우저가 포함된 IT 기기로 큰 모니터에 연결하여 매장 내 공지사항 및 메뉴소개를 이미지로 표시할 수 있습니다.

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares