WordPress Block Theme – css 파일

테마를 만들면 이미지가 포함될 수도 있고 다른 파일들이 필요할 수도 있습니다. 이 리소스 파일들을 테마 폴더의 어디에 저장해두고 워드프레스가 찾아서 사용할 수 있도록 위치를 알려줘야합니다.

워드프레스는 함수를 이용해서 워드프레스 테마의 특정 위치로 접근할 수 있습니다. 이때 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 이라는 용어가 나오는데, 이거 차후에 자세히 살펴보겠습니다.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *