워드프레스 차일드 테마 만들기: 초보자도 쉽게 따라하는 방법

워드프레스 블로그를 운영하다 보면 테마를 수정하고 싶은 순간이 옵니다. 하지만 부모 테마를 직접 수정하면 업데이트 시 변경사항이 사라질 수 있죠. 이때 필요한 것이 바로 ‘차일드 테마’입니다. 차일드 테마는 부모 테마의 기능을 그대로 가져오면서도 안전하게 수정할 수 있는 방법을 제공합니다.

이 글에서는 워드프레스 차일드 테마 만들기의 모든 것을 알려드릴 거예요. 초보자도 쉽게 따라할 수 있으니 걱정 마세요!

워드프레스 차일드 테마 만들기란?

워드프레스 차일드 테마는 부모 테마의 기능과 스타일을 그대로 가져오면서도, 우리가 원하는 대로 수정할 수 있는 테마를 말해요. 워드프레스 차일드 테마 만들기를 하면 부모 테마가 업데이트되어도 우리가 수정한 내용이 사라지지 않아 안전하답니다.

차일드 테마가 필요한 이유와 장점들을 좀 더 자세히 알아볼까요?

1. 안전한 테마 수정: 부모 테마 파일을 직접 건드리지 않아도 돼요. 그래서 테마 업데이트 때 우리가 바꾼 내용이 날아갈 걱정이 없죠.
2. 쉬운 업데이트: 부모 테마가 새 버전으로 바뀌어도 차일드 테마에서 수정한 내용은 그대로 유지돼요. 이건 웹사이트의 보안과 기능 개선에 정말 중요해요.
3. 성능 최적화: 필요한 것만 차일드 테마에 넣을 수 있어서 불필요한 코드를 줄이고 웹사이트 속도를 빠르게 만들 수 있어요.
4. 효율적인 개발: 부모 테마와 차일드 테마의 코드가 깔끔하게 나뉘어 있어서 코드 관리가 훨씬 쉬워져요.

차일드 테마로 할 수 있는 멋진 일들도 있어요.

• 웹사이트 디자인을 내 맘대로 바꿀 수 있어요.
• 새로운 기능을 추가하거나 필요 없는 기능을 뺄 수 있어요.
• 웹사이트 속도를 더 빠르게 만들 수 있어요.
• 내 브랜드만의 특별한 모습을 계속 유지할 수 있어요.

하지만 주의할 점도 있어요. 너무 많이 바꾸면 오히려 사이트가 느려질 수 있으니, 꼭 필요한 것만 바꾸는 게 좋아요.

결론적으로, 워드프레스 차일드 테마는 여러분의 웹사이트를 더 안전하고, 유연하고, 효율적으로 만들어주는 강력한 도구예요. 이걸 이용하면 여러분만의 특별한 웹사이트를 더 쉽고 안전하게 만들고 관리할 수 있답니다.

워드프레스 차일드 테마 만들기: 단계별 가이드

1. 필요한 파일 준비하기

먼저, 차일드 테마를 위한 새 폴더를 만들어주세요. 부모 테마가 카덴스라고 한다면, 차일트 테마 이름은 ‘kadence-child’로 지어볼까요? 그리고 이 폴더 안에 두 개의 파일을 만들어주세요.

• style.css
• functions.php

파일 내용을 작성 후 저장할 때 전체 경로는 다음과 같습니다.

• 워드프레스 설치 디렉토리/wp-content/themes/kadence-child/style.css
• 워드프레스 설치 디렉토리/wp-content/themes/kadence-child/functions.php

파일을 생성할 때는 윈도우 기본 앱인 메모장을 이용해서 만들면 됩니다. 주의할 점은 저장할 때 파일 형식을 ‘ 모든 파일 (*.*) ‘로 지정해주어야 한다는 점입니다.

2. style.css 파일 작성하기

style.css 파일에는 다음과 같이 작성해주세요.

/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/
Description: Child theme for Kadence
Author: Your Name
Author URI: http://yoursite.com
Template: kadence
Version: 1.0.0
*/

/* 여기에 추가 CSS를 작성하세요 */

CSS 코드 해설

이 CSS 코드는 워드프레스 차일드 테마의 정체성을 나타내는 중요한 정보를 담고 있어요. 각 줄의 의미를 살펴볼까요?

