Languages: বাংলা • English • Español • 日本語 한국어 • Português do Brasil • Русский • ไทย • 中文(简体) • 中文(繁體) • (Add your language)
이 문서는 워드프레스 테마 개발에 관한 문서입니다. 어떻게 설치하고 테마를 사용하는지 자세히 알고 싶다면 테마 사용법 을 살펴보세요. 이 글에서는 테마 사용법에 대해 다루지 않습니다. 왜냐하면 이 항목은 오히려 새로운 테마를 찾고 테마를 활성화하는 방법보다 나만의 테마를 구축하기 위해 코드를 작성하는 기술적인 측면을 설명하고 있습니다.
워드프레스 테마는 워드프레스 사이트의 디자인과 기능을 묶어 만든 파일입니다. 각 테마는 곧바로 자신의 웹사이트 모양을 변경할 수 있도록 사이트 소유자를 위해 많은 선택권을 제공합니다.
당신은 클라이언트 프로젝트나 워드프레스 테마 디렉토리에 제출하기 위해, 자신이 사용하는 워드프레스의 테마를 만들 수 있습니다. 그럼 왜 워드프레스 테마를 만들려고 할까요?
재빠르게 여러 사이트의 레이아웃을 바꾸거나 활용하기 위해, 스타일 스위처를 통해 사이트 소유자는 사이트의 모양을 변경할 수 있습니다.
그밖에도, 워드프레스 테마에는 많은 장점이 있습니다.
왜 자신만의 워드프레스 테마를 구축해야만 하는가? 그것이 정말 알고싶습니다.
워드프레스 테마는 다음과 같은 기준을 사용하여 코딩해야 합니다:
워드프레스 테마는 wp-content/themes/ 디렉토리의 서브(하위)디렉토리에 있습니다. 테마 서브디렉토리에는 테마 스타일시트 파일, 템플릿 파일, 옵션 기능 파일 (functions.php), 자바스크립트 파일, 그리고 이미지 같은 것들이 모두 포함되어 있습니다. 예를 들어, "test" 라는 이름의 테마는 wp-content/themes/test/ 디렉토리에 있습니다. 테마 이름에 숫자를 사용하지 마세요, 이것은 사용 가능한 테마 목록에 표시되지 않는것을 방지하기 위함입니다.
새롭게 설치한 워드프레스에는 각각의 기본 테마가 포함되어 있습니다. 자신만의 테마 파일을 빌드하는 가장 좋은 방법은 기본 테마의 파일을 훑어보는 것입니다.
비주얼 가이드의 경우, infographic 참조: http://yoast.com/wordpress-theme-anatomy/
워드프레스 테마는 보통 이미지와 자바스크립트 파일 이외에도, 세가지 종류의 주요 파일로 이루어져 있습니다. 첫번째는 style.css 라는 파일입니다, 웹사이트 페이지의 프리젠테이션(비주얼 디자인과 레이아웃)을 제어합니다. 두번째는 (functions.php) 라는 옵션 기능 파일 입니다. 끝으로 사이트에 페이지를 나타내기 위해 워드프레스 데이터베이스에서 정보를 만들고 제어하는 템플릿 파일입니다. 각각 살펴보도록 합시다.
Child 테마는 오로지 style.css 파일과 몇개의 이미지만 포함하는 간단한 테마입니다. Parent 역할을 하는 테마의 Child이기 때문에 가능합니다.
Child 테마를 위한 자세한 안내는, Child 테마 또는 이 훌륭한 강의의 저자는 op111을 보세요.
테마에 대한 CSS 스타일 정보 이외에, style.css 는 주석의 형태로 테마에 대한 세부 사항을 제공합니다. 스타일시트는 반드시 주석의 형태로 테마에 대한 세부 사항을 제공해야합니다. 두개의 테마는 동일한 내용으로 사용할 수 없습니다 자신의 헤더에 주석을 남겨야 합니다, 이처럼테마 선택 대화상자에서 부터 문제가 발생할 수 있습니다. 만일 기존의 것을 복사하여 자신만의 테마를 만들 경우, 먼저 이 정보부터 변경해야 합니다.
다음은 스타일시트의 첫 몇줄의 예입니다, "Twenty Ten" 테마에 대한 스타일시트 헤더를 불러옵니다:
/* Theme Name: Twenty Ten Theme URI: http://wordpress.org/ Description: The 2010 default theme for WordPress. Author: wordpressdotorg Author URI: http://wordpress.org/ Version: 1.0 Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional) License: License URI: General comments (optional). */
주의: 제작자로 사용되는 이름은 wordpress.org 의 Theme Author 와 같은 사용자 이름으로 하는것을 추천합니다. 비록 제작자의 실제 이름을 할 수도 있겠지만, 선택은 Theme Author 입니다.
style.css 의 주석 헤더 부분을 읽어들여 워드프레스의 모든 설치된 다른 테마와 함께 사용가능한 테마 옵션으로 관리자 패널 아래 디자인 > 테마에 표시 할 수 있게 합니다.
테마는 선택적으로 하위 디렉토리 테마에 있는 함수 파일인 functions.php 를 사용할 수 있습니다. 이 파일은 기본적으로 플러그인 과 같은 역할을 합니다. 그리고 사용중인 테마가 있을 경우, 그것은 자동으로 워드프레스를 초기화하는 동안 로딩 됩니다(관리자 페이지 및 외부 페이지 모두에). 이 파일을 사용할것을 제안합니다:
기본적으로 워드프레스 테마는 이러한 기능의 대부분을 정의하는 functions.php 파일이 포함되어 있기 때문에 당신은 그것을 그대로 사용하는 것이 좋습니다. 원래 functions.php 는 기본적으로 플러그인 기능을 합니다. 이 파일과 함께 할 수 있는 일에 대한 자세한 내용은 Function_Reference 목록을 보는것이 가장 좋습니다.
템플릿은 방문자가 요청한 페이지를 생성하는 데 사용되는 PHP 소스 파일이며, HTML로 출력됩니다. 테마의 일부로 정의할 수있는 다양한 템플릿을 살펴 봅시다.
워드프레스는 사이트의 다양한 측면에 대해 별도의 템플릿을 정의할 수 있습니다. 그것이 완벽하게 작동하려면 귀하의 사이트에 대한 모든 다른 템플릿 파일을 가지고 있어야 하지만, 필수는 아닙니다. 템플릿은 템플릿 계층 구조를 기반으로 특정 테마에 따라 선택하고 생성됩니다.
테마 개발자는, 템플릿을 사용하여 구현하려는 사용자 정의 부분을 선택할 수 있습니다. 예를 들어, 극단적인 경우, 당신은 사이트에 표시되는 모든 생성된 페이지에 대한 템플릿으로 index.php라는 하나의 템플릿 파일을 사용할 수 있습니다. 보다 일반적인 사용은 최대한 사용자 정의를 허용하도록 다른 템플릿 파일이 다른 결과를 생성하는 것입니다.
다음은 워드프레스에서 허용하는 테마 파일의 목록입니다. 물론, 당신의 테마는 다른 스타일 시트, 이미지 또는 파일을 포함할 수 있습니다. 단지, 아래의 내용은 워드프레스에 특별한 의미를 가지고 있다는 것만 명심하세요 - 템플릿 계층 구조 에서 자세한 내용을 참조하십시오.
이러한 파일들은 워드프레스에서 특별한 의미를 가지고 있습니다. 왜냐하면 그것들은 가능한한 경우에 따라서는 템플릿 계층구조 및 true 를 반환하는 조건부 태그 에 대응하여 index.php 를 대신해 사용되기 때문입니다. 예를 들면, 만일 하나의 게시물이 표시되는 경우, is_single() 함수는 'true' 를 반환, 그리고, 만일 그것이 활성화된 테마 안에서 single.php 파일이 있다면, 템플릿은 페이지를 생성합니다.
아주 최소한으로, 워드프레스 테마는 두 개의 파일로 구성되어 있습니다 :
위 두 파일이 있는 테마 디렉토리로 이동하세요. index.php 템플릿 파일 은 매우 유연하게 동작합니다. 이것은 헤더, 사이드바, 풋터, 콘텐츠, 카테고리, 아카이브, 검색, 오류, 그리고 워드프레스에서 만든 다른 페이지에 대한 모든 참조를 포함하는데 사용할 수 있습니다.
또는, 템플릿 파일들로 모듈화(분리)하여 일련의 작업들을 각각 분담시킬 수도 있습니다. 만약 당신이 다른 템플릿 파일들을 제공하지 않는다면, 워드프레스는 기본 버전을 사용할 것입니다. 예를 들어, 만약 당신이 comments.php 템플릿 파일이 없어도 워드프레스는 자동으로 Template Hierarchy에 의해 wp-comments.php 템플릿 파일을 사용할 것입니다. (Note: As of version 3.0, the default files aren't guaranteed to be present or to be the same as they have been. It's much safer to supply your own template files.)
일반적인 템플릿 파일은 다음과 같습니다 :
템플릿 파일을 사용할 때, 당신은 index.php 마스터 파일에 템플릿 태그를 넣어서 최종적으로 생성된 페이지에 나타내게 하고 싶은 장소에 인클루드 할 수 있습니다.
여기 include 가 사용된 예 :
<?php get_sidebar(); ?> <?php get_footer(); ?>
이러한 다양한 템플릿이 작동하는 방법에 대한 방법과 이들 안에 서로 다른 정보를 생성하기 위한 더 많은 정보는 템플릿 문서를 읽어보십시오.
각각의 페이지 템플릿 파일들은 당신의 테마디렉토리에서 찾을 수 있습니다. 페이지를 위한 사용자 정의 템플릿을 만드려면 파일을 생성해야만 합니다. 우리들의 페이지를 위한 첫번째 페이지 템플릿 파일을 snarfer.php 라고 하겠습니다. snarfer.php 파일의 최상단에 아래 문장을 붙여 넣으세요 :
<?php /* Template Name: Snarfer */ ?>
위 코드는 snarfer.php 파일을 "Snarfer" 라는 이름의 템플릿이라고 정의한 것입니다. 자연연히 "Snarfer" 자리에는 페이지 템플릿 이름을 바꾸기 위해서는 다른 문자들로 바꿔야 하겠죠. 이 템플릿의 이름은 테마 편집기에서 이 파일을 편집하기 위한 링크로 나타나게 됩니다.
파일명은 .php 확장자와 함께 대부분의 경우에 어떤 이름으로 지어도 무방합니다. ( 예약된 테마 파일명에 나와있는 이름들은 사용하지 마세요. 왜냐하면 이 이름들은 특수한 목적을 위해 워드프레스에서 사용하는 파일명이기 때문입니다).
What follows the above five lines of code is up to you. 그외에 당신이 작성한 코드들은 Snarfer 페이지 템플릿을 사용하는 페이지를 어떻게 표시(표현)할 것인지를 제어할 것입니다. 이를 위해 당신이 사용할 수 있는 다양한 워드프레스 템플릿 함수들의 설명을 보려면 Template Tags 을 보세요.
다른 템플릿(아마도 page.php 혹은 index.php)의 일부를 snarfer.php 에 복사하는 것이 좀 더 편리할 수 있습니다. 그리고 난 뒤 위의 5줄 코드를 파일의 시작점에 추가하세요. 그 상태에서 당신은 HTML과 PHP 코드를 수정하기만 하면 됩니다. 이 방법이 처음부터 새로 작성하는 것 보다 편리할 것입니다. 예제는 아래에 있습니다.
페이지 템플릿을 작성하고, 테마 디렉토리에 위치시켜 놓으면 페이지를 생성/편집 할 때 그 템플릿을 선택할 수 있게 됩니다. (참고: 페이지를 생성/편집할 때 페이지 템플릿 옵션은 위 방법과 같이 최소 하나 이상 템플릿을 정의해 놓지 않으면 나타나지 않습니다).
워드프레스는 다른 쿼리 타입에 따라 다른 템플릿을 불러올 수 있습니다. 이걸 하는 방법은 두 가지가 있습니다 : 템플릿 계층 구조의 한 부분으로 만드는 것과,템플릿 파일의 루프 안에 Conditional Tags 를 사용하는 방법이 있습니다. 템플릿 계층 구조을 이용하기 위해서는 기본적으로 특수 목적 템플릿 파일을 제공해야 합니다. 이것은 자동적으로 index.php 를 오버라이드합니다. 예를 들어, 만약 당신의 테마가 category.php 라고 부르는 템플릿 파일을 제공할 때, 카테고리가 쿼리되면 index.php 대신 category.php 를 불러올 것입니다. 만약 category.php 파일이 존재하지 않다면, index.php 를 사용하게 됩니다.
You can get even more specific in the Template Hierarchy by providing a file called, for instance, category-6.php -- this file will be used rather than category.php when generating the page for the category whose ID number is 6. (You can find category ID numbers in Manage > Categories if you are logged in as the site administrator in WordPress version 2.3 and below. In WordPress 2.5 the ID column was removed from the Admin panels. You can locate the category id by clicking 'Edit Category' and looking on the URL address bar for the cat_ID value. It will look '...categories.php?action=edit&cat_ID=3' where '3' is the category id). For a more detailed look at how this process works, see Category Templates.
If your Theme needs to have even more control over which Template files are used than what is provided in the Template Hierarchy, you can use Conditional Tags. The Conditional Tag basically checks to see if some particular condition is true, within the WordPress Loop, and then you can load a particular template, or put some particular text on the screen, based on that condition.
For example, to generate a distinctive stylesheet in a post only found within a specific category, the code might look like this:
<?php
if ( is_category( '9' ) ) {
get_template_part( 'single2' ); // looking for posts in category with ID of '9'
} else {
get_template_part( 'single1' ); // put this on every other category post
}
?>
Or, using a query, it might look like this:
<?php
$post = $wp_query->post;
if ( in_category( '9' ) ) {
get_template_part( 'single2' );
} else {
get_template_part( 'single1' );
}
?>
In either case, this example code will cause different templates to be used depending on the category of the particular post being displayed. Query conditions are not limited to categories, however, see the Conditional Tags article to look at all the options.
It is possible to use the WordPress plugin system to define additional templates that are shown based on your own custom criteria. This advanced feature can be accomplished using the template_redirect action hook. More information about creating plugins can be found in the Plugin API reference.
To load another template (other than header, sidebar, footer, which have predefined included commands like get_header()) into a template, you can use get_template_part(). This makes it easy for a Theme to reuse sections of code.
When referencing other files within the same Theme, avoid hard-coded URIs and file paths. Instead reference the URIs and file paths with bloginfo(): see Referencing Files From a Template.
Note that URIs that are used in the stylesheet are relative to the stylesheet, not the page that references the stylesheet. For example, if you include an images/ directory in your Theme, you need only specify this relative directory in the CSS, like so:
h1 {
background-image: url(images/my-background.jpg);
}
테마를 개발할 때, it's good to keep in mind that your Theme should be set up so that it can work well with any WordPress plugins users might decide to install. Plugins add functionality to WordPress via "Action Hooks" (see Plugin API for more information).
Most Action Hooks are within the core PHP code of WordPress, so your Theme does not have to have any special tags for them to work. But a few Action Hooks do need to be present in your Theme, in order for Plugins to display information directly in your header, footer, sidebar, or in the page body. Here is a list of the special Action Hook Template Tags you need to include:
실제 사용의 예를 보면, 이러한 플러그인이 기본 테마의 템플릿에 플러그인 hooks 를 찾을 수 있습니다.
You should escape dynamically generated content in your Theme, especially content that is output in HTML attributes. As noted in 워드프레스 코딩 표준, text that goes into attributes should be run through esc_attr so that single or double quotes do not end the attribute value and invalidate the XHTML and cause a security issue. Common places to check are title, alt, and value attributes.
In a few cases there might already be a template tag for common cases where safe output is needed. One such case involves the "title" attribute when used with the_title() for post and page titles. To avoid a security vulnerability, use the_title_attribute() instead. Here's an example of correct escaping for the title attribute in a post title link when using translatable text:
<?php echo esc_attr( sprintf( __( 'Permanent Link to %s', 'theme-name' ), the_title_attribute( 'echo=0' ) ) ); ?>
Replace deprecated escape calls with the correct calls: wp_specialchars, htmlspecialchar with esc_html, clean_url with esc_url, and attribute_escape with esc_attr. See Data_Validation for more.
To ensure smooth transition for language localization, use the gettext functions for wrapping all translatable text within the template files. This makes it easier for the translation files to hook in and translate the titles into the site's language. See more at WordPress_Localization and i18n for WordPress Developers.
본문, 포스트 및 댓글 요소에 워드프레스에서 생성된 클래스 속성을 추가하려면 다음 템플릿 태그를 구현합니다. 게시물 클래스의 내용은 루프 내의 요소에만 적용됩니다.
테마를 개발할때, 다음과 같은 템플릿 파일 표준을 지키고 있는지 확인하십시오.
다음은 올바른 형식의 HTML5 호환 헤더 영역의 예 입니다 :
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?> </head>
<?php wp_footer(); ?> </body> </html>
<h2><?php printf( __( 'Search Results for: %s' ), '<span>' . get_search_query() . '</span>'); ?></h2>
<script type="text/javascript"> /* <![CDATA[ */ // content of your Javascript goes here /* ]]> */ </script>
테마에 대한 스크린샷을 만듭니다. 스크린샷은 screenshot.png 라고 해야 하고, 최상위 디렉토리에 배치해야합니다. 스크린샷은 정확히 테마 디자인을 표시해야 하며 PNG, JPEG 또는 GIF 형식으로 저장할 수 있습니다. 권장하는 이미지 크기는 300x225 입니다.
테마 선택 옵션 페이지를 포함할 수 있습니다. 예제 코드는, 워드프레스 테마 옵션 페이지를 참조하세요.
옵션 페이지를 사용할 경우, 사용자가 실제로 옵션 패널을 사용할 수 있게 테마를 전환하지 않는 한, 옵션 패널 대신 switch_themes 의 edit_theme_options 기능을 사용합니다. 워드프레스 자체의 메뉴, 배경, 헤더, 위젯 등등을 위해 edit_theme_options 기능을 사용합니다. 역할 및 기능 추가 그리고 관리자 메뉴에서 추가를 참조하십시오.
네트워크 모드와 테마 옵션에 대한 메모 :
당신의 테마 안 어디서든 edit_themes 기능을 사용하는 경우, 그리고 테마가 네트워크에 연결되어 워드프레스 설치(이전 워드 프레스 MU) 기능 아래서 실행된다면, 테마 옵션 페이지에 접근하여 사용하는 edit_themes 기능은 옵션 메뉴를 볼때 네트워크에 연결된 사이트 관리자가 수정하지 않도록 주의하십시오. 대신 edit_theme_options 를 사용합니다.