WordPress 하위 테마 생성 및 사용자 지정에 대한 빠른 가이드

테마 개발이 압도적으로 보일 수 있지만 하위 테마는 설정하기 쉽고 처음부터 테마를 개발하는 것보다 훨씬 빠른 대안입니다.

이 게시물에서는 WordPress 자식 테마에 대한 자세한 내용과 효율적으로 만들고 사용자 지정하는 방법을 공유합니다.

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

WordPress 자식 테마가 무엇인지 정의하기 전에 먼저 WordPress 테마가 무엇이며 WordPress가 웹사이트 디자인을 표시하기 위해 정보를 가져오는 위치를 이해하는 것이 중요합니다.

WordPress Codex에 따르면, “테마는 웹로그를 위한 기본 통합 디자인으로 그래픽 인터페이스를 생성하기 위해 함께 작동하는 파일 모음입니다. 테마는 기본 소프트웨어를 변경하지 않고 데이터가 표시되는 방식을 수정합니다."

WordPress 사이트에 모든 필수 템플릿 및 자산이 포함된 단일 활성 테마가 있는 경우 상위 또는 하위 테마 간에 구분이 없습니다.

그러나 찾은 테마가 정말 마음에 든다고 결정했지만 테마를 처음부터 만들지 않고 몇 가지 변경을 하고 싶다면 이 목적을 위해 WordPress 자식 테마를 만들 수 있습니다.

자식 테마는 원래 테마의 구조를 상속하며 사용자 지정 항목만 포함합니다. 테마를 완전히 바꾸는 대신 하위 테마는 기존 테마의 파일을 수정하거나 추가합니다.

그렇게 하면 방문자를 위해 사이트가 로드될 때 원래 테마 디자인이 로드되지만 변경 사항이 적용됩니다.

온라인 세상이 아닌 현실 세계의 아이들은 살기 위해 적어도 한 명의 부모에게 의존합니다. 마찬가지로 자식 테마는 원래 테마에 의존하여 작동합니다.

그래서 자식 테마를 사용할 때 원래 테마를 부모 테마라고 합니다.

인간 유아와 달리 어린이 테마는 그 자체로 완전한 테마가 아닙니다. 즉, 해당 하위 테마를 활성화하려면 상위 테마를 설치해야 합니다.

완벽한 어린이 테마와 사용 시기

모든 테마는 상위 테마가 될 수 있지만 일부는 상위 테마에 더 적합합니다.

원하는 테마를 선택하여 필요에 따라 몇 가지 작은 구조적 사용자 정의를 사용할 수 있지만 원하는 사용자 정의를 즉시 수행할 수 있는 옵션은 제공되지 않습니다.

예를 들어 Perfect Magazine 테마는 디자인의 일부 색상을 변경할 뿐만 아니라 페이지 상단에 블로그 게시물 캐러셀을 추가하는 동안 광고 배너를 제거하는 Newsliner 자식 테마를 만드는 부모 테마로 사용되었습니다.

이러한 종류의 사용자 정의는 Perfect Magazine의 옵션에서 가능하지 않지만 완전히 새로운 테마를 처음부터 만들 수 있을 만큼 규모가 크지 않습니다.

왜 자식 테마를 만드는가?

WordPress Child 테마는 사이트에 넣은 모든 작업을 저장하고 유지하는 데 중요합니다. 테마를 직접 수정한 다음 새 소프트웨어 릴리스로 업데이트하면 모든 수정 사항과 사용자 정의가 손실됩니다.

그렇기 때문에 많은 웹 사이트 소유자가 상위 테마를 전혀 업데이트하지 않기로 선택합니다. 그러나 해킹된 WordPress 사이트의 54%가 해커와 맬웨어가 종종 검색을 실행하는 오래된 소프트웨어를 가지고 있기 때문에 심각한 보안 문제입니다.

또한 업데이트에는 종종 취약점 수정 사항이 포함되어 있으므로 업데이트를 무시하면 사이트가 공격에 노출될 수 있습니다.

또는 이러한 함정을 피하기 위해 하위 테마를 만들 수 있습니다.

앞서 언급했듯이 WordPress 자식 테마를 사용하면 개발 속도도 높일 수 있습니다.

