어린이 테마

워드프레스에서 자식 테마는 부모 테마라고 하는 다른 테마의 스타일과 기능을 상속받는 "하위 테마"입니다. 이를 통해 원본 테마 파일을 수정하지 않고도 안전하게 사용자 정의를 할 수 있습니다.

자식 테마를 만들려면 wp-content/themes 디렉터리에 폴더를 생성하세요. 이 폴더에는 사용자 정의 style.css 파일과 functions.php 파일이 포함되어야 합니다. 자식 테마의 스타일시트는 부모 테마의 스타일시트 이후에 로드되므로 사용자 정의 CSS가 우선 적용되어 부모 테마가 업데이트되더라도 사용자 정의 변경 사항이 덮어쓰여지지 않습니다.

자식 테마는 기본 테마 위에 덧씌워지는 일련의 명령어로, Twenty Seventeen, Twenty Nineteen, Twenty Twenty-One과 같은 기본 테마를 업데이트하더라도 사용자 정의 설정을 잃지 않고 그대로 사용할 수 있게 해줍니다. 핵심 개념, 자식 테마 생성 단계, 그리고 테마 개발 모범 사례를 살펴보겠습니다.

부모 테마와 자식 테마의 차이점은 무엇인가요?

부모 테마 는 필요한 모든 파일과 스타일이 포함된 완전한 WordPress 테마입니다. 자체 폴더와 메타데이터가 포함된 style.css 헤더 파일을 가지고 있습니다. 활성화되면 사이트의 활성 테마 역할을 하며 레이아웃과 스타일을 제공합니다.

자식 테마는 부모 테마의 기능과 스타일을 상속받습니다. 자식 테마의 스타일시트 헤더에서 부모 테마 폴더를 참조하면 WordPress는 자식 테마의 CSS보다 부모 테마의 style.css 파일을 먼저 로드합니다. 따라서 부모 테마의 style.css 파일을 변경하지 않고도 템플릿 파일을 추가하거나 덮어쓰고 추가 CSS를 포함할 수 있습니다.

자식 테마 사용의 이점

자식 테마를 활용하면 특히 복잡한 사용자 정의 테마를 유지 관리하거나 확장할 때 여러 가지 실질적인 이점을 얻을 수 있습니다

• 안전한 업데이트 : 부모 테마 파일을 업데이트해도 자식 테마 디렉터리에 있는 사용자 지정 변경 사항이 덮어쓰여지지 않습니다. 사이트의 디자인과 사용자 경험을 해치지 않고 부모 테마에 보안 패치 및 기능 개선 사항을 안심하고 적용할 수 있습니다.

• 깔끔한 코드 분리 : CSS 파일 수정부터 PHP 코드 조각까지 모든 사용자 정의 코드는 자식 테마에 존재합니다. 이러한 분리를 통해 부모 테마의 코드를 뒤져가며 수정 사항을 찾을 필요 없이, 필요에 따라 수정 사항을 쉽게 추적, 디버깅 및 제거할 수 있습니다.

• 테마 개발 속도 향상 : 자식 테마 생성기 또는 자식 테마 구성 플러그인(예: 공식 자식 테마 구성 도구)을 사용하면 몇 초 만에 새로운 자식 테마의 기본 구조를 만들 수 있습니다. 폴더 설정에 소요되는 시간을 줄이고 디자인 및 기능 개발에 더 많은 시간을 투자할 수 있습니다.

• 재사용성 : 한 사이트용으로 새 자식 테마를 만든 후에는 이를 ZIP 파일로 패키징하여 다른 WordPress 설치 환경에 업로드할 수 있으므로 반복적인 테마 개발 작업에 소요되는 시간을 절약할 수 있습니다.

• 학습 플랫폼 : 테마 개발자를 꿈꾸는 사람들에게 자식 테마는 실제 사이트에 영향을 주지 않고 템플릿 파일, 액션 훅, 필터 등을 실험해 볼 수 있는 편리한 방법을 제공합니다.

자식 테마의 기능

워드프레스에서 차일드 테마는 안전하고 확장 가능한 사이트 맞춤 설정에 매우 중요합니다. 주요 기능은 다음과 같습니다

• 부모 테마 스타일 및 레이아웃 상속 : 부모 테마의 스타일시트와 구조를 불러와 기반으로 구축하며, 모든 원래 디자인 요소와 레이아웃을 유지합니다.

