WordPress 하위 테마 시작하기?

게시 됨: 2016-06-22

이 튜토리얼에서는 WordPress 자식 테마를 만드는 방법을 배웁니다. WordPress를 처음 사용하고 WordPress 자식 테마가 무엇인지 모르는 경우 모든 것을 설명하겠습니다.

WordPress 테마는 PHP, JavaScript 및 CSS 파일 모음입니다. 간단히 말해서 WordPress 테마를 사용하면 블로그의 모양과 느낌을 변경할 수 있습니다. WordPress 테마는 매우 강력할 수 있습니다.

프리미엄 WordPress 테마는 많은 고급 기능을 제공합니다. 수천 개의 무료 및 프리미엄 WordPress 테마를 사용할 수 있습니다.

WordPress 테마를 처음부터 만들거나 다른 테마를 기반으로 WordPress 테마를 만들 수 있습니다. WordPress의 모든 버전에는 WordPress 테마가 사전 설치된 상태로 제공되며 사전 설치된 WordPress 테마가 마음에 들지 않으면 다른 WordPress 테마를 설치하거나 하위 테마를 만들 수 있습니다.

왜 WordPress 자식 테마인가?

WordPress 자식 테마를 만든다는 것은 기존 테마를 가지고 이를 기반으로 자신만의 테마를 만드는 것을 의미합니다. 자식 테마는 부모 테마라고 하는 원래 테마의 대부분의 기능을 상속합니다.

자식 테마는 많은 작업과 시간을 절약합니다. WordPress 테마를 처음부터 만들려면 많은 시간이 걸리며 때로는 HTML, CSS, PHP에 대한 고급 지식이 필요합니다. 자식 테마를 사용하면 많은 수정을 할 수 있습니다.

사용 중인 WordPress 테마가 제공하는 사용자 지정, 옵션 및 기능에 만족하지 않으면 하위 테마를 만들 수 있습니다. 워드프레스 테마를 변경하고 싶다면 자식 테마를 생성하거나 CSS 편집기 플러그인을 사용해야 합니다.

기존 WordPress 테마 파일을 직접 편집할 수 있지만 업데이트하면 모든 사용자 정의가 손실됩니다. 그래서 자식 테마가 필요합니다.

WordPress 하위 테마로 할 수 있는 작업

WordPress 자식 테마를 사용하면 원하는 만큼 기능을 추가할 수 있습니다. 그것은 당신에게 달려 있습니다. 제목이나 링크의 글꼴 크기나 색상을 변경하려는 경우 CSS를 사용하여 매우 쉽게 변경할 수 있습니다.

새 탐색 메뉴를 추가하고, 새 사이드바를 등록하고, 제품에 대한 사용자 정의 페이지를 생성하거나, 사용자 정의 웹 글꼴에 대한 지원을 추가할 수 있습니다.

필요한 것:

이제 WordPress 자식 테마가 무엇인지, 왜 자식 테마를 만들어야 하는지 알았습니다. 이제 WordPress 자식 테마를 만드는 방법을 배울 시간입니다.

필수는 아니지만 개발 및 학습 목적으로 로컬 WordPress 설치를 설정하는 것이 좋습니다. 로컬 WordPress 설치를 통해 새 플러그인과 테마를 빠르고 쉽게 테스트할 수 있습니다.

WordPress를 로컬에 설치하는 방법은 여러 가지가 있습니다. MAC 사용자라면 MAMP를 사용할 수 있고 Windows 사용자는 XAMPP, WAMP 또는 Bitnami WordPress 설치 프로그램을 사용할 수 있습니다.

  • WAMP 서버와 함께 WordPress를 설치하는 방법
  • MAMP로 WordPress를 설치하는 방법
  • Bitnami 스택으로 WordPress를 설치하는 방법

