워드프레스 테마의 기본 구조 이해
WordPress 테마는 단순히 웹사이트의 외관을 제어하는 스타일시트 모음이 아니라, 특정 표준을 준수하는 일련의 파일들로 구성된 집합입니다. 이 파일들은 함께 작동하여 WordPress가 웹사이트의 콘텐츠를 어떻게 표시할지를 결정합니다. 가장 간단한 테마는 단 두 개의 파일만을 포함합니다:style.css 그리고 index.php하지만 기능이 강력한 템플릿은 수십 개의 템플릿 파일, 함수 파일, 그리고 자산 파일을 포함하고 있습니다.
핵심 파일 및 그 기능
모든 WordPress 테마는 반드시 하나를 포함해야 합니다. style.css 이 파일은 웹사이트의 스타일을 정의하는 데 핵심적인 역할을 할 뿐만 아니라, 파일의 헤더에 포함된 주석에는 테마의 메타데이터(예: 테마 이름, 저자, 설명, 버전 등)도 포함되어 있습니다. 이러한 메타데이터는 WordPress가 유효한 테마를 인식하는 데 중요한 역할을 합니다.
또 다른 기본 파일은… index.php이 파일은 주제의 기본 템플릿 파일입니다. WordPress가 현재 요청에 더 구체적인 템플릿 파일을 찾을 수 없을 경우, 이 기본 템플릿 파일을 사용하도록 자동으로 전환됩니다. index.php。
추천 읽기 WordPress 테마 개발의 궁극적인 가이드: 제로에서 시작하여 맞춤형 웹사이트 구축까지 마스터하기。
템플릿 계층 구조 (Template Hierarchy)
WordPress의 테마 시스템은 강력한 “템플릿 계층 구조” 규칙을 따릅니다. 이는 특정 페이지에 접속할 때 WordPress가 미리 정의된 순서에 따라 가장 적합한 템플릿 파일을 찾는다는 것을 의미합니다. 예를 들어, 블로그 글을 읽으려고 할 때 WordPress는 우선 해당 글에 맞는 템플릿을 찾습니다. single-post.php만일 그게 없다면, 찾아보세요. single.php마지막에 사용합니다. index.php이러한 계층 구조를 이해하는 것은 고급 수준의 사용자 정의를 구현하는 데 필수적인 기초입니다.
첫 번째 기본 테마를 만드세요.
제로부터 주제(theme)를 만드는 것은 그 작동 원리를 이해하는 가장 좋은 방법입니다. 먼저 WordPress에서 시작해 보겠습니다. wp-content/themes 디렉터리 내에 새로운 폴더를 생성하세요. 예를 들어, “my-first-theme”라는 이름으로 지정하실 수 있습니다.
스타일시트의 헤더 정보를 작성합니다.
이 폴더 내에 새로운 파일을 생성하세요. style.css 파일을 열고 다음과 같은 기본 헤더 정보를 입력하세요:
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是我开发的第一个WordPress主题，用于学习。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/기본 인덱스 템플릿을 구축합니다.
다음으로, 만들어보자. index.php 이 파일은 가장 기본적인 템플릿으로, WordPress의 코어 함수를 사용하여 웹사이트의 제목과 글 목록을 가져와 표시합니다.
<!DOCTYPE html>
<html no numeric noise key 1014>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1011>
<header>
<h1><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>
<main>
만일 게시물이 있다면 : while ( have_posts() ) : the_post(); ?>
<article>
<h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
<div></div>
</article>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
</main>
</body>
</html>이제 WordPress 관리자의 “외관 > 테마” 메뉴에서 이 기본 테마를 확인하고 활성화할 수 있습니다.
추천 읽기 WordPress 테마 개발 실전 가이드: 제로에서 시작하여 커스텀 테마를 구축하는 방법。
템플릿 파일과 후크(hook)를 활용하여 사용자 정의를 수행합니다.
주제 기능을 풍부하고 명확한 구조로 만들기 위해서는 템플릿 파일과 WordPress의 훅 시스템을 잘 활용해야 합니다.
템플릿을 모듈화된 구성 요소로 분해하기
전문적인 주제에서는 모든 코드를 한데 모아서 보여주지 않습니다. 즉, 코드는 필요한 부분에만 적절히 배치되며, 나머지 부분은 설명이나 다른 관련 내용으로 채워집니다. 이러한 접근 방식은 코드의 가독성과 이해를 높이는 데 도움이 됩니다. index.php 네. 우리는 그것을 사용합니다. get_header()， get_footer()， get_sidebar() 등의 함수를 사용하여 템플릿을 분해합니다. 먼저, index.php 중간 부분과 끝 부분의 HTML 구조가 각각 새로 생성된 파일로 이동되었습니다. header.php 그리고 footer.php 파일을 다운로드한 후 수정하세요. index.php 다음과 같습니다:
<main>
만일 게시물이 있다면 : while ( have_posts() ) : the_post(); ?>
<article>
<h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
<div></div>
</article>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
</main>
\n함수 파일을 통해 기능을 추가합니다.
functions.php 파일은 테마의 “두뇌” 역할을 하며, 특별한 기능들을 추가하거나, 메뉴를 등록하고, 툴바 영역을 구성하며, 스타일시트와 스크립트를 포함하는 데 사용됩니다. 이 파일을 생성한 후, 다음과 같은 기본 코드를 추가하여 내비게이션 메뉴를 등록하세요:
<?php
function my_first_theme_setup() {
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-first-theme' ),
) );
// 添加文章缩略图支持
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 排入样式表和脚本
function my_first_theme_scripts() {
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>그런 다음, 당신은… header.php 중국에서 사용하세요. wp_nav_menu() 이 메뉴를 표시하기 위한 함수입니다.
반응형 디자인과 서브테마 개발을 구현합니다.
현대 웹사이트는 다양한 장치의 화면에 맞게 최적화되어야 합니다. 또한, 부모 테마를 안전하게 업데이트하면서도 사용자가 직접 추가한 수정 사항을 잃지 않도록 하는 것이 중요하기 때문에, 자식 테마(서브테마)를 제작하는 능력은 필수적입니다.
응용 프로그램에 반응형 디자인 원칙을 적용하세요.
In style.css CSS 미디어 쿼리를 사용하여 반응형 레이아웃을 만들 수 있습니다. 예를 들어, 태블릿과 스마트폰 기기에 다른 스타일 규칙을 설정할 수 있습니다.
추천 읽기 WordPress 테마 개발 완전 가이드: 제로에서 시작하여 사용자 정의 웹사이트 구축하기。
/* 基础样式 */
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
/* 平板设备 (宽度小于 768px) */
@media (max-width: 768px) {
.container { padding: 0 15px; }
.sidebar { display: none; }
}
/* 手机设备 (宽度小于 480px) */
@media (max-width: 480px) {
h1 { font-size: 1.5em; }
}하위 주제를 생성하여 상위 주제를 덮어쓰기
자식 주제(subtopic)를 사용하면 다른 주제(부모 주제, parent topic)의 기능을 수정하거나 확장할 수 있습니다. 새 폴더를 만들어보세요. 예를 들어, “my-first-theme-child”라는 이름으로 폴더를 생성한 다음, 그 안에 필요한 파일들을 추가하거나 코드를 작성하시면 됩니다. style.css그 헤더 정보에는 “Template”이라는 행이 반드시 포함되어야 하며, 이 행을 통해 상위 주제 디렉터리의 이름을 지정해야 합니다.
/*
Theme Name: My First Theme Child
Template: my-first-theme
Version: 1.0
*/그런 다음, 하위 주제에서… functions.php 여기서는 상위 주제(parent topic)와 하위 주제(subtopic)의 스타일시트를 포함시켜야 합니다.
<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
// 排入父主题样式表
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// 排入子主题样式表，位于父主题样式之后
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}
?>그 후에는 하위 주제(subtopic) 내에 동일한 이름의 템플릿 파일을 생성함으로써 해당 기능을 사용할 수 있습니다. header.php부모 주제의 해당 파일을 덮어쓰거나, 새로운 CSS 규칙을 추가하여 외관을 변경할 수 있습니다.
요약
WordPress 테마 개발은 핵심 구조를 이해하는 것부터 시작하여, 기본 테마를 만드는 실습을 거쳐, 템플릿 계층 구조, 훅(hook), 반응형 디자인, 서브테마(subtheme)와 같은 고급 기능을 활용한 심화적인 커스터마이징까지 이어지는 과정입니다. 표준화된 파일 구조와 개발 방식을 따르면 기능이 풍부하고 유지보수가 용이하며 외관이 전문적인 테마를 만들 수 있습니다. 가장 중요한 것은 실제로 손을 대어 직접 작업하는 것입니다. 간단한 기능부터 시작해서 점차 복잡한 부분으로 나아가는 것이 좋습니다. index.php 그리고 style.css 이제부터 WordPress 테마 시스템에 대한 전반적인 이해와 제어 능력을 점차적으로 구축해 나가겠습니다.
자주 묻는 질문
WordPress 테마는 최소 몇 개의 파일로 구성되어 있을까요?
한 WordPress 테마는 최소 두 개의 파일을 필요로 합니다:style.css 그리고 index.php。
그중에서,style.css 테마의 헤더 주석에는 올바른 주제 메타데이터가 포함되어야 합니다. 이는 WordPress가 테마를 인식하고 적용하는 데 매우 중요합니다. index.php 기본 템플릿 파일로서, 더 구체적인 템플릿과 일치하지 않는 요청들을 처리하는 역할을 합니다.
어떻게 개별 기사 페이지의 표시 방식을 사용자 정의할 수 있나요?
단일 글의 표시를 사용자 정의하려면, WordPress의 템플릿 계층 구조에 따라 새로운 파일을 생성해야 합니다. single.php 파일을 사용하거나, 보다 정확한 제어를 위해 특정 유형의 글에 맞는 템플릿을 만들 수도 있습니다. 예를 들어… single-post.php。
이 파일에서는 기사 제목, 내용, 메타데이터(저자, 게시 시간, 분류 등), 그리고 댓글 영역의 레이아웃을 자유롭게 구성할 수 있습니다. WordPress가 제공하는 템플릿 태그를 사용하시면 됩니다. the_title()， the_content()， the_author() 기다려보세요.
함수.php 파일의 역할은 무엇입니까?
functions.php 이 파일은 주제의 핵심 기능을 담당하는 파일로, 플러그인과 유사한 역할을 합니다. 주제에 기능, 후크(hook), 필터(filter)를 추가하는 데 사용됩니다.
그 주요 기능은 다음과 같습니다: 테마 기능의 초기화(등록 메뉴, 툴바 영역, 특별 이미지 지원 기능 추가), CSS 스타일시트 및 JavaScript 스크립트의 적용, 사용자 정의 단축 코드의 정의, 기본 WordPress 동작의 수정(후크를 통해), 그리고 테마에 특화된 설정 옵션의 설정입니다. 이 파일은 테마가 로드될 때 자동으로 WordPress에 의해 호출됩니다.
서브테마를 사용하는 데에는 어떤 장점이 있나요?
서브테마를 사용하는 가장 큰 장점은 부모 테마의 소스 파일을 직접 수정하지 않고도 안전하게 부모 테마를 수정하고 커스터마이징할 수 있다는 점입니다.
이는 부모 테마에 보안 업데이트나 기능 업데이트가 발표될 때 부모 테마를 직접 업데이트해도 자식 테마를 통해 추가한 모든 사용자 정의 수정 사항(스타일, 템플릿 파일, 기능 개선 등)이 그대로 유지되고 덮어쓰이지 않는다는 것을 의미합니다. 이로 인해 웹사이트의 유지보수 효율성과 보안성이 크게 향상되며, 이는 WordPress 개발에서 최선의 관행입니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어