WordPress Child 테마 시작하기

  • 워드 프레스
  • 업데이트 : 7 월 27, 2013

워드 프레스 세계에서 당신의 조정이 시작되고 많은 멋진 테마를 발견했다고 생각합니다. 당신은 많은 프리미엄 테마를 찾을 수 있으며 대부분은 실제로 가격 대비 가치가 있습니다 (전문적인 모양과 코드에 대한 몇 권의 책). 그리고 당신이 찾은 대부분의 테마는 너무 가까이서,하지만 정확히 당신이 원하는 것은 없습니다. 메뉴 막대를 조금 움직여서 글꼴을 대체하고 새 텍스트 블록을 추가하는 것이 좋을 것입니다.

잘 들리면이 안내서가 적합합니다. 여기서 우리는 어린이 테마 세계로 뛰어 들어 왔습니다. 여기서 구입 한 멋진 테마를 깨지거나 원하는 작업을 취소 할 수 있기 때문에 향후 업데이트를 잃지 않고 원하는 모든 것을 할 수 있습니다.

테마 파일을 수정하지 않고 모양 수정

간단히 말해서, 그것은 Child 테마에 관한 것입니다 : 원본 파일을 수정하지 않고 커스터마이즈하기. 어린이 테마는 기본적으로 달리 명시하지 않는 한 기본 테마 (부모)의 기능과 모양이 동일합니다.

최소한 2 파일, style.css 및 functions.php 파일을 포함하게됩니다. 다른 모든 파일은 부모 테마에서 가져올 수 있으므로, 부모 파일을 사용하는 자식 테마 디렉토리에 새 파일을 만들지 않는 한.

여기에는 많은 가능성이 있지만 가장 큰 장점은 원래 테마로 쉽게 돌아갈 수 있다는 점입니다. 따라서 완전히 다른 폴더에서 수행되므로 편집 내용을 잃지 않고 기본 테마를 업데이트 할 수 있습니다.

우리 손을 더러워 지자.

첫 번째 단계는 / wp-content / themes / 폴더 아래에 새 하위 테마 디렉토리를 만드는 것입니다. "Twenty-Child"라고 부르 자. 그러면 기본 styles.css 파일을 만들자.

/ * 테마 이름 : 20 개의 하위 테마 URI : http://www.webrevenue.co 설명 : 지금 바로 하위 테마 학습 저자 : Rochester Oliveira 작성자 URI : http://www.webrevenue.co/author/rochester/ 템플릿 : twentytwelve * / / * 메인 테마 CSS 파일 호출 * / @import ( "../ twentytwelve / style.css"); / * 아래에 원하는 것을 추가하십시오 * /

매개 변수는 다음과 같습니다 (생략 된 다른 선택적 매개 변수 중에서).

  • 테마 이름 : 테마 선택 화면에서 볼 수있는 이름입니다.
  • 테마 URI : 거기에 표시 될 링크
  • 설명 : 간단한 설명이므로이 내용이 무엇인지 기억할 것입니다.
  • 저자 : 누가 어린이 테마를 만들었습니까
  • 작성자 URI : 작성자의 사이트에 연결하려는 경우
  • 템플릿 : 기본 테마 폴더 (기본 테마와 다른 테마를 사용하려는 경우이 매개 변수 만 바꾸기)

이 코드를 추가하면 WP 관리> 모양> 테마에서 하위 테마를 볼 수 있습니다. 지금 선택하면 완료된 모든 변경 사항이 사이트에 표시됩니다.

아동 주제 편집 101

CSS 지식이 없다면 쓸모 없게 될 것입니다. 잘못된! CSS는 실제로 매우 쉽고 거기에서 당신을 도울 많은 미리보기를 찾을 수 있습니다. 다음은 사용자 정의에 도움이되는 몇 가지 간단한 팁입니다.

#1 Firebug 설치

많은 사람들이 Chrome과 Safari를 좋아하지만 (나도 그렇습니다!) 나에게있어 FireFox는 개발하는 것이 훨씬 낫습니다. 따라서, 만약 당신이 그것을 사용하고 싶다면, 현재 요소에서 활성화되어있는 모든 선택자를 이해하는 훌륭한 도구 인 방화 광구를 설치하는 것이 좋습니다.

