워드프레스에서 스타일시트 파일(style.css)과 함수 파일(functions.php)을 자식 테마(차일드 테마) 폴더에 추가하여 자식 테마를 만들 수 있습니다. 이와는 별도로 다음 단계에 따라 새로운 스타일시트 파일을 추가할 수 있습니다.

메인 스타일시트 외에 별도의 스타일시트 파일 만들기

1. 다음 PHP 코드를 함수 파일에 붙여넣기 합니다. 자식 테마를 사용하는 경우 자식 테마 폴더의 함수 파일에 복사하여 넣습니다.

function custom_style_sheet() {
wp_enqueue_style( 'custom-styling', get_stylesheet_directory_uri() . '/custom.css' );
}
add_action('wp_enqueue_scripts', 'custom_style_sheet');

2. 자식 테마 폴더에서 새로운 파일을 하나 만들고 이름을 custom.css로 지정합니다.

3. custom.css 파일의 시작 부분에 다음 텍스트를 추가하고 적절히 수정하도록 합니다.

/*
Theme Name: 자식 테마
Description: 자식테마 커스텀 CSS 코드를 위한
커스텀 스타일시트
Author: 이름
Author URI: http://example.com/
Version: 2.0
Template: yourparenttheme
Template Version: 2.0

*/
/*
이 라인 아래에 커스텀 CSS 추가
---------------------------------------------------------------- */

이제 새로운 사용자 지정 CSS 코드는 위의 라인 아래에 추가할 수 있습니다.

위와 같이 wp_enqueue_scripts를 사용하여 CSS 파일을 후크할 경우 조건 태그를 사용하여 특정 페이지나 카테고리 등에만 적용되는 스타일시트를 만들 수 있습니다.

전면 페이지/홈페이지/특정 페이지용 커스텀 스타일시트

가령 일반적인 코드는 style.css 파일에 추가하고, 전면 페이지에 대폭적인 수정을 할 경우 전면 페이지에만 적용되는 스타일시트를 만들 수 있습니다.

function front_page_style_sheet() {
if (is_front_page() ) {
wp_enqueue_style( 'front-page-styling', get_stylesheet_directory_uri() . '/front-page.css' );
}}
add_action('wp_enqueue_scripts', 'front_page_style_sheet');
// Source: WP SITES

위와 같은 함수를 함수 파일에 추가하고 front-page.css 파일을 위와 동일한 방식으로 만들면 됩니다.

마찬가지로 블로그 페이지에만 적용할 경우 is_home() 코드를 사용할 수 있습니다. 보통 is_front_page() || is_home() 코드를 사용하여 홈페이지(첫 페이지)에만 적용시킬 수 있습니다. 특정 페이지에만 적용할 경우에는 is_page(‘page ID’)와 같은 코드를 사용할 수 있습니다.

카테고리 아카이브용 스타일시트

모든 카테고리 아카이브에 적용되는 별도의 스타일시트를 만들려면:

function category_style_sheet() {
if (is_category() ) {
wp_enqueue_style( 'category-styling', get_stylesheet_directory_uri() . '/css/category.css' );
}}
add_action('wp_enqueue_scripts', 'category_style_sheet');

마찬가지로 특정 카테고리에만 적용하려면 카테고리 ID를 추가해주면 됩니다.

참고 사항

get_stylesheet_directory_uri와 get_template_directory_uri 비교

위의 코드에서 테마 경로를 지정하기 위해 get_stylesheet_directory_uri가 사용되었습니다. get_stylesheet_directory_uri는 자식 테마(차일드 테마)가 있을 경우 자식 테마의 경로를 가져옵니다. 반면 get_template_directory_uri는 부모 테마(상위 테마)의 경로를 가져옵니다. 이 부분에 대한 자세한 내용은 여기를 참고하시기 바랍니다.

사용자 함수 파일 추가하기

함수 파일도 메인 함수 파일 외에 커스텀 함수 파일(사용자 지정 함수 파일)을 추가할 수 있습니다. 사용자 지정 함수 파일을 추가하는 방법은 이 글을 참고하시기 바랍니다.

사이트 수준의 함수 파일 만들기

함수 파일은 보통 특정 테마에 종속됩니다. 따라서 테마가 바뀌면 함수 파일 내의 함수는 더 이상 적용되지 않습니다. 함수와 상관 없이 사이트 수준의 함수 파일을 만들려면 플러그인을 만들어야 합니다. 여기에서 사이트 수준의 함수 파일을 만드는 방법을 확인해보십시오.

워드프레스와 관련하여 문의사항이 있나요?

워드프레스와 관련하여 문제가 있는 경우 서비스(유료) 문의란을 통해 문제 해결을 요청하실 수 있습니다.

Service Request