WordPress 하위 테마 작업에 대한 궁극적인 가이드

게시 됨: 2016-01-05

HeroThemes에서 구매한 테마를 사용자 지정하려면 맞춤 디자인을 사용하여 자신이나 고객을 위한 웹사이트를 구축하는 경우 WordPress 하위 테마의 기능을 활용할 수 있어야 합니다.

가장 기본적으로 자식 테마를 사용하면 더 효율적입니다. 모든 프로젝트에 사용하는 코드를 고유한 부모 테마로 유지하거나 당사와 같은 기성품 부모 테마를 사용하면 DRY(Do Not Repeat Yourself) 원칙.

그러나 더 나아가 자식 및 부모 테마를 사용하여 핵심 코드 기반으로 사이트 네트워크를 만들거나 타사 테마 프레임워크를 기반으로 사용자 지정 테마를 만들거나 테마 프레임워크로 사용할 고급 부모 테마를 직접 만들 수도 있습니다. . 이 기사에서는 하위 테마의 필수 사항에 대한 간략한 개요를 제공하고 몇 가지 고급 기술을 보여 드리겠습니다. 당신은 배울 것입니다:

자식 테마를 사용하여 프로젝트 요구 사항에 맞게 타사 부모 테마 또는 테마 프레임워크를 조정하는 방법
WordPress가 각 상위 및 하위 테마에서 템플릿 파일의 우선 순위를 지정하는 방법
자식 테마의 기능 파일에서 부모 테마 기능을 재정의하는 방법.

상위 및 하위 테마 이해

이론적으로 어떤 테마도 부모 테마로 작동할 수 있지만 일부는 이 역할을 위해 더 잘 설계되었습니다(우리 포함!). 우리 테마 중 하나를 사용 중이고 자신의 프로젝트에 맞게 조정하려는 경우 기본 테마를 해킹하는 것보다 하위 테마를 사용하여 이를 수행하는 것이 훨씬 낫습니다. 즉, 업데이트할 때 모든 변경 사항을 잃게 됩니다. 향후 버전에 대한 테마. 자식 테마를 만들려면 새 테마를 만들고 스타일시트의 시작 부분에 다음을 추가하기만 하면 됩니다. 아래의 예는 HeroThemes 테마 HelpGuru를 상위로 사용하지만 KnowAll과 같은 다른 HeroTheme 제품을 포함하여 모든 테마를 사용할 수 있습니다.

지금 바로 지식 기반 구축을 시작하십시오!

KnowAll 테마에는 지식 기반 사이트를 사용자 지정하는 데 도움이 되는 하위 테마가 포함되어 있습니다.

테마 가져오기

/*
Theme Name: My child theme
Theme URI: URL of the theme or site it's used for
Description: Description of what the theme is for and its main features.
Author: Your name
Template: helpguru
Version: 1.0
*/
@import url("../helpguru/css/style.css");

중요한 행은 다음 두 가지입니다.

Template: helpguru
@import url("../helpguru/css/style.css");

첫 번째 섹션은 템플릿을 지정하여 WordPress에 이것이 자식 테마이고 부모가 HelpGuru 테마임을 알려줍니다. 여기에서는 테마 이름이 아닌 상위 테마의 폴더 이름을 사용합니다(위에서는 'HelpGuru'가 아닌 'helpguru'를 사용했습니다).

