WordPress 하위 테마를 만드는 방법(초보자 가이드)

WordPress에서 하위 테마를 만들고 싶나요?

하위 테마는 다른 WordPress 테마의 기능을 상속하는 WordPress 테마입니다. 많은 사용자는 테마 개발자가 업데이트를 출시할 때 변경 사항을 잃지 않고 웹 사이트 디자인을 안전하게 사용자 정의할 수 있도록 현재 테마에 대한 하위 테마를 만듭니다.

이 기사에서는 WordPress 사이트에 대한 하위 테마를 만드는 방법을 보여줍니다.

어린이 테마는 어떻게 작동하며 왜 필요한가요?

하위 테마는 다른 WordPress 테마의 모든 기능, 스타일을 상속합니다. 하위 테마를 만들 때 원래 테마를 상위 테마라고 합니다.

상속에는 테마의 기본 스타일을 정의하는 상위 테마의 style.css 파일이 포함됩니다. 하위 테마는 자체 파일을 추가하거나 기존 파일을 수정하여 상속된 속성을 재정의하거나 확장할 수 있습니다.

하위 테마를 설치하지 않고도 WordPress 테마를 사용자 정의할 수 있지만, 하위 테마가 필요한 데는 몇 가지 이유가 있습니다.

• 하위 테마는 테마 업데이트 중에 사용자 정의 항목을 보호하여 덮어쓰지 않도록 안전하게 유지합니다. 상위 테마를 직접 수정하면 업데이트할 때 해당 조정 사항이 사라질 수 있습니다.
• 하위 테마를 사용하면 준비 환경과 유사하게 사이트의 원래 테마를 손상시키지 않고 새로운 디자인이나 기능을 안전하게 시험해 볼 수 있습니다.
• 코딩 방법을 알고 있다면 하위 테마를 사용하여 개발 프로세스를 더욱 효율적으로 만들 수 있습니다. 하위 테마의 파일은 상위 테마의 파일보다 훨씬 간단합니다. 변경하거나 확장하려는 상위 테마 부분만 수정하는 데 집중할 수 있습니다.

WordPress 하위 테마를 만들기 전에 해야 할 일

우리는 많은 WordPress 사용자가 기술적인 내용을 탐구하고 싶어했지만 오류가 발생하면 낙담하는 것을 보았습니다. 우리는 그것을 얻습니다. 그렇기 때문에 하위 테마를 만들기 전에 어떤 작업을 하고 있는지 아는 것이 중요합니다.

이 단계별 가이드를 계속하기 전에 먼저 수행하는 것이 좋습니다.

1. 코드를 사용하여 작업하게 된다는 점에 유의하세요. 어떤 변경이 필요한지 이해하려면 최소한 HTML, CSS, PHP 및 선택적으로 JavaScript에 대한 기본적인 이해가 필요합니다. 이에 대한 자세한 내용은 WordPress 테마 핸드북에서 확인할 수 있습니다.
2. 원하는 웹사이트 디자인과 기능을 갖춘 상위 테마를 선택하세요. 가능하다면 몇 가지만 변경하면 되는 곳을 찾으세요.
3. 테마 개발을 위해 로컬 사이트나 준비 사이트를 사용하세요. 라이브 사이트에서 의도하지 않은 오류가 발생하는 것을 원하지 않습니다.
4. 먼저 웹사이트를 백업하세요.

기존 테마에서 하위 테마를 만드는 방법에는 여러 가지가 있습니다. 하나는 수동 코드를 사용하는 반면, 다른 것들은 훨씬 초보자에게 친숙한 플러그인이 필요합니다.

기술적 경험이 부족한 경우 첫 번째 방법이 위협적으로 보일 수 있습니다. 즉, 플러그인 방법 중 하나를 선택하더라도 수동 방법을 통해 관련 프로세스와 파일에 익숙해지는 것이 좋습니다.

이 모든 것을 염두에 두고 WordPress에서 하위 테마를 만드는 방법을 살펴보겠습니다. 아래 링크를 사용하여 원하는 방법으로 이동할 수 있습니다.

방법 1: 수동으로 하위 WordPress 테마 만들기

