Ajax-Spoiler를 응용한 이펙트 적용3

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

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

자바스크립트 파일 만들기

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

    Categories

    를 아래처럼 바꿉니다.

  • 그 바로아래에 있는
      위 h2의 id에서 ‘_tgl’을 제외한 부분을 id 로 지정하고, ‘collapse-body’ 라는 class 를 지정합니다.

    • 주의하실점 :: 한 페이지에서 같은 id를 가진 객체는 단 하나 이어야 합니다.
    • 기본적으로 숨기고 싶은 부분에은 ‘hide_first’ 라는 class를 추가해주시면 됩니다.

    • 전체적으로 본다면 아래와 같겠죠.(기본적으로 숨길경우)

    아래 첨부된 파일을 통해 기본(default)테마에 적용된 방법을 확인할 수 있습니다.