WordPress에서 하위 테마를 만드는 방법(단계별)

게시 됨: 2021-07-23

WordPress 테마를 업데이트하여 테마 자체에 대한 모든 사용자 지정 변경 사항이 손실되었다는 사실을 알게 된 적이 있습니까? WordPress Child 테마는 이 문제를 방지하는 솔루션이며 이 기사에서는 테마를 만드는 방법을 정확히 보여드릴 것입니다.

가자!

WordPress 하위 테마란 무엇입니까?

WordPress 하위 테마는 WordPress 테마 디렉토리에서 찾을 수 있는 것과 같은 완전한 테마로 간주되지 않습니다. 대신, 제대로 활성화되고 작동하기 위해 완전히 다른 테마(부모 테마라고 함)에 의존합니다.

활성화되면 상위 테마 파일을 변경하지 않고 상위 테마의 모든 기능, 기능 및 코드를 상속합니다.

WordPress는 하위 테마의 폴더에서 제공될 하위 테마에 의해 재정의되는 부분을 제외하고 상위 테마의 코드를 제공합니다. 그 결과, 상위 테마가 업데이트될 때 하위 테마에서 수정/추가 등이 손실되지 않음을 의미합니다.

하위 테마 만들기(단계별)

계속하기 전에 다음을 확인하십시오.

FTP 클라이언트(예: WinSCP 또는 Filezilla)를 통해 웹사이트 파일에 액세스할 수 있습니다.
사용할 수 있는 텍스트 편집기가 있습니다(예: 메모장++).

시작하려면 상위 테마라고도 하는 기본 테마를 활성화합니다. 이 예에서는 Twenty Twenty 테마가 될 것입니다. 웹 사이트의 프런트 엔드로 이동하면 다음과 같은 내용이 표시됩니다.

이제 'Twenty Twenty' 하위 테마를 만들고 활성화해 보겠습니다.

디렉토리 추가

먼저 /wp-content/themes 안에 새로운 'twentytwenty-child'' 디렉토리를 만들어야 합니다. 공백이나 구두점을 사용하지 않는 한 하위 폴더의 이름은 원하는 대로 지정할 수 있습니다.

style.css 파일 추가

다음으로 style.css 파일을 만들고 적절한 테마 헤더를 추가해야 합니다. 계속 진행하기 전에 부모 테마의 style.css를 살펴보겠습니다.

이 정보가 관리 영역에서 어디에 반영되는지 봅시다.

먼저 모양 > 테마에서 테마 세부 정보를 열고 오른쪽 열을 자세히 살펴보세요.

이것을 스타일시트와 비교하면 이 정보의 다양한 요소가 어디에서 가져오는지 알 수 있습니다.

이 정보 중 일부를 자식 테마 스타일시트에 추가해야 합니다. 헤더로 삽입되어야 하는 최소한의 정보는 '테마명'과 '템플릿'입니다.

 /* Theme Name: Twenty Twenty - Child Template: twentytwenty */

테마 이름: 워드프레스 백엔드에 표시할 하위 테마의 원하는 이름입니다.
템플릿: 상위 테마의 디렉토리 이름과 동일해야 합니다. 실제로 WordPress에 어떤 테마가 부모인지 알려주고 종속성을 정의하므로 자식 테마의 가장 중요한 헤더입니다. 그것 없이는 자식 테마가 작동하지 않습니다.

하위 테마가 활성화되면 백엔드에 다음과 같이 표시됩니다.

다음과 같은 선택적 정보를 추가로 입력할 수 있습니다.

버전(테마 버전)
최소 필요(테마가 제대로 작동하려면 최소 필수 WP 버전)
PHP 필요(테마가 제대로 작동하려면 최소 WP PHP 버전)
설명(테마와 관련된 내용)
태그(테마의 태그)
작성자(테마 개발자 이름)
등.

이 시점에서 웹 사이트의 프론트 엔드를 열면 웹 사이트가 손상되어 다음과 같이 보일 수 있습니다.

이것은 WordPress가 현재 참조하는 스타일시트(style.css)가 이제 하위 테마에서 가져온 것이고 이 스타일시트는 비어 있고 위에서 입력한 정보를 표시하지 않기 때문에 완전히 정상입니다. 자신의 스타일을 처음부터 시작하거나 상위 테마의 스타일을 로드하여 시작할 수 있습니다. 상위 테마 스타일시트를 가져오려면 두 가지 방법 중 하나로 이를 수행할 수 있습니다.