• 사용자 지정 스타일링 및 템플릿 재정의 : 개발자는 자식 테마의 CSS 파일과 복사한 템플릿 파일을 통해 스타일, 헤더, 푸터 등을 재정의할 수 있습니다.

• 기능 추가 또는 수정 : 자식 테마의 functions.php 파일을 사용하면 핵심 테마 로직을 건드리지 않고 WordPress의 동작 방식을 변경하는 PHP 코드를 작성하거나 수정할 수 있습니다.

• 사용자 정의 코드와 테마 업데이트 분리 : 사용자 정의 사항은 상위 테마 업데이트와 분리되어 유지되므로 보안 및 성능 향상을 유지하면서도 변경 사항을 잃지 않을 수 있습니다.

• 테마 테스트 및 프로토타입 제작 간소화 : 안정성을 저해하지 않고 WordPress 사이트의 레이아웃이나 기능 변경 사항을 실험하기에 이상적입니다.

자식 테마 만들기 (단계별)

자식 테마는 수동으로 만들거나 자식 테마 구성 플러그인을 사용할 수 있습니다. 아래는 수동 생성 방법으로, 이 방법을 사용하면 자식 테마 폴더와 파일을 완벽하게 제어할 수 있습니다.

• 자식 테마 디렉토리 생성 : WordPress 설치 폴더에서 wp-content/themes로 이동합니다. Twenty Twenty-One 테마를 부모 테마로 사용할 경우 twentyone-child와 같은 새 폴더를 생성합니다. 이 자식 테마 디렉토리는 모든 사용자 정의 템플릿과 애셋을 저장하는 컨테이너가 됩니다.

• 스타일시트(style.css) 추가 : 자식 테마 폴더 안에 style.css라는 파일을 생성합니다. 파일 상단에 다음 헤더를 추가합니다.

/*
테마 이름: Twenty Twenty-One 자식
테마 URI: https://example.com/twentyone-child
설명: Twenty Twenty-One 테마의 자식 테마
작성자: [사용자 이름]
템플릿: twentytwentyone
버전: 1.0.0
*/

테마 이름, 템플릿 및 기타 필드를 자식 테마 이름과 상위 테마 폴더에 맞게 변경하세요.

• 부모 및 자식 테마 스타일 로드 : 자식 테마 폴더에 functions.php 파일을 생성합니다. 다음 기본 코드 조각을 사용하여 스타일을 올바르게 로드하세요.

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_child_enqueue_styles' );

이렇게 하면 부모 테마의 스타일시트가 먼저 로드되고 그 다음에 자식 테마의 사용자 지정 CSS가 로드됩니다.

• 자식 테마 활성화 : 자식 테마 폴더를 압축하거나(대시보드를 통해 업로드한 경우) 또는 모양 메뉴의 테마 섹션을 새로 고침하세요. 새 자식 테마를 찾아 활성화를 클릭하고, 부모 테마의 디자인과 자식 테마의 수정 사항이 적용되어 사이트가 올바르게 로드되는지 확인하세요.

차일드 테마 파일 이해하기

완전한 기능을 갖춘 자식 테마는 일반적으로 다음을 포함합니다

• style.css : 자식 테마의 헤더 메타데이터와 모든 사용자 지정 CSS를 저장합니다.

• functions.php : 이 파일에는 위의 대기열 생성 코드와 기능을 확장하기 위한 추가 PHP 파일 조각, 후크 또는 필터가 포함되어 있습니다.

• 템플릿 파일 (선택 사항): header.php, single.php, page.php와 같은 상위 테마의 템플릿 파일을 자식 테마 폴더에 복사하여 덮어쓰세요. WordPress는 상위 테마의 버전 대신 자식 테마의 버전을 사용합니다.

• screenshot.png (선택 사항): 테마 대시보드에 1200×900 픽셀 크기의 미리보기 이미지가 표시됩니다.

• assets/ (선택 사항): 자식 테마별 이미지, JavaScript 또는 기타 리소스를 위한 하위 폴더입니다.

부모 테마에서 재정의되지 않은 다른 모든 파일은 그대로 유지되므로 자식 테마는 메뉴, 위젯 및 테마 옵션을 포함하여 부모 테마의 모든 것을 "상속"받습니다.

초보자도 쉽게 따라할 수 있는 자식 테마 없이 워드프레스를 맞춤 설정하는 방법

