목차
긴 콘텐츠용 클릭 가능한 제목 개요를 만들고, 표시 위치와 모양, 개별 글의 동작 방식을 제어하세요.
개요
목차는 콘텐츠에서 제목을 추출해 클릭 가능한 목록을 만듭니다. 긴 글, 튜토리얼, 가이드, 문서 페이지에서 빠른 섹션 이동이 필요할 때 적합합니다.
관리 경로: Airygen SEO -> 설정 -> 목차
이 모듈은 자동 삽입, 수동 배치, 글별 제어, 스타일 프리셋, 게시 전 결과를 확인하는 미리보기 영역을 지원합니다.
설정
이 페이지는 설정, 레이아웃, 미리보기로 나뉩니다.
설정 탭
이 탭에서는 출력 방식, 적용 범위, 구조, 동작, 앵커 규칙을 제어합니다.
수동 출력
- 목차 수동 출력 활성화를 켜면 템플릿 함수, 숏코드, 블록으로 TOC를 배치할 수 있습니다.
- 템플릿 함수는 TOC를 테마 템플릿 안에 넣고 싶을 때 유용합니다.
- 숏코드는 본문이나 숏코드 블록 안에 TOC를 넣고 싶을 때 유용합니다.
- 블록은 블록 편집기에서 시각적으로 배치할 때 유용합니다.
템플릿 함수:
<?php if ( function_exists( 'airygen_the_toc' ) ) { airygen_the_toc(); } ?>
숏코드:
[airygen_toc]
블록:
<!-- wp:airygen/toc /-->
자동 삽입
- 목차 자동 삽입 활성화는 조건을 만족하는 글에 TOC를 자동 삽입합니다.
- 삽입 위치는 콘텐츠 이전과 첫 번째 단락 다음을 지원합니다.
섹션 제목
- 제목은 TOC에 보이는 제목 표시 여부를 제어합니다.
- 제목 텍스트 필드는 목록 위에 표시할 문구를 바꿉니다.
- 제목 레벨 필드는 제목에 사용할 HTML 헤딩 레벨을 바꿉니다.
범위
- 포함할 게시물 유형은 어떤 글 유형에서 TOC 출력이 가능한지 결정합니다.
구조
- 최소 제목 수는 충분한 제목 수가 있을 때만 TOC를 표시합니다.
- 제목 수준은 TOC 목록에 H2, H3, H4를 포함할 수 있게 합니다.
동작
- 부드러운 스크롤은 방문자가 TOC 링크를 클릭할 때 부드럽게 이동합니다.
- 번호 매기기 추가는 목록을 번호형 개요로 바꿉니다.
- 로드 시 접기는 TOC를 접힌 상태로 시작합니다.
앵커
- 앵커 접두사는 생성된 제목 ID에 접두사를 붙여 충돌을 줄입니다.
- 제외할 제목은 입력한 쉼표 구분 문구와 일치하는 제목을 건너뜁니다.
레이아웃 탭
이 탭에서는 TOC의 시각적 스타일을 바꿉니다.
테마
- 스노우 슬레이트는 중립적인 흰색과 슬레이트 계열 스타일을 제공합니다.
- 허니 페이퍼는 따뜻한 종이 느낌의 스타일을 제공합니다.
- 스카이 브리즈는 밝은 파란색 계열 스타일을 제공합니다.
- 민트 캄은 부드러운 녹색 계열 스타일을 제공합니다.
- 로즈 블러시는 연한 분홍색 계열 스타일을 제공합니다.
- 라벤더 미스트는 연한 보라색 계열 스타일을 제공합니다.
스타일
- 헤더 제어에서는 제목 컨테이너의 테두리 두께, 테두리 스타일, 둥근 모서리, 테두리 색, 패딩, 마진, 배경색, 제목 색, 제목 글꼴 크기, 제목 글꼴 스타일을 바꿀 수 있습니다.
- 본문 제어에서는 TOC 컨테이너의 테두리 두께, 테두리 스타일, 둥근 모서리, 테두리 색, 패딩, 마진, 배경색을 바꿀 수 있습니다.
- 링크 제어에서는 TOC 링크 색상, 글꼴 크기, 굵게, 기울임꼴, 밑줄 스타일을 바꿀 수 있습니다.
- 목록 제어에서는 TOC 목록의 내부 들여쓰기를 바꿀 수 있습니다.
미리보기 탭
이 탭은 노트북, 태블릿, 휴대전화 미리보기에서 TOC를 검토할 때 사용합니다.
- 미리보기는 의도적으로 단순화되어 있습니다.
- 최종 프런트엔드 출력은 테마의 영향을 계속 받을 수 있습니다.
- 화면에는 생성된 HTML 및 CSS 샘플도 표시됩니다.
편집기 패널
블록 편집기에서 TOC 패널은 전역 기본값을 바꾸지 않고 한 글만 제어할 수 있게 합니다.
- 목차 표시 모드는 자동, 수동, 비활성화를 지원합니다.
- 모드가 수동일 때는 목차 삽입 버튼이 블록과 숏코드용으로 표시됩니다.
사용 방법
- Airygen SEO -> 설정 -> 목차를 엽니다.
- 설정 탭에서 목차 수동 출력 활성화, 목차 자동 삽입 활성화, 또는 한 가지 방식만 사용할지 결정합니다.
- 수동 배치를 원하면 수동 출력을 켜고 워크플로에 맞는 템플릿 함수, 숏코드, 블록 스니펫을 복사합니다.
- 자동 배치를 원하면 자동 삽입을 켜고 콘텐츠 이전 또는 첫 번째 단락 다음 중 삽입 위치를 선택합니다.
- TOC 위에 보이는 제목이 필요하다면 제목 표시를 켜고 제목 텍스트와 제목 레벨을 설정합니다.
- 범위에서 TOC를 표시할 글 유형을 선택합니다.
- 구조에서 최소 제목 수를 정하고 포함할 제목 레벨을 선택합니다.
- 동작에서 부드러운 스크롤, 번호 매기기, 접힘 모드를 사용할지 결정합니다.
- 앵커에서 앵커 접두사를 정하고 제외할 제목을 입력합니다.
- 레이아웃을 열어 프리셋 테마를 고르고, 제목 영역, 본문 컨테이너, 링크, 목록 간격을 세밀하게 조정합니다.
- 필요하면 특정 글을 편집기에서 열어 목차 표시 모드를 자동, 수동, 비활성화 중 하나로 바꿉니다.
- 설정을 저장하고 미리보기 탭을 검토한 뒤, 제목 수가 충분한 실제 글에서 최종 결과를 확인합니다.
저장 후에는 다음 항목을 확인하세요.
- TOC가 최소 제목 수 조건을 만족하는 글에만 나타납니다.
- TOC 링크를 클릭하면 독자가 올바른 섹션으로 이동합니다.
- 글별 목차 표시 모드가 해당 글에서 선택한 방식과 일치합니다.
- 테마 CSS가 적용된 뒤에도 실제 페이지가 올바르게 보입니다.
SEO 이점
좋은 목차는 긴 콘텐츠를 더 빠르게 훑어보고 더 쉽게 탐색하게 만듭니다. 이는 독자가 원하는 섹션에 더 빨리 도달하도록 돕고, 긴 형식의 페이지 구조를 더 명확하게 보여 줍니다.
활용 사례
긴 튜토리얼 글
이전에는 설치 가이드에 많은 섹션이 있어도, 독자가 원하는 단계 하나를 찾으려면 전체를 계속 스크롤해야 했습니다.
이후에는 목차가 제목을 클릭 가능한 개요로 바꿔 설치, 예시, 문제 해결 섹션으로 바로 이동하게 해 줍니다.
문서 및 지식 베이스 페이지
이전에는 지원 문서가 이미 좋은 제목 구조를 갖고 있어도, 처음 여는 사용자에게는 여전히 무겁게 느껴졌습니다.
이후에는 TOC가 페이지 구조를 즉시 보여 주어, 사용자가 세부 내용을 읽기 전에 전체 흐름을 먼저 이해할 수 있게 해 줍니다.
자주 묻는 질문
어떤 글에는 TOC가 왜 나타나지 않나요?
최소 제목 수 값, 선택한 제목 수준, 허용된 포함할 게시물 유형, 글별 목차 표시 모드를 확인하세요.
자동 삽입과 수동 배치 중 무엇이 더 좋나요?
많은 글에 최소한의 작업으로 TOC를 추가하려면 자동 삽입이 좋고, 정확한 위치 제어가 필요하면 수동 배치가 좋습니다.
미리보기와 실제 페이지가 다른 이유는 무엇인가요?
미리보기는 단순화된 참고 화면입니다. 최종 프런트엔드 결과는 테마와 실제 글 내용의 영향을 받으므로, 항상 실제 페이지에서 확인해야 합니다.