워드프레스 사이드바 플로팅 목차 만들기 (제너레이트프레스 테마)

1. 워드프레스 사이드바 플로팅 목차란?

워드프레스에서 목차는 방문자가 글의 전체적인 흐름을 파악하고 원하는 정보를 빠르게 찾을 수 있도록 돕는 중요한 요소입니다. 일반적으로 페이지 상단이나 머리글 이후에 위치하지만, 스크롤을 내릴 때 다시 확인하려면 페이지 상단으로 돌아가야 하는 불편함이 있습니다. 이를 해결하기 위해 사이드바 플로팅 목차를 활용하면, 사용자가 언제든지 목차를 확인하고 탐색할 수 있는 환경을 구축할 수 있습니다.

이번 글에서는 제너레이트프레스 테마를 활용하여 워드프레스 사이드바 플로팅 목차(고정 목차)를 만드는 방법을 알아보겠습니다.

---

2. 워드프레스 사이드바 목차 만드는 방법

사이드바 목차를 만드는 방법은 크게 두 가지로 나눌 수 있습니다.

1. 위젯을 활용한 방법 (제너레이트프레스 무료 버전 포함 모든 테마 사용 가능)
2. 제너레이트프레스 PRO 버전 기능을 활용하는 방법 (PRO 버전 사용자만 가능)

2.1. 위젯으로 사이드바 목차 만들기

2.1.1. 사이드바 설정하기

1. 관리자 페이지 → 외모 → 사용자 정의하기로 이동합니다.
2. Layout → Sidebars 메뉴에서 ‘Content/Sidebar’로 변경합니다.

2.1.2. 위젯에 목차 삽입하기

1. 사용자 정의 페이지의 초기 화면으로 돌아가서 위젯 → Right Sidebar 메뉴로 이동합니다.
2. + 버튼을 클릭하여 쇼트 코드 블록을 추가하고 아래 코드를 입력합니다.

   [ez-toc]
   

3. 설정을 저장하고 글 페이지를 확인하면 사이드바에 목차가 표시됩니다.

2.1.3. 특정 페이지에서 목차 위젯 숨기기

모든 페이지에서 사이드바 목차가 표시되면 불편할 수 있습니다. 특정 페이지에서 목차를 숨기려면 CSS 코드를 활용하면 됩니다.

• 홈에서 마지막 위젯 숨기기

  body.home .inside-right-sidebar >*:last-child {
      display:none;
  }
  

• 페이지에서 마지막 위젯 숨기기

  body.page .inside-right-sidebar >*:last-child {
      display:none;
  }
  

---

2.2. 제너레이트프레스 테마 기능으로 사이드바 목차 만들기

제너레이트프레스 PRO 버전을 사용하면 더 편리하게 사이드바 목차를 생성할 수 있습니다.

2.2.1. Elements 기능 활용하기

1. 관리자 페이지 → 외모 → Elements로 이동합니다.
2. 새로 생성(Add New Element) → Block 선택 후 생성 버튼을 클릭합니다.
3. Display Rules → Location을 ‘All 글’로 설정하고, Element Type을 ‘Right Sidebar’로 설정합니다.
4. + 버튼을 클릭하여 쇼트코드 블록을 추가한 후, 아래 코드를 입력합니다.

   [ez-toc]
   

5. 공개 버튼을 눌러 설정을 저장합니다.

설정을 완료하면 사이드바 목차가 적용됩니다.

---

3. 워드프레스 사이드바 목차 꾸미기 (CSS 코드 활용)

3.1. 사이드바 목차 너비 변경하기

.inside-right-sidebar #ez-toc-container {
    width: 100%;
    padding: 10px;
}

3.2. 사이드바 위젯 배경 없애기

.inside-right-sidebar >*:last-child {
    background: transparent;
}

3.3. 사이드바 목차 배경 색상 변경하기

.inside-right-sidebar #ez-toc-container {
    background: rgb(36, 34, 39);
}

3.4. 사이드바 목차 폰트 색상 변경하기

.inside-right-sidebar #ez-toc-container {
    color: #ffffff;
}
.inside-right-sidebar #ez-toc-container a {
    color:#ffffff;
}

3.5. 사이드바 목차 아이콘 색상 변경하기

.inside-right-sidebar #ez-toc-container svg {
    color:#ffffff !important;
    fill: #ffffff;
}
.inside-right-sidebar #ez-toc-container label {
    border: 1px solid #ffffff !important;
}

---

4. 워드프레스 사이드바 플로팅 목차 설정 방법

4.1. 자동 삽입 목차 비활성화하기 (사이드바 목차만 사용)

자동으로 삽입되는 본문 목차를 비활성화하려면 아래와 같이 설정합니다.

1. 관리자 페이지 → 설정 → 쉬운 목차(Easy TOC)로 이동
2. 일반 탭 → 자동 삽입 항목을 모두 비활성화

사이드바 목차와 본문 목차를 동시에 사용하는 것도 좋은 방법입니다.

---

5. 마치며

워드프레스에서 사이드바 플로팅 목차를 만드는 방법을 알아보았습니다. 목차는 사용자 경험(UX) 개선뿐만 아니라 SEO 순위에도 긍정적인 영향을 미칠 수 있습니다. 특히, 화면에 항상 표시되는 사이드바 목차는 클릭률(CTR) 향상에도 도움이 되므로 적극 활용해 보시기 바랍니다.

또한, Easy TOC 플러그인 외에도 HTML 코드로 직접 제작하거나 다른 목차 플러그인을 사용할 수도 있습니다. 이 경우, 사용하려는 플러그인이 구텐베르크 블록 또는 쇼트 코드 지원 여부를 확인한 후 사용하시길 추천드립니다.

마지막으로, 사이드바 광고를 사용 중인 경우, 목차 길이에 따라 광고가 가려질 수 있으므로, 광고와 목차를 좌/우 사이드바에 분리 배치하는 것이 좋습니다. 이 외에도 유용한 팁이 있으면 추가로 업데이트하여 공유하겠습니다. 😊