테마를 만들면 이미지가 포함될 수도 있고 다른 파일들이 필요할 수도 있습니다. 이 리소스 파일들을 테마 폴더의 어디에 저장해두고 워드프레스가 찾아서 사용할 수 있도록 위치를 알려줘야합니다.
워드프레스는 함수를 이용해서 워드프레스 테마의 특정 위치로 접근할 수 있습니다. 이때 URL로 접근할 수도 있고, 시스템 내의 파일 경로로 접근할 수도 있습니다.
URL 돌려주는 함수들
- get_stylesheet_uri() : 테마의 style.css 파일의 URL을 리턴
- get_theme_file_uri($file)
- get_parent_theme_file_uri($file)
파일 경로 돌려주는 함수들
- get_theme_file_path($file)
- get_parent_theme_file_path($file)
작성한 css 파일 사용하는 방법
테마를 만들면서 테마 폴더 아래 assets/css/ 폴더를 만들고 그 안에 example.css 를 작성해 뒀다고 가정합니다. 워드프레스에게 이 css 파일을 사용할거니까 로드하라고 알려주는 함수가 wp_enqueue_style() 함수입니다.
wp_enqueue_style(
string $handle,
string $src = ”,
string[] $deps = array(),
string|bool|null $ver = false,
string $media = ‘all’
);
wp_enqueue_style() 함수의 원형은 위와 같으며, 예의 example.css 를 로드하려면 아래처럼 작성하면 됩니다.
wp_enqueue_style(
‘theme-slug-example’,
get_parent_theme_file_uri( ‘assets/css/example.css’ ),
array(),
wp_get_theme()->get( ‘Version’ ),
‘all’
);
테마의 style.css 파일 로딩 방법
add_action( ‘wp_enqueue_scripts’, ‘theme_slug_enqueue_styles’ );
function theme_slug_enqueue_styles() {
wp_enqueue_style(
‘theme-slug-style’,
get_stylesheet_uri()
);
}
wp_enqueue_scripts 후크에 액션을 걸고 함수를 통해 wp_enqueue_style() 을 호출합니다. get_stylesheet_uri() 함수의 리턴값이 바로 style.css 의 URL입니다. 테마의 style.css 뿐 아니라, 다른 css 파일도 위 후크 액션에서 wp_enqueue_style()을 이용할 수 있습니다.
inline style 포함시키는 방법
wp_add_inline_style(
‘theme-slug-primary’,
‘body { background: #eee; }’
);
wp_add_inline_style() 함수를 이용해서 <head> 태그 안에 포함시킬 style을 추가할 수 있습니다.
테마 편집기에 적용할 css 파일 로딩 방법
add_editor_style( array|string $stylesheet = ‘editor-style.css’ );
워드프레스 관리 페이지에서 테마를 편집할 때 적용될 css 파일을 설정하려면 위 함수를 이용할 수 있습니다. 함수인자로 array 가 있는 것을 확인할 수 있습니다. 여러 개의 css 파일을 로딩하려면 array로 전달하면 됩니다.
추가로 Block Stylesheet 이라는 용어가 나오는데, 이거 차후에 자세히 살펴보겠습니다.
Leave a Reply