워드 프레스 자식 테마를 만드는 방법 (비디오)

WordPress에서 자식 테마를 만들려고하십니까? WordPress 기본 사항을 배우면 WordPress 사이트를 사용자 지정하는 방법을 배우고 싶을 것입니다. 우리는 아동 테마가 워드 프레스 테마를 커스터마이징하려는 모든 사람에게 훌륭한 출발점이라고 생각합니다. 이 기사에서는 WordPress에서 자식 테마를 만드는 방법을 보여줍니다..


스물셋에 기초한 간단한 워드 프레스 아동 테마

비디오 튜토리얼 :

WPBeginner 구독

비디오를보고 싶지 않은 사람들을 위해 아래 기사를 계속 읽을 수 있습니다.

자식 테마를 만들어야하는 이유?

어린이 테마는 WordPress 테마를 사용자 정의하는 가장 좋은 방법으로 간주됩니다. 자식 테마는 부모 테마의 모든 기능과 모양을 상속합니다. 부모 테마에 영향을주지 않고 사용자 정의 할 수 있습니다. 이를 통해 변경 사항을 잃어 버릴 염려없이 상위 테마를 쉽게 업데이트 할 수 있습니다..

우리의 기사에서 WordPress Child Theme 란 무엇입니까?에서 자녀 테마에 대해 자세히 알아볼 수 있습니다. 찬반 양론 등.

요구 사항

CSS / HTML에 대한 기본 지식이 필요하므로 직접 변경할 수 있습니다. PHP에 대한 지식은 확실히 도움이 될 것입니다. 다른 소스의 코드 스 니펫을 복사하여 붙여 넣는 데 능숙하면 작동합니다..

지역 개발 환경에서 연습하는 것이 좋습니다. 테스트 목적으로 라이브 WordPress 사이트를 로컬 서버로 이동하거나 테마 개발을 위해 더미 컨텐츠를 사용할 수 있습니다..

시작하기

좋은 WordPress 테마는 부모 테마로 사용할 수 있습니다. 그러나 많은 종류의 테마가 있으며 일부는 가장 다루기 어려운 주제 일 수 있습니다. 이 튜토리얼을 위해 기본 WordPress 테마 중 하나 인 Twenty Thirteen을 사용합니다..

첫 자녀 테마 만들기

먼저 WordPress 설치 폴더에서 / wp-content / themes /를 열고 하위 항목에 대한 새 폴더를 만들어야합니다. 이 폴더의 이름을 원하는대로 지정할 수 있습니다. 이 튜토리얼에서는 이름을 wpbdemo로 지정합니다..

새로운 워드 프레스 자식 테마 만들기

메모장과 같은 텍스트 편집기를 열고 다음 코드를 붙여 넣습니다.

/ *
테마 이름 : WPB Child Theme
테마 URI : https://www.wpbeginner.com/
설명 : 스물셋 아이 테마
저자 : WPBeginner
작성자 URI : https://www.wpbeginner.com
템플릿 : 스물셋
버전 : 1.0.0
* /

@import url ("../twentythirteen/style.css");

이제이 파일을 방금 만든 하위 테마 폴더에 style.css로 저장하십시오..

이 파일에있는 대부분의 내용은 설명이 필요 없습니다. 당신이 정말로주의를 기울이고 싶은 것은 템플릿입니다..

이것은 우리의 테마가 자식 테마이고 부모 테마 디렉토리 이름이 21이라고 WordPress에 알려줍니다. 부모 폴더 이름은 대소 문자를 구분합니다. WordPress에 템플릿 : TwentyThirteen을 제공하면 작동하지 않습니다..

이 코드의 마지막 줄은 부모 테마의 스타일 시트를 자식 테마로 가져옵니다..

이것은 하위 테마를 작성하기위한 최소 요구 사항입니다. 이제 갈 수 있습니다 외관»테마 WPB Child Theme가 표시됩니다. 사이트에서 하위 테마 사용을 시작하려면 활성화 버튼을 클릭해야합니다.

WordPress 자식 테마 활성화

아직 자녀 테마를 변경하지 않았으므로 사이트는 부모 테마의 모든 기능과 모양을 사용합니다.

자녀 테마 사용자 정의

각 WordPress 테마에는 기본 디렉토리에 style.css 파일이 있습니다. 대부분 이것이 모든 CSS가 들어가는 테마의 기본 스타일 시트입니다. 그러나 일부 테마에는 테마의 헤더 정보 만있을 수 있습니다. 이러한 테마는 일반적으로 별도의 디렉토리에 CSS 파일이 있습니다..

이 섹션에서는 약간의 CSS 노하우가 필요합니다..

Chrome 및 Firefox에는 내장 관리자 도구가 제공됩니다. 이 도구를 사용하면 웹 페이지의 모든 요소 뒤에있는 HTML 및 CSS를 볼 수 있습니다.

탐색 메뉴에 사용 된 CSS를 보려면 마우스를 탐색 메뉴로 가져간 다음 마우스 오른쪽 버튼을 클릭하여 요소 검사를 선택하십시오..

Chrome에서 요소 검사 도구 사용

브라우저 화면이 두 부분으로 나뉩니다. 화면 하단에 페이지의 HTML 및 CSS가 표시됩니다.

렌더링 된 HTML 및 CSS 스타일 규칙을 표시하는 Chrome 관리자

마우스를 다른 HTML 줄로 이동하면 Chrome 관리자가 상단 창에서 강조 표시합니다. 보시다시피 위의 스크린 샷에서 탐색 메뉴가 선택되어 있음을 알 수 있습니다.

또한 오른쪽 창에서 강조 표시된 요소와 관련된 CSS 규칙을 보여줍니다..

CSS가 어떻게 보이는지 바로 편집 할 수 있습니다. .navbar의 배경색을 # e8e5ce로 변경해 보겠습니다..

Chrome 검사기에서 CSS로 놀기

네비게이션 바의 배경색이 변하는 것을 볼 수 있습니다. 원하는 경우이 CSS 규칙을 복사하여 자녀 테마의 style.css 파일에 붙여 넣을 수 있습니다.

.탐색 모음 {
배경색 : # e8e5ce;
}

style.css 파일의 변경 사항을 저장 한 다음 사이트를 미리 봅니다..

테마의 스타일 시트에서 변경하려는 항목에 대해이 과정을 반복하십시오. 다음은 하위 테마 용으로 작성한 전체 스타일 시트입니다. 자유롭게 실험하고 수정하십시오.

/ *
테마 이름 : WPB Child Theme
테마 URI : https://www.wpbeginner.com
설명 : 스물셋 아이 테마
저자 : WPBeginner
작성자 URI : https://www.wpbeginner.com
템플릿 : 스물셋
버전 : 1.0.0
* /

@import url ("../twentythirteen/style.css");

.사이트 제목 {
패딩 : 30px 0 30px;
}

.사이트 헤더 .home-link {
최소 높이 : 0px;
}

.탐색 모음 {
배경색 : # e8e5ce;
}

.위젯 {
배경색 : # e8e5ce;
}
.사이트 바닥 글 {
배경색 : # d8cdc1;
}
.사이트 바닥 글 .sidebar-container {
배경색 : # 533F2A
}

템플릿 파일 편집

스물 열세 레이아웃

각 WordPress 테마는 다른 레이아웃을 갖습니다. 스물셋 열 테마의 레이아웃을 봅시다. 머리글, 탐색 메뉴, 내용 루프, 바닥 글 위젯 영역, 보조 위젯 영역 및 바닥 글이 있습니다..

이 각 섹션은 21 개의 폴더에있는 서로 다른 파일로 처리됩니다. 이 파일들을 템플릿이라고합니다.

이러한 템플릿의 대부분은 사용되는 영역의 이름을 따서 명명됩니다. 예를 들어 바닥 글 섹션은 일반적으로 footer.php 파일로 처리되고 머리글 및 탐색 영역은 header.php 파일로 처리됩니다. 컨텐츠 영역과 같은 일부 영역은 컨텐츠 템플리트라는 여러 파일로 처리됩니다..

먼저 수정하려는 테마 파일을 선택한 다음이를 하위 테마로 복사하십시오..

예를 들어 바닥 글 영역에서 ‘powered by WordPress’링크를 제거하고 저작권 표시를 추가하려고합니다. 자녀 테마에 footer.php 파일을 복사 한 다음 메모장과 같은 일반 텍스트 편집기에서 열면됩니다. 제거하려는 줄을 찾아서 자신의 것으로 바꿉니다. 이처럼 :

<?PHP
/ **
바닥 글 표시를위한 템플릿
*
* 바닥 글 내용과 #main 및 #page div 요소 닫기.
*
* @package WordPress
* @ 서브 패키지 Twenty_Thirteen
* @Twenty Thirteen 1.0부터
* /
?>

<?PHP get_sidebar ( ‘메인’); ?>

