[tistory]티스토리 카테고리 펼치기

[tistory]티스토리 카테고리 펼치기

일부 카테고리 펼치기/전체 카테고리 펼치기

티스토리 블로그는 기본적으로 카테고리가 닫혀있습니다.

이렇게 닫혀있는 카테고리를 접속 시 펼쳐진상태로 만드는 방법입니다.

저처럼 관리 기능에서 찾으셨던분들이 계실텐데요...

소스에 스크립트를 추가하여 카테로리를 펼치는 방법입니다.

일단 관리페이지로 이동합니다.

HTML/CSS 편집 메뉴를 눌러 소스편집화면을 띄워주시구요.

skin.html에서 찾아줍니다.

검색을 이용하여 category 검색 일단 수정해야하는 부분을 찾았구요.

여기에 스크립트를 이용해 카테고리를 펼쳐지게 하도록 하겠습니다.

사용될 함수명은 전체 expandTree(); / 부분 toggleFolder();입니다.

전체 펼치기	<script language="JavaScript">try{expandTree();}catch(e){}</script>
부분 펼치기	<script language="JavaScript">toggleFolder('카테고리 ID');</script>

  !!! 전체펼치기와 부분펼치기를 중복사용하시면 안됩니다. !!! 

먼저 전체 카테고리를 펼쳐보았습니다. </div>문장 아래줄에 사용하셔도 되지만 깔끔하게 div안으로 묶도록합니다.

또한

<script language="JavaScript">try{expandTree();}catch(e){}</script> -><script language="JavaScript">expandTree();</script>

try catch문을 사용하지않고 expandTree();만 사용하셔도 되지만 혹시 모를 오류때문인지,

일반적으로 사용하는 방법인 위 문장으로 사용하였습니다.

이렇게 저장을 하신 후

확인 하시면

카테고리가 모두 펼쳐진 모습을 보실 수 있습니다.

이제 부분 카테고리 펼치기를 알아보겠습니다.

<script language="JavaScript">toggleFolder('카테고리 ID');</script>

함수 사용 위치는 같은나 위 문장만으로는 사용하실 수 없습니다.

부분 카테고리 펼치기를 사용하기 위해서는 카테고리의 ID가 필요로합니다.

카테고리 ID를 찾기 위해서카테고리 설정으로이동해줍니다.

파이어폭스의 요소검사 기능을 이용해서

div를 나타나도록 했습니다. 카테고리를 이루고 있는 구조입니다.

소스보기를 이용해 찾기때문에 약간 복잡한 부분이 있습니다. 제 카테고리 구조를 이용한 설명을 보시고 진행하시면 됩니다.

ul 카테고리 전체

li step01                         [ALL(20)]

li step02                         [○_사지방(11)]

li step03                         닫혀있는 부분

li step02                         [○_유머(2)]

li step03                         [공대유머(2)]

li step03                         [웃긴영상(0)]

이런식으로 구성되어 있습니다.

화면의 아무곳이나 오른쪽 클릭하신 후

소스보기 클릭(익스플로러 기준/ 크롬,파폭의경우 요소검사)

소스가 나타나면 categoryList를 검색해줍니다.

검색하시면 categoryList 하위로 카테고리명이 있습니다.

○_사지방 이라는 카테고리를 기준으로 

  549353   이라는 카테고리 ID를 확인하실 수 있습니다.

클래스는 위 설명처럼 step02입니다. ○_사지방 카테고리 밑으로 step03의 하위메뉴도 확인하실 수 있습니다.

물론 카테고리 ID만 찾으시면 되지만 이중 이상의 구조로된 카테고리의 경우 구조를 파악하고 찾으시는게 더 편리합니다.

<li id="549353" class="step02 step02_folder">

카테고리 ID를 습득하셨습니다. 그렇다면 이 ID를 통해서 이번에는 부분적으로 카테고리를 펼쳐보도록하겠습니다.

 <script language="JavaScript">toggleFolder('카테고리 ID');</script>

위 소스에 카테고리 번호 적용(toggleForder함수에 인자갑으로 카테고리 번호를 넘겨줍니다.)

 <script language="JavaScript">toggleFolder('549353');</script>

이렇게 완성된 소스를전체펼치기와 같은 위치에 삽입합니다.

이렇게 적용하시면

부분적으로 펼쳐진 카테고리를 확인하실 수 있습니다.

두개이상의 부분펼치기는

1안_

<script language="JavaScript">toggleFolder('카테고리ID1');</script>
<script language="JavaScript">toggleFolder('카테고리ID2');</script>
<script language="JavaScript">toggleFolder('카테고리ID3');</script>

2안_
<script language="JavaScript">toggleFolder('카테고리ID1');toggleFolder('카테고리ID2');toggleFolder('카테고리ID3');</script>

의 두가지 방식으로 사용하실 수 있습니다.