워드 프레스 어린이 테마 개발 가이드

WordPress 개발자가 어린이 테마를 사용하기 시작하는 데는 여러 가지 이유가 있습니다. 그들은 당신에게 다른 기존 테마 위에 고유 한 레이아웃을 사용자 정의 할 수있는 기회를 제공합니다. 자신 만의 테마를 만들면서 놀고 싶은 초보자에게 적합합니다..

또한 많은 프리미엄 디자인은 시간이 지남에 따라 새로운 업데이 트를 발표 할 예정이다. 핵심 테마 파일을 변경하는 경우 업데이트를 수행 할 때 덮어 씁니다. 그러나 하위 테마는 분리되어 있으며 깔끔하게 제거됩니다. 즉, 기존 프리미엄 테마를 구축하고 많은 시간을 절약 할 수 있습니다..

이 가이드에서는 WordPress 하위 테마를 만드는 기본 개념과 왜 이것이 좋은 아이디어인지 소개하고자합니다..

시작하기

어린이 테마는 나타나는 것처럼 어렵지 않습니다. 부모 테마를 사용하면 모든 HTML / CSS를 처음부터 작성할 필요가 없습니다. 하위 테마는 포함 된 모든 템플릿 파일을 자동으로 사용합니다. sidebar.php 또는 footer.php. 그러나 그들이 누락 된 경우 자녀의 테마는 부모로부터 동일한 파일을 가져옵니다..

이 기능은 기존 템플릿을 사용자 정의 할 수있는 엄청난 자유를 제공합니다. 크리스마스 나 새해의 디자인 패턴 추가와 같이 특별 이벤트를 위해 웹 사이트 주변을 감동시키는 데에도 좋습니다..

필요한 파일

WordPress에서 하위 테마를 설정하려면 단일 .css 스타일 시트 만 있으면됩니다. 또한 새로운 디렉토리를 생성해야합니다. / wp-content / themes 폴더에 자녀의 테마가 저장됩니다. 주의를 기울이십시오. 있지 않다. 부모 테마 안쪽에이 폴더를 만들지 만, 같은 테마 디렉토리에 함께 붙여야합니다..

개발자는 종종 새 CSS 파일과 동일한 폴더에 functions.php와 screenshot.png를 포함시킵니다. 스크린 샷은 WordPress 관리자 패널에 표시되며 기능 테마 파일은 수많은 백엔드 변경에 사용할 수 있습니다..

하지만 지금은 주 스타일 시트에 집중해야합니다. 이것은 일반적으로 style.css 주요 메타 정보가 포함 된 설명 헤더가 포함됩니다. 부모의 디렉토리 이름을 포함하면 테마가 자식으로 만 표시되기 때문에 중요합니다. 다음은 예제 헤더 주석입니다.

 / * 주제 이름 : Twenty Eleven Child Theme URI : http : //example.com/ 설명 : Twenty Eleven 디자인의 어린이 테마 저자 : Jake Rocheleau 저자 URI : http : //www.hongkiat.com/blog/ Template : twentyeleven 버전 : 0.1 * / 

에 대한 가치 주형 첨부 된 부모 테마의 디렉토리 이름이어야합니다. 그 외 모든 다른 태그는 표준 WordPress 테마에 익숙해야합니다..

부모 PHP 템플릿이 모두 사용되지만 원래 부모의 style.css 템플릿은 아니 자동으로 가져올 수 있습니다. 원래 스타일을 적용하려면 자녀의 style.css 문서 맨 위에 포함시켜야합니다. 아래는 WP Twenty Eleven 테마를 포함한 예입니다..

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

새로운 스타일 설정하기

테마에 CSS 규칙을 적용하는 것은 원본을 편집하는 것만 큼 쉽습니다. 어떤 요소를 대상으로해야하는지 알고 있다면 자신의 자식 테마에서 같은 선택자를 사용하십시오.

