온라인 콘텐츠 제공업체에 오랫동안 종사해 온 사람이라면 누구나 Google이 인터넷 사용자에게 더 좋은 품질의 자료를 제공하기 때문에 긴 형식의 스토리텔링을 좋아한다는 것을 알고 있습니다. 그 결과 수천 단어의 기사가 월드 와이드 웹에서 보편화되었습니다. 하지만 한편으로는 탐색에 몰두하는 독자들도 늘어나고 있습니다.
긴 기사를 탐색하는 데 도움이 되어야 하는 한 가지는 목차(TOC)입니다. 불행히도 대부분의 경우 TOC는 특정 위치에 설정되어 있으며 사용자가 스크롤하면 빠르게 사라집니다. 항상 사용할 수 있도록 고정된 위치에서 기사를 따라 플로팅되도록 TOC를 설정할 수 있다면 좋을 것입니다.
WordPress 사용자인 경우 WordPress 게시물에 플로팅 목차를 추가하는 방법은 다음과 같습니다.
목차 추가
첫 번째 단계는 목차를 삽입하는 것입니다. 추천하는 목차 플러그인 중 하나는 Table of Contents Plus입니다. 이 플러그인은 기사 제목을 기반으로 TOC를 자동으로 생성합니다.
설치 및 활성화 후 "설정 -> TOC+" 메뉴에서 플러그인에 액세스할 수 있습니다. 설정에서 플러그인이 특정 콘텐츠 유형에 자동으로 나타나도록 설정하고, 활성화되기 전에 헤더의 최소 수를 설정하고, 단축 코드를 사용하여 활성화/비활성화하고, 게시물/페이지의 특정 위치에 삽입하는 등 다양한 작업을 할 수 있습니다. 사용자 정의.
사이드바에 목차를 표시하려면 "모양 -> 위젯"으로 이동한 다음 "목차+" 위젯을 사이드바 위젯 영역으로 끌어다 놓습니다. 저장을 클릭하면 완료됩니다.
TOC는 기준을 충족하는 모든 게시물과 페이지의 사이드바에 표시됩니다.
그러나 TOC 사이드바 위젯은 여전히 기사와 함께 스크롤됩니다. 이 튜토리얼을 계속 진행해 보겠습니다.
목차를 스틱으로 만들기
두 번째 목표를 달성하려면 Q2W3 Fixed Widget이라는 다른 플러그인의 도움이 필요합니다. WordPress 저장소 레인을 따라 이동한 다음 플러그인을 설치하고 활성화하세요.
이 플러그인 설정은 "모양 -> 고정 위젯 옵션" 메뉴를 통해 액세스할 수 있지만 대부분의 사용자는 이를 수정할 필요가 없습니다.
플러그인 사용은 간단합니다. "모양 -> 위젯"으로 돌아가서 사이드바에 고정하려는 위젯을 선택합니다. 사이드바의 고정된 위치에서 스크롤을 따라 떠 있는 TOC+ 위젯을 만들고 싶으므로 선택합니다.
고정 위젯이라는 저장 버튼 바로 위에 새 확인란이 나타납니다. 이 확인란을 선택하기만 하면 고정된 목차를 갖게 됩니다.
그리고 이 기능은 Table of Contents Plus에만 국한되지 않습니다. Q2W3 플러그인을 사용하여 위젯이 사이드바에 계속 표시되도록 할 수 있습니다.
이제 사이드바 TOC 위젯이 있는 페이지나 게시물로 이동하여 작업을 감상할 수 있습니다. 비활성화해야 하는 경우 "모양 -> 위젯" 메뉴로 돌아가서 확인란의 선택을 취소합니다.
몇 가지 팁
CSS 마스터는 TOC+의 스타일 사용자 정의 기능을 활용하여 자신의 기본 설정에 맞게 모양을 조정할 수 있지만 대부분의 사용자는 기본적으로 플러그인을 사용합니다. 목차 표시가 사용하는 테마의 영향을 많이 받는다는 의미입니다.
여러 테마로 TOC+와 Q2W3의 조합을 테스트할 수 있었고 최대 결과를 얻는 데 사용할 수 있는 몇 가지 팁이 있습니다.
먼저 고정된 TOC+ 위젯을 다른 위젯 아래의 사이드바 하단에 배치하여 스크롤할 때 다른 위젯 위로 이동하지 않도록 합니다. 위젯은 투명한 배경을 가지고 있기 때문에(적어도 내가 테스트한 테마에서는 그러함) 서로의 위에 쌓인 두 개의 서로 다른 투명 위젯을 보는 것은 보기에 좋지 않습니다. 특히 하나는 움직이고 다른 하나는 움직이지 않는 경우에 그렇습니다.
둘째, 사이드바에서 가능한 한 적은 수의 위젯을 사용하십시오. 이렇게 하면 TOC+ 위젯이 페이지가 접히기 전에 표시되며, 맨 위 페이지에 도달할 때까지 페이지와 함께 위로 스크롤되어 그대로 유지됩니다.
고정 사이드바를 사용할 때의 또 다른 이점은 방문자가 페이지를 아래로 스크롤할 때 일반적으로 나타나는 빈 영역이 없다는 것입니다.
조합을 시도하고 어떻게 생각하는지 알려주세요.