© 저작권 <?PHP 에코 날짜 (Y); ?> <?PHP bloginfo ( ‘이름’); ?> 판권 소유.



<?PHP wp_footer (); ?>

이 코드에서는 Twenty Thirteen 크레딧을 저작권 표시로 대체했습니다..

하위 테마를 만들 때 문제 해결이 훨씬 쉽습니다. 예를 들어 실수로 부모 테마에 필요한 것을 삭제 한 경우 자식 테마에서 파일을 삭제하고 다시 시작할 수 있습니다..

자식 테마에 새로운 기능 추가

테마의 functions.php 파일에서 코드 스 니펫을 복사하여 붙여 넣도록 요청하는 많은 워드 프레스 튜토리얼이 있습니다..

부모 테마의 functions.php 파일에 코드 스 니펫을 추가하면 부모 테마에 대한 새로운 업데이트가있을 때마다 변경 사항을 덮어 씁니다. 그렇기 때문에 항상 하위 테마를 사용하고 모든 사용자 정의 코드 스 니펫을 하위 테마의 functions.php 파일에 추가하는 것이 좋습니다..

자녀 테마 폴더에 새 파일을 만들고 functions.php로 이름을 지정합니다. 이 예에서는 기본 헤더 이미지를 자체 맞춤 이미지로 변경하는 작은 코드 스 니펫을 추가합니다..

Twenty Thirteen의 기본 헤더 이미지를 편집하여 헤더 이미지와 썸네일을 이미 생성했습니다. 다음으로 / images / headers / 폴더의 하위 테마로 업로드했습니다..

그런 다음이 이미지를 테마의 기본 헤더 이미지로 사용하도록 WordPress에 지시해야합니다. 이 코드 스 니펫을 하위 테마의 functions.php 파일에 추가하면됩니다.

<?PHP
기능 wpbdemo_custom_header_setup () {

add_theme_support ( ‘custom-header’, 배열 ( ‘default-image’=> ‘% s / images / headers / circle-wpb.png’));

register_default_headers (배열 (
‘카라멜’=> 정렬(
‘url’=> ‘% 2 $ s / images / headers / circle-wpb.png’,
‘thumbnail_url’=> ‘% 2 $ s / images / headers / circle-wpb-thumbnail.png’,
‘설명’=> __ ( ‘카라멜’, ‘카라멜 헤더’, ‘twentythirteen’)
),
));

}
add_action ( ‘after_setup_theme’, ‘wpbdemo_custom_header_setup’);
?>

이제 방문하면 외관»헤더, 기본 이미지로 추가 한 이미지를 볼 수 있습니다.

WordPress Child Theme에서 테마 헤더 변경

하위 테마의 functions.php 파일에 필요한 사용자 정의 코드 스 니펫을 추가 할 수 있습니다. WordPress 함수 파일에 유용한 25 가지 이상의 유용한 트릭을 확인하십시오..

문제 해결

초보자는 첫 번째 하위 테마를 작업 할 때 실수를 저지를 것으로 예상됩니다. 너무 빨리 포기하지 마십시오. 가장 일반적인 WordPress 오류 목록을 확인하여 수정 사항을 찾으십시오..

가장 일반적인 오류는 아마도 코드에서 무언가를 놓쳤을 때 일반적으로 발생하는 구문 오류 일 것입니다. 다음은 WordPress에서 구문 오류를 찾아 수정하는 방법을 설명하는 빠른 안내서입니다..

최종 결과

스물셋에 기초한 간단한 워드 프레스 아동 테마

데모 테마 다운로드

여기를 클릭하여 WordPress 하위 테마 학습서의 최종 결과를 다운로드 할 수 있습니다. 이것은 스물 열세에 기초한 매우 기본적인 아이 테마임을 기억하십시오.

스물셋에 따라 다른 어린이 테마

다음은 스물셋에 근거한 다른 워드 프레스 자식 테마입니다. 이것들을 살펴보고이 테마 개발자들이 어떻게 스물셋 열을 조정했는지보십시오.

홀리

Holi-Twenty Thirteen을 기반으로 한 WordPress 아동 테마

벚꽃

Cherry Blossom-스물 세 어린이 테마

2013 년 블루

2013 년 블루

플랫 포트폴리오

플랫 포트폴리오

이 기사가 WordPress 자식 테마를 만드는 방법을 배우는 데 도움이 되었기를 바랍니다. 필요한 사람들을 위해 많은 지원이 가능하다는 것을 기억하십시오.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map