워드프레스에서 자식 테마를 만드는 방법: 쉬운 가이드 

워드프레스 웹사이트 라면 웹사이트 디자인 마음껏 바꿔보고 싶어하는 것은 당연한 일입니다 . 하지만 기존 테마를 건드리지 않고 테마를 수정하고 테스트하는 가장 좋은 방법은 무엇일까요? 워드프레스의 차일드 테마는 기존 테마를 손상시킬 위험 없이 테마를 수정하고 테스트할 수 있는 훌륭한 방법입니다.

워드프레스 차일드 테마를 사용하면 작업 내용을 손상시키지 않고 테마 코드를 안전하게 수정할 수 있습니다. 테마의 CSS , HTML 또는 PHP 차일드 테마를 사용하는 것이 좋습니다. 왜냐하면 차일드 테마를 사용하지 않으면 메인 테마가 업데이트될 때 수정 사항이 모두 사라질 수 있기 때문입니다.

초보자도 쉽게 따라할 수 있도록 자식 테마의 작동 방식, 설정 방법, 원하는 변경 방법을 설명하는 가이드를 준비했습니다. 지금 바로 자신감을 가지고 테마를 맞춤 설정해 보세요!

워드프레스에서 차일드 테마 이해하기

자식 테마는 메인 테마 또는 부모 테마의 "부가 기능"과 같으며 부모 테마 의 기능과 스타일을 계승합니다. 워드프레스 테마를 사용자 정의할 때 테마 파일을 직접 수정하는 것은 위험할 수 있습니다. 수정 사항이 핵심 테마에 영향을 줄 수 있기 때문입니다. 바로 이럴 때 자식 테마가 유용합니다. 자식 테마를 사용하면 원본 파일을 건드리지 않고도 안전하게 테마를 수정할 수 있습니다.

자식 테마는 부모 테마의 style.css 파일에서 기본 스타일을 자동으로 상속받아 테마의 전체적인 모양과 느낌을 결정합니다. 자식 테마를 사용하면 자체 파일을 추가하거나 기존 파일을 수정하여 이 스타일을 쉽게 변경하거나 추가할 수 있습니다. 이를 통해 원본 파일을 변경하지 않고도 테마를 유연하게 사용자 지정할 수 있습니다.

자식 테마는 부모 테마와는 별도의 폴더에 저장되며, 사용자가 직접 수정하지 않는 한 부모 테마의 기능을 사용합니다. 워드프레스에서 자식 테마를 활성화하면 부모 테마에 연결되고, 워드프레스는 먼저 자식 테마 파일을 확인합니다. 만약 자식 테마 파일이 수정되지 않았다면, 워드프레스는 부모 테마의 버전을 사용합니다.

단, 자식 테마는 단독으로 작동할 수 없다는 점을 기억하세요. 제대로 작동하려면 부모 테마가 함께 설치되어 있어야 합니다.

다음 내용을 읽어보세요: 워드프레스 플러그인 및 테마 개발 아웃소싱

워드프레스에서 차일드 테마를 사용하는 이점

WordPress 를 변경할 수 있는 현명한 방법입니다 . 부모 테마의 파일을 직접 편집하면 테마가 업데이트될 때마다 사용자 정의 내용이 모두 사라집니다. 이로 인해 향후 업데이트를 모두 건너뛰어 호환성 및 보안 문제를 감수하거나, 업데이트를 통해 WordPress 테마를 사용자 정의하는 .

하지만 자식 테마를 사용하면 그런 선택을 할 필요가 없습니다. 모든 수정 사항은 별도의 폴더에 안전하게 저장되므로 부모 테마가 업데이트되더라도 변경 사항을 그대로 유지할 수 있습니다. 또한, 이러한 설정 덕분에 필요에 따라 사용자 정의 내용을 한 사이트에서 다른 사이트로 쉽게 옮길 수 있어 여러 사이트를 관리하거나 새 사이트로 이전할 때 시간을 절약할 수 있습니다.