링크와 단락을 정말 쉽게 변경하여 데모를 할 수 있습니다. 필자는 원래의 Twenty Eleven 테마의 코드를 사용하여 다양한 요소를 대상으로했습니다. 더 오래된 선택기를 재정의하기 위해 좀 더 구체적인 선택기를 사용해야 할 경우가 있습니다..

 바디 패딩 : 0 1.4em;  #page margin : 1.667em auto; 최대 너비 : 900px;  a color : # 5281df; 텍스트 장식 : 없음; font-family : Calibri, Tahoma, Arial, sans-serif;  a : 초점, a : 활성, a : 호버링 (텍스트 장식 : 밑줄;  

이러한 변화에서 나는 전체 몸체 크기를 줄 였고 가장자리에서 약간의 패딩을 제거했습니다. 이러한 선택기는 모두 원본 .css 문서에 나열되어 있습니다. 다른 글꼴 스택과 색상 선택을 포함하는 모든 앵커 링크의 일부 속성을 변경한다는 점도 주목할 만합니다..

중요한 것들!

CSS에는 다른 스타일보다 우선 순위를 나타내는 특수 선언이 있습니다. 구문은 다음과 같이 표시됩니다. !중대한 느낌표로 시작하여 CSS 속성의 끝에서 종료됩니다. 자신의 맞춤 규칙을 재정의하는 부모 테마의 계단식 스타일이있는 경우 필요합니다..

 a color : # 5281df! important; 텍스트 장식 : 없음; font-family : Calibri, Tahoma, Arial, sans-serif;  