1. Theme Name: 우리가 만든 차일드 테마의 이름이에요. 여기서는 ‘Kadence Child’라고 지었네요.
2. Theme URI: 테마의 공식 웹사이트 주소예요. 카덴스 테마의 공식 사이트로 연결했어요.
3. Description: 테마에 대한 간단한 설명을 적는 곳이에요.
4. Author: 차일드 테마를 만든 사람의 이름을 적어주세요.
5. Author URI: 테마를 만든 사람의 웹사이트 주소를 적는 곳이에요.
6. Template: 이 부분이 정말 중요해요! 부모 테마의 이름을 정확히 적어야 해요. 여기서는 ‘kadence’로 되어 있죠.
7. Version: 차일드 테마의 버전을 나타내요.

마지막 줄의 주석은 여러분이 원하는 스타일을 추가로 작성할 수 있는 공간이에요. 여기에 원하는 디자인을 추가하면 돼요.

3. functions.php 파일 작성하기

functions.php 파일에는 이렇게 작성해주세요.

<?php
function kadence_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' ) );
}
add_action( 'wp_enqueue_scripts', 'kadence_child_enqueue_styles' );

// 여기에 추가 함수를 작성하세요

PHP 코드 해설

이 PHP 코드는 차일드 테마가 부모 테마의 스타일을 가져오면서도 자신만의 스타일을 적용할 수 있게 해주는 중요한 역할을 해요. 코드의 역할을 하나씩 살펴볼게요:

1. kadence_child_enqueue_styles() 함수를 만들었어요. 이 함수는 부모 테마와 차일드 테마의 스타일시트를 불러오는 일을 해요.
2. wp_enqueue_style() 함수를 사용해 스타일시트를 등록하고 불러와요.
   – 첫 번째 줄은 부모 테마의 style.css를 가져와요.
   – 두 번째 줄은 차일드 테마의 style.css를 가져오는데, 부모 테마의 스타일시트 다음에 적용되도록 설정해요.
3. add_action() 함수는 워드프레스가 스타일을 불러올 때 우리가 만든 함수를 실행하도록 해요.

마지막 주석은 여러분이 원하는 PHP 함수를 추가로 작성할 수 있는 공간이에요. 여기에 원하는 기능을 추가하면 돼요.

4. 차일드 테마 활성화하기

차일드 테마를 만들었다면 이제 활성화할 차례입니다. 다음 단계를 따라 차일드 테마를 활성화해 보세요.

1. 워드프레스 관리자 페이지에 로그인합니다.
2. 왼쪽 메뉴에서 ‘외모’ > ‘테마’를 클릭합니다.
3. 새로 만든 차일드 테마(예: ‘Kadence Child’)를 찾습니다.
4. 차일드 테마 위에 마우스를 올리면 ‘활성화’ 버튼이 나타납니다. 이 버튼을 클릭합니다.
5. 활성화가 완료되면 ‘테마 변경됨’ 메시지가 표시됩니다.
6. 웹사이트 프론트엔드를 확인하여 차일드 테마가 제대로 적용되었는지 확인합니다.
7. 문제가 있다면 차일드 테마의 style.css와 functions.php 파일을 다시 한 번 점검해보세요.
8. 차일드 테마 활성화 후에는 필요에 따라 ‘외모’ > ‘사용자 정의하기’에서 추가적인 설정을 할 수 있습니다.

이렇게 하면 차일드 테마가 성공적으로 활성화되어 안전하게 테마를 수정할 수 있게 됩니다.

마무리

워드프레스 차일드 테마 만들기, 생각보다 어렵지 않죠? 이제 여러분도 블로그를 더욱 멋지게 꾸밀 수 있을 거예요. 궁금한 점이 있다면 언제든 댓글로 물어보세요. 함께 성장하는 블로거가 되어봐요!

참고로, 차일드 테마를 생성한 후에 가끔 사용하는, 개발자 블로그에서 자주 사용하는 코드블록 커스텀마이즈하고 싶은 경우가 있어요. 워드프레스 코드블록 예쁘게 꾸미기 – PrismJS로 코드 하이라이트 적용하기 포스트를 통해서 그 바램을 실현해 보세요!