워드프레스 테마의 기본 구조와 核心 파일을 이해하십시오.
사용자 정의 WordPress 테마는 본질적으로 특정 파일들을 포함하는 폴더로, 이 폴더는 WordPress 설치 디렉터리 내의 특정 위치에 있습니다./wp-content/themes/디렉터리 내에 있습니다. 이 파일들은 WordPress의 템플릿 계층 구조를 따르며, 웹사이트가 데이터베이스에 저장된 콘텐츠(예: 글, 페이지)를 방문자에게 어떻게 표시할지를 결정하는 데 함께 작용합니다. 이 파일들의 역할과 그들 간의 상호작용 방식을 이해하는 것이 개발의 첫 번째 단계입니다.
필수 파일 및 디렉터리 구조 (Required Files and Directory Structure for the Topic)
모든 WordPress 테마는 두 개의 핵심 파일을 반드시 포함해야 합니다:style.css 그리고 index.php그중에서,style.css 이 파일의 역할은 매우 중요합니다. 이 파일은 테마의 스타일을 정의하는 CSS 파일일 뿐만 아니라, 파일 헤더에 있는 주석 블록은 WordPress가 테마를 인식하는 데 사용되는 “신분증”과도 같습니다. 이 주석 블록은 반드시 특정 형식을 엄격히 준수해야 합니다.
/*
Theme Name: 我的自定义主题
Author: 开发者名称
Description: 这是一个用于演示如何从零开发的自定义WordPress主题。
Version: 1.0.0
Text Domain: my-custom-theme
*/index.php 이 파일은 주제의 메인 템플릿 파일이며, 템플릿 계층 구조에서 가장 마지막 방어선 역할을 합니다. WordPress가 현재 요청에 더 구체적인 템플릿 파일을 찾을 수 없을 때(예:single.php또는page.php그때는 이전에 사용하던 방법으로 다시 돌아가게 됩니다.index.php따라서, 건강하고 안정적인 테마(theme)라면 반드시 이 파일을 포함해야 합니다.
추천 읽기 전문 웹사이트 구축: 제로에서 시작하여 사용자 정의 WordPress 테마를 만드는 완전한 가이드。
템플릿 계층 구조와 템플릿 파일의 역할
WordPress의 템플릿 계층 구조는 지능적인 템플릿 선택 규칙을 기반으로 합니다. 이 시스템은 사용자가 방문하는 페이지의 유형(홈페이지, 글 페이지, 카테고리 페이지 등)에 따라 가장 적합한 템플릿 파일을 자동으로 선택합니다. 예를 들어, 특정 글을 조회할 때 WordPress는 다음과 같은 순서로 템플릿을 찾습니다:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> 마지막으로… index.php。
위의 두 개 필수 파일 외에도, 기능이 완전한 테마는 일반적으로 다음과 같은 요소들을 포함합니다:
* header.php문서 헤더를 정의하며, 여기에는 다음과 같은 내용이 포함됩니다:<head>구역, 웹사이트 로고, 그리고 메인 네비게이션입니다.
* footer.php문서의 바닥 부분을 정의합니다. 여기에는 저작권 정보, 보조 링크 등이 포함됩니다.
* functions.php이 부분은 테마의 “뇌” 역할을 하며, 스크립트와 스타일을 로드하고, 메뉴 및 툴바를 등록하며, 테마가 지원하는 기능들을 정의하는 데 사용됩니다.
* single.php단일 기사를 표시하는 데 사용됩니다.
* page.php단일 페이지를 표시하는 데 사용됩니다.
주제를 구성하는 핵심 기능과 템플릿
기본 파일 구조를 설정한 후의 다음 단계는 이 템플릿 파일들의 내용을 채우고, WordPress의 핵심 함수들과 “메인 루프(main loop)”를 사용하여 데이터를 동적으로 출력하는 것입니다.
functions.php 파일에서 테마 기능을 초기화합니다.
functions.php 파일은 테마 기능을 구현하는 데 있어 핵심적인 역할을 합니다. 여기에 다양한 기능을 추가할 수 있으며, WordPress의 코어 파일을 수정할 필요가 없습니다. 표준적인 초기화 과정에는 테마의 지원 기능을 설정하고, 네비게이션 메뉴와 위젯 영역을 등록하며, 스크립트와 스타일시트를 안전하게 로드하는 작업이 포함됩니다.
<?php
// 主题初始化设置
function mytheme_setup() {
// 让WordPress管理<title>标签
add_theme_support( 'title-tag' );
// 启用文章特色图像（缩略图）支持
add_theme_support( 'post-thumbnails' );
// 添加对HTML5标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 注册一个主菜单位置
register_nav_menus( array(
'menu-1' => esc_html__( '主菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );
// 注册小工具侧边栏
function mytheme_widgets_init() {
register_sidebar( array(
'name' => esc_html__( '侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );
// 加载主题的样式表和脚本
function mytheme_scripts() {
// 加载主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
// 加载导航脚本（如果有的话）
wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
?>주循环(The Loop)을 사용하여 콘텐츠를 출력합니다.
“주循环”(Main Loop)은 WordPress 템플릿에서 가장 핵심적인 개념으로, 현재 페이지에 표시해야 할 글(또는 페이지)들을 확인하고 순회하는 데 사용되는 PHP 코드입니다. 거의 모든 콘텐츠 표시 템플릿이 이 주循环에 의존하고 있습니다. 다음은…index.php주循环을 사용하는 간단한 예제:
추천 읽기 WordPress 테마 개발 입문 가이드: 제로에서 시작하여 사용자 정의 테마를 구축하는 방법。
、《PHP》 만약 (have_posts()) がある なら:
<div class="posts-container">
<article no numeric noise key 1009>
<h2 class="entry-title">
<a href="/ko/</?php the_permalink(); ?>"></a>
</h2>
<div class="entry-meta">
게시일:
</div>
<div class="entry-summary">
</div>
</article>
</div>
<p><?php esc_html_e( '很抱歉，没有找到符合条件的内容。', 'my-custom-theme' ); ?></p>이 코드에서,have_posts()그리고the_post()함수가 반복문을 제어합니다.the_title()、the_permalink()、the_excerpt()등의 템플릿 태그들은 구체적인 콘텐츠를 출력하는 데 사용됩니다.
반응형 디자인과 고급 테마 기능을 구현합니다.
현대적인 테마는 단순히 기능이 완전해야 할 뿐만 아니라, 우수한 사용자 경험도 제공해야 합니다. 여기에는 다양한 장치에서 잘 보여지는 것과 개인화된 요구사항을 유연하게 충족시킬 수 있는 기능이 포함됩니다.
반응형 레이아웃과 모바일 최적화를 통합하기
주제가 반응형이 되도록 하려면 HTML과 CSS 두 측면에서 모두 작업해야 합니다. 먼저,header.php문서의<head>해당 영역 내에서는 뷰포트 메타 태그가 반드시 포함되어 있어야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1">둘째, 당신의…style.css여기서는 미디어 쿼리(Media Queries)를 사용하여 화면 너비에 따라 레이아웃과 스타일을 조정합니다. 예를 들어, 모바일 기기에서는 사이드바를 숨기기 위해 다음과 같은 코드를 사용할 수 있습니다:
@media screen and (max-width: 768px) {
#secondary-sidebar {
display: none;
}
.site-main {
width: 100%;
}
}커스텀 페이지 템플릿과 서브테마를 만드는 방법입니다.
단일 페이지의 독특한 레이아웃 요구사항을 충족시키기 위해, WordPress는 사용자가 커스텀 페이지 템플릿을 만들 수 있도록 허용합니다. 예를 들어, 사이드바가 없는 전체 화면 너비의 페이지 템플릿을 만들 수 있으며, 그 템플릿의 이름은…template-fullwidth.php그리고 파일의 시작 부분에 다음과 같은 주석을 추가하세요:
<?php
/**
* Template Name: 全宽页面模板
* Description: 一个没有侧边栏的页面模板。
*/그런 다음, WordPress 관리자 페이지에서 페이지를 편집할 때 “페이지 설정” 메뉴에서 “전체 화면 너비 페이지 템플릿”을 선택할 수 있습니다.
추천 읽기 WordPress 테마 개발 완전 가이드: 제로에서 시작하여 사용자 정의 웹사이트 구축하기。
부모 테마가 업데이트되더라도 사용자가 직접 추가한 수정 사항이 덮어쓰이지 않도록 하기 위해서는 자식 테마(subtopic)를 사용하는 것을 강력히 권장합니다. 자식 테마에는 단 하나의 파일만 포함시키면 됩니다.style.css그리고 선택적으로 (and optionally)functions.php하위 주제의style.css헤더에는 반드시 상위 주제를 명시해야 합니다.
/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/주제의 국제화, 최적화 및 배포 준비
개발이 거의 마무리 단계에 이르렀을 때, 전 세계 사용자들이 쉽게 이해하고 사용할 수 있도록 주제를 명확히 하고, 시스템의 성능도 충분히 검증해야 합니다. 마지막으로, 제품을 출시할 준비를 철저히 해야 합니다.
테마의 국제화(i18n)를 구현합니다.
국제화(internationalization)란 여러분의 테마가 다른 언어로 번역될 수 있도록 하는 과정을 말합니다. WordPress에서는 이를 주로 두 개의 함수를 통해 구현합니다.__()이 함수는 번역된 문자열을 반환하는 데 사용됩니다._e()직접 번역된 문자열을 출력하는 데 사용됩니다. 번역이 필요한 모든 텍스트에 이를 적용하고, 해당 부분이 어디에 위치하는지 명시해 주셔야 합니다.style.css헤더에 정의된 텍스트 도메인(Text Domain).
<h2><?php esc_html_e( '最新文章', 'my-custom-theme' ); ?></h2>
<p><?php echo esc_html__( '这是一段示例文本。', 'my-custom-theme' ); ?></p>그 후에는 Poedit와 같은 도구를 사용하여 콘텐츠를 생성할 수 있습니다..pot변환 템플릿 파일과 해당 언어에 맞는 언어 패키지를 준비해 주세요..zh_CN.po그리고.mo(문서).
성능 최적화 및 코드 리뷰를 수행합니다.
출시하기 전에 성능 최적화를 실시해야 합니다. 이에는 CSS 및 JavaScript 파일 압축, 이미지 크기 최적화, 데이터베이스 조회 횟수 줄이기, WordPress의 스크립트/스타일 큐 시스템을 올바르게 사용하여 템플릿에서 직접 리소스를 제거하는 것이 포함됩니다. 동시에, 코드 검토를 통해 WordPress의 코딩 표준을 준수하고 디버그 코드가 남아있지 않으며 모든 기능이 예상대로 작동하는지 확인해야 합니다.
요약
제로에서 시작하여 사용자 정의 WordPress 테마를 개발하는 것은 체계적인 학습 과정입니다. 이 과정에는 핵심 파일 구조를 이해하고, 템플릿 계층 구조와 메인 루프를 활용하는 방법부터, 테마의 기능을 확장하고 디자인을 개선하는 방법까지 다양한 내용이 포함됩니다.functions.php중국의 중집(China International Marine Containers (CIMC))은 웹사이트의 기능을 성공적으로 구현하고 반응형 디자인을 적용했으며, 최종적으로는 국제화 및 최적화 작업을 완료했습니다. “간단한 것부터 시작하여 점차적으로 반복 개선하는” 원칙을 따라, 먼저 사용 가능한 최소한의 기능을 갖춘 템플릿을 구축한 후 새로운 템플릿 파일과 기능들을 계속 추가해 나갔습니다. 이러한 기술들을 숙달하게 되면, 자신이나 고객의 요구사항에 완전히 맞는 독특한 웹사이트를 만들 수 있게 될 것이며, 더 이상 기존 템플릿의 제약을 받지 않게 됩니다. 공식 문서와 개발자 커뮤니티가 여러분의 학습 과정에서 가장 좋은 도움을 줄 것입니다.
자주 묻는 질문
WordPress 테마를 개발하려면 깊은 PHP 지식이 필요한가요?
PHP 기초가 탄탄해야 하지만 전문가 수준까지는 필요하지 않습니다. PHP 문법, 변수, 배열, 함수, 반복 구조에 대한 이해가 필요합니다. 왜냐하면 WordPress 템플릿은 주로 PHP 코드로 구성되어 있기 때문입니다. 가장 중요한 것은 WordPress가 제공하는 수많은 내장 함수(템플릿 태그)와 훅(액션 및 필터)을 사용하는 법을 배우는 것입니다. 이러한 요소들이 여러분이 만든 테마와 WordPress의 핵심 기능을 연결하는 역할을 합니다.
제 사용자 정의 테마가 백그라운드에서 표시되지 않는 이유는 무엇입니까?
가장 흔한 이유는style.css파일 헤더의 주석 형식이 올바르지 않거나 필요한 정보가 누락되었습니다. Theme Name, Author 등의 필드가 정확하게 작성되었는지, 그리고 형식이 완전히 올바른지 반드시 꼼꼼히 확인해 주세요. 또 다른 문제는 테마 폴더가 잘못된 디렉터리에 위치해 있다는 것입니다. 테마 폴더는 반드시 올바른 위치에 있어야 합니다.wp-content/themes/그 아래에.
내 테마가 구텐베르크(Gutenberg) 에디터를 지원하도록 하려면 어떻게 해야 하나요?
为了让您的主题更好地适应古腾堡(Gutenberg)编辑器，您需要执行以下步骤：functions.php해당 문서에 해당 주제에 대한 지원 선언을 추가해야 합니다. 여기에는 와이드 어레이(Wide Alignment) 기능의 지원, 편집기의 스타일시트 설정 등이 포함됩니다. 예를 들어:
add_theme_support( 'align-wide' ); // 支持宽和全宽对齐
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' ); // 加载一个用于编辑器的专属样式表또한, 단락, 제목, 버튼과 같은 핵심 요소들에 대한 프론트엔드 스타일을 작성하여 웹사이트의 사용자 인터페이스와 편집기 내에서 일관된 모습이 보이도록 해야 합니다.
어떻게 제 테마를 테스트해야 할까요?
테스트는 다양한 측면에서 수행되어야 합니다. 먼저, Chrome, Firefox, Safari, Edge와 같은 다양한 브라우저와 스마트폰, 태블릿, 데스크톱 컴퓨터와 같은 다양한 크기의 장치에서 디자인과 기능을 확인해야 합니다. 다음으로, 자주 사용되는 플러그인들과의 호환성을 테스트해야 합니다. 그런 다음, WordPress가 제공하는 “테마 유닛 테스트” 데이터(XML 파일)를 사용하여 다양한 유형의 콘텐츠를 가져와서 테마가 다양한 극한적인 상황에서 어떻게 작동하는지 확인해야 합니다. 마지막으로…WP_DEBUG모드를 확인하여 PHP 경고나 오류가 있는지 살펴보세요.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어