워드프레스 테마에 새로운 스타일시트(CSS 파일) 추가하기

워드프레스에서 스타일시트 파일(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는 부모 테마(상위 테마)의 경로를 가져옵니다. 이 부분에 대한 자세한 내용은 여기를 참고하시기 바랍니다.

사용자 함수 파일 추가하기

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

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

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

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.