테마 개발 "WordPress Codex

언어 : বাং 体 লা • 영어 • Español • 日本語 한국어 • Português do Brasil • Русский • 中文 (简) •中文 (繁體) • (언어 추가)

이 기사는 WordPress 테마 개발에 관한 것입니다. 테마를 설치하고 사용하는 방법에 대해 자세히 알아 보려면 테마 사용을 검토하세요.이 항목은 테마 사용과 다릅니다. 테마를 활성화하는 방법이나 새 테마를 얻을 수있는 위치보다는 자신 만의 테마를 구축하기위한 코드 작성의 기술적 측면에 대해 설명합니다.

WordPress 테마가 필요한 이유

WordPress 테마는 함께 작동하는 파일입니다. WordPress 사이트의 디자인과 기능을 만들 수 있습니다. 각 테마는 다를 수 있으며 사이트 소유자가 웹 사이트 모양을 즉시 변경할 수있는 많은 선택권을 제공합니다.

자신의 용도로 WordPress 테마를 개발할 수 있습니다. 클라이언트 프로젝트 또는 워드 프레스 테마 디렉토리에 제출해야합니다. 그 밖에 워드 프레스 테마를 만들어야하는 이유는 무엇입니까?

독특한 모양을 만들려면 WordPress 사이트 용.
템플릿, 템플릿 태그 및 WordPress Loop를 활용하여 다양한 웹 사이트 결과 및 모양을 생성합니다.
특정 사이트 기능에 대한 대체 템플릿 제공 카테고리 페이지 및 검색 결과 페이지로.
두 사이트 레이아웃간에 빠르게 전환하거나 테마 또는 스타일 전환기를 활용하여 사이트 소유자가 사이트의 모양을 변경할 수 있도록합니다.

WordPress 테마에도 많은 이점이 있습니다.

프레젠테이션 스타일과 템플릿 파일을 시스템 파일에서 분리하므로 사이트의 시각적 표현을 크게 변경하지 않고 업그레이드 할 수 있습니다.
테마 고유의 사이트 기능을 사용자 정의 할 수 있습니다.
WordPress 사이트의 시각적 디자인과 레이아웃을 빠르게 변경할 수 있습니다.
멋진 웹 사이트를 만들기 위해 일반적인 WordPress 사이트 소유자가 CSS, HTML 및 PHP를 배울 필요가 없습니다.

왜 나만의 WordPress 테마를 만들어야합니까? 이것이 진짜 질문입니다.

CSS, HTML, PHP에 대해 더 많이 배울 수있는 기회입니다.
여러분의 전문 지식을 쌓을 수있는 기회입니다. CSS, HTML, PHP가 작동합니다.
창의적입니다.
재미 있습니다 (대부분의 경우).
출시하면 대중에게 공유하고 무언가를 WordPress 커뮤니티에 돌려 준 것을 기분 좋게 느낄 수 있습니다 (좋아요, 자랑하는 권리).

테마 개발 표준

WordPress 테마는 다음 표준을 사용하여 코딩 :

잘 구조화되고 오류가없는 PHP 및 유효한 HTML을 사용합니다. WordPress 코딩 표준을 참조하세요.
깨끗하고 유효한 CSS를 사용합니다. CSS 코딩을 참조하세요. 표준.
사이트 디자인 및 레이아웃의 디자인 가이드 라인을 따릅니다.

테마 분석

WordPress 테마는 WordPress 테마 디렉토리의 하위 디렉토리에 있습니다. (기본적으로 wp-content / themes /) wp-config.php 파일을 사용하여 직접 이동할 수 없습니다. Theme의 서브 디렉토리에는 모든 Theme의 stylesh가 있습니다. eet 파일, 템플릿 파일 및 선택적 함수 파일 (functions.php), JavaScript 파일 및 이미지. 예를 들어, “test”라는 테마는 wp-content / themes / test / 디렉토리에 있습니다. 테마 이름에 숫자를 사용하지 마십시오. 사용 가능한 테마 목록에 표시되지 않습니다.

WordPress는 새로 설치할 때마다 기본 테마를 포함합니다. 기본 테마의 파일을주의 깊게 살펴보고 자신 만의 테마 파일을 빌드하는 방법을 더 잘 파악하세요.

시각적 가이드는 WordPress Theme Anatomy의 인포 그래픽을 참조하세요.

WordPress 테마는 일반적으로 이미지 및 JavaScript 파일 외에도 세 가지 주요 유형의 파일로 구성됩니다.