먼저 열어야합니다 /wp-content/themes/ WordPress 설치 폴더에 있습니다.

WordPress 호스팅의 파일 관리자나 FTP 클라이언트를 사용하여 이 작업을 수행할 수 있습니다. 첫 번째 옵션이 훨씬 쉬우므로 이를 사용하겠습니다.

Bluehost 클라이언트인 경우 호스팅 계정 대시보드에 로그인하여 ‘웹사이트’ 탭으로 이동할 수 있습니다. 그런 다음 ‘설정’을 클릭하세요.

개요 탭에서 ‘빠른 링크’ 섹션까지 아래로 스크롤합니다.

그런 다음 ‘파일 관리자’를 선택하세요.

이 단계에서는 웹사이트의 public_html 폴더로 이동하여 /wp-content/themes/ 길.

여기에서 왼쪽 상단에 있는 ‘+ 폴더’ 버튼을 클릭하면 하위 테마를 위한 새 폴더가 생성됩니다.

폴더 이름은 원하는 대로 지정할 수 있습니다.

이 튜토리얼에서는 Twenty Twenty-One을 상위 테마로 사용하므로 폴더 이름은 2021-child만 사용합니다. 완료되면 ‘새 폴더 만들기’를 클릭하세요.

다음으로 방금 만든 폴더를 열고 ‘+ 파일’을 클릭하여 하위 테마의 첫 번째 파일을 만들어야 합니다.

FTP 클라이언트를 사용하는 경우 메모장과 같은 텍스트 편집기를 사용하고 나중에 파일을 업로드할 수 있습니다.

이 파일의 이름을 ‘style.css’로 지정하십시오. 이 파일은 자녀의 기본 스타일시트이고 자녀 테마에 대한 정보를 포함하게 됩니다.

그런 다음 ‘새 파일 만들기’를 클릭하세요.

이제 style.css 파일을 마우스 오른쪽 버튼으로 클릭하세요.

그런 다음 ‘편집’을 클릭하여 아래 스크린샷과 같은 새 탭을 엽니다.

이 새 탭에서 다음 텍스트를 붙여넣고 필요에 따라 조정할 수 있습니다.

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

완료한 후 ‘변경사항 저장’을 클릭하세요.

다음으로 해야 할 일은 두 번째 파일을 만들고 이름을 function.php로 지정하는 것입니다. 이 파일은 상위 테마 파일에서 스타일시트를 가져오거나 대기열에 추가합니다.

문서를 생성한 후 다음 wp_enqueue 코드를 추가하세요.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle="twenty-twenty-one-style"; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(), // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}

완료되면 이전 단계와 마찬가지로 파일을 저장하십시오.

이제 매우 기본적인 하위 테마를 만들었습니다. 당신이 갈 때 외관 » 테마 WordPress 관리자 패널에 Twenty Twenty-One Child 옵션이 표시됩니다.

사이트에서 하위 테마 사용을 시작하려면 ‘활성화’ 버튼을 클릭하세요.

방법 2: 플러그인을 사용하여 어린이 클래식 테마 만들기

다음 방법은 Child Theme Configurator 플러그인을 사용합니다. 이 사용하기 쉬운 WordPress 플러그인을 사용하면 코드를 사용하지 않고도 WordPress 하위 테마를 신속하게 생성하고 사용자 정의할 수 있지만 클래식(비블록) 테마에서만 잘 작동합니다.

가장 먼저 해야 할 일은 WordPress 플러그인을 설치하고 활성화하는 것입니다. 활성화 시 다음으로 이동해야 합니다. 도구 » 어린이 테마 WordPress 대시보드에서.

상위/하위 탭에서 작업을 선택하라는 메시지가 표시됩니다. 시작하려면 ‘새 하위 테마 만들기’를 선택하세요.

그런 다음 드롭다운 메뉴에서 상위 테마를 선택합니다. 헤스티아 테마를 선택하겠습니다.

그런 다음 ‘분석’ 버튼을 클릭하여 테마가 상위 테마로 사용하기에 적합한지 확인하세요.

다음으로, 하위 테마가 저장될 폴더의 이름을 지정하라는 메시지가 표시됩니다. 원하는 폴더 이름을 사용할 수 있습니다.

