개요 - 스크롤 따라다니는 목차(TOC, Table of Contents) | |
구현대상본 글에서는 워드프레스의 글의 목차가 문서의 앞부분에 고정되지 않고, 사용자가 브라우저 스크롤 해도 차례가 따라 다니도록 구현한다. 필요성웹 사이트에 게시된 1페이지 문서의 길이가 길고, 헤딩 부가된 제목이 여러 개 있는 문서는 차례를 보여주면 매우 유용하다. 통상 문서의 첫 부분에 고정된 차례가 제시 되는 경우가 많으나(아래 그림), 사용자가 웹브라우저를 아래로 스크롤 하면 차례는 보이지 않게된다. 문서 내에서 다른 부분으로 찾아가려면 다시 문서의 상단으로 와서 차례를 보고 찾아가야 한다. 안 좋다. 위 문제를 해결하기 위하여 본 글에서는 차례를 사이드바의 위젯에 배치하고 스크롤을 따라다니게 구현한다. 사용자가 스크롤 해도 차례는 계속 보이므로 문서내의 다른 곳으로 찾아가기 쉬어지고 사용자가 쉽게 정보 접근이 가능하다. | |
구현 - 스크롤 따라다니는 TOC. | |
스크롤 따라다니는 차례를 2개의 플러그인을 조합하여 구현하는 것으로 간단히 달성된다. 차례 표현하는 플러그인은 'Table of Contents Plus' 이며, 스크롤 따라다니게 하는 것은 Q2W3 Fixed Widget 을 이용한다. 이들 플러그인의 설치법과 기본 사용법은 아래 별도 정리된 정보를 참조한다. 1. Table of Contents Plus 설치와 기본 사용법 : http://igotit-anything.blogspot.kr/2014/10/table-of-contents-plus.html 2. Q2W3 Fixed Widget 설치와 기본 사용법 : http://igotit-anything.blogspot.kr/2014/10/q2w3-fixed-widget.html 아래 내용은 위 2개의플러그인이 설치된 상태에서의 '스크롤 따라다니는 차례' 구현 과정 이다. 구현.워드프레스 관리자 사이트 좌측메뉴에서 외모 -> 위젯 -> 사이드바에 TOC+위젯을 배치한다. TOC+ 위젯의 설정에 Fixed widget 을 체크하고, 저장하기 버튼 클릭하면 끝.구현 결과.위의 셋팅으로 사이트에서 보이는 모습이다. 오른쪽 사이드바 속에서 차례위젯이 배치되고 브라우저 스크롤 해도 차례는 항상 화면에 보이게 된다. 구현된 워드프레스 사이트 보러가기 -> http://igotit.kr/62/ | |
58.
댓글 없음:
댓글 쓰기