워드프레스에서는 다양한 무료 및 유료 목차 플러그인이 있습니다. 보통은 무료 플러그인으로도 충분하지만 이 블로그에는 현재 Fixed TOC라는 유료 목차 플러그인이 있습니다. 페이지를 아래로 스크롤할 때 목차 아이콘이 표시되도록 설정한 상태에서 목차 아이콘을 클릭할 때 목차 제목 일부가 헤더나 상단 배너 등에 가려지는 문제가 발생하는 경우가 있습니다. 이러한 문제가 발생하는 경우 해결 방법에 대해 살펴보겠습니다.
워드프레스 목차 플러그인
티스토리 블로그를 운영하는 경우 목차를 수동으로 삽입하는 경우가 많습니다. 자바스크립트를 사용하여 목차를 수동으로 삽입하는 것도 가능하지만 목차를 커스텀하는 것이 쉽지 않습니다.
워드프레스에서는 다양한 무료 목차(TOC) 플러그인을 이용할 수 있습니다. 특히 세부적인 설정이 가능하고 목차 스타일도 비교적 자유롭게 설정할 수 있습니다.
(워드프레스에서도 목차를 수동으로 만들 수 있습니다. 자세한 내용은 "워드프레스 수동 목차 만들기(+블록 에디터 기능과 CSS 사용)" 를 참고해보세요. 수동으로 만들면 사이트에 미치는 속도를 최소화할 수 있지만 목차 추가/수정이 번거롭고, 추후에 목차를 삭제하고 싶은 경우 일일이 삭제해야 하는 어려움이 있습니다.)
무료 목차 플러그인에는 몇 가지가 있으며 현재 Easy Table of Contents라는 플러그인이 많아 사용되고 있으며 활발히 업데이트가 이루어지고 있습니다.
무료 목차 플러그인을 사용하여 목차를 생성하면 편리하지만 시간이 지나면서 목차 플러그인이 업데이트가 되지 않고 방치되는 경우가 있습니다. 그런 경우, 활발하게 업데이트가 이루어지는 목차 플러그인으로 갈아탈 수 있습니다. 목차는 일정 개수의 소제목이 있을 경우에 자동 생성하도록 구성되므로 목차 플러그인을 변경해도 문제 없이 작동합니다.
Fixed TOC는 프리미엄 목차 플러그인으로 현재 이 블로그에 적용되어 있습니다. 이 플러그인은 무료 목차 플러그인에 비해 사이트 로딩 속도에 미치는 영향이 적은 편입니다. 사이트 속도가 약간 느려지는 것이 그리 문제가 안 된다면 무료 플러그인으로 충분한 것 같습니다.
Fixed TOC에서 목차 제목이 헤더에 가려지는 문제
Fixed TOC에는 페이지/포스트를 아래로 스크롤할 때 목차 아이콘을 표시하도록 하는 옵션이 제공됩니다.
목차 아이콘을 클릭하면 목차가 펼쳐집니다.
하지만 위의 그림과 같이 측면에 펼쳐진 목차 박스의 일부가 헤더나 상단 배너에 가려져서 보이지 않는 문제가 발생하는 경우가 있습니다.
이 문제가 발생한다면 간단한 CSS 코드로 문제를 해결할 수 있습니다. 예를 들어, 이 블로그에서는 다음과 같은 CSS 코드를 추가하여 문제를 해결했습니다.
/* Fixed TOC 플러그인에서 사이드바에 펼쳐진 목차 상단 부분이 가려지는 문제 시정하기 */
#ftwp-container.ftwp-fixed-to-post {
z-index: 9999!important;
}위의 코드를 외모 > 사용자 정의하기 > 추가 CSS 섹션에 추가하시면 됩니다.
만약 위의 코드로 문제가 해결되지 않는다면 플러그인 판매자에게 연락하여 지원을 요청하시기 바랍니다. 유료 플러그인이기 때문에 지원을 받을 수 있습니다.
CSS의 z-index 속성은 요소 쌓임 순서를 지정합니다. 쌓임 순서가 더 큰 요소(엘리먼트)가 항상 낮은 쌓임 순서의 요소보다 전면에 위치하게 됩니다. 자세한 정보는 W3Schools의 CSS z-index Property 문서를 참고해보세요. 기본적인 CSS를 이해해도 홈페이지 제작 작업이 한결 수월해질 것입니다.
댓글 남기기