그 아래에서는 새 스타일을 저장할 위치(기본 스타일시트 또는 별도 스타일시트)를 선택해야 합니다.

기본 스타일시트는 하위 테마와 함께 제공되는 기본 스타일시트입니다. 새로운 사용자 정의 스타일을 이 파일에 저장하면 하위 테마의 기본 스타일이 직접 수정됩니다. 모든 수정은 원래 테마의 스타일을 덮어쓰게 됩니다.

별도 옵션을 사용하면 새 사용자 정의 스타일을 별도의 스타일시트 파일에 저장할 수 있습니다. 원본 테마의 스타일을 덮어쓰지 않고 유지하려는 경우에 유용합니다.

데모 목적으로 첫 번째 옵션을 선택하겠습니다. 그러나 하위 테마 사용자 정의를 통해 더욱 창의력을 발휘하면 언제든지 이 프로세스를 반복하고 두 번째 옵션을 선택할 수 있습니다.

아래로 이동하면 상위 테마의 스타일시트에 액세스하는 방법을 선택해야 합니다.

플러그인이 적절한 작업을 자동으로 결정할 수 있도록 기본 ‘WordPress 스타일 대기열 사용’을 사용하겠습니다.

7단계에 도달하면 ‘하위 테마 속성을 편집하려면 클릭’이라는 버튼을 클릭해야 합니다.

그런 다음 하위 테마의 세부정보를 입력할 수 있습니다.

하위 테마를 수동으로 생성하면 상위 테마의 메뉴와 위젯이 손실됩니다. Child Theme Configurator는 상위 테마에서 하위 테마로 복사할 수 있습니다. 이 작업을 수행하려면 8단계에서 확인란을 선택하세요.

마지막으로 ‘새 하위 테마 만들기’ 버튼을 클릭하여 새로운 하위 테마를 만듭니다.

플러그인은 하위 테마용 폴더를 생성하고 나중에 테마를 사용자 정의하는 데 사용할 style.css 및 function.php 파일을 추가합니다.

테마를 활성화하기 전에 화면 상단 근처에 있는 링크를 클릭하여 미리 보고 사이트가 손상되지 않는지 확인해야 합니다.

모든 것이 작동하는 것 같으면 ‘활성화 및 게시’ 버튼을 클릭하세요.

이제 자녀 테마가 활성화됩니다.

이 단계에서 자식 테마는 부모 테마와 똑같이 보이고 동작합니다.

방법 3: 플러그인을 사용하여 하위 블록 테마 만들기

블록 테마를 사용하는 경우 WordPress에서는 Create Block Theme 플러그인을 사용하여 하위 테마를 생성하는 쉬운 방법을 제공합니다.

먼저 WordPress 플러그인을 설치하고 활성화해야 합니다. 그 후에는 다음으로 이동하십시오. 모양 » 블록 테마를 만듭니다.

여기에서 ‘(테마 이름)의 하위 항목 만들기’를 선택하면 됩니다. 이 예에서는 Twenty Twenty-Four를 사용하고 있습니다.

해당 옵션을 선택한 후 테마 정보를 입력하세요.

그 아래에서는 테마의 스크린샷을 업로드하여 다른 테마와 차별화하고, 이미지 크레딧을 추가하고, 필수 WordPress 플러그인에 연결하고, 테마 태그를 추가하는 등 더 많은 작업을 수행할 수 있습니다.

설정 구성이 완료되면 아래로 스크롤하여 ‘생성’ 버튼을 누르세요.

이제 플러그인이 새로운 하위 테마 zip 파일을 생성하여 컴퓨터에 다운로드합니다.

열면 readme, style.css, theme.json 3개의 파일이 보입니다.

theme.json 파일은 색상, 타이포그래피, 레이아웃 등을 포함하여 블록 테마의 다양한 측면을 정의합니다. 플러그인은 나중에 하위 테마에서 상위 테마 스타일을 재정의하거나 확장할 수 있도록 기본적으로 이 파일을 생성합니다.

이 단계에서 다음에 해야 할 일은 외관 » 테마.

그런 다음 ‘새 테마 추가’를 클릭하세요.