두 번째 섹션은 상위 테마에서 스타일시트를 가져옵니다. 즉, 상위 테마의 모든 스타일이 하위 테마에서 활성화됩니다. 그런 다음 이 @import 선언 아래에 자신만의 스타일을 추가합니다. 이는 두 테마의 스타일이 모두 사용되지만 동일한 요소에 대한 선언이 두 스타일시트에 모두 존재하는 경우 하위 테마의 CSS가 캐스케이드(자식 테마의 스타일링은 상위 테마의 스타일링 다음에 옵니다.

하위 테마는 스타일시트로 구성될 수 있으며 원하는 경우 다른 것은 없을 수 있습니다. 이 경우 상위 테마의 일부 스타일을 재정의하는 데 사용할 뿐입니다. 또는 추가 템플릿 파일 및/또는 기능 파일을 추가할 수 있습니다. 이 경우 WordPress가 상위 및 하위 테마의 템플릿 파일에 액세스하는 방법을 이해해야 합니다.

상위 및 하위 테마 템플릿 파일

WordPress가 상위 및 하위 테마에서 템플릿 파일을 사용하는 방식은 매우 간단합니다. 주어진 페이지(또는 게시물 또는 기타 콘텐츠 유형)가 표시될 때 WordPress는 템플릿 계층 구조에 따라 상위 또는 하위 테마에서 가장 관련성이 높은 템플릿 파일을 사용합니다. 동일한 템플릿 파일의 두 가지 버전을 찾으면 하위 테마의 버전을 사용합니다. 즉, 두 가지 시나리오에서 하위 테마의 템플릿 파일이 상위 테마의 템플릿 파일보다 우선 적용됩니다.

하위 테마에 상위 테마보다 계층 구조에서 상위에 있는 템플릿 파일이 포함되어 있는 경우
또는 상위 테마와 하위 테마에 모두 필요한 템플릿 파일 버전이 포함되어 있는 경우.

상위 또는 하위 테마 템플릿 파일 결정

WordPress는 템플릿 계층을 사용하여 사용할 템플릿 파일을 결정하지만, 이는 각각의 상위 및 하위 테마에 있는 파일과 상호 작용합니다. 간단히 말해서 WordPress는 세 단계를 거칩니다.

표시되는 콘텐츠 유형을 식별합니다.
상위 또는 하위 테마에서 해당 콘텐츠를 표시할 파일을 찾을 때까지 템플릿 계층 구조를 통해 작동합니다.
파일이 상위 테마와 하위 테마 모두에 있는 경우 하위 테마의 파일을 사용합니다.

예를 들어 설명하겠습니다. 아래 표는 두 가지 가상 테마의 템플릿 파일 세트를 보여줍니다. 그 중 하나는 다른 테마의 하위 테마입니다. 내가 강조한 파일이 우선합니다.

따라서 위의 예에서 특정 유형의 콘텐츠를 표시하는 데 사용되는 템플릿 파일을 살펴보겠습니다.

'제품' 사용자 정의 게시물 유형에 대한 단일 게시물은 하위 테마의 single-product.php 를 사용하여 표시됩니다.
다른 게시물 유형(일반 게시물 포함)에 대한 단일 게시물은 하위 테마의 single.php 를 사용하여 표시됩니다.
정적 페이지는 상위 테마의 page.php 를 사용하여 표시됩니다.
위젯 카테고리 목록은 하위 테마의 category-widgets.php 를 사용하여 표시됩니다.
다른 카테고리 목록은 상위 테마의 category.php 를 사용하여 표시됩니다.
다른 아카이브 목록은 상위 테마의 archive.php 를 사용하여 표시됩니다.
검색 결과는 상위 테마의 search.php 를 사용하여 표시됩니다.
404 페이지는 상위 테마의 404.php 를 사용하여 표시됩니다.
특정 템플릿 파일이 없는 다른 페이지는 하위 테마의 index.php 를 사용하여 표시됩니다.

더 나아가기 - 상위 테마 기능 재정의

부모 테마의 CSS 및/또는 템플릿 파일을 재정의하거나 보완할 뿐만 아니라 자식 테마를 사용하여 부모 테마의 기능을 재정의하거나 추가 기능을 추가할 수 있습니다.

경고! 하위 테마를 사용하는 것이 추가 기능을 추가하는 것이라면 플러그인을 작성하는 것이 더 나을 수 있습니다. 불행히도 부모 및 자식 테마의 함수 파일은 스타일시트와 같은 방식으로 상호 작용하지 않습니다. WordPress는 하위 테마의 함수 다음에 상위 테마의 함수를 호출합니다. 즉, 하위 테마의 기능을 재정의할 수 있습니다. 나는 이것이 약간의 고통처럼 들린다는 것을 압니다. 당신은 당신의 사이트에서 원하는 대로 자식 테마를 만들었습니다. 맞죠? 다행히도 이를 극복할 수 있는 방법이 있습니다. 첫 번째 방법은 자식 테마에서 사용하는 방법으로 관련 작업 또는 필터 후크에 기능을 연결할 때 우선 순위를 설정하는 것입니다. 두 번째는 상위 테마에서 수행되며, 이는 기능을 플러그형으로 만드는 것입니다. 잠시 후에 설명하겠습니다. 먼저 자식 테마의 방법을 살펴보겠습니다.

우선 순위를 사용하여 상위 테마 기능 재정의

자식 테마에 추가한 각 기능을 활성화하려면 add_action() 또는 add_filter() ) 를 사용하여 액션 후크 또는 필터 후크에 해당 기능을 연결해야 합니다. add_action() 및 add_filter() 함수에는 세 개의 매개변수가 있습니다.

$tag – 작업 또는 필터 후크의 고유 식별자
$function_to_add – 함수의 이름
$priority – 함수를 연결하려는 우선 순위(더 많은 것은 곧)

