워드프레스 목차 만들기 TOC – Easy Table of Contents

Easy Table of Contents:워드프레스 목차 플러그인으로 SEO와 사용자 편의성 모두 잡기

인터넷에서 정보를 검색하다 보면, 상단에 목차가 정리된 웹페이지를 종종 볼 수 있습니다. 특히, 장문의 글이나 정보가 많은 홈페이지에서는 목차가 방문자에게 큰 편리함을 제공합니다. 워드프레스에서는 별도의 HTML 수정 없이, 플러그인 설치만으로 간단히 목차를 추가할 수 있어 더욱 매력적입니다.

목차의 필요성과 SEO 효과

목차는 단순히 페이지를 깔끔하게 보이게 하는 것 이상의 가치를 제공합니다. 정보성 글이나 단락이 많은 콘텐츠에서는 사용자가 필요한 정보를 빠르게 찾아볼 수 있도록 돕습니다. 이는 방문자의 만족도를 높이고, 사이트 체류 시간을 늘려줍니다.

뿐만 아니라, 목차는 SEO(Search Engine Optimization) 측면에서도 유리한데 검색엔진은 페이지 내 목차를 크롤링하여 콘텐츠 구조를 파악하고, 이를 검색 결과에 반영할 수 있습니다.

이러한 목차는 Table of Contents(TOC)라고 불리며, 이를 구현하면 검색 엔진과 사용자 모두에게 긍정적인 영향을 미치며 기본적으로 아래와 같은 목차플러그인이 있습니다.

플러그인 이름	주요 기능 및 특징	무료/유료
쉬운 목차 (Easy Table of Contents)	H1~H6 헤딩 태그 기반 목차 생성, 다양한 페이지 빌더와 호환, 기본적인 커스터마이징 가능	무료
Table of Contents Plus	긴 페이지나 사용자 정의 페이지용 목차 생성, 사이트맵 기능 제공, 숏코드를 통한 삽입 위치 조정 가능	무료
LuckyWP Table of Contents	로마 숫자 및 번호 매기기 지원, 사용자 정의 가능한 목차 디자인, 숏코드 및 블록 편집기 지원, 사이드바 배치 가능	무료
Fixed TOC	스크롤 고정 목차 제공, 애니메이션 효과 및 다양한 디자인 커스터마이징 가능	유료
AIOSEO	SEO 최적화 플러그인, 목차 생성 기능 포함, 블록 편집기를 통한 삽입 및 이름 변경 가능	무료(기본 기능), 유료(프리미엄 기능)

Easy Table of Contents 목차 플러그인의 간편함

목차를 직접 작성하려면 JavaScript나 HTML을 사용하는 번거로운 과정을 거쳐야 하지만, Easy Table of Contents는 이를 간단하게 해결해주기 때문에 다른플러그인 중에서도 저는 쉬운목차를 4년째 사용하고 있습니다.

간단하게 설치만으로 페이지나 포스트의 헤딩(H1~H6)을 기반으로 목차를 자동 생성할 수 있을 뿐만 아니라 디자인, 위치, 색상 등을 손쉽게 커스터마이즈할 수 있어 사용자 경험을 극대화할 수 있습니다.

Easy Table of Contents가 제공하는 주요 기능

• SEO 최적화: 검색엔진이 쉽게 크롤링할 수 있는 목차 구조 제공.목차 플러그인 Easy Table of Contents
• 자동 생성: H1~H6 태그를 인식하여 목차를 자동 생성.
• 커스터마이즈 옵션: 목차의 스타일, 색상, 위치를 사용자 정의 가능.
• 페이지 빌더 호환성: Elementor, Divi 등 주요 페이지 빌더와 완벽 호환.

그렇기 때문에 워드프레스 플러그인에서 TOC 입력하면 많은 플러그인을 볼 수 있는데 그중에서도 Easy Table of Contents 플러그인을 저는 사용하고 있습니다.

워드프레스 관리자 페이지에서 플러그인 > 새로 추가로 이동.검색창에 “Easy Table of Contents“를 입력하고, 플러그인을 설치 후 활성화합니다.