다음으로 ‘테마 업로드’를 선택하세요.

그런 다음 zip 파일을 선택하고 ‘지금 설치’를 클릭하여 WordPress 테마를 설치하세요.

보너스 팁: 테마에 하위 테마 생성기가 있는지 알아보세요.

운이 좋다면 WordPress 테마에 하위 테마를 생성하는 기능이 이미 있을 수도 있습니다.

예를 들어 Astra를 사용하는 경우 Astra Child Theme Generator 웹 사이트로 이동할 수 있습니다. 그런 다음 자녀 테마 이름을 입력하고 ‘생성’ 버튼을 클릭하세요.

그러면 브라우저가 자동으로 하위 테마를 컴퓨터에 다운로드하고, 이를 WordPress에 직접 설치할 수 있습니다.

또한 하위 테마 생성기가 있는 다른 인기 WordPress 테마도 발견했습니다.

• 오션WP
• 극단론자
• 그리고 시도해 보세요
• 식

클래식 어린이 테마를 사용자 정의하는 방법

기술적으로 테마 사용자 정의 도구를 사용하면 코드 없이 하위 테마를 사용자 정의할 수 있습니다. 여기에서 변경한 사항은 상위 테마에 영향을 주지 않습니다. 아직 코딩이 익숙하지 않다면 Customizer를 사용해 보세요.

즉, 코드를 사용하여 하위 테마를 맞춤설정하는 것도 권장합니다.

WordPress 테마 개발에 대해 자세히 알아볼 수 있을 뿐만 아니라, 코드 사용자 정의를 통해 변경 사항을 하위 테마 파일 내에 문서화하여 추적을 더 쉽게 할 수 있습니다.

이제 하위 테마를 사용자 정의하는 가장 기본적인 방법은 style.css 파일에 사용자 정의 CSS를 추가하는 것입니다. 그러기 위해서는 어떤 코드를 맞춤설정해야 하는지 알아야 합니다.

상위 테마에서 기존 코드를 복사하고 수정하여 프로세스를 단순화할 수 있습니다. Chrome 또는 Firefox 검사 도구를 사용하거나 상위 테마의 CSS 파일에서 직접 복사하여 해당 코드를 찾을 수 있습니다.

방법 1: Chrome 또는 Firefox 검사기에서 코드 복사

수정해야 할 CSS 코드를 찾는 가장 쉬운 방법은 Google Chrome 및 Firefox와 함께 제공되는 검사 도구를 사용하는 것입니다. 이 도구를 사용하면 웹 페이지의 모든 요소 뒤에 있는 HTML과 CSS를 볼 수 있습니다.

검사 요소의 기본 사항: DIY 사용자를 위한 WordPress 사용자 정의 가이드에서 검사기 도구에 대해 자세히 알아볼 수 있습니다.

웹페이지를 마우스 오른쪽 버튼으로 클릭하고 검사 요소를 사용하면 페이지의 HTML과 CSS가 표시됩니다.

다른 HTML 라인 위로 마우스를 이동하면 검사기가 상단 창에서 해당 라인을 강조 표시합니다. 또한 다음과 같이 강조 표시된 요소와 관련된 CSS 규칙도 표시됩니다.

CSS를 바로 편집하여 어떻게 보일지 확인할 수 있습니다. 예를 들어 테마 본문의 배경색을 #fdf8ef로 변경해 보겠습니다. 다음과 같은 코드 줄을 찾으세요. body { 그 안에는 다음과 같은 코드가 있습니다. color: .

옆에 있는 색상 선택기 아이콘을 클릭하세요. color: 다음과 같이 HEX 코드를 적절한 필드에 붙여넣습니다.

이제 CSS를 사용하여 배경색을 변경하는 방법을 알았습니다. 변경 사항을 영구적으로 적용하려면 파일 관리자 또는 FTP를 사용하여 하위 테마 디렉터리에서 style.css 파일을 열 수 있습니다.

그런 다음 다음과 같이 하위 테마 정보 아래에 다음 코드를 붙여넣습니다.

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

body {
    background-color: #fdf8ef
}

WordPress 관리자로 이동하여 열면 다음과 같습니다. 모습 » 테마 파일 편집기:

초보자이고 다른 변경 사항을 적용하려는 경우 각 코드가 참조하는 요소가 무엇인지 정확히 알 수 있도록 HTML 및 CSS에 익숙해지는 것이 좋습니다. 온라인에는 참조할 수 있는 HTML 및 CSS 치트 시트가 많이 있습니다.

다음은 하위 테마용으로 만든 전체 스타일시트입니다. 자유롭게 실험하고 수정해 보세요.

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}

방법 2: 상위 테마의 style.css 파일에서 코드 복사

아마도 자녀 테마에는 사용자 정의하고 싶은 내용이 많이 있을 것입니다. 이 경우 상위 테마의 style.css 파일에서 일부 코드를 직접 복사하여 하위 테마의 CSS 파일에 붙여넣고 수정하는 것이 더 빠를 수 있습니다.

까다로운 부분은 테마의 스타일시트 파일이 초보자에게 너무 길고 부담스러워 보일 수 있다는 것입니다. 그러나 기본 사항을 이해하고 나면 실제로 그렇게 어렵지는 않습니다.

Twenty Twenty-One 상위 테마 스타일시트의 실제 예를 사용해 보겠습니다. 다음으로 이동해야 합니다. /wp-content/themes/twentytwentyone WordPress 설치 폴더에 있는 파일 관리자, FTP 또는 테마 파일 편집기에서 style.css 파일을 엽니다.

다음 코드 줄이 표시됩니다.

:root {
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
}

3~15행은 전체 테마가 특정 HEX 코드에서 사용할 색상 유형(예: 노란색, 녹색, 보라색)을 제어합니다. 그런 다음 ‘전체 색상 기본’ 또는 ‘전체 색상 보조’와 같은 줄의 경우 이는 해당 테마의 기본 색상과 보조 색상임을 의미합니다.

이 코드 줄을 하위 테마의 스타일시트에 복사한 다음 HEX 코드를 변경하여 완벽한 색상 구성표를 만들 수 있습니다.

상위 테마의 스타일시트에서 아래로 스크롤하면 다음과 같이 다른 변수에도 이러한 색상 변수가 있을 수 있다는 것을 알 수 있습니다.

/* Buttons */
--button--color-text: var(--global--color-background);