파일 시스템과 사이트의 필수 요소가 이미 설정되어 있으므로 처음부터 시작할 필요가 없습니다. 기존 테마를 기반으로 구축하고 디자인을 사용자 정의하면서 기능을 활용할 수 있습니다.

WordPress 하위 테마 시작하기

하위 테마를 만드는 데 필요한 몇 가지 핵심 요소가 있습니다.

1. 테마 디렉토리 폴더
2. style.css 파일
3. functions.php 파일

자식 테마에 필요한 유일한 파일은 style.css 이지만, 부모 테마 스타일시트를 올바르게 큐에 넣으려면 functions.php 파일이 필요합니다.

따라서 오류를 방지하려면 자식 테마에 functions.php 파일을 만드는 것이 좋습니다 .

WordPress 자식 테마 만들기

워드프레스 자식 테마를 만들 때 아래에 자세히 설명된 4단계가 있습니다. 디렉터리 폴더 만들기, 스타일시트 만들기, 새 스타일시트와 부모 스타일시트 대기열에 추가, 테마 활성화.

디렉토리 폴더 생성

모든 테마는 WordPress 설치의 /wp-content/themes/ 폴더에 있습니다.

해당 디렉토리로 이동하여 하위 테마 폴더로 사용할 새 폴더를 만듭니다.

일반적으로 테마는 상위 테마의 이름을 사용하여 제목을 바꾸지만 끝에 -child 를 추가합니다.

예를 들어, 두 파일 경로는 /wp-content/themes/yourtheme/ 및 /wp-content/themes/yourtheme-child/ 입니다.

또한 하위 테마의 이름에는 공백이 없어야 합니다.

이는 폴더 이름 지정에 대한 어렵고 빠른 규칙은 아니지만 특히 공용으로 테마를 배포하지 않는 경우 구성에 도움이 되는 일반적인 WordPress 개발 방법입니다.

스타일시트 만들기

워드프레스 하위 테마는 상당히 광범위한 디자인 편집에 자주 사용되므로 별도의 style.css 가 필요합니다.

파일에는 테마의 모양에 영향을 주는 모든 CSS 규칙과 선언이 포함됩니다.

새 하위 테마 폴더의 루트에 style.css 파일을 만듭니다. 그런 다음 페이지 상단에 다음 헤더를 입력합니다.

 /*
 테마 이름: 스물일곱 아이
 테마 URI: http://example.com/twenty-seventeen-child/
 설명: Twenty Seventeen Child 테마
 저자: 제인 도
 작성자 URI: http://example.com
 템플릿: 스물세븐틴
 버전: 1.0.0
 라이선스: GNU 일반 공중 라이선스 v2 이상
 라이선스 URI: http://www.gnu.org/licenses/gpl-2.0.html
 태그: 라이트, 다크, 2열, 오른쪽 사이드바, 반응형 레이아웃, 접근성 준비
 텍스트 도메인: 스물일곱-자식
*/

헤더는 테마에 대한 기본 세부 정보를 WordPress에 알려주기 때문에 파일의 중요한 부분입니다. 또한 템플릿 부분에 표시된 대로 특정 부모가 있는 자식 테마임을 나타냅니다.

헤더에 대한 유일한 요구 사항은 테마 이름 및 템플릿 입니다. 그러나 나머지는 작성하는 것이 가장 좋습니다.

또한 모든 필수 세부 정보가 정확하도록 변경해야 합니다. 예를 들어 작성자 및 작성자 URI 와 사용 중인 상위 테마가 다른 경우 Twenty Seventeen에 대한 참조입니다.

태그 섹션은 WordPress 테마 디렉토리와 관련이 있습니다. 거기에 테마를 업로드하려면 테마와 관련된 태그를 선택해야 합니다.

상위 및 하위 테마 스타일시트를 대기열에 추가

다음으로, 큐잉이라는 프로세스에서 각 테마의 스타일시트가 올바르게 로드되는지 확인하는 것이 중요합니다.

대기열에 넣는다는 것은 데이터 처리를 위해 대기열에 항목 또는 항목 목록을 추가하는 것을 의미합니다. 이 경우 대기열은 브라우저에서 요청할 때 웹사이트에서 로드해야 하는 파일입니다.

