긴 콘텐츠를 게시하는 경우 목차를 추가하면 검색 엔진과 방문자 사람이 콘텐츠를 탐색하고 이해할 수 있습니다.

위젯으로 WordPress 용 목차 위젯, 쉽게 목차를 추가할 수 있습니다. 웹 사이트 콘텐츠의 제목 태그 계층 구조를 기반으로 콘텐츠를 자동으로 생성합니다.

파 exemple :

표 내용을 추가하는 방법 wordpress elementor blogpascher 태그

의 시각적 테마 빌더와 함께 이 위젯을 사용하는 경우 Elementor Pro를 사용하면 손가락 하나 까딱하지 않고도 모든 콘텐츠에 목차를 자동으로 추가할 수 있습니다. 방문자가 목차의 링크를 클릭하면 앵커 역할을 하여 페이지의 해당 섹션으로 이동합니다.

이 게시물에서는 위젯을 구성하는 방법을 정확하게 보여줍니다. WordPress 용 목차 위젯Elementor 테마 빌더.

하지만 전에는 함께 알아 봅시다 워드 프레스 블로그 7 단계를 설치하는 방법 et 어떻게 찾아 설치하고 블로그에 워드 프레스 테마를 활성화하려면.

그런 다음 왜 우리가 여기 있는지 다시 돌아옵니다.

Elementor로 목차를 추가하는 방법

우선, 이 위젯을 기본적인 방식으로 사용할 수도 있다는 점에 유의해야 합니다. 그러나 이 튜토리얼에서는 다음을 사용하여 콘텐츠 전체(또는 일부)에 목차를 자동으로 추가하는 데 중점을 둡니다. Elementor 테마 빌더 및 고유한 게시물 템플릿.

방법은 다음과 같습니다.

1. 단일 게시물 템플릿 생성 또는 수정

시작하려면 Elementor Theme Builder를 사용하여 새로운 고유 게시물 템플릿을 만들거나 목차를 추가하려는 기존 고유 게시물 템플릿을 편집하십시오.

템플릿을 모든 유형의 게시물 (블로그, 페이지, 사용자 지정 게시물 유형)에 적용 할 수 있지만 블로그 게시물에 중점을 둘 것입니다.

2. 목차 위젯 추가

고유 한 게시물 템플릿을 연 후 위젯을 추가하세요. 내용의 테이블 목차를 표시하려는 위치. 게시물 제목 및 게시물 콘텐츠에 대한 위젯과 함께 고유 카테고리에 있습니다.

표 내용을 추가하는 방법 WordPress elementor blogpascher 1

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

이제이 위젯의 ​​설정을 구성 할 차례입니다.

3. 위젯 테이블 구성

목차 위젯에 대한 설정을 열어야합니다. 그런 다음 탭을 사용하십시오. 내용 목차에 표시되는 콘텐츠를 구성합니다.

먼저 제목을 추가합니다 (예 : "목차"). 위젯이 자동으로 생성하는 앵커 링크 목록 위에 표시되는 정적 텍스트입니다.

그런 다음 포함 할 콘텐츠를 선택합니다. 탭에서 포함, 당신은 들어올 수 있습니다 :

  • HTML 태그. 예를 들어 다음을 포함 할 수 있습니다. 과,하지만 그 이하는 아닙니다. WordPress 편집기에서 제목 태그를 정의해야합니다.
  • 용기. 게시물 콘텐츠 외부의 다른 컨테이너에 앵커 링크를 추가 할 수도 있습니다. 예를 들어, 발 발가락. 이것은 고급 기능입니다.

표 내용을 추가하는 방법 WordPress elementor blogpascher 2

탭에 액세스하는 경우 들어오지 못하게 하다, CSS 선택기를 사용하여 게시물에서 특정 헤더를 제외 할 수 있습니다. 예를 들어, 단일 제목을 제외하려는 경우 , 특별한 CSS 클래스를 추가 할 수 있습니다. " 무시 WordPress 편집기를 사용하여 해당 헤더에 다음 규칙을 사용하여 제외합니다.  선택 기별 앵커 :

표 내용을 추가하는 방법 WordPress elementor blogpascher 3

그런 다음 매개 변수를 사용할 수 있습니다. 마커보기 목차 목록에서 숫자와 글 머리 기호 중에서 선택합니다. 선택하면 " 글 머리 기호 ", Font Awesome 아이콘에서 선택할 수 있습니다.

마지막으로 섹션을 사용할 수 있습니다. 추가 옵션 다른 매개 변수를 제어하려면 :

워드 랩 -요소가 여러 줄을 취할 수 있는지 여부.

상자 최소화 - 만약 방문자 목차를 줄일 수도 있고 줄이지 않을 수도 있습니다. 이 옵션을 활성화하면 사용자 정의 아이콘을 선택하고 반응형 동작을 설정할 수도 있습니다. 예를 들어 다음의 목차를 자동으로 접을 수 있습니다. 방문자 모바일.

계층 적보기 -활성화되면 부제목이 상위 제목 아래에 들여 쓰기됩니다. 비활성화 된 경우 모든 항목이 들여 쓰기없이 단일 목록에 표시됩니다.

표 내용을 추가하는 방법 WordPress elementor blogpascher 4

4. 스타일 설정 구성

그런 다음 스타일 탭으로 이동하여 목차 디자인을 구성합니다. 모든 색상과 타이포그래피를 변경하여 사용자 친화적인 경험을 만들고 나머지 디자인과 일치시킬 수 있습니다. 웹 사이트 :

표 내용을 추가하는 방법 WordPress elementor blogpascher 5

5. 고급 설정 구성

완료하려면 탭으로 이동하세요. 고급 목차 작동 방식에 대한 몇 가지 추가 설정을 구성합니다.

예를 들어,   동일 관습 et 위치 동일 Fixed 섹션 고정 정밀도, 사용자가 페이지를 스크롤하기 시작하더라도 목차가 동일한 위치에 유지되도록 할 수 있습니다.

당신이 사용하는 경우 고정 정밀도 헤더와 같은 다른 요소 위에 목차를 표시하려면 Z 색인을 늘려 상단에 표시 할 수도 있습니다.

표 내용을 추가하는 방법 WordPress elementor blogpascher 6

그리고 그게 전부입니다 ! Elementor Visual Theme Builder 및 Table of Contents 위젯을 사용하여 콘텐츠에 자동으로 목차를 추가하는 방법을 배웠습니다.

시작하려면 Elementor 프로 오늘 목차를 만드십시오. Elementor 테마 빌더.