Elementor를 사용하여 WordPress에 목차를 추가하는 방법

긴 형식의 콘텐츠를 게시하려는 경우, 글에 목차를 추가하면 검색 엔진과 방문자 모두 콘텐츠를 탐색하고 이해하는 데 도움이 됩니다.

Elementor 목차 위젯을 사용하면 콘텐츠 의 제목 태그 순서에 따라 콘텐츠를 자동으로 생성하는 목차 블록을 사이트에 쉽게 첨부할 수 있습니다. 오늘은 설정하는 방법을 배워보겠습니다.

예를 들어:

Elementor pro의 테마 빌더와 함께 이 위젯을 사용하면 번거로움 없이 콘텐츠에 대한 목차를 자동으로 추가할 수 있습니다. 방문자가 목차의 링크를 클릭하면 앵커 역할을 하며 페이지의 해당 섹션으로 이동합니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

이 게시물에서는 Elementor Theme Builder를 사용하여 목차 위젯을 설정하는 방법을 정확하게 살펴보겠습니다.

먼저, 목차 위젯을 하나씩 사용할 수도 있다는 점을 언급하고 싶습니다. 그러나 이 튜토리얼에서는 Elementor Theme Builder 및 단일 게시물 템플릿을 사용하여 콘텐츠 전체( 또는 일부 )에 목차를 자동으로 추가하는 데 중점을 둡니다.

수행 방법은 다음과 같습니다.

1. 단일 게시물 템플릿 생성 또는 편집

시작하려면 Elementor Theme Builder를 사용하여 새로운 단일 게시물 템플릿을 만들거나 목차 위젯을 추가하려는 기존 단일 게시물 템플릿 중 하나를 편집할 수 있습니다.

블로그 게시물, 페이지, 사용자 정의 게시물 등 모든 유형의 게시물에 템플릿을 적용할 수 있습니다. 여기서는 주로 블로그 게시물에 중점을 둘 것입니다.

2. 목차 위젯 추가

단일 게시물 템플릿 제작이 완료되면 목차 위젯을 원하는 위치에 배치하세요. 목차 요소는 게시물 제목 및 게시물 콘텐츠용 위젯과 함께 단일 카테고리에 있습니다.

위젯을 추가하면 현재 편집 중인 게시물에 있는 모든 제목 목록이 자동으로 표시됩니다.

이제 목차 위젯에 대한 설정을 구성해 보겠습니다.

3. 목차 위젯 구성

목차 위젯의 설정이 열려 있는지 확인하세요. 그런 다음 콘텐츠 탭을 사용하여 목차에 표시되는 콘텐츠를 구성합니다.

먼저 제목을 지정합니다. 예를 들어 "목차"는 위젯이 자동으로 생성하는 앵커 링크 목록 위에 표시되는 움직이지 않는 텍스트입니다.

그런 다음 포함하려는 콘텐츠를 선택합니다. 포함 탭에서 다음을 입력할 수 있습니다.

특정 제목 태그. 예를 들어 <h2> 및 <h3> 태그를 포함하고 그 아래에는 아무것도 포함하지 않을 수 있습니다. 물론 WordPress 편집기에서 제목 태그를 설정할 수 있습니다.
기타 컨테이너. 게시물 콘텐츠 외부의 다른 컨테이너에 대한 앵커 링크를 추가할 수도 있습니다. 예를 들어 바닥글이 있습니다. 이는 높은 수준의 기능입니다.

제외 탭으로 이동하려는 경우 CSS 선택기를 사용하여 게시물에서 특정 제목을 제거할 수 있습니다. 예를 들어 단일 <h2> 제목을 제외하려는 경우 WordPress 편집기를 사용하여 해당 제목에 특수 "무시" CSS 클래스를 추가한 다음 선택기 기준 앵커 규칙을 사용하여 제외할 수 있습니다.

다음으로, "마커 보기" 설정을 활용하여 목차 목록의 번호와 글머리 기호 사이를 결정할 수 있습니다. "글머리 기호"를 선택하면 모든 FontAwesome 아이콘 중에서 선택할 수 있습니다.

마지막으로 다양한 옵션 섹션을 사용하여 몇 가지 추가 설정을 제어할 수 있습니다.

단어 줄 바꿈 - 항목이 여러 줄을 차지할 수 있는지 여부입니다.
상자 최소화 - 방문자가 목차를 최소화할 수 있는지 여부입니다. 예를 들어 모바일 방문자를 위해 상자를 자동으로 줄여 시작하도록 할 수 있습니다.
계층적 보기 - 활성화되면 하위 제목이 상위 제목 아래에 들여쓰기됩니다. 내용을 이해하는데 많은 도움이 됩니다.