위의 내용은 원래 변경 사항을 복사하고 앵커 텍스트 색상을 중요한 절로 편집했습니다. 이것은 같은 셀렉터 깊이의 다른 모든 스타일보다 우선합니다. 더 정의 된 요소 (예 : #access li : hover> a) 일반적으로 자신의 스타일을 개최하지 않는 한 색깔 원래의 선택자로부터 여전히 상속되었습니다. 이 경우 부모 테마는 앵커 링크에 font-family 속성을 설정하지 않으므로 상속 문제가 발생하지 않습니다..

변경 사항을 고집하는 데 어려움이있는 경우 속성 문 끝에 이러한 중요한 표시 중 하나를 팝업으로 표시하십시오. 이것은 모든 상속 문제에 대한 완벽한 해결책은 아니지만, 생각보다 훨씬 더 자주 유용합니다..

functions.php 복제하기

기본 스타일 시트와 달리, 하위 테마는 상위 기능을 자동으로 가져옵니다. 즉, PHP 코드를 복사하여 새 테마에서 계속 활성화 할 필요가 없습니다. 그러나 일부 함수를 다시 정의하고 싶다면 다른 functions.php를 만들고 변경 사항을 적용하여 새 코드를 작성할 수 있습니다.

예를 들어 템플릿이 시작될 때 몇 가지 JavaScript 파일을 구문 분석하는 함수를 작성했습니다. 그러면 이전 버전의 jQuery 및 SWFObject 스크립트가 제거되는 동시에 최신 버전이 wp_head 지역.

 //로드 함수에 대한 js 파일 대기 mytheme_js () if (is_admin ()) return; wp_deregister_script ( 'jquery'); wp_register_script ( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ( 'jquery'); wp_deregister_script ( 'swfobject'); wp_register_script ( 'swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ( 'swfobject');  add_action ( 'init', mytheme_js); 

부모 functions.php에서 코드를 가져 오려면 다른 함수 이름을 사용해야한다는 점을 지적해야합니다. 그렇지 않으면 PHP에서 치명적인 오류가 발생하고 서버를 실수로 수정해야합니다..

테마 파일 작업

가장 광범위한 주제는 사용자 정의 레이아웃 및 페이지 유형을 작성하는 것입니다. 기본적으로 자식 테마는 부모의 모든 테마 파일을 상속받습니다. 그러나 새로운 하위 테마 파일을 만들 수있는 옵션이 있으며 WP는이를 '기본'템플릿으로 등록합니다.

예를 들어 archive.php 과 index.php 게시물 아카이브 및 홈페이지 화면을 각각 표시하는 데 사용됩니다. HTML을 편집해야하는 변경 사항이있는 경우 상위 파일을 복제하고 하위 테마 디렉토리에서 편집하는 것이 안전합니다.

사용자 정의 페이지 템플리트

우리가 템플릿 파일에 대해 이야기하는 동안 많은 사람들이 익숙하지 않은 WordPress 기능을 소개하고자합니다. 새 콘텐츠를 만들 때 관리자 패널에서 선택할 수있는 페이지 및 게시 템플릿을 만들 수 있습니다. 부모 테마에 새 맞춤 템플릿 파일이 없더라도 WordPress는 여전히 page.php 또는 single.php.

먼저 page-offer.php라는 새 파일을 만듭니다. 이것은 “특별 메뉴” 다른 모든 주제와 다르게 주제가 된 홍보용 페이지. 여기에서 원본 페이지 코드를 복사하거나 처음부터 완전히 테마를 만들 수도 있습니다. WordPress에이 새로운 템플릿에 대해 알리는 데 필요한 유일한 코드는 PHP의 주석 설정입니다..

이 방법의 또 다른 대안은 고유 한 ID 번호를 따라 명명 된 사용자 정의 페이지를 작성하는 것입니다. 따라서 기본값을로드하는 대신 archive.php 작성자 페이지의 경우 다음과 같은 파일을 만들 수 있습니다. 저자 -ID.php 여기서 ID는 사용자의 고유 한 WordPress ID 번호입니다. 이 시스템은 사이트의 각 저자에 대한 새 템플릿 파일을 만들어야하기 때문에 과세 대상이지만.

이 두 기술을 다른 템플릿 파일과 결합 할 수 있다면 더 유용합니다. 주목할 만하게 종류와 꼬리표는 그들의 자신의 주제 파일을 사용하여 잘 작동합니다. 또한 콘텐츠의 첨부 파일에 연결하는 경우 각 MIME 형식에 대해 가능한 다양한 템플릿 레이아웃을 고려해야합니다. 간단한 JPEG 이미지 첨부 파일에 대한 템플릿 계층을 아래에 포함 시켰습니다.

• image.php
• jpeg.php
• image_jpeg.php
• attachment.php

유용한 WordPress 도구

WordPress 자체에는 수많은 맞춤 설정을 관리 할 수있는 다양한 플러그인 시스템이 있습니다. 아동 주제가 매우 새롭기 때문에 제 3 자 릴리스에 대한 전체적인 맹공격은 아직 없습니다. 그러나 개발 시간을 조금 단축 할 수있는 몇 가지 도구가 있습니다..

분명한 언급은 최신 WordPress 3.x 버전 용으로 빌드 된 One-Click Child Theme 플러그인입니다. 관리자에게 메뉴 링크를 추가합니다. “테마” 현재 활성화 된 테마를 사용하여 하위를 자동으로 생성합니다. FTP를 망치고 싶지 않고 새로운 아이디어로 놀고 싶다면 환상적입니다..

관리자 패널에서 이러한 파일을 편집하려는 경우 구문 강조를 더 명확하게 볼 수 있습니다. 이것은 기본적으로 WordPress에서 제공되지 않지만 향상된 기능을 위해 고급 코드 편집기를 설치할 수 있습니다. 이것은 PHP 코드 블록과 HTML / CSS를 훨씬 더 쉽게 관리 할 수있게 해줍니다..

추가 리소스

이 가이드의 모든 팁과 함께 테마 개발자에게 중요한 링크를 나누고 싶습니다. 이미 많은 훌륭한 기사와 무료 아동 주제가 있습니다.이 주제에 대해 더 깊이 연구 할 수 있습니다. 나는 아래의 훌륭한 자료들을 추가했다.

• 8 개의 자유로운 21 개의 아이 주제
• WordPress 온라인 코덱스»어린이 테마
• 후크와 필터를 사용하여 WordPress 하위 테마를 만드는 방법
• 어린이 테마에 대한 몇 가지 단어
• WordPress에서 하위 테마를 생성, 수정 및 사용하는 방법

결론

이 기사를 읽은 후에 WordPress 어린이 테마를 만드는 과정이 더 분명해지기를 바랍니다. 자식 테마가 CSS와 PHP 템플릿을 부모로부터 상속받을 수있는 방법을 설명하려고했습니다. 또한 특정 파일을 조작하고 고유 한 테마를 만드는 것이 매우 간단합니다..

.