웹 사이트 페이지의 프레젠테이션 (시각적 디자인 및 레이아웃)을 제어하는 style.css라는 스타일 시트입니다.
사이트 페이지가 사이트에 표시 할 WordPress 데이터베이스에서 정보를 생성하는 방식을 제어하는 WordPress 템플릿 파일.
WordPress 테마 파일의 일부인 선택적 함수 파일 (functions.php).

개별적으로 살펴 보겠습니다.

하위 테마

가장 간단한 테마는 style.css 만 포함 된 하위 테마입니다. 다른 테마의 하위 항목이므로 부모 역할을하기 때문에 가능합니다.

자식 테마에 대한 자세한 가이드는 하위 테마를 참조하세요.

테마 스타일 시트

style.css는 테마에 대한 CSS 스타일 정보 외에도 주석 형식으로 테마에 대한 세부 정보를 제공합니다. 스타일 시트는 주석 형식으로 테마에 대한 세부 정보를 제공해야합니다. 두 가지 테마는 테마 선택 대화 상자에서 문제가 발생할 수 있으므로 주석 헤더에 동일한 세부 정보를 나열 할 수 있습니다. 기존 테마를 복사하여 자신 만의 테마를 만드는 경우 먼저이 정보를 변경해야합니다.

다음은 테마 “Twenty Thirteen”에 대한 스타일 시트 헤더라고하는 스타일 시트의 처음 몇 줄의 예입니다.

주의 : 작성자에 사용되는 이름은 다음과 같습니다. 테마 작성자의 wordpress.org 사용자 이름과 동일해야하지만 작성자의 실제 이름 일 수도 있습니다. 테마 작성자가 선택합니다.

테마를 설명하는 데 사용되는 태그 목록을 확인합니다. 태그 필터를 사용하여 사용자가 테마를 찾을 수 있습니다. 전체 목록은 테마 검토 핸드북에서 찾을 수 있습니다. .

style.css의 주석 헤더 행은 WordPress에서 테마를 식별하고 관리 패널의 Design > 테마 아래에 표시 할 수 있어야합니다. 다른 설치된 테마와 함께 사용 가능한 테마 옵션.

스타일 시트 지침

CSS를 작성할 때 CSS 코딩 표준을 따릅니다.
다음과 같은 경우 유효한 CSS를 사용합니다. 예외로 공급 업체별 접두사를 사용하여 CSS3 기능을 활용하세요.
CSS 해킹 최소화. 명백한 예외는 브라우저 별 지원 (일반적으로 IE 버전)입니다. 가능하면 CSS 해킹을 별도의 섹션 또는 별도의 파일.
가능한 모든 HTML 요소는 게시물 / 페이지 콘텐츠 및 공동에서 테마별로 스타일을 지정해야합니다 (하위 테마가 아닌 경우).
- 표, 캡션, 이미지, 목록, 인용 부호 등.
인쇄용 스타일을 추가하는 것이 좋습니다.
- media = “print”로 인쇄 스타일 시트를 포함하거나 기본 스타일 시트에 인쇄 매체 블록을 추가 할 수 있습니다.

Functions File

테마는 테마 하위 디렉토리에 있으며 이름이 functions.php 인 함수 파일을 선택적으로 사용할 수 있습니다. 이 파일은 기본적으로 플러그인처럼 작동하며 사용중인 테마에있는 경우 WordPress 초기화 중에 자동으로로드됩니다 (관리 페이지 및 외부 페이지 모두). 이 파일의 권장 용도 :

테마 스타일 시트 및 스크립트를 대기열에 추가합니다. wp_enqueue_scripts를 참조하십시오.
사이드 바, 탐색 메뉴, 포스트 썸네일, 포스트 형식, 사용자 정의 헤더, 사용자 정의 배경 등과 같은 테마 기능을 활성화합니다.
여러 템플릿 파일에 사용되는 기능을 정의합니다. 테마.
옵션 메뉴를 설정하여 사이트 소유자에게 테마의 색상, 스타일 및 기타 측면에 대한 옵션을 제공합니다.

기본 WordPress 테마에는 기능이 포함되어 있습니다. 이러한 많은 기능을 정의하는 .php 파일을 모델로 사용할 수 있습니다. functions.php는 기본적으로 플러그인으로 작동하기 때문에 Function_Reference 목록은이 파일로 수행 할 수있는 작업에 대한 자세한 정보를 얻을 수있는 가장 좋은 곳입니다.

