Languages: English • Themes 日本語 한국어 • Français • Português do Brasil • Русский • Slovenčina • ไทย • 中文(简体) • (Add your language)
워드 프레스 Child(추가,하위,자식) 테마는 다른 테마의 기능을 상속하는 테마로, 간단히 수정하는것 만으로도 Parent(기존,상위,부모) 테마의 기능을 추가할 수 있습니다. 이 문서에서는 기본적인 Child 테마를 만드는 방법을 예를 들며 무엇을 할 수 있는지를 설명합니다. 예제의 Parent 테마는 워드프레스 3.0 에 기본테마인 twentyten(2010) 을 사용합니다.
Child 테마를 만드는 것은 매우 간단합니다. 디렉토리를 만들고, 거기에 style.css 파일을 넣어 주는것만으로도 Child 테마를 만들 수 있습니다! 기초적인 HTML 과 CSS 만으로, 당신은 Parent 테마의 파일을 수정하지 않고 아주 기본적인 Child 테마 만으로도 어느 정도 Parent 테마의 스타일과 레이아웃을 수정할 수 있습니다. 이렇게하면 Parent 테마가 업데이트 되어도 변경한 사항이 그대로 유지됩니다.
이러한 이유로 테마의 수정을 위해서 Child 테마를 만드는 것을 권장합니다.
더불어 기초적인 PHP, 워드프레스 템플릿, 그리고 워드프레스 플러그인 API 에 대한 이해가 함께한다면, 당신은 Parent 테마 파일의 모든것을 확장하면서도 변경할수 있는 Child 테마를 만들 수 있습니다.
Child 테마는 wp-content/themes 디렉토리 안에 있습니다. 아래의 구조는 일반적인 워드프레스 디렉토리 안에 있는 Parent (twentyten, 2010) 테마와 함께 Child 테마의 위치를 보여줍니다 :
이 디렉터리에는 최소한 style.css 파일이 있어야 하며, 워드프레스 테마에 필요한만큼 다른 파일을 넣을수 있습니다 :
각각 어떻게 동작하는지 알아봅시다!
style.css 는 Child 테마에 하나만 있어야 하며, 반드시 필요한 파일입니다. 이 파일은 워드프레스 Chlid 테마를 인식하는 헤더정보를 제공하며, 이것은 Parent 의 style.css 를 대체합니다.
하위 테마로 인식 될수있는 유일한 점은, 모든 워드프레스 테마와 마찬가지로 파일의 상단에 헤더정보를 가지고 있습니다. 워드프레스 Child 테마의 Parent 라는 사실을 알 수 있도록 Template: 라인이 필요합니다.
다음 예제는 style.css의 Child 테마 헤더정보 입니다 :
/* Theme Name: Twenty Eleven Child Theme URI: http: //example.com/ Description: Child theme for the Twenty Eleven theme Author: Your name here Author URI: http: //example.com/about/ Template: twentyeleven Version: 0.1.0 */
각 라인의 빠른 설명:
Theme Name. (필수) Child 테마의이름.Theme URI. (옵션) Child 테마의 주소.Description. (옵션) 테마의 설명. 예: 나의 첫번째 Child 테마. 오예스!Author URI. (옵션) 만든이 사이트.Author. (옵션) 만든이 이름.Template. (필수) Parent 디렉토리 이름, 대소문자를 구분합니다.
Version. (옵션) Child 테마 버전. 예: 0.1, 1.0, 등.*/ 이 주석이 끝나는 부분 이후 부터는 일반적인 스타일시트 파일로 동작합니다. 이곳은 당신이 워드프레스에 적용하려는 스타일 규칙을 넣는곳입니다.
참고: Child 테마의 스타일 시트는 완전히 Parent 의 스타일시트를 대체합니다. (Parent 스타일시트는 워드프레스에 의해 작동하지 않습니다.) 그렇기 때문에, 단순히 Parent 테마와 레이아웃의 몇가지 작은 수정을 원하는 경우에는 —기존의 파일을 수정하지 않고— Parent 테마에서 명시해 놓은 스타일시트를 가져와 수정사항을 추가하도록 합니다. 다음 예제에서는 @import 규칙을 어떻게 사용하는지 보여줍니다.
이 예제를 위한 우리의 Parent 테마는 Twenty Eleven(2011) 입니다. 우리는 사이트의 제목 색상을 검은색에서 초록색으로 변경하려 합니다. Child 테마를 사용하면, 3단계 만에 모든것이 이루어집니다.:
/*
Theme Name: Twentyeleven Child
Description: Child theme for the twentyeleven theme
Author: Your name here
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");
#site-title a {
color: #009900;
}
여기서 위 코드가 무엇을 의미하는지 차례차례 알아봅시다:
/* Child 테마의 헤더정보를 엽니다.Theme Name: Child 테마의 이름을 선언합니다.Description: 주제가 무엇인지 설명합니다. (선택사항; 생략할 수 있습니다.)Author: 만든이 이름을 선언합니다. (선택사항; 생략할 수 있습니다.)Template: Child 테마의 Parent 를 선언합니다; 즉슨, 어떤 템플릿 디렉토리의 Child 테마인지 알 수 있도록*/ Child 테마의 헤더정보를 닫습니다.@import 로 Parent 스타일시트 규칙을 가져옵니다.#site-title 로 Parent 규칙을 덮어쓰는, 사이트의 제목 색상(초록색) 규칙을 정의합니다.@import 규칙에 대한 참고사항반드시 위 @import 규칙 이외의 다른 CSS 규칙은 없어야 합니다. 만일 당신이 다른 규칙을 만들면, 그것은 무효가 되고 Parent 의 스타일 시트를 가져올 수 없습니다.
RTL 언어를 지원하기 위해서는 Child 테마에 포함된 rtl.css 파일을 추가합니다.:
/*
Theme Name: Twenty Ten Child
Template: twentyeleven
*/
@import url("../twentyeleven/rtl.css");
rtl.css 파일은 is_rtl() 함수로 워드프레스에서 자동-로딩됩니다. 만일 테마에 rtl.css 파일이 없더라도, Child 테마에 rtl.css 파일을 추가하는 것을 추천합니다.
먼저 Child 테마 스타일시트를 불러온 후, Twenty Eleven 다크테마 스타일시트와 링크색상 옵션을 불러옵니다. 따라서 색상의 변화가 반드시 보여지진 않습니다.
Twenty Eleven Parent 디렉토리의 다크 스타일시트 또는 코드를 변경할 필요는 없습니다., 우리는 색상변경 우선순위를 부여하기 위해, 스타일이 바뀌지 않도록 !important 속성을 추가해 줍니다.
여기서 우리는 사이트의 제목 색깔만 변경할 것이며, 제목의 hover 색깔, 링크로 표시되는 색상은 그대로 둡니다.
/*
Theme Name: Twenty Eleven Child
Description: Child theme for the Twenty Eleven theme
Author: Your name here
Template: twentyeleven
*/
@import url("../twentyeleven/style.css");
/* This will override site title color even on the dark theme */
#site-title a {
color: #009900 !important;
}
/* This will override the changed link color */
#site-title a:focus,
#site-title a:hover,
#site-title a:active {
color: #009900 !important;
}
!important와 함께 선택한 스타일의 색상은 다크 스타일이나 링크색상 옵션에서도 변경되지 않습니다.
style.css와는 달리, Child 테마의 functions.php는 Parent 를 오버라이드(덮어쓰기)하지 않습니다. 대신, Parent 의 functions.php 가 함께 로드됩니다. (특히, 그것은 Parent 파일로 로드되기전 입니다.)
이렇듯 Parent 테마의 기능을 문제없이 수정하며, Child 테마의 똑똑함을 제공하는 function.php. 당신의 테마에 PHP 기능을 추가하고 싶다면, 가장 빠른 방법은 functions.php 파일을 열고, 거기에 기능을 넣는것입니다. 하지만 그것은 현명한 방법이 아닙니다: 테마가 업데이트 되버리면, 당신이 만든 함수는 모두 사라집니다. 그러나 현명한 다른 방법이 있습니다: 당신은 Child 테마를 만들고, 거기에 functions.php 파일을 추가합니다, 그리고 당신의 함수를 그 파일 안에 추가합니다. 그 함수는 Parent 테마의 향후 업데이트에 영향을 받지 않는다는 장점과 함께, 그 역시 똑같은 일을 할 것입니다.
functions.php의 구조는 간단합니다: 상단에 PHP 를 여는 태그, 하단에 PHP 를 닫는 태그, 그리고 그 사이 약간의 PHP. 거기에는 당신이 원하는대로 많이 또는 몇 가지 기능을 넣을 수 있습니다. 아래 기초적인 예제는 간단한 functions.php 파일 입니다: HTML 페이지의 head 요소에 favicon 링크를 추가합니다.
function favicon_link() {
echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action('wp_head', 'favicon_link');
테마 개발자를 위한 팁. Child 테마의 functions.php 는 처음 로드되는 시점에 Chlid 테마의 조건들을 선언함으로서 테마에 탈부착 할 수 있는 사용자함수로 만들어 바꿀수 있다는 사실. 예:
if (!function_exists('theme_special_nav')) {
function theme_special_nav() {
// Do something.
}
}
이러한 방법으로, Parent 의 단순한 재선언만으로 Child 테마의 PHP 함수를 바꿀 수 있습니다.
당신이 Child 테마 디렉토리 구조 내에 있는 파일을 포함시키기 위해서는, get_stylesheet_directory() 를 사용해야 합니다. 왜냐하면 Parent 템플릿의 style.css 는 Child 테마의 style.css 를 대체하고, Child 테마의 서브(하위)디렉토리 루트에 있는 style.css 는, (Parent 테마 디렉토리가 아닌) Child 테마의 디렉토리를 get_stylesheet_directory() 로 가리킵니다.
다음 예제에서는, require_once 를 사용하여, Child 테마 디렉토리 구조 내에 저장되어 있는 파일을 참조할때 get_stylesheet_directory 를 어떻게 사용할수 있는지를 보여줍니다.
require_once( get_stylesheet_directory(). '/my_included_file.php' );
Child 테마는 Parent 테마에 정의된 포스트 형식으로 상속합니다. 그러나, Child 테마를 만들때, Parent 테마에 정의된 오버라이드 될 add_theme_support('포스트 형식') 의 사용에 주의해야 합니다. 그것에 직접 추가할 수는 없습니다.
Child 테마에서 템플릿은 style.css 처럼 행동합니다, Parent 로부터 그들 namesakes를 재정의. Child 테마는 간단하게 똑같은 이름의 파일을 사용하여 어떠한 Parent 템플릿도 오버라이딩(덮어쓰기) 할 수 있습니다. (주의. index.php는 워드프레스 3.0 이상에서만 오버라이딩 할 수 있습니다.)
또한, 워드프레스 기능에는 Parent 테마가 업데이트 되어도 편집한 변경사항이 보존되도록, 테마를 다시 편집하지 않게끔 Parent 테마의 템플릿을 수정할 수 있습니다.
다음은 Child 테마에 템플릿 파일을 사용하기위한 몇 가지 예제 사례입니다:
이외에도 style.css, functions.php 그리고 index.php 와 home.php 같은 템플릿 파일, 이미 만들어진 테마 사용시 제대로 연결된 모든 파일 유형을 Child 테마에서 사용할 수 있습니다. 예를 들어, 아이콘과 스타일 시트, 페이지 상단 또는 하단에 링크된 자바스크립트 파일 또는 해당 템플릿이나 functions.php 파일에서 불러오는 별도의 PHP 파일을 Child 테마에서 사용할 수 있습니다.