완전 초보자인 경우 Bitnami WordPress 스택을 다운로드하고 설치하여 MAC 또는 PC에서 완전한 기능의 WordPress 웹사이트를 만들 수 있습니다.

저는 개인적으로 로컬 개발을 위해 WAMP 서버를 선호합니다. WAMP에 WordPress를 설치하는 것은 어렵지 않습니다. 자습서를 읽거나 비디오를 보고 WAMP, XAMPP 또는 MAMP를 사용하여 WordPress를 설치하는 방법을 배울 수 있습니다.

또한 테마 파일을 편집하려면 코드 편집기가 필요합니다. Sublimetext, Brackets, Atom은 몇 안 되는 인기 있는 코드 편집기입니다.

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

로컬 WordPress 사이트가 준비되면 하위 테마 만들기를 시작할 수 있습니다. WAMP 서버를 사용하는 경우 WAMP 설치 디렉터리 > WWW > WordPress > wp-content > 테마 폴더로 이동합니다.

WordPress 테마 폴더에서 새 폴더를 만들고 이름을 261-child 또는 원하는 이름(예: InstantShift)으로 지정합니다. 우리는 26개의 테마를 부모 테마로 사용할 것입니다. 그것은 우리의 자식 테마가 TwentySixteen 테마를 기반으로 한다는 것을 의미합니다.

모든 하위 테마에 대해 두 개의 파일이 필요합니다.

  • functions.php
  • style.css

26개의 자식 테마 폴더에서 이 두 파일을 만드십시오. 이제 텍스트 편집기에서 파일을 엽니다. 빠른 액세스를 위해 텍스트 편집기 사이드바에서 26개의 하위 폴더를 드래그할 수 있습니다. style.css 파일을 열고 다음 코드를 추가합니다.

[css]
/*
테마 이름: InstantShift
설명: InstantShift용 Twenty Sixteen 하위 테마.
저자: 타히르 타우스
작성자 URI: http://www.instantshift.com
템플릿: 스물여섯
버전: 0.1
*/
[/css]

하위 테마에는 위의 마크업이 필요합니다. 필요한 마크업이 있는 스타일시트가 없으면 WordPress는 하위 테마를 인식할 수 없습니다.

나는 당신이 모든 것을 이해할 수 있다고 생각합니다. 설명할 것이 없습니다. 내 자식 테마 이름은 InstantShift이지만 원하는 대로 자녀의 이름을 지정할 수 있습니다. 가장 중요한 것은 Template: Thousandsixteen 입니다. 이것은 부모 테마의 이름입니다. 철자가 올바른지 확인하십시오.

다른 테마를 상위 테마로 사용하는 경우 Template: parent-theme-name 을 사용하여 Template: twosixteen을 변경하기만 하면 됩니다.

스타일 시트 헤더에서 더 많은 정보를 추가할 수도 있지만 필수는 아닙니다. 이제 WordPress 대시보드에 로그인합니다. 모양 > 테마로 이동합니다. 자식 테마에 대한 스크린샷을 추가하지 않았기 때문에 스크린샷 없이 InstantShift 테마가 표시되어야 합니다.

InstantShift 테마에 마우스를 올려 놓고 테마 세부 정보 버튼을 클릭합니다. 다음은 내 자식 테마 스크린샷입니다.

Child Theme

이 화면이 보이면 하위 테마가 준비되었음을 의미합니다. 이제 테마 사용자 정의를 시작할 수 있습니다. 이 새로운 테마를 활성화하고 블로그 프론트 엔드를 방문하십시오. 스타일 없이 모든 콘텐츠를 볼 수 있습니다.

걱정하지 마세요. 정상입니다. 상위 테마 스타일시트 파일을 포함하지 않았기 때문에 스타일을 볼 수 없습니다. 자식 테마의 스타일시트가 작동하는지 확인합시다. 자식 테마의 style.css 파일에 다음 코드를 추가합니다.

[css]
신체{
배경색: #E7F5FB;
}
[/css]