일단 설치하면, F12을 누르거나 페이지 어딘가에서 우클릭하여 "Inspect Element"를 선택할 수 있습니다. 현재 페이지 HTML과 CSS가있는 새로운 창을 보게 될 것입니다. (유용 할 수있는 다른 많은 탭이 있습니다.

CSS 상자에서 현재 요소에 적용된 모든 CSS 규칙을 위에서 아래로, 맨 위에있는 "특정"규칙을 볼 수 있습니다. 멋지다.하지만이 정보로 무엇을 할 수 있는지 보자.

#2 CSS 특수성 (또는 선택기 가중치) 고려

각 CSS 규칙에는 선택기, 속성 및 값이 있습니다. 그러나 브라우저가 동일한 요소에 영향을주는 2 이상의 규칙을 발견하면 더 적합한 규칙을 선택해야합니다. 우리는 보통 무엇이 고려 될지 이해하기 위해이 "규칙"을 가지고 있습니다 :

  • ! 중요한 선언은 다른 것을 덮어 씁니다.
  • 인라인 CSS는 아무것도 덮어 씁니다! 중요한 규칙들
  • 100 점의 가치가있는 ID (#header, #footer, # container ...)
  • 10 점의 가치가있는 클래스 (.main, .nav, .box)
  • 1 값의 태그 (본문, div, p, a)
  • 0 가치가있는 범용 선택기 및 의사 클래스 (*, : hover, : after)가 있지만 "동점"이있는 경우 적용됩니다.

좋아, 이것을 더 잘 이해하기 위해 예제를 보자. 스물 12를 사용하여 사이트 헤더를 마우스 오른쪽 버튼으로 클릭하면 나타나는 첫 번째 CSS가 다음과 같이 표시됩니다.

.site-header {패딩 : 1.71429em 0; } 기사, 옆으로, 세부 사항, figcaption, 그림, 꼬리말, 머리말, hgroup, nav, section {display : block; }

첫 번째 선택기는 클래스이므로 10 포인트를 가지며 두 번째 셀렉터는 각기 1 포인트를가집니다 (쉼표는 다른 선택기를 구분하기 때문에). #header div와 같은 것이 있으면 그 셀렉터가 확실히 첫 번째 것이 될 것입니다.

왜 이것이 그렇게 중요한가요?

CSS 파일을 편집하지 않고 메인 테마를 편집하려면 메인 테마에 정의 된 규칙보다 많은 포인트가있는 규칙을 항상 사용해야합니다. 그리고 이것에 똑똑하고 간단한 코드를 사용할 수 있습니다. 예를 들어이 속성을 덮어 쓰려면 :

.site-header {패딩 : 1.71429em 0; }

자녀 테마 CSS에 추가 할 수 있지만 다음과 같이하면 안됩니다.

.site-header {패딩 15px 0! 중대한; }

이것은 나쁜 코드이기 때문에 예를 들어 한 페이지에서 변경해야하는 경우 다시 덮어 쓰기가 더 어려워집니다. 그래서 이것을 간단하게 사용할 수 있습니다 :

body .site-header {패딩 : 15px 0; }

이 선택기에는 원래 11보다 큰 10 포인트가 있으므로이 코드가 적용됩니다.

#3 함수를 잘 활용하십시오.

하위 functions.php 파일은 원본 파일에 추가로로드되는 유일한 파일입니다. 이는 WP 팀이 수행하는 현명한 해결 방법이므로 원본 기능을 유지하고 고유 한 기능을 추가 할 수 있습니다. catch는 자식 테마 함수가 먼저로드되고 함수를 선언 할 때 충돌을 피하기 위해 테마 개발자는 다음과 같이해야합니다.

if (! function_exists ( 'top_menu')) {function top_menu () {// 여기 멋진 코드} add_action ( 'wp_head', 'top_menu'); }

하위 테마 파일에서 함수를 정의하면 원래 테마를 덮어 쓸 수 있기 때문입니다. 테마 개발자가 이런 식으로하지 않으면 동일한 함수가 두 번 생성되기 때문에 추악한 PHP 오류가 발생합니다.

#4 CSS 속성 알아보기

CSS를 사용하여 물건을 숨기고 추가 할 수 있다는 것을 알고 계셨습니까? 올바른 선택기를 찾으려면 방화 켓을 설치해야하지만이 코드를 추가하여 항목을 숨길 수 있습니다.

body a {display : none}

가격이 추가 된 후에는 "판매 중!"텍스트를 원할 경우 작은 텍스트 만 추가 할 수 있으므로이 코드를 사용할 수 있습니다.

.price del : after {color : red; 내용 : "On Sale!"; }

당신은 어떻게 생각하십니까?

이 가이드에 대해 어떻게 생각하십니까? 어린이 테마 사용을 고려해 보시겠습니까? 이미 사용하고 계십니까? 아래의 코멘트 섹션을 사용하여 저희에게 알려주십시오!

로체스터 올리베이라에 대하여

나는 웹 디자이너이자 기업가 인 Itajubá (MG), Brasil입니다. 나는 모호한 주제에 대해 쓰고 멋진 것들을하는 것을 좋아합니다.