워드프레스 목차 플러그인 Fixed TOC: 모바일에서 초기 상태로 목차 펼침이 안 되는 현상

워드프레스에는 다양한 무료 및 유료 목차 플러그인이 있습니다. 제 워드프레스 블로그에는 유료 플러그인인 Fixed TOC가 설치되어 있습니다. 이 플러그인의 경우 목차를 초기에 펼침 상태로 표시할 것인지 아니면 접힘 상태로 표시할 것인지를 지정하는 초기 펼침/접힘 상태를 설정할 수 있습니다. 하지만 초기 상태를 '펼침'으로 설정해도 모바일에서는 접힌 상태로 표시됩니다.

워드프레스 목차 플러그인 Fixed TOC: 모바일에서 초기 상태로 목차 펼침이 안 되는 현상

워드프레스에는 괜찮은 무료 목차(TOC) 플러그인이 몇 가지 있습니다. 목차를 자동 생성하도록 하고 싶은 경우 무료 목차 플러그인 중에서 마음에 드는 것을 설치하여 사용하시면 됩니다.

워드프레스 목차(TOC) 플러그인

저는 무료 목차 플러그인을 사용해보니 페이지 로딩 속도에 영향을 미치는 것 같아서 유료 플러그인인 Fixed TOC를 사용하고 있습니다. 이 플러그인은 페이지 로딩 속도에 영향을 덜 미치는 것 같습니다.

워드프레스 목차 만들기 플러그인 Fixed TOC - 워드프레스 정보꾸러미

Fixed TOC: 목차 초기 상태 설정 - 펼침/접힘

Fixed TOC 플러그인에서는 글이나 페이지를 브라우저로 열 때 목차가 접힌 상태로 표시될 것인지, 아니면 펼침 상태로 표시될 것인지를 설정할 수 있습니다.

알림판 > 외모 > 사용자 정의하기 > Fixed TOC Plugin > Contents List(콘텐츠 리스트)에서 맨 아래의 Initial Collapse/Expand State(초기 접힘/펼침 상태)에서 초기 접힘/펼침 상태를 지정할 수 있습니다.

이 설정에 대하여 다음 세 가지 옵션을 지정할 수 있습니다. 

• Expand All - 전체 펼침
• Only Expand 1st Level - 첫 번째 레벨만 펼침
• Collpase All - 전체 접힘

저는 Only Expand 1st Level로 지정하여 사용하고 있습니다. 이 옵션을 선택하면 다음 그림과 같이 최상위 레벨과 그 아래의 첫 번째 레벨까지만 표시됩니다.

2차 레벨의 항목이 있는 경우 번호 옆에 > 기호가 표시되어 있습니다.

해당 기호를 클릭하면 하위 항목들이 펼쳐집니다. 역활살표 기호를 클릭하면 펼쳐진 항목들이 접힙니다.

모바일에서 초기 펼침/접힘 상태가 접힘으로만 작동하는 현상

Initial Collapse/Expand State(초기 접힘/펼침 상태) 옵션을 펼침 상태로 설정해도 모바일 기기에서는 접힌 상태로 표시됩니다.

목차 오른쪽의 > 아이콘을 클릭해야 목차가 펼쳐집니다.

이는 모바일 화면이 작으므로 의도적으로 모바일에서 목차의 초기 상태가 접힘으로 설정된 것이라고 합니다. 만약 모바일에서도 초기 상태를 '펼침'으로 지정하기를 원하는 사용자들이 많다면 해당 옵션을 추가해줄 수는 있다고 합니다. 하지만 그러한 기능을 원하는 사용자는 드문 것 같습니다.

데스크톱(PC)과 모바일에서 화면을 아래로 스크롤할 때 목차 아이콘이 왼쪽에 표시되므로 방문자들이 언제라도 목차 아이콘을 클릭하여 원하는 주제 항목으로 이동이 가능합니다.

아이콘을 클릭하면 목차 항목들이 펼쳐집니다.

위의 스크린샷은 사용자 정의하기 내에서 표시되는 화면을 캡처한 것으로 실제 모바일에서 표시되는 화면과 차이가 있을 수 있습니다. 실제 작동은 워드프레스 정보꾸러미 블로그의 개별 글에서 확인해볼 수 있습니다.

마치며

이상으로 Fixed TOC 플러그인에서 초기 목차 펼침/접힘 상태를 설정해도 모바일에서는 항상 초기 상태가 접힘으로 작동하는 현상에 대해 살펴보았습니다.

목차를 표시하면 SEO에도 긍정적인 영향을 미치므로, 소제목을 지정하여 글을 작성하는 경우 목차 플러그인을 설치하면 SEO에도 도움이 될 것입니다. (목차 플러그인은 소제목을 인식하여 목차를 생성하며, 최소 소제목 개수 등 상세한 설정이 가능합니다.)

참고

https://avada.tistory.com/2322

워드프레스 Rank Math에서 사이트 제목과 사이트 설명 추가하기(SEO 타이틀)

https://avada.tistory.com/2377

무료 포스팅 요청과 협찬 포스팅 의뢰