옵션 1: 클래식 방식으로 상위 스타일 시트 가져오기

자식 테마의 style.css 파일에 다음 줄을 추가하기만 하면 됩니다.

 @import url('../twentytwenty/style.css');

이 명령은 WordPress에 원본 CSS 파일을 검색할 위치를 알려줍니다. 이제 홈페이지를 새로고침하면 원래대로 돌아갑니다. style.css에 지금 추가하는 것은 무엇이든 가져온 부모 스타일을 재정의합니다. 예를 들어 h2 제목 "Hello world!"에 다른 글꼴 크기를 추가하려고 시도합니다.

페이지를 새로고침하고 개발자 탭의 요소 검사기를 살펴보세요.

추가된 값이 계산되고 기본(부모 스타일) "font-size: 6.4rem;"이 표시됩니다. 재정의되었습니다.

그러나 고려해야 할 사항은 이 방법을 사용하면 파일이 병렬이 아닌 차례로 로드되기 때문에 사이트 속도에 부정적인 영향을 미친다는 것입니다. 보다 구체적으로 말하면, 브라우저는 두 번째 파일을 다운로드해야 한다는 "알림"을 받기 전에 첫 번째 파일을 다운로드, 구문 분석 및 실행해야 합니다.

이러한 이유로 이러한 방식으로 상위 style.css 파일을 가져오는 것은 더 이상 권장되지 않습니다.

옵션 2: 부모 스타일 시트를 올바른 방법으로 가져오기

부모 style.css 파일을 '올바른 방법'으로 가져오려면 먼저 자식 테마 폴더 안에 빈 functions.php 파일을 추가해야 합니다.

이 작업을 완료했으면 편집기로 열고 여는 PHP 태그(<?php)를 추가한 후 다음 PHP 코드를 추가할 수 있습니다.

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

지금 브라우저의 개발자 도구를 확인하면 위의 옵션 1에 설명된 '전통적인' 방식과 결과가 동일하다는 것을 알 수 있습니다. 단, 지금은 훨씬 빠릅니다.

PHP 코드에 대한 추가 참고 사항:

'parent-theme-style' 은 핸들 이름이며 고유해야 합니다.
get_template_directory_uri() . '/style.css' get_template_directory_uri() . '/style.css' 는 WordPress에 상위 style.css 위치의 소스 위치를 알려줍니다.
get_template_directory_uri() 는 상위 테마에 대한 템플릿 디렉토리 URI를 검색합니다. 우리의 경우 'http://mywebsite.onpressidium.com/wp-content/themes/twentytwenty'를 출력합니다.

자녀 테마에 기능 추가

이제 몇 가지 추가 기능을 추가할 수 있는 하위 테마를 만들었습니다. 먼저 하위 테마에서 functions.php 파일을 편집하는 방법과 이것이 실제로 어떻게 작동하는지 살펴보겠습니다.

자식 테마 functions.php

style.css 파일과 달리 하위 테마에 functions.php 를 넣으면 상위 테마의 functions.php 코드가 계속 실행됩니다. 자식의 functions.php 에 추가한 것은 부모의 functions.php 내용과 함께 실행됩니다.

예를 들어 게시물 보기의 "자세히 알아보기" 텍스트를 변경하는 방법을 살펴보겠습니다.

1단계: 테스트 게시물 카테고리 생성:

2단계: 이 범주 아래에 두 개의 새 게시물을 만듭니다. 몇 가지 예시 콘텐츠를 추가해 보겠습니다. 이 시점에서 카테고리 페이지를 방문하면 다음과 같이 표시됩니다.

이 예에서는 전체 게시물을 로드하는 버튼에 표시되는 '계속 읽기' 텍스트를 변경하려고 합니다.

이 텍스트가 어떻게 표시되는지 이해하기 위해 잠시 뒤로 물러나겠습니다. 워드프레스에서는 특정 기능을 수정하기 위해 필터를 사용합니다.

이 예제에서 원하는 것을 얻으려면 369행의 wp-includes/post-template.php 코어 파일에 처음 도입된 'the_content_more_link' 필터를 다음과 같이 사용자 정의해야 합니다.

 $output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink( $_post ) . "#more-{$_post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

이것은 현재 다음 코드에 의해 function.php 파일(라인 571)의 2020 상위 테마에 의해 무시됩니다.

 function twentytwenty_read_more_tag( $html ) { return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html ); } add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