이는 기본적으로 모든 버튼 텍스트가 선언된 것과 동일한 색상을 사용한다는 것을 의미합니다. --global--color-background:민트 그린(--global--color-green: #d1e4dd). HEX를 변경하면 --global--color-green:을 클릭하면 버튼 텍스트도 다르게 보입니다.

다음 튜토리얼에 따라 하위 테마 사용자 정의를 실험해 볼 수도 있습니다.

• WordPress에서 텍스트 색상을 변경하는 방법
• WordPress 로고 크기를 변경하는 방법(모든 테마에서 작동)
• WordPress 테마에서 인용부호 스타일을 사용자 정의하는 방법
• WordPress Body Class 101: 테마 디자이너를 위한 팁과 요령
• WordPress 테마에 시차 효과를 추가하는 방법

블록 하위 테마를 사용자 정의하는 방법

하위 블록 테마를 사용하는 경우 대부분의 사용자 정의는 style.css가 아닌 theme.json 파일에서 수행됩니다.

그러나 테스트 중에 프로세스가 복잡하다는 사실을 발견했습니다. 클래식 하위 테마와 달리 WordPress 테마 개발을 처음 접하는 경우 채워야 할 지식 격차가 더 큽니다(특히 JSON 및 CSS가 처리되는 방식에 대해).

즉, Create Block Theme 플러그인을 사용하여 훨씬 쉬운 대안을 찾았습니다. 이 도구는 WordPress 전체 사이트 편집기의 모든 변경 사항을 자녀 theme.json 파일에 기록할 수 있습니다. 따라서 플러그인이 코드를 처리해 주기 때문에 코드를 전혀 건드릴 필요가 없습니다.

예를 보여드리겠습니다. 먼저 다음으로 이동하여 WordPress 전체 사이트 편집기를 엽니다. 모습 » 편집자.

선택할 수 있는 여러 메뉴가 표시됩니다.

여기서는 ‘스타일’을 선택하세요.

다음 페이지에는 선택할 수 있는 몇 가지 기본 제공 스타일 조합이 표시됩니다.

여기서는 이 모든 과정을 건너뛰고 연필 아이콘만 클릭하면 됩니다.

이제 글꼴과 같은 하위 테마의 일부 부분을 변경해 보겠습니다.

이 예에서는 오른쪽 사이드바에서 ‘타이포그래피’를 클릭하세요.

다음으로 텍스트, 링크, 제목, 캡션 및 버튼에 대한 테마의 전역 글꼴을 변경하는 몇 가지 옵션이 표시됩니다.

데모를 위해 ‘제목’을 클릭해 보겠습니다.

글꼴 드롭다운 메뉴에서 원래 선택을 사용 가능한 글꼴로 변경합니다.

필요한 경우 모양, 줄 높이, 문자 간격 및 문자 대/소문자를 자유롭게 변경하세요.

완료되면 ‘저장’을 클릭하세요. 그런 다음 ‘저장’ 옆에 있는 블록 테마 만들기 버튼(공구 모양 아이콘)을 클릭하면 됩니다.

그런 다음 ‘변경사항 저장’을 클릭하세요. 그러면 모든 변경 사항이 하위 theme.json 파일에 저장됩니다.

theme.json 파일을 열면 코드에 반영된 변경 사항을 볼 수 있습니다.

하위 테마를 업데이트한 후 본 내용은 다음과 같습니다.

보시다시피 이제 파일에는 제목 태그가 약간 굵은 모양, 줄 높이 1.2, 줄 간격 1픽셀 및 소문자 Inter 글꼴을 사용함을 나타내는 코드가 포함되어 있습니다.

따라서 하위 블록 테마를 편집할 때마다 렌치 아이콘을 클릭하고 변경 사항을 저장하여 잘 문서화되도록 하세요.

하위 테마의 템플릿 파일을 편집하는 방법

대부분의 WordPress 테마에는 테마 내 특정 영역의 디자인과 레이아웃을 제어하는 ​​테마 파일인 템플릿이 있습니다. 예를 들어 바닥글 섹션은 일반적으로 footer.php 파일에서 처리되고 헤더는 header.php 파일에서 처리됩니다.

각 WordPress 테마에는 레이아웃도 다릅니다. 예를 들어 Twenty Twenty-One 테마에는 머리글, 콘텐츠 루프, 바닥글 위젯 영역 및 바닥글이 있습니다.

템플릿을 수정하려면 상위 테마 폴더에서 파일을 찾아 하위 테마 폴더에 복사해야 합니다. 그런 다음 파일을 열고 원하는 대로 수정해야 합니다.

예를 들어, Bluehost를 사용하고 상위 테마가 Twenty Twenty-One인 경우 다음으로 이동할 수 있습니다. /wp-content/themes/twentytwentyone 파일 관리자에서. 그런 다음 footer.php와 같은 템플릿 파일을 마우스 오른쪽 버튼으로 클릭하고 ‘복사’를 선택하세요.

그런 다음 하위 테마의 파일 경로를 입력하세요.

완료되면 ‘파일 복사’를 클릭하기만 하면 됩니다.

그러면 해당 파일 경로로 리디렉션됩니다.

footer.php 파일을 편집하려면 파일을 마우스 오른쪽 버튼으로 클릭하고 ‘편집’을 선택하세요.

예를 들어, 바닥글 영역에서 ‘Proudly powered by WordPress’ 링크를 제거하고 거기에 저작권 표시를 추가하겠습니다.

그렇게 하려면 다음 사이의 모든 항목을 삭제해야 합니다. <div class= "powered-by"> 태그:

<div class="powered-by">
				<?php
				printf(
					/* translators: %s: WordPress. */
					esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
					'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
				);
				?>
			</div><!-- .powered-by -->

그런 다음 아래 예의 해당 태그 아래에 있는 코드를 붙여넣어야 합니다.

<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->

이제 텍스트 편집기에 있어야 할 내용은 다음과 같습니다.

변경 사항을 공식적으로 적용하려면 파일을 저장하세요.

그런 다음 웹사이트를 방문하여 새로운 저작권 고지를 확인하세요.

자녀 테마에 새로운 기능을 추가하는 방법

테마의 function.php 파일은 PHP 코드를 사용하여 WordPress 사이트에 기능을 추가하거나 기본 기능을 변경합니다. 현재 테마로 자동 활성화되는 WordPress 사이트용 플러그인처럼 작동합니다.

코드 조각을 복사하여 function.php에 붙여넣도록 요청하는 WordPress 튜토리얼을 많이 찾을 수 있습니다. 그러나 상위 테마에 수정 사항을 추가하면 테마에 새 업데이트를 설치할 때마다 해당 내용을 덮어쓰게 됩니다.

그렇기 때문에 사용자 정의 코드 조각을 추가할 때 하위 테마를 사용하는 것이 좋습니다. 이 튜토리얼에서는 테마에 새로운 위젯 영역을 추가하겠습니다.

이 코드 조각을 하위 테마의 function.php 파일에 추가하면 됩니다. 프로세스를 더욱 안전하게 만들려면 function.php 파일을 직접 편집하지 않도록 WPCode 플러그인을 사용하여 오류 위험을 줄이는 것이 좋습니다.

자세한 내용은 사용자 정의 코드 조각을 추가하는 방법에 대한 가이드를 읽어보세요.

function.php 파일을 추가하는 데 필요한 코드는 다음과 같습니다.

// Register Sidebars
function custom_sidebars() {

$args = array(
'id'            => 'custom_sidebar',
'name'          => __( 'Custom Widget Area', 'text_domain' ),
'description'   => __( 'A custom widget area', 'text_domain' ),
'before_title'  => '<h3 class="widget-title">',
'after_title'   => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
);
register_sidebar( $args );

}
add_action( 'widgets_init', 'custom_sidebars' );

파일을 저장한 후 다음 페이지를 방문할 수 있습니다. 모양 » 위젯 WordPress 대시보드의 페이지입니다.

여기에서 위젯을 추가할 수 있는 새로운 사용자 정의 위젯 영역을 볼 수 있습니다.

사용자 정의 코드 조각을 사용하여 테마에 추가할 수 있는 다른 기능도 많이 있습니다. WordPress function.php 파일에 대한 매우 유용한 트릭과 초보자를 위한 유용한 WordPress 코드 조각을 확인하세요.

WordPress 하위 테마 문제를 해결하는 방법

이전에 하위 테마를 만든 적이 없다면 실수를 할 가능성이 크며 이는 정상적인 현상입니다. 그렇기 때문에 치명적인 오류를 방지하기 위해 백업 플러그인을 사용하고 로컬 사이트나 준비 환경을 만드는 것이 좋습니다.

모든 말은 너무 빨리 포기하지 마십시오. WordPress 커뮤니티는 매우 유용한 정보를 제공하므로 어떤 문제가 발생하더라도 해결책이 이미 존재할 것입니다.

우선, 가장 일반적인 WordPress 오류를 확인하여 해결책을 찾을 수 있습니다.

가장 흔히 보게 될 오류는 코드에서 놓친 내용으로 인해 발생하는 구문 오류입니다. WordPress에서 구문 오류를 찾고 수정하는 방법에 대한 빠른 가이드에서 이러한 문제를 해결하는 데 도움을 찾을 수 있습니다.

또한 문제가 발생하면 언제든지 다시 시작할 수 있습니다. 예를 들어, 상위 테마에 필요한 항목을 실수로 삭제한 경우 하위 테마에서 파일을 삭제하고 다시 시작할 수 있습니다.

이 기사가 WordPress 하위 테마를 만드는 방법을 배우는 데 도움이 되었기를 바랍니다. 또한 WordPress 속도와 성능을 향상하기 위한 최고의 가이드와 웹사이트를 쉽게 디자인할 수 있는 최고의 드래그 앤 드롭 페이지 빌더를 전문가가 선택하는 방법을 확인해 보세요.

이 기사가 마음에 드셨다면 WordPress 비디오 튜토리얼을 볼 수 있는 YouTube 채널을 구독해 주세요. 당신은 또한 우리를 찾을 수 있습니다 트위터 그리고 페이스북.