functions.php에 함수를 추가 할시기를 결정하기위한 참고 사항 특정 플러그인으로 : 둘 이상의 상위 테마에서 사용할 수있는 동일한 기능이 필요할 수 있습니다. 이 경우 특정 테마에 대한 functions.php 대신 플러그인에서 함수를 생성해야합니다. 여기에는 템플릿 태그 및 기타 특정 기능이 포함될 수 있습니다. 플러그인에 포함 된 기능은 모든 테마에서 볼 수 있습니다.

템플릿 파일

템플릿은 방문자가 요청한 페이지를 생성하는 데 사용되는 PHP 소스 파일이며 HTML로 출력됩니다. 템플릿 파일은 HTML, PHP 및 WordPress 템플릿 태그로 구성됩니다.

테마의 일부로 정의 할 수있는 다양한 템플릿을 살펴 보겠습니다.

WordPress를 사용하면 사이트의 다양한 측면에 대해 별도의 템플릿을 정의 할 수 있습니다. 그러나 사이트가 완전히 작동하려면 이러한 모든 템플릿 파일이 필요합니다. 템플릿은 특정 테마에서 사용할 수있는 템플릿에 따라 템플릿 계층 구조를 기반으로 선택되고 생성됩니다.

테마로 개발자는 템플릿을 사용하여 구현할 사용자 정의의 양을 선택할 수 있습니다. 예를 들어 극단적 인 경우 index.php라는 템플릿 파일 하나만 사이트에서 생성하고 표시하는 모든 페이지에 대한 템플릿으로 사용할 수 있습니다. 보다 일반적인 용도는 최대 사용자 정의를 허용하기 위해 서로 다른 템플릿 파일이 서로 다른 결과를 생성하도록하는 것입니다.

템플릿 파일 목록

다음은 WordPress에서 인식하는 테마 파일 목록입니다. 물론, 테마에는 다른 스타일 시트, 이미지 또는 파일이 포함될 수 있습니다. 다음은 WordPress에 특별한 의미가 있습니다. 자세한 내용은 템플릿 계층을 참조하세요.

style.css 기본 스타일 시트입니다. 이것은 귀하의 테마에 포함되어야하며 귀하의 테마에 대한 정보 헤더를 포함해야합니다. rtl.css rtl 스타일 시트입니다. 웹 사이트의 텍스트 방향이 오른쪽에서 왼쪽이면 자동으로 포함됩니다. RTLer 플러그인을 사용하여 생성 할 수 있습니다. index.php 기본 템플릿입니다. 테마가 자체 템플릿을 제공하는 경우 index.php가 있어야합니다. comments.php 코멘트 템플릿 front-page.php 프론트 페이지 템플릿 home.php 기본적으로 프론트 페이지 인 홈 페이지 템플릿.정적 프론트 페이지를 사용하는 경우 이것은 최신 게시물이있는 페이지의 템플릿입니다. single.php 단일 포스트 템플릿. 단일 게시물을 쿼리 할 때 사용됩니다. 이 쿼리 템플릿과 다른 모든 쿼리 템플릿의 경우 쿼리 템플릿이 없으면 index.php가 사용됩니다. single- {post-type} .php 사용자 지정 게시물 유형의 단일 게시물을 쿼리 할 때 사용되는 단일 게시물 템플릿입니다. 예를 들어, single-book.php는 “book”이라는 사용자 지정 게시물 유형의 단일 게시물을 표시하는 데 사용됩니다. index.php는 사용자 지정 게시물 유형에 대한 쿼리 템플릿이없는 경우에 사용됩니다. page.php 페이지 템플릿. 개별 페이지를 조회 할 때 사용됩니다. category.php 카테고리 템플릿. 카테고리를 조회 할 때 사용됩니다. tag.php 태그 템플릿. 태그를 쿼리 할 때 사용됩니다. taxonomy.php 용어 템플릿. 사용자 지정 분류법의 용어를 쿼리 할 때 사용됩니다. author.php 작성자 템플릿입니다. 작성자를 조회 할 때 사용됩니다. date.php 날짜 / 시간 템플릿. 날짜 또는 시간을 조회 할 때 사용됩니다. 년, 월, 일,시, 분, 초. archive.php 아카이브 템플릿. 카테고리, 작성자 또는 날짜를 조회 할 때 사용됩니다. 이 템플릿은 각 쿼리 유형에 대해 category.php, author.php 및 date.php에 의해 재정의됩니다. search.php 검색 결과 템플릿입니다. 검색을 수행 할 때 사용됩니다. attachment.php 첨부 템플릿. 단일 첨부 파일을 볼 때 사용됩니다. image.php 이미지 첨부 템플릿. 단일 이미지 첨부를 볼 때 사용됩니다. 없는 경우 attachment.php가 사용됩니다. 404.php 404 찾을 수 없음 템플릿. WordPress가 쿼리와 일치하는 게시물 또는 페이지를 찾을 수 없을 때 사용됩니다.

