테마 만들면서 style.css에 다 때려넣었더니 스타일 시트가 너무 길고 찾기 힘들다.
스타일시트를 나눠서 정리 다시 해보자!
스타일시트와 마찬가지로 자바스크립트 파일도 특정 템플릿에만 추가할 수 있다.
조건부 태그
functions.php에 조건부 태그를 이용해서 스타일 시트를 지정해주자.
Stylesheet 파일 추가
if ( is_singular() )
{
wp_enqueue_style( 'single-styling', get_template_directory_uri() . '/css/single.css?v=' . filemtime(get_template_directory() . '/css/single.css') );
}
사용된 코드 설명
wp_enqueue_style()
:
워드프레스에 스타일시트를 추가할 수 있는 함수
if ( is_singular() )
:
is_singular() 인 경우를 의미하는 조건문. is_singular()는 조건부 태그이며 다른 조건부 태그로 바꿀 수 있다. 워드프레스 조건부 태그를 참고하자.
‘single-styling’
:
‘스타일시트 이름’을 적어주면된다.
get_template_directory_uri()
:
템플릿 저장된 디렉토리 URL 가져오는 코드.
‘/css/single.css’
:
템플릿 저장된 디렉토리를 기준으로 상대경로 입력한다.
‘/css/single.css?v=’ . filemtime(get_template_directory() . ‘css/single.css’ )
:
스타일시트를 자동으로 버전화하기위해 사용하는 코드. ‘/css/single.css’ 역시 위와 동일하게 상대경로 입력해주면된다.
Javascript 파일 추가
if ( is_singular() )
{
wp_enqueue_script( 'single-js', get_template_directory_uri() . '/js/single.js', array( 'jquery', ) );
}
사용된 코드 설명
wp_enqueue_script()
:
자바스크립트 파일을 추가할 수 있는 함수.
‘single-js’
:
‘자바스크립트 파일 이름’을 적어주면된다.
‘/js/single.js’
:
템플릿 저장된 디렉토리를 기준으로 상대경로 입력한다.
array( ‘jquery’, )
:
자바스크립트 이름 지정한다.
참고
워드프레스 조건부 태그
Code Reference - wp_enqueue_script
Code Reference - wp_enqueue_style
공부 목적 블로그