Easy Table of Contents 기능

사용방법이 매우 간단하고 플러그인을 이용해 게시물, 페이지 및 사용자 정의 게시물 유형에 목차를 삽입 할 수 있습니다.

• 헤더 내용을 파싱하여 게시물, 페이지 및 사용자 정의 게시물 유형에 대한 목차를 자동으로 생성합니다.
• 선택적으로 페이지 및 / 또는 게시물을 사용하도록 설정합니다. the_content()템플릿 태그를 사용하여 콘텐츠를 출력하는 경우 맞춤 게시물 유형이 지원됩니다 .
• 선택 사항으로 목차를 페이지에 자동 삽입합니다. 활성화 된 게시물 유형으로 선택 가능합니다.
• 목차를 삽입 할시기와 위치를 구성하기위한 많은 이해하기 쉬운 옵션을 제공합니다.
• 여러 가지 옵션을 사용하여 삽입 된 목차가 나타나는 방식을 구성 할 수 있습니다. 여기에는 몇 가지 기본 테마가 포함되어 있습니다. 제공된 테마가 필요를 충족시키지 못하면 테두리, 배경 및 링크 색상에 맞는 색상을 선택하여 나만의 테마를 만들 수 있습니다.
• 선택할 수있는 여러 가지 카운터 글 머리 기호 형식; 없음, 10 진수, 숫자 및 로마자.
• 목차를 계층 적으로 표시할지 여부를 선택합니다. 즉, 우선 순위가 낮은 제목은 우선 순위가 높은 제목 아래에 중첩됩니다.
• 사용자는 선택적으로 목차를 숨길 수 있습니다. 이 기능을 완벽하게 제어 할 수 있습니다. 그것은 비활성화 될 수 있으며 기본적으로 숨겨 지도록 선택할 수 있습니다.
• 부드러운 스크롤을 지원합니다.
• 우편으로 게시물의 목차를 선택적으로 활성화 또는 비활성화합니다.
• 목차를 생성하는 데 사용되는 제목을 선택하십시오. 이것도 게시물별로 설정할 수 있습니다.
• 게시물을 전 세계적으로 또는 게시물별로 간편하게 제외 할 수 있습니다.
• 게시물 컨텐츠에 목차를 삽입하지 않으면 제공된 위젯을 사용하여 테마 사이드 바에 목차를 배치 할 수 있습니다.
• 위젯은 페이지에 부착되거나 붙어있을 수 있도록 지원하므로 페이지를 아래로 스크롤 할 때 항상 볼 수 있습니다. 참고 :이 옵션은 모든 테마가 다르기 때문에 고급 옵션입니다.이 기능을 사용하기위한 설정에서 올바른 항목 선택기를 사용하려면 테마 개발자의 지원이 필요할 수 있습니다.
• 위젯이 자동으로 페이지에 표시되는 섹션을 강조 표시합니다. 강조 색상을 구성 할 수 있습니다.
• 개발자는 다양한 액션 후크 및 필터를 사용할 수 있습니다. 기타는 Github의 요청으로 추가 할 수 있습니다 .

목차 플러그인 사용방법

플러그인 설치 후, 글이나 페이지에 자동으로 목차를 삽입할 수 있습니다.

적용 대상 선택: 작성된 글, 페이지, FAQ 등 목차를 추가하고자 하는 영역을 체크합니다.

목차 위치 설정: 목차가 페이지 상단에 표시되도록 설정하는 것이 사용자 경험에 유리합니다.

목차의 위치를 설정할 수 있으며 목차의 경우 바닥보다는 상단에 위치할 수 있도록 하는게 좋습니다.

• 첫번째 제목 앞
• 첫번째 제목 다음
• 상단
• 바닥

그 외에도 테이블에 표시하고 싶은 이름과 목차를 숨겨서 표시할것인지 처음부터 펼쳐서 보여줄지등을 체크합니다.

디자인적인 부분을 수정할 수 있습니다.

워드프레스 목차 폭이나 너비 글자 크기나 색상등을 변경할 수 있습니다.

