스타일과 스크립트를 템플릿 안에 태그로 추가할 수 있지만 따로 파일을 만들어 관리하는 편이 머리가 덜 아픕니다. 워드프레스 내장함수를 이용해서 테마를 위해 만든 파일, CDN 등 외부 파일을 추가하는 방법을 알아봅니다.

변경

앞서 만들었던 네비게이션 바가 반응이 한박자씩 늦더랍니다. 여러가지 실험을 해본 결과, 에니메이션을 자바스크립트(jQery)가 아니라 CSS에서 조정하는 것이 훨씬 반응을 잘 하는 것을 알게되었습니다. 왜 그런지는 모르겠습니다.

js(jQery)

var pre_scroll_pos = 0;
var $window = $(window);
var $nav = $('nav');

$window.scroll(function(){
  var scrollTop = $window.scrollTop();
  if (scrollTop > pre_scroll_pos){
    $nav.addClass('hide');
  } else {
    $nav.removeClass('hide');
  }
  pre_scroll_pos = scrollTop;
});

CSS(LESS)

nav {
  height: 56px;
  transition: top .2s;
  ...
  @media @view-tablet {
    height: 64px;
    ...
  }
  &.hide {
    top: -56px;
    @media @view-tablet {
      top: -64px;
    }
  }
}

그러니까 스크롤을 감지하면 스크립트는 ` 태그에.hide클래스를 더하거나 뺍니다..hide`는 네비게이션 바를 숨기는 역할을 합니다.

워드프레스 내장함수

> 이 부분은 Code Reference: wp_enqueue_style() 과 Code Reference: wp_enqueue_script()를 참고하였습니다.

• wp_enqueue_style()
• wp_enqueue_script()

각각 css파일과 스크립트 파일을 추가하는 워드프레스 내장함수입니다.

위 코드는 매개변수의 이름과 종류, 기본값을 나타냅니다.

• $handle: 파일을 부르는 유일한 이름을 정합니다. 동일한 이름을 중복해서 사용하면 테마가 오작동할 수 있습니다.
• $src: 파일의 url 경로입니다.
• $deps: 종속관계를 나타냅니다. $handle에 사용한 이름을 배열(array())로 묶습니다.
• $ver: 해당하는 파일의 버전을 나타냅니다.
• (style)$media: 'all', 'print', 'screen', '(max-width: 640px)'등 미디어 속성을 나타냅니다.
• (script)$in_footer: 참(true)일 경우 wp_footer()위치에, 거짓(false)일 경우 wp_head()위치에 스크립트가 들어갑니다.

사용법

functions.php 에 아래 내용을 추가합니다.

```php