style.css 파일을 저장하고 로컬 WordPress 사이트의 첫 페이지를 다시 로드하면 밝은 파란색 배경색이 표시되어야 합니다.

상위 테마의 스타일시트 등록

우리는 처음부터 모든 스타일을 만들고 싶지 않습니다. 우리는 자식 테마의 style.css 파일에 몇 가지 새로운 스타일을 추가할 것입니다. 이제 자식 테마에 부모 테마의 stye.css 파일을 추가해 보겠습니다.

functions.php 파일을 열고 자식 테마의 functions.php 파일에 다음 코드를 추가합니다.

[php]
<?php

// 상위 테마 스타일 //
// https://codex.wordpress.org/Child_Themes //

기능 theme_enqueue_styles() {
$parent_style = '부모 스타일';
ks29so_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
ks29so_enqueue_style( '자식 스타일',
get_stylesheet_directory_uri() . '/스타일.css',
배열( $parent_style )
);
}
add_action( 'ks29so_enqueue_scripts', 'theme_enqueue_styles' );
[/php]

이제 로컬 WordPress 사이트를 다시 로드하면 모든 TwentySixteen 스타일이 포함된 일반 테마가 표시됩니다.

그게 다야. 첫 번째 하위 테마를 성공적으로 만들었습니다. 또한 바디에 대한 새로운 배경색을 추가했습니다.

그러나 우리는 단순히 몸의 배경을 변경하기 위해 자식 테마를 만들지 않았습니다. 테마 사용자 지정을 시작해 보겠습니다.

상위 테마 스타일 재정의

헤더 사용자 정의:

기본적으로 Twenty Sixteen 테마의 헤더에는 패딩이 많이 있습니다. 패딩을 변경하고 사이트 헤더에 대한 새 배경색을 추가해 보겠습니다. 하위 테마의 style.css 파일에 다음 코드를 추가하고 파일을 저장하고 사이트의 프런트 엔드를 다시 로드하여 변경 사항을 확인하세요.

[css]
.사이트 헤더 {
패딩: 0 4.5455%;
배경: #CDDC39;
여백 하단: 2em;
}
[/css]

여기에서 새 스타일을 추가하기 전과 후의 사이트 헤더에 대한 스크린샷을 볼 수 있습니다.

Theme Header

기본 탐색 사용자 정의

이제 기본 탐색 메뉴 항목의 배경색을 변경해 보겠습니다. 저는 Chrome 개발자 도구를 사용하여 CSS 스타일을 편집하는 것을 좋아합니다.

Chrome 개발 도구로 웹 페이지를 편집한 후 Chrome 개발 도구에서 새 코드를 복사하여 자식 테마의 style.css 파일에 붙여넣을 수 있습니다.

자식 테마의 style.css 파일을 열고 다음 코드를 추가합니다.

[css]
#메뉴헤더 &gt; 리 {
배경: rgba(185, 202, 22, 0.97);
오른쪽 여백: 4px !중요;
테두리 반경: 5px;
}
[/css]

여기에서 새 헤더의 스크린샷을 볼 수 있습니다. 우리는 어린이 테마로 테마를 매우 쉽게 사용자 정의했습니다.

Theme Header Navigation

마지막 단어

이제 WordPress 하위 테마를 만드는 방법을 알았습니다. 매우 간단하고 쉽습니다. HTML과 CSS에 대한 기본적인 이해만 있으면 사이트 디자인을 완전히 바꿀 수 있습니다.

또한 새 탐색 메뉴, 위젯 영역, 새로운 we 글꼴 지원 등을 자식 테마로 추가할 수 있습니다. 그러나 하나의 기사에서 모든 것을 다룰 수는 없습니다.

워드프레스 테마 개발을 배우고 싶다면 워드프레스 자식 테마부터 시작해야 합니다. 테마 사용자 지정의 기본 사항을 배웁니다.