add_filter() 를 사용하면 네 번째 선택적 매개변수인 $arguments 를 사용할 수 있지만 이는 특히 하위 테마와 관련이 없습니다. 대부분의 경우 처음 두 매개변수(둘 다 필수)만 사용되지만 선택적 $priority 매개변수를 사용하여 상위 테마의 함수를 하위 테마의 함수로 재정의할 수 있습니다. 우선 순위가 높을수록 더 늦게 로드됩니다. 기본값은 10 이므로 상위 테마가 우선 순위를 지정하지 않으면 하위 테마의 우선 순위를 10보다 높은 숫자로 설정하기만 하면 됩니다. 공장. HelpGuru 테마의 자식으로 작업하고 메뉴 기능을 무시하고 고유한 기능을 추가하려고 한다고 상상해 보십시오. 이 테마에는 after_setup_theme 작업 후크에 첨부된 ht_theme_setup() 함수가 포함되어 테마를 설정(메뉴 등록, 추천 이미지 지원 추가 등 포함)합니다. HelpGuru의 함수 파일에 있는 코드는 다음과 같습니다.

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}
add_action( 'after_setup_theme', 'ht_theme_setup' );

자식 테마에서 ht_theme_setup() 함수의 요소를 재정의하려면(전체가 아님: 곧 다루겠습니다) HelpGuru에서 제공하는 기능의 요소를 대체하는 함수를 작성하고 이를 after_setup_theme 작업에 첨부합니다. 후크, 10보다 높은 우선순위 지정:

function my_theme_setup() {
// contents of function
}
add_action( 'after_setup_theme', 'my_theme_setup', 15 );

WordPress가 동일한 후크에 연결된 이러한 기능을 만나면 우선 순위가 낮은 것, 즉 상위 테마의 기능을 먼저 실행합니다. 그런 다음 하위 테마에서 더 높은 우선순위를 실행합니다. 즉, 상위 테마의 기능을 재정의할 수 있습니다. 위에서 언급했듯이 다른 방법이 있습니다. 테마에 작성하여 상위 테마로 더 쉽게 사용할 수 있도록 하는 것이 좋습니다. 바로 기능을 플러그형으로 만드는 것입니다.

플러그인 가능 함수를 사용하여 하위 테마 재정의 허용

WordPress가 자식 테마의 함수 다음에 부모 테마의 기능을 전달하므로 부모 테마의 기능을 코딩하여 자식 테마에서 동일한 이름을 가진 기능을 확인하도록 할 수 있습니다. 통과했다. 위의 HelpGuru에서 본 것과 같은 조건문을 사용하여 이 작업을 수행합니다.

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}

동일한 이름을 가진 함수가 이미 전달되지 않은 경우(예: 하위 테마에서) 상위 테마의 함수가 전달됩니다. 그러나 WordPress가 이미 이 이름을 가진 함수를 만난 경우 플러그인 가능한 함수(즉, 상위 테마의 함수)를 무시합니다. 이 작업을 수행하려면 재정의하려는 상위 테마의 함수와 동일한 이름으로 하위 테마의 함수를 만들기만 하면 됩니다. 따라서 ht_theme_setup() 함수를 전체적으로 재정의하려면 자식 테마에서 다음을 사용합니다.

function ht_theme_setup() {
// contents of function
}

그게 다야! 같은 이름으로 다른 함수를 작성하면 상위 테마에 있는 함수보다 우선 적용됩니다. 참고: 이 기술은 고유한 상위 테마를 생성하는 경우에만 작동합니다. 타사 상위 테마의 함수 파일을 플러그형으로 만들기 위해 편집하지 마십시오. 결국, 자식 테마를 만드는 요점은 부모를 건드리지 않는다는 것입니다!

요약

제가 보여드린 대로 자식 테마로 작업하면 WordPress 개발자로서 효율성과 효율성을 높일 수 있습니다. 특히 클라이언트나 자신을 위한 사용자 지정 사이트를 개발하는 경우에는 더욱 그렇습니다. 최소한 HeroThemes 중 하나와 같은 기존 테마의 하위 테마를 사용하면 동일한 작업을 반복해서 수행하지 않아도 되므로 개발 워크플로를 더 빠르고 효율적으로 만들 수 있습니다.

상위 테마의 기능을 재정의하거나 보완하기 위해 하위 테마의 템플릿 파일 및 기능 파일을 사용하여 이를 더 발전시킬 수 있습니다. 또한 자식 테마를 최대한 활용하고 싶다면 자신만의 부모 테마를 구축하여 모든 새 프로젝트에 대한 빠른 시작점을 제공하고 처음부터 시작하는 것보다 적은 노력으로 자식 테마에 더 많은 것을 추가할 수 있습니다. .