사용자 정의 테마 개발을 배울 수 있다는 것입니다 . 변경 사항과 새로운 기능을 실험해 볼 수 있고, 계획대로 되지 않으면 자식 테마를 비활성화하기만 하면 됩니다. 사이트는 즉시 부모 테마의 원래 모습과 기능으로 되돌아가므로 아무런 문제가 발생하지 않습니다.

워드프레스에서 헤더를 간편하게 편집하고 맞춤 설정하는 방법을 알아보세요

워드프레스에서 차일드 테마를 만들기 전에 해야 할 일

워드프레스 사용자들이 사이트를 커스터마이징하고 싶어 안달하다가 예상치 못한 오류에 부딪히는 경우가 종종 있습니다. 자식 테마를 직접 다뤄보는 건 처음엔 흥미로워 보이지만, 막상 기술적인 문제에 직면하면 어려움을 겪는 건 당연한 일입니다.

그렇기 때문에 시험 전에 준비하는 것처럼, 본격적으로 시작하기 전에 약간의 준비가 필수적입니다. 자식 테마 제작을 시작하기 전에 취할 수 있는 몇 가지 팁을 소개합니다

코드의 기초를 이해하세요

자식 테마를 다룬다는 것은 코드를 다루게 된다는 의미입니다. 최소한 HTML, CSS, PHP에 대한 기본적인 이해가 필요하며, JavaScript . 코딩이 처음이라면 WordPress 테마 핸드북을 참고하면 빠르게 시작할 수 있습니다.

Figma를 React, HTML, Vue, JavaScript, CSS 코드로 변환하는 방법을 배우세요.

올바른 상위 테마를 선택하세요

원하는 디자인과 기능에 가까운 상위 테마를 선택하세요. 이상적으로는 몇 가지 수정만 필요한 테마를 찾는 것이 좋습니다. 그러면 사용자 정의 과정이 훨씬 수월해집니다. 테마를 완전히 바꾸는 경우라면, WordPress 테마 변경 전 점검 사항 목록을 확인해 보세요. 잠재적인 문제를 예방하는 데 도움이 될 것입니다!

테스트를 위해 로컬 사이트 또는 스테이징 사이트를 사용하십시오

스테이징 사이트 에서 테스트하는 것이 좋습니다 . 이렇게 하면 실수를 하더라도 실제 운영 환경의 외관이나 기능에 영향을 미치지 않습니다.

사이트 백업을 생성하세요

변경 작업을 하기 전에 웹사이트를 백업하세요. 처음이라면 Duplicator 사용하면 백업 과정을 간편하고 수월하게 진행할 수 있습니다. 이렇게 하면 예상치 못한 문제가 발생하더라도 사이트를 빠르게 복원할 수 있습니다.

이러한 기본 사항들을 숙지하고 나면, 저희가 제공하는 단계별 가이드를 따라 자녀의 테마를 자신 있게 꾸밀 수 있을 것입니다!

워드프레스 웹사이트 여러 개를 백업하는 최적의 솔루션 알아보기

워드프레스에서 자식 테마를 수동으로 만드는 방법: 5가지 쉬운 단계

워드프레스에서 자식 테마를 만드는 것은 생각보다 쉽고, 메인 테마에 영향을 주지 않고 자식 테마의 작동 방식을 이해하는 데 아주 좋은 방법입니다.

워드프레스의 기본 테마인 Twenty Fifteen을 기반으로 자식 테마를 만드는 방법과 몇 가지 사용자 정의 수정을 통해 그 과정을 살펴보겠습니다.

1단계: 자식 테마 폴더 생성

먼저 컴퓨터에 자식 테마에 필요한 모든 파일을 저장할 새 폴더를 만드세요. 나중에 이 폴더를 웹사이트에 업로드하게 됩니다.

자식 테마 폴더 이름은 부모 테마 이름 뒤에 "-child"를 붙여서 지정할 수 있습니다. 예를 들어, 부모 테마 이름이 "Twenty Twenty-Two"라면 자식 테마 폴더 이름은 twentytwentytwo-child가 됩니다. 이렇게 하면 자식 테마임을 쉽게 구분할 수 있습니다.

