이번 방법은 조금 더 간단하게 효과를 적용하기 위해 만들어봤는데, 실상 더 복잡해 진듯하기도 합니다. Ajax-Spoiler 플러그인 v0.7 이후 판(version)에서만 적용이 가능합니다.

혹시나 Wp-Script 플러그인의 site.custom.js 파일을 살펴보셨던 분이라면 이미 알고계실지도 모르겠네요

자바스크립트 파일 만들기

• $js_library 의 설정에 따라 방법이 나뉩니다.
• 텍스트 에디터나 메모장에서 새로운 파일을 생성한 뒤 적당한 이름의 .js 확장자를 가진 파일로 만듭니다.
• Wp-Scripts 플러그인을 사용하시는 분들께서는 wp-scripts/js/site.custom.js 파일을 열어 수정하신 뒤 설정화면에서 ‘Your custom’ 을 선택하시면 됩니다.
• ‘mootools’를 사용하는 경우의 내용:

• 'prototype'을 사용하는 경우의 내용:

• 위에서 공통적으로 들어가는 $$('.collapse-body')부분에서 정확히 사이드바 부분에만 적용하고 싶을때에는 $$('#sidebar h2.collapse-body')처럼 사용하시면 됩니다.(css 스타일 지정하는 법과 같습니다.) — id="sidebar" 인 객체 내에 존재하는 h2 태그 객체 중에서 class="collapse-body" 인것들.
• 파일을 저장 한 뒤 적용중인 테마폴더에 업로드 하고나서 테마의 header.php 파일을 열어 부분을 찾아 바로 밑에 아래처럼 자바스크립트를 삽입합니다.

• Wp-Scripts 플러그인을 사용하시는 분께서는 header.php파일을 수정하지 않으셔도 됩니다.

템플릿 파일 수정하기

• 템플릿 파일의 수정은 $js_library 의 설정에 관계없이 동일합니다. 응용하면 블로그의 여러곳에 적용이 가능하겠지만 여기서는 사이드바에서 사용하는 방법을 설명하겠습니다.
• 우선 간단하게 말씀드리자면, 정의된 id 를 가진 객체(element)에 속한 자식 객체들 중에서 정의된 class(.collapse-body)를 가진 객체를 찾아 효과를 적용하는 원리 입니다. 제 블로그의 소소를 참고해 보세요.
• 일반적인 sidebar.php 파일의 내용은 아래와 같습니다.

   
   
   
  …….메뉴들…. 
   
  Categories
   
       
   
         
       
   
  ….계속되는 메뉴들……