이 파일은 사용 가능한 경우 템플릿 계층 구조에 따라 해당 조건부 태그가 true를 반환 할 때 index.php의 대체물로 사용되기 때문에 WordPress와 관련하여 특별한 의미를 갖습니다. 예를 들어, 하나의 게시물 만 표시되는 경우 is_single () 함수는 “true”를 반환하고 활성 테마에 단일 .php 파일이 있으면 해당 템플릿을 사용하여 페이지를 생성합니다.

기본 템플릿

최소한 WordPress 테마는 두 개의 파일로 구성됩니다.

style.css
index.php

이 두 파일 모두 테마 디렉토리로 이동합니다. index.php 템플릿 파일은 매우 유연합니다. 헤더, 사이드 바, 바닥 글, 콘텐츠, 카테고리, 아카이브, 검색, 오류 및 WordPress에서 생성 된 기타 모든 페이지에 대한 모든 참조를 포함하는 데 사용할 수 있습니다.

또는 모듈 식 템플릿으로 나눌 수 있습니다. 각 파일이 워크로드의 일부를 차지합니다. 다른 템플릿 파일을 제공하지 않으면 WordPress에 기본 파일 또는 작업을 수행하는 기능이있을 수 있습니다. 예를 들어 searchform.php 템플릿 파일을 제공하지 않으면 WordPress에는 검색 양식을 표시하는 기본 기능이 있습니다.

일반 템플릿 파일에는 다음이 포함됩니다.

주석. php
comments-popup.php
footer.php
header.php
sidebar.php

이러한 템플릿 파일을 사용하여 index.php 마스터 파일 내에 템플릿 태그를 넣어 최종 생성 페이지에 표시 할 다른 파일을 포함 할 수 있습니다.

다음은 생성 된 최종 페이지의 예입니다. 사용 포함 :

<?php get_sidebar(); ?><?php get_footer(); ?>

일부 템플릿 기능에 대한 기본 파일이 더 이상 사용되지 않거나 존재하지 않을 수 있으므로 테마에 이러한 파일을 제공해야합니다. 버전 3.0부터 지원 중단 된 기본 파일은 wp-includes/theme-compat에 있습니다. 예를 들어 get_header () 함수가 안전하게 작동하려면 header.php를 제공하고, comments_template () 함수에는 comments.php를 제공해야합니다.

이러한 다양한 템플릿이 작동하는 방식과 다양한 템플릿을 생성하는 방법에 대한 자세한 내용은 자세한 내용은 템플릿 설명서를 참조하십시오.

사용자 정의 페이지 템플릿

각 페이지 템플릿을 정의하는 파일은 Themes 디렉토리에 있습니다. 페이지에 대한 새 사용자 정의 페이지 템플릿을 만들려면 파일을 만들어야합니다. snarfer.php 페이지의 첫 번째 페이지 템플릿을 호출하겠습니다. snarfer.php 파일의 맨 위에 다음을 입력합니다.

<?php/*Template Name: Snarfer*/?>

위 코드는이 snarfer.php 파일을 “Snarfer”템플릿으로 정의합니다. 당연히 “Snarfer”는 페이지 템플릿의 이름을 변경하기 위해 대부분의 텍스트로 대체 될 수 있습니다.이 템플릿 이름은이 템플릿을 편집하기위한 링크로 테마 편집기에 나타납니다. file.

파일 이름은 거의 모든 이름이 .php 확장자로 지정 될 수 있습니다 (사용해서는 안되는 파일 이름에 대해서는 예약 된 테마 파일 이름을 참조하십시오. 이들은 WordPress가 특정 목적을 위해 예약하는 특수 파일 이름입니다).

위의 5 줄 코드 뒤에 오는 것은 귀하에게 달려 있습니다. 작성하는 나머지 코드는 Snarfer 페이지 템플릿을 사용하는 페이지가 표시되는 방식을 제어합니다. 다양한 WordPress 템플릿 기능에 대한 설명은 템플릿 태그를 참조하세요. 이 용도로 사용할 수 있습니다. 다른 템플릿 (예 : page.php 또는 index.php)을 snarfer.php에 복사 한 다음 파일 시작 부분에 위의 다섯 줄의 코드를 추가합니다.이렇게하면 처음부터 모두 만드는 대신 HTML 및 PHP 코드 만 변경하면됩니다. 아래에 예가 나와 있습니다. 페이지 템플릿을 생성하고 테마 디렉토리에 배치하면 페이지를 생성하거나 편집 할 때 선택할 수 있습니다 (참고 : 페이지를 생성하거나 편집 할 때 페이지 템플릿 옵션은 위의 방식으로 정의 된 템플릿이 하나 이상 있습니다.)