2단계: 자식 테마용 스타일시트 설정

다음으로, 새로 만든 자식 테마 폴더 안에 style.css 파일을 생성하세요. 이 파일에는 자식 테마에 적용할 모든 사용자 지정 스타일이 저장됩니다.

스타일시트를 올바르게 설정하려면 style.css 파일 맨 위에 다음 헤더 주석을 추가하세요. 이렇게 하면 WordPress에 새 테마가 부모 테마의 자식 테마임을 알려줍니다

테마 이름: Twenty Twenty-Two 자식 테마 URI: https://wordpress.org/themes/twentytwentytwo/ 제작자: WordPress 팀 제작자 URI: https://wordpress.org/ 템플릿: twentytwentytwo 설명: Twenty Twenty-Two용 자식 테마 버전: 1.0 */

저장 후 WordPress 대시보드 외관 → 테마를 선택하세요 . 이제 자식 테마가 목록에 표시될 것입니다.

3단계: 부모 테마와 자식 테마 스타일시트를 연결합니다

부모 테마의 스타일이 자식 테마에 적용되도록 하려면 부모 테마의 스타일시트를 자식 테마에 연결해야 합니다. 이를 위해 자식 테마 폴더에 functions.php 파일을 생성하고 다음 코드를 추가합니다

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

이 코드는 부모 테마의 스타일시트를 불러와 자식 테마가 모든 스타일을 상속받도록 합니다.

워드프레스 데이터베이스를 복구하고 수정하는 방법을 알아보세요

4단계: 자식 테마의 스타일시트(style.css)를 편집합니다

이제 자식 테마의 style.css 파일에 사용자 지정 스타일을 직접 추가할 수 있습니다. 예를 들어 사이트의 링크 색상을 변경하려면 다음과 같이 추가할 수 있습니다

