최근 워드프레스로 홈페이지를 만들었습니다. 이 홈페이지는 저희 제품에 대한 쇼핑몰과 함께 건강관련 정보를 제공하는 블로그로 활용하기로 마음먹었습니다. 그러다보니, 블로그 글에 목차가 나오면 좋을 것 같아서 워드프레스 홈페이지에 자동목차를 적용하는 방법을 적용해 보았습니다.
오늘은 워드프레스 홈페이지에 자동목차를 적용하는 가장 쉬운 방법을 차근차근 설명해 드리겠습니다. 자동목차를 적용하면 긴 글의 가독성을 높이고, 사용자가 원하는 섹션으로 쉽게 이동할 수 있게 됩니다.
가장 쉬운 방법은 플러그인을 사용하는 것입니다.
Table Of Contents
1. 플러그인 설치
자동목차를 적용하기 위해, Easy Table of Contents 플러그인을 설치할 수 있습니다. 이 플러그인은 간단하고 사용자 친화적이며, 대부분의 테마와 호환됩니다.
- 워드프레스 대시보드로 이동:
- 워드프레스 관리자 계정으로 로그인합니다.
- 플러그인 추가하기:
- 왼쪽 사이드바에서 “플러그인” → “새로 플러그인 추가”를 클릭합니다.
- 플러그인 검색:
- 검색창에 "Easy Table of Contents" 또는 "쉬운 목차"를 입력합니다.
- 플러그인을 찾았다면, “지금 설치” 버튼을 클릭한 후 “활성화” 버튼을 클릭합니다.
설치 후 활성화를 누르면 아래와 같이 나타나는데, 무료를 사용하시려면 "아니요, 지금은 무료 버전을 사용하겠습니다."를 클릭하시면 됩니다.
2. 플러그인 설정
- 설정 페이지로 이동:
- 플러그인을 활성화하면, 워드프레스 대시보드의 왼쪽 메뉴에서 "설정" → "Table of Contents" 또는 "쉬운 목차" 메뉴로 이동합니다.
- 기본 설정:
- 지원 활성화(Enable Support)에서 “Posts”(포스트, 글), “Pages”(페이지) 또는 자동목차를 적용하고 싶은 콘텐츠 유형을 선택합니다.
- 자동목차 (Auto Insert )옵션을 활성화하여, 선택한 콘텐츠 유형에 자동으로 목차가 삽입되도록 설정합니다.
- 위치 선택:
- 목차가 표시될 위치를 선택할 수 있습니다. 일반적으로 “Before first heading”(첫 머리글 앞) 옵션이 많이 사용됩니다.
- 저의 경우에는 "첫 머리글 이후"로 설정해보고 나서 "첫 머리글 앞"이 더 적절해서 다시 변경하였습니다. 테스트 하시고 원하는 위치로 하시면 될 것 같습니다.
- 헤딩 설정:
- 목차를 생성할 때 포함할 헤딩 수준을 선택합니다. 보통 H2와 H3를 선택합니다.
- 필요에 따라 H4 이하의 헤딩을 추가로 포함할 수 있습니다.
- 카운터 설정
- 목차의 카운터를 설정할 수 있습니다. 하지만, 저의 경우 이미 목차에 숫자를 넣어놓았는데, 중복해서 나오는 경우가 있어서 카운터를 "공개 닫기"으로 설정하였습니다.
- 수정 후 아래와 같이 나타납니다.
- 디자인 커스터마이즈:
- 외관 (Appearance) 섹션에서 목차의 디자인을 변경할 수 있습니다. 색상, 너비, 글꼴 크기 등을 조정할 수 있습니다.
- 부드러운 스크롤(Enable smooth scroll) 옵션을 활성화하면, 사용자가 목차를 클릭할 때 부드럽게 스크롤됩니다.
- 저장:
- 모든 설정을 완료한 후 “변경 사항 저장” 버튼을 클릭합니다.
3. 목차 확인 및 적용
- 포스트 또는 페이지에서 목차 확인:
- 자동목차를 적용한 포스트나 페이지를 열어 목차가 제대로 표시되는지 확인합니다.
- 선택한 헤딩 수준에 따라 목차가 자동으로 생성되어 표시됩니다.
4. 특정 포스트에서 목차 활성화 또는 비활성화
- 특정 포스트나 페이지에서 목차를 비활성화하거나 다시 활성화할 수도 있습니다.
- 글 작성 또는 편집 화면에서 “Table of Contents” 또는 "쉬운 목차"설정이 나타납니다.
- 여기서 목차를 비활성화할 수 있습니다.
- 아래와 같이 글 작성시 기본적으로 목차에 대한 옵션이 표시됩니다.
요약
- "쉬운 목차" 또는 "Easy Table of Contents" 플러그인을 설치하고 활성화합니다.
- 플러그인 설정에서 목차를 자동으로 생성할 위치와 포함할 헤딩 수준을 선택합니다.
- 각 포스트나 페이지에 자동으로 목차가 삽입되어 가독성이 개선됩니다.
이제 워드프레스 사이트에 자동목차를 쉽게 적용할 수 있습니다!
'IT' 카테고리의 다른 글
파이썬으로 웹 페이지 크롤링 - 홈페이지 로그인 하기 (1) | 2024.09.23 |
---|---|
리눅스(우분투 20.04)에서 커맨드라인으로 구글 크롬(google-chrome) 설치하기 (1) | 2024.09.23 |
우분투 리눅스(ubuntu linux)에서 selenium으로 웹 크롤링 하기 (2) | 2024.08.17 |
파이썬(python3) 실행파일(exe) 만드는 법 - pyinstaller 설치부터 생성까지 (29) | 2024.07.22 |
구글 애드센스 최초로 가입하는 법과 티스토리 계정 연결 ( 가족 명의로 가입 하기) (16) | 2024.05.20 |