따라서 버튼의 '계속 읽기' 텍스트를 변경하려는 경우 다음 코드를 추가하면 하위 테마의 functions.php 에서 이를 무시할 수 있습니다.

 function modify_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '">My Custom Read More text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' );

'the_content_more_link'' 후크는 이러한 파일 간에 공통적이며 이 경우 자식의 후크가 항상 우선합니다.

그런 다음 페이지를 새로 고치고 짜잔:

PHP 템플릿을 사용자 정의하는 방법

위의 스크린샷은 게시물 카테고리 보기에 대한 2020 테마 템플릿의 내용을 보여줍니다. 그렇다면 자식 테마를 사용하여 어떻게 디자인을 변경하거나 정보를 추가/제거할 수 있습니까?

이 작업을 수행하는 방법은 다음과 같습니다.

관련 php 파일 찾기
해당 파일을 하위 테마 폴더에 복사하고 편집
당신이 적합하다고 생각하는대로 그것을 사용자 정의

첫 번째이자 가장 일반적인 문제는 편집하려는 출력이 포함된 PHP 파일을 찾아야 한다는 것입니다. 이 문제를 해결하는 데 확실히 도움이 되는 것은 WordPress 템플릿 계층 구조입니다.

간단히 말해서 WordPress 테마에 실제로 필요한 유일한 파일은 index.php 및 style.css 파일입니다. 추가 파일과 폴더는 실제로 index.php 내부에서 호출되는 파일입니다. 그것들은 결국 index.php 파일의 출력으로 보게 될 것의 단편입니다.

Twenty Twenty 테마와 관련하여 index.php 파일을 보면 79행에서 내용이 하나 이상의 게시물인 경우 template-parts/ 디렉토리에 있는 php 파일이 사용된다는 것을 알 수 있습니다.

 if ( have_posts() ) { $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

우리의 경우 template-parts 테마의 하위 폴더 내부에서 content.ph p 파일을 복사해야 합니다.

또한 사용자 정의하려는 PHP 파일만 복사해야 합니다. 상위 테마의 모든 PHP 파일을 복사하지 마십시오.

참고: 변경 사항이 프런트 엔드에 반영되려면 폴더 구조가 하위 테마에서 동일해야 합니다.

따라서 먼저 'template-parts' 하위 폴더를 만들고 여기에 content.php 사본을 넣습니다.

이제 편집기에서 파일을 열고 사용자 정의할 수 있습니다.

예를 들어 div 클래스를 변경하고 프론트엔드를 새로 고쳐 결과를 확인하는 등 모든 것이 제대로 작동하는지 확인하기 위해 처음에는 사소한 것을 변경해 보십시오.

게시물 카테고리 템플릿 사용자 정의

이미 '테스트 카테고리' 카테고리에 두 개의 게시물이 있습니다. 이제 "'포스트 카테고리'' 항목 메뉴를 만들고 '테스트 카테고리'에 연결할 수 있습니다. 새 메뉴 항목을 클릭하면 게시물 카테고리 보기 페이지가 표시되어야 합니다.

이제 content.php 파일을 추가로 수정하고 게시물 카테고리 보기를 자신의 스타일로 변경할 수 있습니다. 힌트로 23행과 같이 추가로 포함된 파일의 참조를 찾으십시오.

 get_template_part( 'template-parts/featured-image' );

이것은 추천 이미지를 출력하는 파일이 template-parts/featured-image.php 것을 의미합니다.

따라서 하위 테마 디렉토리에 있는 파일을 복사하여 편집할 수 있습니다. 환상적이야!

결론

하위 테마를 사용하면 상위 테마 업데이트 기능을 잃지 않고 상위 테마의 레이아웃, 스타일 및 기능을 수정할 수 있습니다. 종종 웹 디자이너는 웹사이트의 테마를 업데이트하는 것을 꺼려합니다. 업데이트하면 부모 테마에서 직접 변경한 내용을 잃게 됩니다. 플러그인 및 WordPress 코어만큼이나 테마를 최신 상태로 유지하는 것이 중요하기 때문에 이것은 심각한 문제입니다. 처음부터 하위 테마로 작업하면 이 문제가 제거되고 테마 전체에 적용한 모든 편집 내용을 덮어쓸 염려 없이 필요에 따라 상위 테마를 업데이트할 수 있습니다.