워드프레스 자식테마 만들기. 활용법 - child theme

 

	개요
	워드프레스의 테마를 차일드 테마로 만드는 방법과 자식테마 활용법 정리.   차일드테마 필요성. - 테마의 원본을 수정(예: functions.php 에 코드 추가등)하여 사용 중인데, 테마의 업데이트가 이뤄지면 덮어쓰기 하게되어 수정사항을 모두 잃어버림. - 테마에 수정한 것은 없다고 해도, 테마의 업데이트가 오히려 기존 정상작동하였던 기능에 하자가 발생할 위험성 차단.   어쨌든, 테마파일을 수정하여 사용하려는 경우  무조건 차일드 테마를 만들어서 사이트에 적용시키고 수정이 요구되는 모든 것은 차일드테마의 파일을 수정하도록 함.   본 글에서 다루는 자식테마 설정은 codex에서 제공하는 정보 기반함. -> http://codex.wordpress.org/Child_Themes   자식 테마 만드는 전체적인 흐름. 부모테마에 해당하는 원본테마가 워드프레스에 설치된 상태에서 자식테마 폴더를 1개 만들고, 그속에 자식테마용으로 수정된 style.css 파일을 두는 것으로 워드프레스에서는 자식테마를 인식함.

 

 

	1. 차일드 테마 만들기.
	원본테마가  워드프레스에 설치된 상태(활성화는 안된)라고 하자. 본 글에서는 Royal 이라는 테마를 예로보인다. 워드프레스 설치 폴더(/wp-contents/themes/)에 Royal  이라는 폴더가 보인다.   1.자식테마용 폴더 만들기. 폴더이름을 임의로 해도 되나, 원본 테마의 자식임을 명시하는게 편하다. royal-child 라는 이름을 폴더를 하나 만들자.(아래 그림)     2. 자식테마 폴더에 style.css파일 새로만들기. 자식테마 폴더에 style.css 파일을 새로 만든다.(참고정보 :  css 파일만드는 법 -> http://igotit.tistory.com/169 ) 자식테마 폴더의 style,css 파일 앞부분의 주석(/*...*/) 부분을 아래처럼 기록한다. /* Theme Name: ROYAL Child Template: royal */ @import url("../royal/style.css"); 설명. 주석문 속의 2개 항목은 필수이다. Theme name: ROYAL Child 은 워프관리자에서 인식할 테마명이며, Template: royal 은 부모테마의 폴더이름을 기록한다. 대소문자 구분하므로 폴더이름의 대소문자 를 그대로 기록해야한다. 위 2개만으로도 워프관리자에서는 테마로 인식되게 된다. style.css 의 마지막 부분에는 부모테마의 style.css 에 있는것은 그대로 적용하겠다는 설정이다. 이 상태에서 만일 차일드 테마에서의 폰트변경하고 싶다면, import 아래에 css구문을 기록하면 된다. css구문은 동일 선택자로 여러번 정의하게 되면, 나중에 선언된 것이 실제 적용되므로 부모테마에서의 css구문은 무시되고 우리가 자식테마의 style.css 에 추가된 것이 적용되게 된다.   기타.(필수아님) 원본테마에 있는 screenshot.png 파일도 자식테마 폴더에 복사한다. 필수는 아니지만 워프 관리자 에서 테마볼때 테마의 이미지 보이게 하는것임.   3. 자식테마 정상적으로 워프관리자에서 보이는지 확인. 앞의 설정으로 자식테마 만들기는 모두 끝났다. 이제 자식테마를 사이트에 적용하면 되며, 현재의 자식테마에서 우리가 수정한 것이 전혀없고 모두 원본테마의 것들이 적용되기때문에 원본테마와 동일하다. 아래그림은 워프관리자에서 보이는 자식테마 모습이다. 파란색박스 부분에 우리가 style.css 에 설정한 테마명인 royal child 라는 테마명이 보인다.   자식테마의 functions.php, style.css 설정법. - 2017년 3월 1일 추가. 앞의 설명에서는 자식테마 폴더에 style.css 파일1개만 만들고, 구문 @import url("../royal/style.css");  이용하여  부모 테마의 style.css를 자식테마에도 그대로 적용하는 처리이다. 이 구문대신 자식테마 폴더에 functions.php 를 추가하고 부모테마의 css 를 적용시키는 방식으로 구축하도록 해보자. style.css 자식테마의 style.css 는 구문 @import url("../royal/style.css"); 없앤 아래내용으로 하고, /* Theme Name: ROYAL Child Template: royal Version:   1.0.0 */ functions.php functions.php 파일을 새로 만들고 아래 2가지 중 1개 선택하여 작성하여 자식테마의 폴더에 배치한다. 코드1. <?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() {     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?> 코드2. <?php function my_theme_enqueue_styles() {     $parent_style = 'parent-style'; // style for parent theme     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 ),         wp_get_theme()->get('Version')     ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); ?> from : https://codex.wordpress.org/Child_Themes

 

	2. 자식테마 수정하는 방법.
	모든 변경사항은 자식테마에서 이뤄지도록 한다.   1. style.css 우리가 앞에서 만든 자식테마 폴더속의 style.css에는 부모테마의 style.css 를 그대로 적용하도록 되어있지만, 이 파일에 특정 선택자를 지정하여 css구문을 추가하면  부모 style.css에서 동일 선택자로 설정이 이뤄지고 있어도 자식테마에 추가된 css구문이 적용된다. (나중에 정의된 css가 실 적용되기 때문임)   2. functions.php 부모테마폴더에 functions.php 가 있고, 자식테마에도 functions.php 가 있다면, 부모테마의 functions,php 는 모두 자식테마에도 적용되고 동시에 자식테마 폴더속에 있는 funxctions,php 에 우리가 추가한 코드가 자식테마에 적용된다. 자식테마의 functons,php 에 코드 추가하는 예 : "사용자정의 포스트" 등을 테마에 추가하기 위해서는 자식테마폴더의 functions.php 에 코드 추가한다. 참고  사용자 정의 포스트 상세설명 보기 -> http://igotit.tistory.com/75 Add functions to your WordPress child theme (1) http://www.wpthemedetector.com/add-functions-to-your-wordpress-child-theme-1/   3. 기타 템플릿 파일들. functions.php 를 제외한 나머지 템플릿파일들( index.php, single.php, ...) 은 자식테마 폴더에 없는 경우에는 부모테마의 것이 그대로 적용되고, 만일 자식테마에 index.php 가 있다면 부모테마 폴더의 index,php는 적용되지 않고 자식테마 폴더속의 index.php 만 자식테마에 적용된다.    4. 부모테마의 폴더구조 유지할것. 만일 원본테마의 폴더하위에 있는 php 를 수정원한다면 폴더역시 자식테마의 하위에 만들고 php 를 복사하여 수정한다. 예: 원본테마폴더 밑에 headers/header1.php 라는 것을 수정하고 싶다면,자식테마에  headers 폴더 만들고 header1.php 를 복사하여 수정한다.

 

188.