워드프레스 사이트를 개인화하고 싶지만 고급 테마 수정이 필요하지 않은 사용자를 위해 자식 테마를 사용하는 것보다 더 쉬운 대안이 있습니다. 이러한 방법은 핵심 파일을 편집하거나 별도의 테마 구조를 만들지 않고 스타일, 레이아웃 또는 기능을 조정하려는 초보자에게 이상적입니다.

다음은 초보자가 쉽게 따라할 수 있는 가장 일반적인 사용자 지정 방법입니다

• 테마 사용자 정의 도구(외관 > 사용자 정의): 대부분의 최신 WordPress 테마에는 내장된 사용자 정의 도구에 광범위한 설정이 포함되어 있어 코드를 건드리지 않고도 색상, 글꼴, 로고 및 홈페이지 레이아웃을 조정할 수 있습니다.

• 추가 CSS 패널: 커스터마이저에 있는 이 필드를 사용하면 테마의 스타일을 재정의하는 사용자 지정 CSS 스니펫을 작성할 수 있습니다. 변경 사항은 즉시 적용되며 테마 설정과 함께 저장됩니다.

• 사용자 정의 CSS 플러그인: Simple Custom CSS 또는 WP Add Custom CSS 와 같은 플러그인은 테마를 나중에 변경하더라도 CSS 규칙을 안전하고 독립적으로 추가할 수 있는 방법을 제공합니다.

• 사이트별 플러그인: 테마 파일을 직접 수정하는 대신, 단축 코드, 사용자 정의 게시물 유형 또는 간단한 PHP 수정과 같은 기본 기능을 위한 가벼운 사이트별 플러그인을 만들 수 있습니다.

• 페이지 빌더(예: Elementor, Beaver Builder): 이러한 드래그 앤 드롭 도구는 페이지 레이아웃과 디자인을 시각적으로 제어할 수 있도록 해주어 코드를 한 줄도 작성하지 않고도 쉽게 맞춤 설정할 수 있습니다.

이러한 방법은 복잡한 자식 테마 폴더 관리나 파일 수동 편집 없이 유연성을 원하는 사용자에게 적합합니다. 대부분의 경우 테마 업데이트 시 변경 사항이 그대로 유지되며, FTP 접근 권한이나 테마 개발 경험이 필요하지 않습니다.

흔히 발생하는 문제점 및 해결 방법

경험이 풍부한 테마 개발자조차도 차일드 테마를 다룰 때 실수를 저지를 수 있습니다. 다음은 몇 가지 간단한 확인 사항입니다

• 잘못된 템플릿 이름 : style.css 파일의 Template 줄이 상위 테마 폴더의 이름과 정확히 일치하는지 확인하세요(대소문자 구분).

• 자식 테마가 활성화되지 않았습니다 : 설치 후 자식 테마를 활성화해야 합니다. 그렇지 않으면 사용자 지정 CSS 및 PHP가 실행되지 않습니다.

• CSS 캐싱 문제 : 브라우저 또는 플러그인 캐시로 인해 CSS 변경 사항이 숨겨질 수 있습니다. 캐시를 지우거나 큐 호출 시 버전이 지정된 스타일시트를 사용하십시오.

• 누락된 종속성 : 상위 테마 함수에 의존하는 경우, 상위 코드가 먼저 로드되도록 올바른 후크 우선순위를 사용하고 있는지 확인하세요.

테마 개발 모범 사례

다음은 워드프레스 테마 개발을 위한 몇 가지 모범 사례입니다

• 기능은 플러그인으로 유지하세요 : 사용자 정의 게시물 유형이나 단축 코드처럼 단순히 외관상의 변화가 아닌 기능을 추가하는 경우, 자식 테마에 코드를 추가하는 대신 플러그인으로 분리하여 제공하는 것을 고려해 보세요.

• 차일드 테마 구성 도구를 사용하세요 : 차일드 테마 구성 도구 플러그인과 같은 도구는 폴더 생성, 헤더 설정 및 대기열 루틴을 자동화할 수 있으므로 CSS 파일 헤더나 PHP 파일을 수동으로 편집하는 데 익숙하지 않은 사용자에게 이상적입니다.

• 버전 관리를 유지하세요 : 자식 테마를 Git 또는 다른 버전 관리 시스템(VCS)에 저장하세요. 중요한 변경 사항이 발생하기 전에 릴리스에 태그를 지정하여 문제가 발생할 경우 쉽게 되돌릴 수 있도록 하세요.

• 변경 사항을 문서화하세요 : 자식 테마 폴더에 사용자 지정 사항 목록을 간단한 README.md 파일로 저장하여 공동 작업자와 향후 사용자가 수정 사항을 이해할 수 있도록 하세요.

