스타일과 스크립트를 템플릿 안에 태그로 추가할 수 있지만 따로 파일을 만들어 관리하는 편이 머리가 덜 아픕니다. 워드프레스 내장함수를 이용해서 테마를 위해 만든 파일, 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;
    }
  }
}

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

워드프레스 내장함수

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

wp_enqueue_style()
wp_enqueue_script()

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

<?php

wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' );

wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false );

?>

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

$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
wp_deregister_script('jquery');
wp_enqueue_script(
  'jquery',
  'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js',
  array( 'json2', ),
  '3.2.1',
  flase
);
wp_enqueue_script(
  'theme-common',
  get_template_directory_uri() . '/js/common.js',
  array( 'jquery', ),
  '0.1.0',
  true
);

wp_deregister_script()함수는 등록되어 있는 스크립트를 등록해제하는 내장함수입니다. 이미 jquery라는 이름으로 등록되어 있는 워드프레스 자체 jquery의 등록을 해제하는데 사용하였습니다.

get_template_directory_uri()은 템플릿 디렉토리를 url 문자열로 출력하는 내자암수입니다. 뒤에 추가경로를 붙여 템플릿 디렉토리 안의 원하는 파일을 지정할 수 있습니다.

아래의 내용은 functions.php 에 역시 포함되는 스타일러스 파일들입니다.

<?php
wp_enqueue_style(
  'normalize',
  'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css',
  array(),
  '7.0.0',
  'all'
);
wp_enqueue_style(
  'theme-style',
  get_template_directory_uri() . '/css/style.css',
  array( 'normalize', ),
  '0.1.0',
  'all'
);

워드프레스 테마 만들기: 내장함수를 이용해서 css파일과 js파일 추가

변경

워드프레스 내장함수

사용법