쿼리 기반 템플릿 파일

WordPress는 서로 다른 쿼리 유형에 대해 서로 다른 템플릿을로드 할 수 있습니다. 두 가지 방법이 있습니다. 기본 제공 템플릿 계층의 일부로, 그리고 템플릿 파일의 루프 내에서 조건부 태그를 사용합니다.

템플릿 계층을 사용하려면 기본적으로 특수 목적의 템플릿 파일을 제공해야합니다. 자동으로 index.php를 재정의하는 데 사용됩니다. 예를 들어 테마가 category.php라는 템플릿을 제공하고 카테고리를 쿼리하는 경우 index.php 대신 category.php가로드됩니다. category.php가 없으면, index.php는 평소와 같이 사용됩니다.

af를 제공하여 템플릿 계층 구조를 더 구체적으로 지정할 수 있습니다. 예를 들어 category-6.php라고하는 파일-ID 번호가 6 인 카테고리에 대한 페이지를 생성 할 때 category.php 대신이 파일이 사용됩니다. ( WordPress 버전 2.3 이하에서 사이트 관리자로 로그인 한 경우 카테고리. WordPress 2.5에서는 ID 열이 관리자 패널에서 제거되었습니다. “카테고리 편집”을 클릭하고 URL 주소 표시 줄에서 cat_ID 값을 찾아 카테고리 ID를 찾을 수 있습니다. “… categories.php? action = edit & cat_ID = 3″로 표시됩니다. 여기서 “3”은 카테고리 ID입니다). 이 프로세스의 작동 방식에 대한 자세한 내용은 범주 템플릿을 참조하십시오.

테마가 템플릿 계층에서 제공되는 것보다 사용되는 템플릿 파일을 더 많이 제어해야하는 경우 조건부를 사용할 수 있습니다. 태그. 조건부 태그는 기본적으로 WordPress 루프 내에서 특정 조건이 참인지 확인한 다음 해당 조건에 따라 특정 템플릿을로드하거나 화면에 특정 텍스트를 넣을 수 있습니다.

For 예를 들어, 특정 카테고리 내에서만 발견되는 게시물에서 고유 한 스타일 시트를 생성하려면 코드는 다음과 같습니다.

또는 쿼리를 사용하면 다음과 같이 보일 수 있습니다.

<?php$post = $wp_query->post;if ( in_category( "9" ) ) { get_template_part( "single2" );} else { get_template_part( "single1" );}?>

두 경우 모두이 예제 코드는 표시되는 특정 게시물의 카테고리에 따라 다른 템플릿이 사용되도록합니다. 쿼리 조건은 카테고리에 국한되지 않지만 모든 옵션을 보려면 조건부 태그 문서를 참조하십시오.

사용자 정의 템플릿 정의

WordPress 플러그인 시스템을 사용하여 정의 할 수 있습니다. 사용자 지정 기준에 따라 표시되는 추가 템플릿. 이 고급 기능은 “template_include”액션 후크를 사용하여 수행 할 수 있습니다. 플러그인 생성에 대한 자세한 내용은 플러그인 API 참조에서 찾을 수 있습니다.

템플릿 파일 포함

다른 템플릿을로드하려면 (헤더, 사이드 바, 바닥 글 제외. get_header ())를 템플릿에 추가하면 get_template_part ()를 사용할 수 있습니다. 이렇게하면 테마가 코드 섹션을 쉽게 재사용 할 수 있습니다.

템플릿에서 파일 참조

같은 테마 내에서 다른 파일을 참조 할 때 하드 코딩 된 URI 및 파일 경로를 사용하지 마십시오. 대신 bloginfo ()를 사용하여 URI 및 파일 경로를 참조하십시오. 템플릿에서 파일 참조를 참조하십시오.

스타일 시트에서 사용되는 URI는 스타일 시트를 참조하는 페이지가 아니라 스타일 시트에 상대적입니다. 예를 들어 테마에 images / 디렉토리를 포함하는 경우 다음과 같이 CSS에이 상대 디렉토리 만 지정하면됩니다.

h1 { background-image: url(images/my-background.jpg);}

Plugin API Hooks

테마를 개발할 때 사용자가 설치하기로 결정한 모든 WordPress 플러그인과 잘 작동 할 수 있도록 테마를 설정해야합니다. 플러그인은 “작업”을 통해 WordPress에 기능을 추가합니다. Hooks “(자세한 내용은 플러그인 API 참조).