a {color: #D54E21;text-decoration: none;}

이 규칙은 나머지 디자인에는 영향을 주지 않고 상위 테마의 링크 스타일을 재정의합니다.

알아두세요: 웹사이트를 코딩으로, 노코드로, 아니면 웹사이트 빌더로 구축해야 할까요?

5단계: 템플릿 파일 수정

자식 테마를 사용하면 개별 템플릿도 수정할 수 있습니다. 예를 들어 single.php 파일을 편집하여 게시물 표시 방식을 변경하고 싶다고 가정해 보겠습니다.

• 부모 테마의 single.php 파일을 복사하여 자식 테마 폴더에 붙여넣으세요.
• 텍스트 편집기로 파일을 열고 원하는 대로 수정하세요.

예를 들어, 개별 게시물 페이지에서 댓글 섹션을 제거하려면 코드에서 다음 부분을 찾으세요

댓글이 열려있거나 댓글 수가 많으면 댓글 템플릿을 생성합니다

댓글을 숨기려면 해당 부분을 삭제하거나 주석 처리하세요. WordPress는 자식 테마 폴더에 있는 수정된 single.php 파일을 사용하므로 부모 테마를 업데이트해도 사용자 정의 설정이 덮어쓰여지지 않습니다.

워드프레스에서 사용자 정의 페이지 템플릿을 만드는 방법을 알아보세요

플러그인을 사용하여 자식 테마를 만드는 방법 (코딩 필요 없음)

코딩에 익숙하지 않지만 자식 테마를 만들고 싶으신가요? 그렇다면 잘 오셨습니다! 워드프레스에서 자식 테마를 만드는 데 사용할 수 있는 플러그인은 여러 가지가 있지만, 여기서는 Child Theme Configurator 플러그인을 사용하여 과정을 설명하겠습니다.

이 플러그인을 사용하면 기존(블록형이 아닌) 워드프레스 테마용 자식 테마를 아주 쉽게 설정하고 사용자 정의할 수 있습니다. 시작하는 데 도움이 되는 간단한 단계별 가이드를 참고하세요.

1단계: 플러그인 설치 및 활성화

먼저 WordPress 관리자 페이지로 이동하여 플러그인 섹션에서 "Child Theme Configurator"를 검색하고 설치하세요. 활성화되면 도구 → 자식 테마 .

2단계: 자식 테마 설정

자식 테마 구성 도구에서 부모/자식 탭으로 이동합니다. 작업을 선택하는 옵션이 표시되는데, "새 자식 테마 만들기"를 선택하여 시작하세요.

3단계: 상위 테마를 선택하세요

다음으로, 드롭다운 메뉴에서 빌드할 상위 테마를 선택하세요. 이 예에서는 헤스티아(Hestia) 테마를 사용한다고 가정해 보겠습니다. 테마를 선택한 후 "분석" 버튼을 클릭하여 해당 테마가 하위 테마 생성에 적합한지 확인하세요.

4단계: 자식 테마 폴더 이름 지정

그러면 자식 테마를 저장할 폴더의 이름을 지정하라는 메시지가 나타납니다. 여기에 창의적인 이름을 지정하거나, 정리를 위해 "Hestia-child"처럼 간단한 이름을 사용할 수도 있습니다.

5단계: 사용자 지정 스타일을 저장할 위치 결정

여기서 중요한 선택이 있습니다. 새 사용자 지정 스타일을 자식 테마의 기본 스타일시트(style.css)에 저장할지, 아니면 별도의 스타일시트 파일에 저장할지 결정해야 합니다.

• 기본 스타일시트 : 이 파일은 스타일이 기본적으로 저장되는 주요 파일입니다. 이 파일을 변경하면 기존 테마 스타일이 덮어쓰여집니다.

• 별도 스타일시트 : 이 옵션을 선택하면 사용자 지정 스타일이 새 파일에 저장되므로 원래 테마의 스타일은 그대로 유지됩니다.

지금은 기본 스타일시트를 사용하겠지만, 부모 테마의 모양을 완전히 유지하고 싶다면 별도의 스타일시트를 사용하는 옵션을 시도해 보셔도 좋습니다.

더 알아보기: 멋지고 간편한 웹사이트 제작을 위한 최고의 웹 디자인 소프트웨어 도구

6단계: 상위 테마 스타일시트 처리 설정

아래로 스크롤하여 상위 테마의 스타일시트를 로드하는 방법을 선택하세요. 플러그인이 자동으로 처리하도록 하는 기본 옵션인 "WordPress 스타일 대기열 사용"을 그대로 사용하겠습니다.

7단계: 자식 테마 세부 정보 사용자 지정

7단계에 도달하면 "자식 테마 속성 편집"을 클릭하세요. 여기에서 자식 테마의 이름, 설명, 버전과 같은 세부 정보를 추가할 수 있습니다.

8단계: 메뉴 및 위젯 복사

일반적으로 자식 테마를 생성하면 메뉴와 위젯이 초기화됩니다. 이러한 초기화를 방지하려면 8단계에서 부모 테마의 메뉴와 위젯을 자식 테마로 복사하는 옵션을 선택하세요.

나만의 아이 테마를 만들어 보세요

마지막으로 "새 자식 테마 만들기"를 클릭하세요. 플러그인이 자동으로 자식 테마 폴더를 생성하고, 향후 사용자 정의에 필요한 style.css 및 functions.php 파일을 포함시킵니다.

미리 보기 및 활성화

활성화하기 전에 화면 상단의 미리보기 링크를 클릭하여 모든 것이 제대로 표시되는지 확인하세요. 자식 테마 미리보기가 정상적으로 표시되고 요소가 깨지지 않으면 "활성화 및 게시"를 클릭하여 테마를 적용하세요!

자, 이제 자식 테마가 활성화되었습니다! 이제 자식 테마는 부모 테마와 똑같이 보이고 작동합니다. 이제 원본 테마에 영향을 주지 않고 안전하게 자식 테마에 사용자 정의를 추가할 수 있습니다. 즐겁게 사용자 정의해 보세요!

다음 내용을 알아보세요: 크리에이티브 비즈니스를 위한 최고의 워드프레스 스튜디오 테마

워드프레스 차일드 테마가 작동하지 않을 경우 어떻게 해야 할까요?

자식 테마에 변경 사항이 표시되지 않나요? 걱정하지 마세요. 일반적인 문제와 해결 방법을 알려드리겠습니다.

functions.php 파일을 다시 한번 확인하세요

먼저 functions.php 파일에 자식 테마의 스타일시트를 등록했는지 확인하세요. 등록되지 않은 경우 자식 테마가 제대로 로드되지 않고 사이트가 부모 테마를 계속 표시하여 변경 사항이 적용되지 않은 것처럼 보일 수 있습니다.

흥미로운 읽을거리: Laravel vs WordPress: PHP 최고의 라이벌들의 대결

스타일시트 파일 이름이 style.css인지 확인하십시오

스타일시트 파일 이름이 style.css인지, stylesheet.css나 다른 이름이 아닌지 다시 한번 확인하세요. WordPress는 자식 테마의 메인 스타일시트 파일 이름이 style.css여야 한다고 예상합니다. 이름이 다르면 functions.php 파일에서 해당 스타일시트를 인식하지 못하고 사용자 정의 스타일이 적용되지 않습니다.

style.css 파일에서 템플릿 이름을 확인하세요

style.css 파일에서 Template 필드는 부모 테마 폴더 이름과 정확히 일치해야 합니다. 이 이름은 WordPress에게 어떤 테마를 부모 테마로 사용할지 알려줍니다. 이름이 올바르지 않으면 WordPress는 자식 테마가 어떤 테마를 기반으로 해야 하는지 알 수 없습니다.

캐시를 지우세요

때때로 캐싱 때문에 업데이트가 표시되지 않을 수 있습니다. 캐시를 . 브라우저 캐시를 지우거나 시크릿 모드 창에서 사이트를 열어 변경 사항이 표시되는지 확인하는 것도 도움이 됩니다. 자식 테마 작업을 진행 중이라면 작업이 완료될 때까지 캐싱 플러그인을 비활성화하는 것이 좋습니다.

CSS 코드에 `!important`를 사용하세요

부모 테마의 스타일이 사용자 정의 CSS를 덮어쓰는 문제가 계속 발생한다면, 우선 적용하려는 스타일에 `!important`를 추가해 보세요. 이렇게 하면 자식 테마의 스타일이 부모 테마보다 우선 적용됩니다. 예를 들면 다음과 같습니다

p {배경색: 회색 !중요;}

이 방법은 특정 요소, ID 및 CSS 클래스에 변경 사항이 적용되도록 하는 데 유용할 수 있습니다.

테마 지원팀에 문의하거나 포럼을 확인하세요

위의 모든 단계를 시도했는데도 자식 테마가 여전히 작동하지 않는다면 테마 개발팀에 문의하거나 WordPress.org . 테마에 따라 자식 테마 작동 방식에 영향을 줄 수 있는 고유한 구성이나 사용자 정의 코드가 있을 수 있으며, 개발자가 구체적인 해결책을 제시해 줄 수도 있습니다.

결론

자, 이제 마무리입니다! 이제 워드프레스 차일드 테마가 무엇이고 부모 테마와 어떻게 연동되는지 확실히 이해하셨을 겁니다. 테마를 설치하는 것은 워드프레스 사이트 구축의 시작일 뿐입니다.

내장된 구텐베르크 편집기나 테마 빌더를 사용하여 디자인을 수정할 수 있지만, 자식 테마를 만들면 훨씬 더 많은 가능성이 열립니다. 자식 테마를 사용하면 디자인뿐만 아니라 기능까지 핵심 파일을 건드리지 않고 맞춤 설정할 수 있으므로 사이트를 진정으로 독창적으로 만들 수 있는 완벽한 자유를 누릴 수 있습니다.

워드프레스에서 차일드 테마를 만드는 방법에 대한 FAQ