WordPress 자식 테마를 만드는 방법

일반적으로 완벽한 테마를 찾는 것은 거의 불가능합니다. 항상 수행해야 하는 몇 가지 수정 사항이 있습니다. 따라서 Twenty Fifteen과 같은 멋진 WordPress 기본 테마를 가져와서 원하는 대로 표시되고 작동하도록 자신만의 테마로 만들면 어떨까요? 자식 테마를 만들면 앞으로 많은 시간과 두통을 절약할 수 있습니다(저를 믿으십시오).

나는 직접적인 경험에서 말할 수 있다. 나는 개발자가 방금 상위 테마를 해킹한 WordPress 사이트를 "상속"했으며, 사이트에 기능을 부여한 사용자 정의를 무시할까봐 테마를 실제로 업데이트할 수 없다는 것이 얼마나 실망스러웠는지 아직도 기억합니다. 무엇이 원본 코드이고 무엇이 사용자 정의인지 몰랐기 때문에 업데이트 가능성이 없이 그대로 있었습니다.

하지만 이야기는 해피엔딩으로 끝난다. 당시 저는 WordPress를 처음 접했기 때문에 부모 테마를 변경하는 것이 좋은 생각이 아니라는 것을 일찍부터 가르쳐주었습니다. 사이트가 마침내 재설계되었을 때 첫 번째 비즈니스 항목은 사용자 지정 항목을 가져와 자식 테마에 넣는 것이었습니다.

하위 테마를 사용하면 향후 상위 테마 업데이트로 작업을 덮어쓰지 않고 별도의 장소에서 작업할 수 있습니다. 엄밀히 말하면 자식 테마를 만들 때 원본 부모 테마에 영향을 주지 않고 테마를 사용자 지정하는 데 사용할 수 있는 별도의 파일 집합을 만듭니다. 상위 테마의 파일을 변경하면 다음에 테마를 업데이트할 때 해당 변경 사항을 덮어씁니다. 업데이트에는 기능 수정, 버그 수정 및 중요한 보안 조치가 포함될 수 있기 때문에 이는 큰 문제입니다. 상위 테마를 최신 상태로 유지하고 모든 사용자 정의에 하위 테마를 사용하는 것이 중요합니다.

하위 테마 기본 사항

하위 테마는 기본 기능을 위해 상위 테마에 의존하여 생성하는 별도의 테마입니다. 하위 테마를 사용할 때 WordPress는 이를 참조하고 포함된 기능을 찾는 것을 알고 있습니다. 이는 변경해야 하는 상위 테마 부분만 수정할 수 있으므로 WordPress 사이트에 사용자 정의를 추가하는 매우 효율적인 방법입니다.

조금 더 자세히 알아보기 위해 파일 수준에서 하위 테마가 작동하는 방식은 다음과 같습니다. WordPress는 필요한 파일이 하위 테마에 포함되어 있는지 확인합니다. 포함되어 있으면 해당 하위 테마 파일이 로드됩니다. 자식 테마에 없으면 부모 테마의 파일이 로드됩니다. 이에 대한 유일한 예외는 상위 버전과 하위 버전이 모두 로드되는 functions.php 파일입니다. 일반적으로 functions.php 파일에는 중요한 정보가 있습니다. WordPress가 하위 테마 버전만 로드했다면(모든 것을 복사하지 않는 한) 사이트가 제대로 작동하지 않습니다. 고맙게도 WordPress는 두 파일을 모두 로드하므로 전체 functions.php 파일을 자식 테마에 복사하는 것에 대해 걱정할 필요가 없습니다.

필요한 경우 언제든지 하위 테마를 끄고 원래 테마로 돌아갈 수 있음을 기억하십시오. 그래도 일방통행입니다. 부모를 끄고 자식 테마에 의존할 수 없습니다.

WordPress 테마에 사용자 지정을 추가하는 경우 하위 테마를 사용하는 것이 가장 좋습니다. 나만의 콘텐츠를 만들 준비가 되셨나요? 이제 프로세스를 단계별로 살펴보겠습니다.

자식 테마 만들기

하나를 만드는 것이 들리는 것처럼 복잡하지 않습니다. 사실, 기술적으로 필요한 것은 style.css 와 functions.php 파일의 두 파일 뿐입니다. 대부분의 하위 테마에는 그 이상이 있지만 기술적으로 말하면 이 두 가지만 있으면 됩니다.

하위 테마를 만들려면 사용하려는 상위 테마와 함께 WordPress가 설치되어 있어야 합니다.

테마 디렉토리 생성

먼저 테마 디렉토리로 이동하여 새 테마에 대한 폴더를 만듭니다. 알아볼 수 있는 이름을 지정합니다. 이 예에서는 찾기 쉽도록 테마 이름을 child-example 지정하겠습니다.