워드프레스 차일드 테마를 사용해야 할까요?

자식 테마를 언제 사용해야 하고 언제 사용하지 말아야 하는지 이해하면 시간을 절약하고 사이트를 미래에도 문제없이 사용할 수 있습니다. 자식 테마는 개발자와 고급 사용자에게 강력한 도구이지만 모든 사용자 지정 작업에 항상 필요한 것은 아닙니다.

결정 방법은 다음과 같습니다

다음과 같은 경우 자식 테마를 사용하세요:

• 템플릿 파일(예: single.php, header.php)을 재정의하거나 확장해야 합니다.
• functions.php 파일을 통해 사용자 정의 PHP 함수 또는 필터 후크를 작성할 계획입니다.
• 테마는 정기적으로 업데이트될 예정이며, 변경 사항을 저장하고 싶으실 겁니다.
• 사용자 지정 디자인 로직을 사용하여 클라이언트 사이트 또는 스테이징 환경을 구축하고 있습니다.

다음과 같은 경우에는 자식 테마 사용을 피하세요:

• 색상이나 글꼴 변경과 같은 기본적인 시각적 수정만 필요합니다.

• 상위 테마는 강력한 사용자 정의 설정 또는 전체 사이트 편집 기능을 지원합니다.

• 레이아웃 변경에는 페이지 빌더나 디자인 플러그인을 사용하는 것을 선호하시는군요.

• 템플릿 파트와 전역 스타일 때문에 자식 테마의 중요성이 떨어지는 블록 기반 테마(예: Twenty Twenty-Four)를 사용하고 계시는군요.

팁: 중간 단계 사용자라면 커스터마이저나 CSS 플러그인을 사용하여 간단한 변경부터 시작해 보세요. 필요에 따라 초기 사용자 정의 설정을 유지하면서 자식 테마로 전환할 수 있습니다.

기술적 숙련도와 장기적인 사이트 목표를 고려하여 자식 테마를 사용할지, 아니면 더 간단한 대안을 사용할지 자신 있게 선택할 수 있습니다.

자식 테마를 사용하지 말아야 할 경우

아동 관련 주제는 강력한 효과를 낼 수 있지만, 항상 올바른 선택은 아닙니다

• 간단한 CSS 수정 : "Simple Custom CSS"와 같은 플러그인을 사용하면 몇 가지 스타일 변경에 충분할 수 있습니다.

• 완전 재설계 : 완전히 새로운 레이아웃을 구축하거나, 처음부터 사용자 지정 테마를 만들거나, 시작 테마에서 시작하는 것이 더 깔끔할 수 있습니다.

• 성능에 민감한 사이트 : 여러 개의 style.css 파일과 추가 PHP 훅을 로드하면 오버헤드가 발생할 수 있습니다. 자식 테마의 자산을 검토하고 속도가 중요한 경우 핵심 CSS를 인라인으로 처리하는 것을 고려하세요.

자식 테마 업로드 및 배포

자식 테마가 준비되면 다음 단계를 따르세요

• 자식 테마 폴더 압축하기 : 폴더를 압축합니다(예: twentyone-child.zip).

• 대시보드를 통한 업로드 : 외관 > 테마 > 새 테마 추가 > 테마 업로드 압축 파일을 선택하고 지금 설치를 .

• 활성화 및 테스트 : 활성화 후 주요 페이지를 탐색하여 모든 항목이 예상대로 표시되고 작동하는지 확인하십시오.

• 다른 사람과 공유하기 자식 테마를 만들었다면 다른 사이트 소유자들이 활용할 수 있도록 GitHub 또는 WordPress.org

마지막으로

자식 테마를 사용하는 것은 원본 파일을 건드리지 않고 WordPress 테마를 사용자 지정하는 가장 안전하고 효과적인 방법입니다. 자식 테마를 사용하면 사용자 지정 CSS를 추가하고, 템플릿을 수정하고, 부모 테마를 업데이트하더라도 변경 사항이 손실되지 않습니다. 새 자식 테마를 처음부터 만들거나 기존 테마를 수정하든, 자식 테마는 초보자와 개발자 모두에게 혁신적인 접근 방식입니다.

WordPress 차일드 테마 설정에 전문가의 도움이 필요하신가요? Seahawk는 여러분이 제대로 시작할 수 있도록 전문적인 서비스를 제공합니다.