snail

[워드프레스] 효과적인 차일드 테마 만들기

워드프레스를 수정하는 경우 보통 차일드 테마(자식 테마)를 만들어서 작업하면 추후에 테마가 업데이트되더라도 수정 사항이 사라지지 않습니다.

차일드 테마를 만들 때 스타일시트 파일은 다음과 같이 @import를 사용하여 부모 테마의 스타일시트 파일을 로드하게 됩니다.

/*
Theme Name:   Twenty Fifteen Child
Template:     twentyfifteen
*/
@import url(../twentyfifteen/style.css);

이와 같은 방법이 널리 사용되고 있습니다. 하지만 외부 스타일시트에서 CSS @import를 사용하면 웹 페이지 로드 중에 추가적인 딜레이(지연 현상)가 발생할 수 있다고 하네요(참고). 그래서 스타일시트를 @import를 통해 로드하는 것보다 enqueue 방식으로 로드하는 것이 약간의 이점이 있다고 합니다.

다음과 같은 형식으로 스타일시트를 enqueue할 수 있습니다. (아래 내용을 차일드 테마 내의 함수 파일(functions.php)에 추가합니다.)

function theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
// Source: codex.wordpress.org

위와 같이 스타일시트를 enquque할 경우 자식 테마의 스타일시트에서 @import url(…) 부분은 삭제하시면 됩니다. 차일드 테마를 만드는 방법은 여기에 설명되어 있는 것처럼 쉽게 만들 수 있습니다. 일부 유료 테마에서는 테마 파일 내에 Child Theme 폴더를 별도로 포함시켜서 사용자 편의를 도모하는 경우도 있습니다. 예를 들어, 유명한 AVADA 테마를 다운로드하면 별도의 ZIP 파일 형태로 Child Theme이 포함되어 있습니다.

/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

보통의 경우 직접 차일드 테마를 만들어 사용하면 됩니다. 가장 좋은 방법은 테마를 수정하지 않고 원하는 변경사항을 적용하는 것일 것입니다. 그러기 위해서는 액션과 필터 등 워드프레스 후크를 익히시면 도움이 됩니다(워드프레스 후크 목록 참조). 그리고 특정 테마에만 적용되는 것이 아니라 테마가 바뀌더라도 적용되어야 하는 함수는 별도의 플러그인으로 만들어 함수를 포함시키는 방법도 좋습니다(참고).

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.