자식 테마 스타일시트 만들기

다음으로 매우 중요한 단계는 자식 테마의 스타일시트를 만드는 것입니다. style.css 파일을 만듭니다. 제대로 작동하려면 style.css 라는 이름을 지정해야 합니다.

다음으로 테마에 대한 몇 가지 정보를 포함해야 합니다.

이것을 복사하여 style.css file 에 붙여넣습니다.

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

많은 것 같지만 실제로 필요한 것은 Theme Name 과 Template 2개뿐입니다. Theme Name 은 WordPress에 자식 테마의 이름을 알려줍니다. Template 은 WordPress에 어떤 테마를 상위 테마로 고려해야 하는지 알려줍니다. 이는 매우 중요합니다.

나머지 대부분은 꽤 자명하지만, 조금 더 설명이 필요한 몇 가지가 있습니다. Text Domain 과 Tags 는 약간 혼란스러울 수 있습니다. Text Domain 은 국제화 목적으로 문자열을 번역하는 데 사용됩니다. 이것은 테마에 고유하며 번역 기능을 사용할 때마다 사용해야 합니다. Codex에는 더 많은 정보가 있으며 WordPress 개발자를 위한 I18n 주제에서 찾을 수 있습니다. Tags 섹션은 WordPress 테마별 태그 목록입니다. 이 예에서는 Twenty Fifteen parent style.css 를 보고 거기에서 태그를 가져와 자식 테마에 넣었습니다.

부모 스타일 활용

WordPress가 하위 테마 파일을 먼저 찾는 방법을 기억하십니까? 지금은 자식 테마가 작동하지만 아직 스타일링을 하지 않았기 때문에 그다지 세련되지 않은 것 같습니다. 활성화하고 페이지를 새로고침하면 약간 지저분해 보일 것입니다. 아마도 다음과 같이 보일 것입니다.

상위 테마로 돌아가고 최소한 일부 스타일이 적용되도록 이 문제를 수정하겠습니다. 사용자 지정 스타일에 대해 여전히 자식 테마를 사용하지만 먼저 부모 스타일을 표시하도록 합시다.

부모 파일의 스타일시트를 확실히 로드하려면 자식 테마에 넣어야 합니다. 다음 스니펫을 삽입하려면 하위 테마에 functions.php 파일이 필요합니다.

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

CSS 사용자 정의 만들기

이제 상위 스타일이 표시되므로 하위 테마 사용자 지정을 위해 CSS를 일부 변경해 보겠습니다. 이 예에서 페이지 콘텐츠의 배경 요소에 스타일을 지정하면 하위 테마가 작동하는 것을 볼 수 있는 좋은 방법입니다. 상위 테마 CSS에서는 흰색으로 지정되었지만 하위 테마에서는 파란색으로 변경해 보겠습니다. 상위 스타일이 먼저 로드되고 사용자 정의가 로드된 후에 로드되므로 이것이 우리가 보게 될 것임을 기억하십시오.

Chrome 사용자인 경우 개발자 도구는 브라우저에서 스타일을 확인하고 실험하는 데 매우 유용합니다. 보기 > 개발자 > 소스 보기로 이동하여 페이지 요소를 선택합니다. 스타일은 오른쪽에 표시됩니다. 나는 흰색 배경을 가진 .hentry 클래스가 있는 기사를 조사했습니다. 브라우저에서 먼저 테스트하기 위해 16진수 값을 붙여넣었습니다.

이를 변경하려면 하위 테마에서 CSS 파일을 열고 CSS 정보를 추가하십시오.

보시다시피, 스타일 변경은 자식 테마에서 쉽게 할 수 있습니다.

자식 테마의 기능 수정

스타일을 조정하는 것은 매우 쉽습니다. 그러나 머리글, 바닥글, 사이드바 등과 같은 다른 것들은 어떻습니까? 바닥글에서 수정해야 할 사항이 있다고 가정해 보겠습니다. 상위 테마의 바닥글을 복사하여 하위 테마에 붙여넣습니다. footer.php 파일은 선택한 텍스트 편집기에서 열고 수정할 수 있습니다. "Proudlypowered by WordPress" 줄을 제거하기로 결정했기 때문에 내 자식 테마의 파일에서 이것을 삭제했습니다. 이것은 이제 WordPress가 먼저 로드할 파일이므로 해당 텍스트 줄이 표시되지 않습니다.

자식 테마를 만드는 것은 WordPress 테마를 만들 때 익히는 좋은 습관입니다. 몇 가지 간단한 단계만 거치면 쉽게 만들고 유지 관리할 수 있습니다. 사용자 정의를 상위 테마와 분리하여 유지하는 것은 조직 목적과 모든 것을 최신 상태로 유지하는 데 모두 유용하므로 앞으로 많은 골칫거리를 줄일 수 있습니다.