사용자 정의테마로는 배경색이나 테두리색,제목색상,링크색상등을 변경할 수 있습니다.

그 외에도 소문자나 하이픈등 세분적인 설정값도 함께 설정할 있습니다.

마지막으로 모바일친화적인 amp 설정도 함께 할 수 있으며 이후 저장을 하게 되면 해당 위치에 워드프레스 목차가 만들 수 있습니다.

워드프레스 목차 직접 개발하기

장문의 콘텐츠를 작성하거나 정보 중심의 사이트를 운영 중이라면, Easy Table of Contents는 필수적인 플러그인은 설치하면 좋은 플러그인이지만 만약 워드프레스에 목차를 플러그인이 아닌 Html 코딩으로 개발하고 싶다면 어떻해야할까요?

우선 플러그인으로 사용하면 사용에 제약뿐만 아니라 지속적인 업데이트가 되지 않는다면 보안에 취약해질 수 있기 때문에 이러한 경우 직접 개발해서 빠르게 적용하는 방법을 고민핼 볼 수 있습니다.

1. HTML로 목차 구조 작성

목차는 HTML의 <ul> 또는 <ol> 태그를 사용해 계층적으로 작성합니다. 목차 항목은 각각 콘텐츠의 특정 섹션으로 연결되도록 앵커 태그(<a href="#id">)를 사용합니다.

<div class="custom-toc">
  <h2>목차</h2>
  <ul>
    <li><a href="#section1">첫 번째 섹션</a></li>
    <li><a href="#section2">두 번째 섹션</a></li>
    <li><a href="#section3">세 번째 섹션</a></li>
  </ul>
</div>

2. 본문에 앵커 태그 추가

목차에서 연결한 각 항목에 대응하는 ID를 본문 섹션에 추가합니다.

<h2 id="section1">첫 번째 섹션</h2>
<p>이 섹션은 첫 번째 내용입니다.</p>

<h2 id="section2">두 번째 섹션</h2>
<p>이 섹션은 두 번째 내용입니다.</p>

<h2 id="section3">세 번째 섹션</h2>
<p>이 섹션은 세 번째 내용입니다.</p>

3. CSS로 목차 스타일링

기본 목차 디자인을 원하는 대로 꾸밀 수 있습니다.

.custom-toc {
  background-color: #f9f9f9; /* 목차 배경 색상 */
  border: 1px solid #ddd; /* 목차 테두리 */
  padding: 15px;
  margin-bottom: 20px;
}

.custom-toc h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.custom-toc ul {
  list-style-type: none; /* 기본 점 스타일 제거 */
  padding: 0;
}

.custom-toc ul li {
  margin: 5px 0;
}

.custom-toc ul li a {
  text-decoration: none; /* 밑줄 제거 */
  color: #0073aa; /* 링크 색상 */
}

.custom-toc ul li a:hover {
  text-decoration: underline; /* 마우스오버 시 밑줄 추가 */
  color: #005a87; /* 링크 호버 색상 */
}

4. 페이지에 목차 추가

작성한 HTML과 CSS 코드를 워드프레스의 편집기 또는 HTML 편집 모드에서 추가합니다. 예:

• 블록 편집기(Gutenberg): HTML 블록을 추가한 뒤, 위의 코드를 삽입.
• 클래식 편집기: “텍스트” 탭에서 HTML 코드를 삽입.

5. 스크롤 이동 애니메이션 추가 (선택 사항)

목차를 클릭했을 때 부드럽게 스크롤 이동하도록 JavaScript를 추가할 수 있습니다.

<script>
  document.querySelectorAll('.custom-toc a').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();
      document.querySelector(this.getAttribute('href')).scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    });
  });
</script>

워드프레스 참고포스팅

• 워드프레스 DB 백업 초기화 간편하고 안전하게
• Hummingbird 플러그인 Gzip CSS 압축 워드프레스 최적화
• 구글 서치콘솔 멀웨어 보안문제 워드프레스 해결방법
• SSL 보안인증서 HTTPS 구입 워드프레스 설치방법
• 워드프레스 테마편집기 사라짐 활성화 방법