2014년 10월 4일 토요일

Scrolled TOC(Table of Contents)



 

개요 - 스크롤 따라다니는 목차(TOC, Table of Contents)

   
 

구현대상


본 글에서는 워드프레스의 글의 목차가 문서의 앞부분에 고정되지 않고, 사용자가 브라우저 스크롤 해도 차례가 따라 다니도록 구현한다.


필요성


웹 사이트에 게시된 1페이지 문서의 길이가 길고, 헤딩 부가된 제목이 여러 개 있는 문서는 차례를 보여주면 매우 유용하다. 통상 문서의 첫 부분에 고정된 차례가 제시 되는 경우가 많으나(아래 그림), 사용자가 웹브라우저를 아래로 스크롤 하면 차례는 보이지 않게된다. 문서 내에서 다른 부분으로 찾아가려면 다시 문서의 상단으로 와서 차례를 보고 찾아가야 한다. 안 좋다.

위 문제를 해결하기 위하여 본 글에서는 차례를 사이드바의 위젯에 배치하고 스크롤을 따라다니게 구현한다. 사용자가 스크롤 해도 차례는 계속 보이므로 문서내의 다른 곳으로 찾아가기 쉬어지고 사용자가 쉽게 정보 접근이 가능하다.


igotit



 
 



 

구현 - 스크롤 따라다니는 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 을 체크하고, 저장하기 버튼 클릭하면 끝.

igotit



구현 결과.

위의 셋팅으로 사이트에서 보이는 모습이다. 오른쪽 사이드바 속에서 차례위젯이 배치되고 브라우저 스크롤 해도 차례는 항상 화면에 보이게 된다.  구현된 워드프레스 사이트 보러가기 -> http://igotit.kr/62/

igotit


 
 



58.

댓글 없음:

댓글 쓰기