대부분의 Action Hooks는 WordPress의 핵심 PHP 코드 내에 있으므로 테마가 작동하는 데 특별한 태그가 필요하지 않습니다.하지만 몇 가지 Action 플러그인이 헤더, 바닥 글, 사이드 바 또는 페이지 본문에 직접 정보를 표시하려면 후크가 테마에 있어야합니다. 다음은 포함해야하는 특수 액션 후크 템플릿 태그 목록입니다.

wp_enqueue_scripts 테마 함수 파일에 사용됩니다. 외부 스크립트 및 스타일 시트를로드하는 데 사용됩니다. wp_head () < head

요소. 플러그인 사용 예 : JavaScript 코드 추가. wp_footer () 닫는 < / body > 태그 바로 앞에 footer.php로 이동합니다. 플러그인 사용 예 : 바닥 글 하단에 다른 모든 작업 이후에 실행해야하는 PHP 코드를 삽입합니다.Google Analytics와 같은 웹 통계 코드를 삽입하는 데 매우 일반적으로 사용됩니다. wp_meta () 일반적으로 < li > Meta < / li

섹션, sidebar.php 템플릿. 플러그인 사용 예 : 회전 광고 또는 태그 클라우드 포함. comment_form () 파일 바로 앞에 comments.php로 이동합니다. s 닫는 태그 (< / div >). 플러그인 사용 예 : 댓글 미리보기를 표시합니다.

실제 사용 예의 경우 기본 테마 템플릿에 포함 된 이러한 플러그인 후크를 찾을 수 있습니다.

테마 사용자 지정 API

WordPress 3.4부터는 새로운 테마 사용자 지정 기능은 거의 모든 WordPress 테마에서 기본적으로 사용할 수 있습니다. 테마 사용자 지정 관리 페이지는 테마가 add_theme_support () 또는 설정 API를 사용하여 지원을 선언하는 옵션으로 자동으로 채워지며 관리자는 실시간으로 변경 사항을 비 영구적으로 미리 볼 수 있습니다.

테마의 테마 사용자 지정 페이지에 새 옵션을 추가하는 데 관심이있는 테마 및 플러그인 개발자는 테마 사용자 지정 API에 대한 설명서를 참조하십시오. 테마 사용자 지정 API에 대한 추가 자습서는 Ottopress.com 웹 사이트에서 사용할 수 있습니다.

신뢰할 수없는 데이터

테마에서 동적으로 생성 된 콘텐츠, 특히 HTML 속성으로 출력되는 콘텐츠를 이스케이프해야합니다. WordPress 코딩 표준에서 언급했듯이 속성에 들어가는 텍스트는 esc_attr ()을 통해 실행되어야합니다. 또는 큰 따옴표는 속성 값을 끝내지 않고 XHTML을 무효화하고 보안 문제를 유발합니다. 확인해야 할 일반적인 위치는 title, alt 및 value 속성입니다.

일반적인 경우에 대한 특수 템플릿 태그는 거의 없습니다. e 안전한 출력이 필요합니다. 그러한 경우 중 하나는 보안 취약점을 피하기 위해 the_title () 대신 the_title_attribute ()를 사용하여 제목 속성에 게시물 제목을 출력하는 것입니다. 다음은 번역 가능한 텍스트를 사용할 때 게시물 제목 링크의 제목 속성에 대한 올바른 이스케이프 예입니다.

<a href="<?php the_permalink(); ?>" title="<?php sprintf( __( "Permanent Link to %s", "theme-name" ), the_title_attribute( "echo=0" ) ); ?>"><?php the_title(); ?></a>

번역 지원 / I18n

언어 현지화를위한 원활한 전환을 보장하려면 WordPress gettext 기반 i18n 함수를 사용하여 템플릿 파일 내에서 번역 가능한 모든 텍스트를 래핑하세요. 이렇게하면 번역 파일이 쉽게 연결되어 레이블, 제목 및 기타 템플릿 텍스트를 사이트의 현재 언어. WordPress 현지화 및 WordPress 개발자 용 I18n에서 자세히 알아보세요.

테마 클래스

다음 템플릿 태그를 구현하여 WordPress에서 생성 한 클래스 속성을 본문, 게시물 및 댓글 요소에 추가하세요. 포스트 클래스의 경우 The Loop 내의 요소에만 적용됩니다.

body_class ()
post_class ()
comment_class ()

템플릿 파일 체크리스트

테마를 개발할 때 다음 템플릿 파일 표준에 따라 템플릿 파일을 확인하십시오.

