WordPress에서 하위 테마 만들기 단계별 자습서
게시 됨: 2016-06-21이 게시물에서는 WordPress에서 자식 테마를 단계별로 만드는 방법, WordPress 자식 테마의 모든 기본 사항을 배웁니다.
상위 테마 CSS 스타일을 가져오는 방법, 상위 테마 스타일을 재정의하는 방법, WordPress 하위 테마를 만들어야 하는 이유를 배우게 됩니다.
WordPress 하위 테마가 중요한 이유를 알아보려면 WordPress 상위 및 하위 테마 개발 초보자 가이드를 읽어야 합니다.
WordPress 자식 테마로 무엇을 할 수 있습니까?
WordPress 자식 테마를 사용하면 기본 활성 WordPress 테마를 매우 쉽게 사용자 지정할 수 있습니다. 하위 테마를 만들기 위해 고급 HTML, CSS, PHP 또는 JavaScript를 알 필요가 없습니다.
HTML, CSS 및 PHP에 대한 기본적이거나 좋은 이해는 매우 도움이 될 수 있습니다.
추가 읽기: 완벽한 무료 또는 프리미엄 WordPress 테마를 선택하는 방법
WordPress 하위 테마를 사용하여 CSS로 사이트를 수정하고, 새 위젯 영역을 추가하고, 탐색 메뉴를 추가하고, 사용자 정의 파일을 편집하여 사용자 정의 스타일로 새 페이지를 생성할 수 있습니다.
하위 테마를 사용하여 사이트 요소를 재정렬하고 새 콘텐츠/요소를 추가하고 기능을 변경할 수도 있습니다.
WordPress 하위 테마를 만들어야 하는 이유
하위 테마가 존재하는 이유는 상위 테마를 업데이트할 때 변경 사항 및 수정 사항을 잃지 않고 "상위"(기존/활성) 테마를 사용자 정의할 수 있기 때문입니다.
예를 들어 single.php 파일을 직접 수정한 경우 처음에는 사용자 정의가 제대로 작동합니다.
그러나 테마를 수정한 테마의 최신 버전으로 업데이트하면 모든 변경 사항이 손실되고 사용자 정의를 복원할 방법이 없습니다.
필요한 것
하위 테마를 빠르게 생성하여 서버에 업로드할 수 있지만, 워드프레스는 PC에 로컬로 설치하는 것이 좋습니다.
로컬 WordPress 설치를 사용하면 테마를 빠르게 만들고 테스트할 수 있습니다. 항상 인터넷 연결이 필요하지 않습니다.
로컬 WordPress 사이트를 사용하면 라이브 사이트에 영향을 미치지 않고 실수를 할 수 있으며 훨씬 빠르고 더 좋습니다.
Windows, MAC 또는 Linux에 WordPress를 로컬로 설치하는 방법에는 여러 가지가 있습니다. Bitnami WordPress 스택을 사용하여 로컬 PC에 WordPress를 설치하는 방법을 배우려면 이 튜토리얼을 읽으십시오.
우리는 이미 초보자를 위한 단계별 자습서를 게시했습니다.
Windows 8에서 WAMP 서버에 WordPress를 설치하는 방법
Bitnami 스택을 사용하여 Windows 8에 WordPress를 설치하는 방법
단계별 가이드에 따라 WordPress에서 하위 테마를 만드는 방법은 무엇입니까?
WordPress의 모든 하위 테마에는 두 개의 파일이 필요합니다.
- 기능.php
- 스타일.css
style.css 파일에서 테마 이름, 테마 설명, 작성자 이름, 상위 테마 세부 정보, 태그 등과 같은 하위 테마에 대한 정보를 추가할 수 있습니다.
또한 부모 및 자식 테마 스타일 시트를 등록하려면 functions.php 파일이 필요합니다. functions.php 파일을 사용하여 새 기능을 추가하고 새 탐색 메뉴, 위젯 영역 등을 등록할 수도 있습니다.
이제 첫 번째 자식 테마 만들기를 시작해 보겠습니다. 이 자식 테마에서는 새 위젯 영역, 탐색 메뉴 등을 추가하지 않을 것입니다. 자식 테마를 사용하여 몇 가지 간단한 CSS 변경을 수행하고 기본 CSS 스타일을 재정의합니다.
모든 WordPress 테마를 상위 테마로 사용할 수 있습니다. 이 튜토리얼에서는 TwentySixteen 테마의 하위 테마를 만들 것입니다.
새 폴더를 만들고 이 폴더를 26-10대로 저장하거나 원하는 이름(예: 디자인)을 지정할 수 있습니다.
두 개의 새 파일을 만들고 우리의 자식 테마 폴더에 functions.php와 style.css 파일로 저장합니다. 내 자식 테마 폴더 이름은 designbomb입니다.
이제 자식 테마의 style.css 파일에 다음 정보를 추가하고 파일을 저장합니다.
/* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */이제 WordPress 대시보드에 로그인합니다. 모양 > 테마 > 새로 추가로 이동하여 이 새 하위 테마를 업로드합니다. 스크린샷 없이 새 테마가 표시됩니다. 테마에 마우스를 올려 놓고 테마 세부 정보 버튼을 클릭합니다.
새 하위 테마에 대한 다음 세부 정보가 표시됩니다.
위의 스크린샷에서 우리의 자식 테마에 대한 모든 기본 정보를 볼 수 있습니다. 이 테마의 저자인 우리 차일드 테마의 이름, 차일드 테마에 대한 설명 및 당신은 또한 볼 수 있습니다 이것은 Twenty Sixteen의 차일드 테마입니다.
메시지.
우리는 추가했습니다 템플릿: 스물여섯 자식 테마의 style.css 파일에 있습니다. 이 줄은 WordPress에 216이 상위 테마임을 알려줍니다.
다른 테마를 사용하는 경우 TwentySixteen을 상위 테마 이름으로 바꾸십시오.
이제 새 하위 테마를 활성화하고 첫 페이지를 새로고침하세요. 스타일링 없이 모든 콘텐츠를 봐야 합니다. 걱정하지 마세요. 정상입니다. 이는 부모 및 자식 테마의 style.css 파일을 포함하지 않았기 때문입니다.
새 하위 테마 활성화 후 Appearance > Editor로 이동하여 functions.php(테마 함수) 파일을 선택하고 functions.php 파일에 다음 코드를 추가하고 파일 업데이트 버튼을 클릭하여 변경 사항을 저장합니다.
<?php function theme_enqueue_styles() { $parent_; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );이제 WordPress 사이트의 프런트 엔드를 방문하여 페이지를 새로고침합니다. TwentySixteen 스타일이 모두 포함된 일반 사이트가 표시되어야 합니다.
기존 스타일 수정
이것은 자식 테마가 준비되었음을 의미합니다. 이제 부모 테마를 새로운 CSS 스타일로 사용자 정의할 시간입니다. 이제 모양 > 편집기에서 style.css 파일을 선택합니다. 우리는 몇 가지 새로운 스타일을 추가할 것입니다.
하위 테마의 style.css 파일에 다음 스타일을 추가하고 파일을 저장합니다.
.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }사이트의 프런트 엔드를 새로고침하고 아무 페이지나 엽니다. 현재 메뉴 항목의 기본 스타일을 수정했습니다. 아래 스크린샷을 참조하세요.
현재 메뉴 항목에 대해 새로운 배경색, 테두리 반경, 색상 및 상자 그림자를 추가했습니다. Chrome Dev 도구로 스타일을 변경하는 것은 매우 간단하고 쉬웠습니다.
그게 다야
이제 자식 테마를 만드는 방법을 알았습니다. 그렇게 간단하고 쉬운 일이 아니었습니다. WordPress 하위 테마를 사용하면 상위 테마의 거의 모든 파일을 사용자 지정할 수 있지만 상위 테마의 모든 파일을 수정하는 것은 권장되지 않습니다.
필요한 기능, 기능 또는 사용자 정의 페이지를 추가하려면 항상 하위 테마를 사용하십시오.
디자인 하위 테마 다운로드