WordPress 자식 테마 만들기 튜토리얼

우리 중 많은 사람들이 테마에서 무언가를 사용자 정의하기를 원합니다. 또한 사용 중인 테마에 무언가를 추가하거나 편집하고 싶으십니까? 그렇다면 잘 찾아오셨습니다, 친구. 이 게시물은 WordPress 자식 테마를 만드는 방법에 대한 간단하고 포괄적인 자습서입니다.

테마에 많은 사용자 지정 옵션이 있는 경우 요구 사항을 충족하는 데 도움이 될 수 있습니다. 그러나 사용 가능한 옵션의 수에 관계없이 현재 가지고 있는 테마가 할 수 없거나 원하는 방식이 아닌 일이 여전히 있을 수 있습니다. 따라서 코드와 WordPress에 익숙하다면 테마 파일에 뛰어들어 몇 분, 몇 시간을 들여 편집을 시작할 수 있습니다. 업데이트가 돌아갑니다.

그래서 이것을 피하기 위해 Child Theme 라는 영웅이 등장합니다. 자식 테마를 만들면 원래 테마의 코드를 변경하지 않고도 사이트를 변경할 수 있습니다. 몇 가지 사소한 조정만 하는 경우에도 하위 테마를 만드는 데 몇 분을 투자하면 됩니다.

참고 : 웹 사이트에서 간단한 CSS 변경을 수행하려면 하위 테마를 만드는 대신 WordPress 4.7에 추가된 추가 CSS 상자를 사용할 수 있습니다. 추가 CSS 상자를 통해 변경한 사항은 테마를 업데이트하더라도 그대로 유지됩니다. 그러나 PHP 파일 편집과 같은 다른 추가 변경 사항을 찾고 있다면 하위 테마를 생성해야 합니다.

그래서, 나는 이것이 ' 왜 자식 테마를 만드는가?'를 다룰 것이라고 생각합니다. 질문. 자, 이제 자식 테마를 만들어 봅시다.

WordPress 하위 테마를 만드는 방법은 무엇입니까?

이 튜토리얼에서는 인기 있는 테마인 Spacious에 대한 하위 테마를 만드는 방법을 보여줍니다.

1단계:

테마 디렉토리에 새 폴더를 만듭니다. cPanel을 사용하거나 FTP를 통해 그렇게 할 수 있습니다. 테마 디렉토리는 wp-content/themes입니다. 따라서 폴더 이름을 wide-child로 지정하겠습니다. 원하는 대로 이름을 지정할 수 있지만 폴더 이름에는 공백이 없어야 합니다. 자식 테마의 이름을 부모 테마로 지정하고 끝에 -child를 추가하는 것이 일반적인 방법입니다.

2단계:

wide-child 폴더 안에 style.css 라는 파일을 생성하고 아래와 같이 정보를 입력합니다.

/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

이것을 추가하고 파일을 저장하십시오.

기억할 점 :

• 템플릿 이름(여기서는 넓은)은 상위 테마의 폴더 이름과 일치해야 하며 이름 뒤에 공백이 없어야 합니다.
• 기타 세부 사항은 원하는 대로 추가하거나 변경할 수 있습니다.

3단계:

2단계에서 'style.css'를 생성한 것처럼 functions.php 라는 파일을 생성합니다. 그리고 아래와 같이 정보를 입력합니다.

<?php
/**
 * Child theme functions file.
 */
function spacious_child_enqueue_styles() {
	// Parent theme style handle 'spacious_style'.
	$parent_;

	// Enqueue parent and child theme style.css.
	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
	wp_enqueue_style( 'spacious_child_style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->( 'Version' ) );
}

add_action( 'wp_enqueue_scripts', 'spacious_child_enqueue_styles' );

하위 테마 생성 시 style.css 및 functions.php 파일은 필수 파일이며 템플릿 파일 및 기타 파일은 선택 사항 이며 필요한 경우 생성할 수 있습니다.

마지막으로 하위 테마를 활성화하려면 대시보드에서 모양->테마로 이동합니다. 생성한 하위 테마를 찾아 활성화합니다. 그게 다야 또한 하위 테마가 작동하려면 설치된 테마에도 상위 테마가 있어야 합니다. 이제 사이트를 방문하면 상위 테마가 활성화되었을 때와 동일하게 보일 것입니다. 그러나 사용자 지정 프로그램에서 일부 설정을 재설정해야 할 수도 있습니다.

테마의 CSS 수정

테마의 CSS를 수정하고 싶다면 style.css 파일 끝에 CSS를 추가하고 저장하면 됩니다. 이 CSS 행은 상위 테마 CSS를 덮어씁니다.

예를 들어, 우리가 넓은 주제의 사이트 제목의 글꼴 크기를 변경하고 싶은 말은 36px 로 기본값 42px 도에서 색상을 변경 #444444 블루 (기본적 #0000FF ). 그런 다음 아래 CSS 라인을 추가하면 됩니다.

/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/

/* =Theme customization starts here
------------------------------------------------------- */
#site-title a {
	color: #0000FF;
	font-size: 42px;
}

추가 변경

다른 테마 파일 편집
템플릿 파일을 조정하여 테마 파일을 구조적으로 변경할 수도 있습니다. 예를 들어, 일부 변경을 원하거나 헤더에 추가 코드를 추가하고 싶습니다. 그런 다음 상위 테마의 header.php 파일을 복사하고 하위 테마 내부에 붙여넣고 변경 사항을 적용/추가하고 파일을 저장할 수 있습니다. 이 header.php 파일은 상위 테마의 header.php 파일 대신 로드됩니다.

마무리

이제 자식 테마를 만들고 원하는 대로 사용자 지정할 수 있기를 바랍니다. 하고 싶은 말? 댓글에 추가해 주시면 답변 드리겠습니다. 즐기다!