문서 헤드 (header.php)

적절한 DOCTYPE을 사용합니다.
여는 < html > 태그에는 language_attributes ( ).
< meta > 문자 집합 요소는 < title > 요소.
bloginfo ()를 사용하여 < 메타를 설정합니다. > 문자 집합 및 설명 요소.
wp_title ()을 사용하여 < title 요소. 이유를 확인하세요.
자동 피드 링크를 사용하여 피드 링크를 추가합니다.
닫기 < / head 전에 wp_head ()에 대한 호출을 추가합니다. > 태그. 플러그인은이 액션 후크를 사용하여 자체 스크립트, 스타일 시트 및 기타 기능을 추가합니다.
헤더 템플릿에서 테마 스타일 시트를 연결하지 마십시오. 대신 테마 함수에서 wp_enqueue_scripts 액션 후크를 사용하세요.

다음은 올바른 형식의 HTML5 호환 헤드 영역의 예입니다.

탐색 메뉴 (header.php )

테마의 기본 탐색은 wp_nav_menu ()를 사용하여 사용자 정의 메뉴를 지원해야합니다.
- 메뉴는 긴 링크 제목과 많은 양의 목록 항목을 지원해야합니다. 이러한 항목은 디자인이나 레이아웃을 깨서는 안됩니다.
- 하위 메뉴 항목은 올바르게 표시되어야합니다. 가능한 경우 하위 메뉴 항목에 대한 드롭 다운 메뉴 스타일을 지원합니다. 드롭 다운을 통해 최상위 수준 만 표시하는 대신 메뉴 깊이를 표시 할 수 있습니다.

테마는 가능한 한 완전히 위젯 화되어야합니다. 위젯처럼 작동하거나 (태그 클라우드, 블로그 롤, 카테고리 목록) 위젯을 허용 할 수있는 레이아웃의 모든 영역 (사이드 바)은 위젯을 허용해야합니다.
기본적으로 위젯 화 된 영역에 표시되는 콘텐츠 (하드 코딩 됨) 예를 들어, 위젯이 Appearance > 위젯에서 활성화되면 사라져야합니다.

Footer (footer.php)

body 태그를 닫기 직전에 나타나도록 wp_footer () 호출을 사용합니다.

<?php wp_footer(); ?></body></html>

색인 (index.php)

발췌 또는 전체 길이 형식으로 게시물 목록을 표시합니다. 적절하게 둘 중 하나를 선택합니다.
게시물 내 탐색 링크를 지원하려면 wp_link_pages ()를 포함합니다.

보관 (archive.php)

아카이브 제목 (태그, 카테고리, 날짜 기반 또는 작성자 아카이브)을 표시합니다.
발췌 또는 전체 길이 형식으로 게시물 목록을 표시합니다. 적절하게 둘 중 하나를 선택합니다.
게시물 내 탐색 링크를 지원하려면 wp_link_pages ()를 포함합니다.

페이지 (page.php)

페이지 제목 및 페이지 콘텐츠를 표시합니다.
댓글 목록과 댓글 양식을 표시합니다 (댓글이 꺼져 있지 않은 경우).
페이지 내 탐색 링크를 지원하려면 wp_link_pages ()를 포함합니다.
태그, 카테고리, 날짜 및 작성자와 같은 메타 데이터는 표시되지 않아야합니다.
수정 권한이있는 로그인 한 사용자에게 “수정”링크를 표시합니다.

단일 게시물 (single.php)

게시물 내 탐색 링크를 지원하려면 wp_link_pages ()를 포함합니다.
게시물 제목 및 게시물 콘텐츠를 표시합니다.
- 제목은 자신을 가리키는 링크 대신 일반 텍스트 여야합니다.
게시 날짜를 표시합니다.
- 날짜 및 시간 형식 설정을 준수합니다. 설계에 중요하지 않은 경우 (날짜 및 시간 형식에 대한 사용자 설정은 관리 패널 > 설정 일반).
- 사용자 설정에 따른 출력에는 the_time (get_option ( “date_format”))을 사용합니다.
작성자 이름을 표시합니다 (해당하는 경우).
게시물 카테고리 및 게시물 태그를 표시합니다.
편집 권한이있는 로그인 한 사용자에게 “편집”링크를 표시합니다.
댓글 목록과 댓글 양식을 표시합니다.
previous_post_link () 및 next_post_link ()를 사용하여 다음 및 이전 게시물에 대한 탐색 링크를 표시합니다.