대기열에 넣기를 건너뛰면 사이트는 하위 테마 스타일시트에서만 가져오고 상위 테마가 제공하는 스타일은 사용하지 않습니다.

@import 메소드를 사용하여 부모 style.css 를 큐에 넣는 것이 가능하다는 점에 주목하는 것도 중요할 수 있습니다. 그러나 성능 문제로 인해 더 이상 권장되지 않습니다.

스타일시트를 대기열에 넣으려면 functions.php 파일을 아직 생성하지 않은 경우 생성해야 합니다.

새 파일을 만들고 이름을 functions.php 로 지정하면 됩니다. 그 다음에. 이 코드를 맨 위에 배치하십시오.

 <?php

위의 줄 앞에 공백을 포함하지 마십시오. 그렇지 않으면 오류가 발생합니다.

functions.php 파일에 아래 코드를 추가하여 사이트가 부모 style.css 와 자식 테마의 style.css 를 올바른 순서로 올바르게 로드하는지 확인하세요.

 add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

함수 my_theme_enqueue_styles() {

    $부모_; // Twenty Seventeen 테마의 'twentyseventeen-style'입니다.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( '자식 스타일',
        get_stylesheet_directory_uri() . '/스타일.css',
        배열( $parent_style ),
        wp_get_theme()->get('버전')
    );
}
?>

$parent-style 변수에 저장되는 상위 스타일을 테마 이름을 포함하도록 변경해야 합니다.

WordPress Codex에서 권장하는 대로 이 코드는 상위 style.css 가 종속성으로 로드되도록 합니다. 즉, 하위 테마의 style.css 가 로드되는 데 필요합니다.

하위 테마 활성화

모든 파일을 저장했으면 모양 > 테마 로 이동하여 하위 테마를 찾은 다음 활성화 버튼을 클릭합니다.

부모 테마도 활성화할 필요가 없습니다. 그러나 여전히 설치되어 /wp-content/themes/ 폴더에 있어야 합니다.

하위 테마의 style.css 에 있는 헤더 텍스트는 두 테마를 함께 연결하고 WordPress 설치에 대한 관계를 명확히 합니다.

자식 테마를 활성화한 후 디자인에 문제가 발생하면 모양 > 메뉴 에서 메뉴를 다시 저장하고 사용자 지정 프로그램의 테마 옵션 에서 다른 콘텐츠를 다시 저장해야 할 수 있습니다.

빠른 사용자 정의 팁

개발 프로세스를 시작하기 전에 다음은 WordPress 하위 테마 사용자 지정에 대한 몇 가지 팁입니다.

테마 이미지

모양 > 테마 페이지에서 테마에 대한 고유한 이미지를 포함해야 합니다.

체크 무늬 상자를 대신할 무언가를 삽입하려는 경우 screenshot.png 라는 880 x 660 PNG 이미지 파일을 업로드할 수 있습니다.

이미지를 자식 테마 폴더의 루트에 넣습니다. 그렇게 하면 WordPress 설치에서 이를 테마의 이미지로 사용한다는 것을 알게 됩니다.

상위 테마 파일 재정의

WordPress 하위 테마에 새 파일을 삽입하여 이전 구성 요소를 재정의하려면 상위 파일을 하위 테마로 복사한 다음 사용자 지정할 수 있습니다.

사이트를 로드할 때 WordPress는 하위 테마에 상위 테마에 해당하는 파일이 있는지 확인합니다. 발견되면 원래 상위 테마의 파일을 재정의합니다.

그것은 마을을 차지하지 않습니다

WordPress 자식 테마 생성은 들리는 것처럼 복잡할 필요가 없습니다. 위의 단계를 따르고 편집한 내용은 그대로 유지되므로 안심하십시오. 또한 사이트를 좀 더 안전하게 보호하는 데 도움이 됩니다.

어떤 어린이 테마를 만들고 싶습니까? 성공적으로 만들 수 있었습니까? 그 과정에서 애로사항이 있었나요? 아래 의견에 자유롭게 경험을 공유하십시오.