기본구조 및 Child 테마

by zeein | Thu, Nov 9, 2017Thu, Nov 9, 2017

기본구조

워드프레스 테마는 wp-content/theme/ 디렉토리에 존재합니다.
예를 들어 zeein-yellow 테마는 wp-content/theme/zeein-yellow/ 디렉토리에 존재 하며 테마 폴더의 이름은 한글과 숫자를 사용하지 않습니다.

테마폴더 안에는 필요에 따라 여러 파일(이미지, 자바스크립트, php등)들을 넣을 수 있는데 최소한 3개의 파일이 존재해야만 테마로써의 역할을 할 수 있습니다.

기본 테마 파일

style.css : css 파일로 사이트의 디자인 및 레이아웃을 제어
functions.php : 옵션기능 파일로 테마의 각종 기본 설정 입력
index.php : 워드프레스 템플릿 계층구조에서 최 상위에 존재 하는 파일

Child 테마

Child 테마는 style.css 파일과 몇개의 이미지만 포함된 간단한 테마입니다.
반드시 Parent 역할을 하는 테마와 함께 사용하여야 테마로써의 역할을 할 수 있습니다.

public_html
- wp-content
  - themes : 모든 테마들이 존재파는 디렉토리
    - zeein-yellow : Parents 테마
    - zeein-yellow-child : Child 테마 (이름은 변경 가능)
      - style.css : Child 테마에 꼭 필요한 파일

	/*
	Theme Name: zeein yellow Child
	Theme URI: http://blog.d1p2.com/
	Description: Child theme for the zeein yellow theme
	Author: zeein
	Author URI: http://blog.d1p2.com
	Template: zeein-yellow
	Version: 0.1.0
	*/

view raw style.css hosted with ❤ by GitHub

Theme Name (필수) Child 테마 이름
Theme URI (옵션) Child 테마의 주소
Description (옵션) 테마의 설명
Author (옵션) 만든이 이름
Author URI (옵션) 만든이 사이트
Template (필수) Parent 디레ㄱ토리 이름, 대소문자를 구부합니다.
Version (옵션) Child 테마의 버전

	/*
	Theme Name: zeein yellow child theme
	Description: Child theme for the zeein yellow theme
	Author: zeein
	Template: zeein-yellow
	*/

	@import url("../zeein-yellow/style.css");

	#site-title a {
	color: #009900;
	}

view raw style.css(simple) hosted with ❤ by GitHub

/* Child 테마의 헤더정보를 엽니다.
Theme Name: Child 테마의 이름을 선언
Description: 주제가 무엇인지 설명(옵션)
Author: 만든이 이름(옵션)
Template: Child 테마의 Parent를 선언합니다.(어떤 템플릿 디렉토리의 Child 테마인지 알 수 있도록)
/* Child 테마의 헤더정보를 닫습니다.
@import 로 Parent 스타일시트 규칙을 가져옵니다.
#site-title로 Parent 기본 규칙을 덮어쓰고, 사이트 제목 색상을 초록(#0099000)으로 정의합니다.

Site link

Share this

Leave your question or feedback Cancel reply