작성자 댓글은 다르게 강조 표시되어야합니다.
적절한 경우 gravatar (사용자 아바타)를 표시합니다.
스레드 된 댓글을 지원합니다.
트랙백 / 핑백을 표시합니다.
li>
재 선언 오류를 피하기 위해 function_exist () 검사에서 확인하지 않는 한이 파일은 함수 정의를 포함하지 않아야합니다. 이상적으로 모든 함수는 functions.php에 있어야합니다.

검색 결과 (search.php)

JavaScript

JavaScript 코드는 가능할 때마다 외부 파일에 배치합니다.
wp_enqueue_script ()를 사용하여 스크립트를로드합니다.
HTML 문서 (템플릿 파일)에 직접로드 된 JavaScript는 CDATA로 인코딩되어 이전 브라우저에서 오류를 방지해야합니다. .

<script type="text/javascript">/* <!]> */</script>

스크린 샷

테마에 대한 스크린 샷을 만듭니다. 스크린 샷의 이름은 screenshot.png 여야하며 최상위 디렉토리에 있어야합니다. 스크린 샷은 테마 디자인을 정확하게 보여주고 PNG 형식으로 저장해야합니다. .jpg, .jpeg 및 .gif도 스크린 샷의 유효한 확장자 및 파일 형식이지만 권장되지 않습니다.

권장 이미지 크기는 너비 1200px, 높이 900px입니다. 스크린 샷은 일반적으로 작게 표시되지만 너무 큰 이미지는 HiDPI 디스플레이에서 고해상도보기를 허용합니다. 테마 관리 화면이 반응하므로 스크린 샷 이미지의 상단과 하단이 보이지 않을 수 있으므로 그래픽을 중앙 근처에 두십시오.

테마 옵션

테마는 선택적으로 테마 사용자 지정 화면. 예제 코드는 샘플 WordPress 테마 옵션 페이지를 참조하십시오.

사용자 역할에 대해 테마 사용자 정의 화면을 사용할 수 있도록 설정할 때 “switch_themes”기능 대신 “edit_theme_options”사용자 기능을 사용하십시오. 사용자 역할도 실제로 테마를 전환 할 수 있어야합니다. 역할 및 기능 및 관리 메뉴 추가에서 자세한 내용을 참조하십시오.

테마 사용자 지정 화면 (또는 일부 사용자 지정 화면)에 대한 관리자 역할 액세스 권한을 얻기 위해 테마의 모든 위치에서 “edit_themes”기능을 사용하는 경우, 버전 3.0 이후로이 기능은 WordPress Multisite 설치의 경우 기본적으로 관리자 역할에 할당되지 않았습니다. 설명을 참조하십시오. 이 경우 관리자에게 “테마 옵션”메뉴를 표시하려면 “edit_theme_options”기능을 대신 사용하십시오. WordPress Multisite를 사용할 때 관리자 역할의 추가 기능을 참조하세요.

테마 테스트 프로세스

PHP 및 WordPress 오류를 수정합니다. wp-config.php 파일에 다음 디버그 설정을 추가하여 더 이상 사용되지 않는 함수 호출 및 기타 WordPress 관련 오류를 확인하십시오. define ( “WP_DEBUG”, true) ;. 자세한 내용은 Deprecated Functions Hook을 참조하세요.
Template File Checklist (위 참조)에 대해 템플릿 파일을 확인합니다.
Theme Unit Test를 사용하여 실행합니다.
HTML 및 CSS를 확인합니다. 웹 사이트 검증을 참조하십시오.
JavaScript 오류를 확인하십시오.
모든 대상 브라우저에서 테스트하십시오. 예 : IE9, Safari, Chrome, Opera, Firefox 및 Microsoft Edge.
불필요한 댓글, 디버그 설정 또는 TODO 항목을 정리합니다.
공개 된 경우 테마 검토를 참조하세요. 테마를 테마 디렉토리에 제출하여 릴리스합니다.

리소스 및 참조

코드 표준

출처 파악
WordPress 코딩 표준
CSS 코딩 표준

테마 디자인

사이트 디자인 및 레이아웃

CSS

CSS
CSS 속기
WordPress 생성 클래스

템플릿

템플릿에 들어가기
템플릿
템플릿 계층 구조
템플릿 태그
루프
조건부 태그
함수 참조
WordPress 개발자를위한 I18n
데이터 유효성 검사

함수 목록

기능 참조

테스트 및 QA

테마 단위 Te st
웹 사이트 유효성 검사
CSS 브라우저 버그 수정
CSS 문제 해결
modern.IE : 열린 상태로 다른 플랫폼에서 IE 테스트 용 -소스 도구

& 프로모션

테마 검토 프로세스