OnePress 테마를 적용한 워드프레스 블로그에서 single.php, header.php, index.php, functions.php를 수정해서 사용하고 있지만 아직 자식 테마를 적용하지 않았습니다. 그래서 OnePress 테마가 업데이트될 때마다 일일이 다시 수정했었는데요. 이 글에서는 워드프레스 OnePress 테마에서 자식 테마 적용 방법을 상세히 설명드리겠습니다.
워드프레스 Onepress 테마에서 자식 테마 적용 방법
1. 자식 테마(Child Theme) 란?
자식 테마(Child Theme)는 기존에 있는 테마(부모 테마, Parent Theme)의 모든 기능과 스타일을 상속받으면서, 추가적인 커스터마이징이나 변경을 안전하게 적용할 수 있게 해주는 테마를 말합니다. 자식 테마를 사용하면 원본 테마(부모 테마)를 직접 수정하지 않고도, 디자인이나 기능을 변경할 수 있어 원본 테마의 업데이트에도 영향을 받지 않으면서 개별적인 수정 사항을 유지할 수 있는 장점이 있습니다.
- 기능 상속 : 부모 테마의 모든 기능과 스타일을 그대로 상속받습니다.
- 커스터마이징 : 부모 테마의 디자인이나 기능을 수정하거나 확장할 수 있습니다.
- 업데이트 안전성 : 부모 테마가 업데이트되어도 자식테마의 수정사항은 유지됩니다.
- 최소한의 파일 : 수정하고자 하는 파일만 자식테마에 포함시키면 됩니다.
- 원본 보존 : 부모 테마의 원본 파일을 직접 수정하지 않아 안전합니다.
자식 테마에 대해서 쉽게 말씀드리면, 부모 테마와 자식 테마에 동일한 파일이 있을 경우 자식 테마의 파일이 우선적으로 사용된다고 이해하시면 됩니다.
2. 자식테마 만들기
① 자식테마 디렉토리 만들기
WordPress 설치 디렉터리의 wp-content/themes/ 폴더에 새로운 폴더를 만듭니다. 이름은 보통 사용하고 있는 테마명에 ‘child’를 추가하여 생성합니다. 저는 onepress-child로 지정하겠습니다.먼저, 여러분이 이용하는 서버에서 터미널로 들어가 아래와 같이 디렉터리를 생성합니다. SSH 터미널에서 사용하는 명령어가 익숙하지 않으시다면 아래 글을 참고하시기 바랍니다.
② style.css 파일 생성
자식 테마 디렉터리를 생성한 후, 해당 디렉터리로 이동하여 아래와 같이 nano style.css 를 실행합니다.
nano 편집기를 실행한 다음 아래 코드를 복사하여 붙여넣기 합니다. (nano를 실행한 후 마우스 우클릭하여 ‘붙여넣기’를 클릭합니다)
/*
Theme Name: OnePress Child
Theme URI: http://www.familythemes.com/themes/onepress/
Description: OnePress Child Theme
Author: zisikbug
Author URI: http://zisikbug.com
Template: onepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: onepress-child
*/
코드를 붙여넣기한 후 키보드로 Ctrl+X → y → Enter키를 클릭하여 저장합니다.
③ functions.php 파일 생성
style.css와 마찬가지로 nano functions.php 를 실행합니다.
nano functions.php를 실행한 후 아래 코드를 복사 붙여넣기 한 후 style.css와 마찬가지로 Ctrl+x → y → Enter 를 순서대로 클릭하여 저장합니다.
<?php
function onepress_child_enqueue_styles() {
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', 'onepress_child_enqueue_styles' );
// 여기에 추가 함수를 입력하세요
자식 테마의 functions.php 파일에는 위의 코드와 함께 원본 테마의 functions.php 파일의 전체 내용을 복사하는 것이 아니라, 수정한 부분만 추가해야 합니다. 또한, 동일한 코드가 중복되지 않도록 부모 테마에서 해당 코드를 반드시 삭제해야 합니다.
저의 경우, 자식 테마에 부모 테마에서 수정한 코드를 추가한 후, 부모 테마에서 해당 코드를 삭제하지 않고 자식 테마를 활성화했더니 치명적인 오류가 발생하여 워드프레스에 접속할 수 없었습니다. 다행히 SSH 터미널에서 onepress-child 디렉터리를 삭제한 후 다시 접속하여 문제를 해결했습니다.
아래는 부모 테마에 부가적으로 추가했던 코드만 자식 테마에 추가한 화면입니다.
④ single.php, header.php, index.php를 자식테마에 복사하기
functions.php 파일의 생성 및 추가한 코드의 복사가 완료되었다면 나머지는 파일만 복사하면 되기 때문에 어렵지 않습니다. 먼저 wp-content/themes 에서 OnePress 테마 디렉터리로 이동합니다.
cd onepress
OnePress 테마에서 수정한 파일만 자식 테마에 복사하면 되는데, 저의 경우 single.php, header.php, index.php 파일을 수정했기 때문에 3개의 파일을 onepress-child 디렉터리로 복사했습니다.
OnePress 테마 디렉터리로 이동한 후, 아래 명령어를 순서대로 실행합니다.
cp single.php ../onepress-child
cp header.php ../onepress-child
cp index.php ../ondpress-child
아래는 수정한 파일을 onepress-child 디렉터리에 복사한 결과 화면입니다.
④ FileZilla FTP를 이용해 수정하는 방법
SSH 터미널 작업에 익숙하지 않으신 분들은 FileZilla FTP로도 디렉터리와 파일 생성 및 수정이 가능합니다.
FileZilla FTP 사용법은 아래 링크를 참고하시기 바랍니다.
FTP로 AWS Lightsail 서버에 파일 업로드하기
FileZilla FTP로 서버에 접속한 후, OnePress 디렉터리로 이동합니다. 디렉터리 내에서 마우스 오른쪽 버튼을 클릭하고 메뉴에서 ‘Create directory’를 선택하면 디렉터리를 생성할 수 있습니다. 또한, 원하는 파일을 선택한 후 ‘View/Edit’을 클릭하면 해당 파일을 보거나 수정할 수 있기 때문에 좀 더 쉽게 파일을 작성하고 복사할 수 있습니다.
좀 더 상세하게 설명하면 아래와 같습니다.
- onepress-child 디렉터리 생성
- FileZilla에서 WordPress 테마 디렉터리로 이동합니다 (보통 wp-content/themes/).
- 오른쪽 패널(서버 측)에서 빈 공간을 마우스 오른쪽 버튼으로 클릭합니다.
- 메뉴에서 ‘Create directory’를 선택하고 ‘onepress-child’라고 이름을 지정합니다.
- 필요한 파일 생성 및 업로드
- 로컬 컴퓨터에서 style.css, functions.php, single.php, header.php, index.php 파일을 생성합니다.
- FileZilla의 왼쪽 패널(로컬 측)에서 이 파일들이 있는 폴더로 이동합니다.
- 오른쪽 패널에서 새로 만든 onepress-child 디렉터리로 이동합니다.
- 왼쪽 패널에서 해당 파일들을 선택하고 오른쪽 패널로 드래그앤드롭하여 업로드합니다.
- 파일 확인 및 편집
- 업로드된 각 파일을 더블클릭하거나 마우스 오른쪽 버튼을 클릭하고 ‘View/Edit’을 선택하여 내용을 확인하거나 수정할 수 있습니다.
- 수정 후에는 파일을 저장하고 FileZilla가 자동으로 변경사항을 서버에 업로드할 것입니다.
3. 자식테마 적용하기
자식 테마를 적용하기 위한 모든 준비가 완료되었습니다. 이제 워드프레스에 자식 테마를 적용해 보도록 하겠습니다.
워드프레스 관리자 화면에서 ‘외모’ → ‘테마’로 이동합니다. 이 화면에서 자식 테마를 활성화할 수 있는 버튼이 보이는데, 바로 ‘활성화’ 버튼을 클릭하지 말고 ‘실시간 미리보기’를 먼저 클릭하여 문제가 없는지 확인하는 것이 좋습니다. 문제가 있을 경우 자식 테마 파일을 다시 확인하고 수정한 후 ‘활성화’ 버튼을 클릭하면 자식 테마가 적용됩니다.
위에서도 말씀드렸지만, 자식 테마를 활성화하기 전에 부모 테마에 있는 functions.php 파일에서 자식 테마에 추가한 코드를 반드시 삭제한 후 자식 테마를 ‘활성화’ 해야 합니다.
아래는 자식 테마가 활성화된 화면입니다.
지금부터는 OnePress 테마가 업데이트되더라도 수정했던 부분은 그대로 유지됩니다.
오늘은 워드프레스 OnePress 테마에서 자식 테마 적용 방법에 대해 자세히 알아보았습니다. 위에서도 말씀드렸지만 자식 테마에 있는 파일이 잘못되었거나, functions.php의 내용중 부모 테마와 같은 내용이 있을 경우 치명적인 에러가 발생할 수 있습니다. 자식 테마를 적용하시기 전에 반드시 ‘실시간 미리보기’로 문제가 없는지 확인하신 후 활성화하시기 바랍니다. 자식 테마를 어떻게 적용하는지 모르시는 분들은 이 글을 참고하여 적용해 보시기 바랍니다.