WordPress 테마 개발을 시작하려면, 로컬 PHP 환경이 설정된 컴퓨터가 필수적입니다. XAMPP, MAMP, Local by Flywheel과 같은 도구를 사용하면 빠르게 개발 환경을 설정할 수 있습니다. 그 다음으로는 Visual Studio Code, PHPStorm, Sublime Text와 같은 코드 편집기가 필요합니다. 이러한 편집기들은 구문 강조, 코드 완성 기능 등을 제공하여 개발 효율성을 크게 향상시켜 줍니다. 마지막으로, 최신 버전의 WordPress를 설치하고 활성화해야 합니다.
코딩을 시작하기 전에 WordPress 테마의 디렉터리 구조를 이해하는 것이 매우 중요합니다. 가장 기본적인 테마라도 적어도 두 개의 파일이 필요합니다:style.css그리고index.php하지만 실제 개발 과정에서는 기능들을 분리하기 위해 더 많은 파일들이 필요합니다. 전형적인 현대적인 테마 구조는 다음과 같을 수 있습니다:
your-theme/
├── style.css # 主题样式和基本信息
├── index.php # 主模板文件
├── header.php # 头部模板
├── footer.php # 底部模板
├── sidebar.php # 侧边栏模板
├── functions.php # 功能和特性定义
├── page.php # 页面模板
├── single.php # 文章模板
└── assets/
├── css/
├── js/
└── images/핵심 주제 파일 만들기
이 단계에서 우리는 테마의 기초를 구축할 것입니다. 이 파일들은 테마의 정체성과 기본적인 구조를 정의합니다.
추천 읽기 워드프레스 테마 개발의 궁극적인 가이드: 제로부터 커스터마이징된 테마를 만들기。
정의 주제 정보 및 메인 스타일 시트 (Define Theme Information and Main Style Sheet)
style.css파일은 단순한 스타일시트가 아니라, 테마의 “신분증”과도 같습니다. 파일 상단의 주석 블록에는 WordPress가 테마를 인식하는 데 필요한 모든 메타정보가 포함되어 있습니다. 기본적인 헤더 주석의 예는 다음과 같습니다:
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始构建的简单自定义主题，用于学习WordPress主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/그중에서,Text Domain국제화를 위해 사용되며, 이후 번역 함수를 호출하는 데 필수적인 식별자입니다. 주석 블록 다음부터는 일반 CSS를 작성하는 것처럼 자신의 테마에 스타일을 추가할 수 있습니다.
주제의 골격 템플릿을 구축합니다.
index.php이 템플릿은 주제의 기본 메인 템플릿이자 모든 페이지의 백업 템플릿입니다. 좋은 관행은 모든 코드를 하나의 파일에 몰아넣는 대신, WordPress의 템플릿 함수를 사용하여 모듈화된 구성 요소들을 도입하는 것입니다. 매우 간단하지만 구조가 명확한 템플릿입니다.index.php아마도 다음과 같을 것입니다:
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 显示文章内容
the_content();
endwhile;
else :
echo '<p>暂无内容。</p>';
endif;
?>
</main>
\n헤더와 푸터 템플릿을 분리하세요.
header.php파일은 일반적으로 HTML 문서의 헤더를 포함하며, 이 헤더는 콘텐츠 영역이 시작되기 전까지 이어집니다. 파일에는 반드시 다음과 같은 내용이 포함되어야 합니다:선언(Declaration)레이블,지역(사용)wp_head()훅(hook)과 웹사이트 제목, 메인 네비게이션도 포함됩니다. 핵심 함수는…wp_head()이 기능을 통해 플러그인과 테마가 페이지의 헤더 부분에 필요한 코드(CSS, JS 등)를 삽입할 수 있습니다.
footer.php파일에는 콘텐츠 영역이 끝난 후의 모든 내용이 포함되어 있습니다. 예를 들어, 페이지 하단의 툴바 영역, 저작권 정보 등이 여기에 해당합니다. 파일은 반드시…wp_footer()함수 호출이 완료되었습니다. 이 함수는 분석 코드와 같은 많은 플러그인의 정상적인 작동에 필수적입니다.
추천 읽기 전문 웹사이트 구축: 제로에서 시작하여 사용자 정의 WordPress 테마를 만드는 완전한 가이드。
기능 도입 및 테마 개선
functions.php이 파일은 해당 테마의 “제어 센터” 역할을 합니다. 이 파일은 템플릿 파일이 아니라, 테마가 초기화될 때 자동으로 로드되는 PHP 파일입니다. 여기에 테마 관련 기능들을 추가하거나, 메뉴를 등록하고, 스타일시트와 스크립트를 설정할 수 있으며, 다양한 사용자 정의 기능들을 정의할 수도 있습니다.
코어 테마 기능을 활성화합니다.
통과합니다.add_theme_support()함수를 사용하면 자신의 테마에서 특정 WordPress 코어 기능에 대한 지원을 선언할 수 있습니다. 예를 들어, 글의 썸네일(프로필 이미지)을 활성화하거나 HTML5 마크업을 지원하는 것은 현대적인 테마의 기본 기능입니다.
<?php
function my_theme_setup() {
// 启用文章和评论的HTML5标记支持
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
// 启用文章缩略图功能
add_theme_support( 'post-thumbnails' );
// 设置默认缩略图尺寸
set_post_thumbnail_size( 800, 400, true );
// 启用标题标签支持（由WordPress自动生成<title>标签）
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );등록 메뉴(Registration Menu)와 리소스 로딩(Resource Loading)
등록된 네비게이션 메뉴 항목들은 사용자가 백엔드의 “외관(Appearance)” -> “메뉴(Menu)” 설정에서 관리할 수 있습니다.register_nav_menus()함수 구현:
function my_theme_menus() {
register_nav_menus(
array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
'footer' => __( '页脚菜单', 'my-first-theme' ),
)
);
}
add_action( 'after_setup_theme', 'my_theme_menus' );CSS와 JavaScript 파일을 올바른 방식으로 로드하는 것은 좋은 성능을 보장하는 데 중요합니다. 사용하는 방법은 다음과 같습니다:wp_enqueue_style()그리고wp_enqueue_script()함수를 작성하고 이들을 매핑하십시오.wp_enqueue_scripts“Hook 상에 있습니다.” 이렇게 하면 의존 관계가 올바르게 설정되고, 중복 로딩을 방지할 수 있습니다.
특정 페이지 템플릿을 생성합니다.
WordPress는 템플릿 계층 시스템을 따르므로, 현재 보고 있는 페이지의 유형에 따라 가장 적합한 템플릿 파일을 자동으로 찾아줍니다. 다양한 유형의 페이지에 맞는 전용 템플릿을 만들면 레이아웃과 콘텐츠의 표시가 더욱 세밀해집니다.
단일 기사와 독립적인 페이지를 위한 템플릿을 디자인합니다.
single.php이 템플릿은 단일 기사를 표시하는 데 사용됩니다.index.php반복적인 구조는 비슷하지만, 일반적으로 분류, 태그, 작성자, 게시 시간, 댓글 영역과 같은 더 완전한 메타정보를 포함합니다.
추천 읽기 WordPress 테마 개발 완전 가이드: 제로에서 시작하여 커스텀 테마를 구축하는 방법。
page.php템플릿은 독립적인 정적 페이지를 표시하는 데 사용됩니다. 일반적으로 글의 메타데이터(예: 분류, 게시 시간)를 표시하지 않으며, 반복 처리가 더 간단하고 페이지 편집기의 내용을 중점적으로 보여줍니다.
기사 목록 및 아카이브 페이지 템플릿을 구축합니다.
archive.php템플릿은 분류, 태그, 작성자, 날짜 등의 아카이브 페이지를 표시하는 데 사용됩니다. 일반적으로 제목(예: “분류: 기술”)과 글 목록을 포함하고 있습니다.
home.php또는front-page.php블로그 홈페이지를 커스터마이징하는 데 사용됩니다. 해당 기능이 존재하는 경우에만 사용 가능합니다.front-page.php그것은 사이트의 홈페이지로 사용될 것입니다. 만약 해당 페이지가 존재한다면 말이죠.home.php이 페이지는 기사의 인덱스 페이지로 사용될 것입니다.
커스텀 검색 기능과 404 페이지를 구현합니다.
search.php검색 결과를 표시하는 데 사용됩니다. 여기에 원하는 내용을 입력하실 수 있습니다.the_search_query()이 함수는 사용자가 검색한 키워드를 출력합니다.
404.php사용자가 존재하지 않는 주소를 방문할 때 이 메시지가 표시됩니다. 좋은 404 페이지는 친절한 안내 메시지, 검색 필드, 그리고 중요한 페이지들로 연결되는 링크를 포함해야 합니다.
통합된 작은 도구들과 동적인 사이드바
“소프트웨어 도구(Widgets)”는 WordPress가 사용자에게 제공하는 기능으로, 새로운 글 목록, 카테고리 목록, 검색 상자와 같은 콘텐츠 블록을 유연하게 추가할 수 있게 해줍니다. 자신의 테마에서 소프트웨어 도구를 지원하려면 먼저 하나 이상의 ‘사이드바(Sidebar)’를 등록해야 합니다(실제로는 소프트웨어 도구가 배치될 영역을 의미합니다). 그런 다음 템플릿 내에서 이 사이드바들을 표시하면 됩니다.
등록 가능한 작은 도구들이 준비된 영역입니다.
활용register_sidebar()이 함수를 사용하여 사이드바를 등록할 수 있습니다.functions.php여기서는 메인 사이드바, 푸터 영역 등에 사용할 여러 개의 사이드바를 정의하고 있습니다.
function my_theme_widgets_init() {
register_sidebar(
array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加主侧边栏的小工具。', 'my-first-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', 'my_theme_widgets_init' );템플릿에서 사이드바를 호출합니다.
등록한 후에는 템플릿 파일에서 해당 기능을 사용해야 합니다.dynamic_sidebar()이 함수는 해당 영역의 내용을 출력합니다. 예를 들어,sidebar.php중국어:
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
<?php endif; ?>그런 다음,index.php、single.php사이드바가 필요한 템플릿에서 사용하세요.get_sidebar()함수 인용 (Function Introduction)sidebar.php이제 사용자는 WordPress 관리자의 “외관(Appearance)” → “위젯(Widgets)” 페이지에서 다양한 위젯을 “메인 사이드바(Main Sidebar)”로 드래그하여 추가할 수 있습니다.
요약
제로에서 시작하여 WordPress 사용자 정의 테마를 구축하는 것은 체계적인 학습 과정입니다. 이 과정은 기본적인 파일 구조를 이해하는 것에서 시작하여, 점차 템플릿 계층, 기능 확장, 그리고 동적 콘텐츠 영역까지 심화됩니다. 가장 중요한 것은 이러한 모든 요소들을 숙달하는 것입니다.style.css、index.php、header.php、footer.php그리고functions.php이 몇 개의 기초 파일들의 역할과 작성 방법에 대해 알아보겠습니다.add_theme_support()기능을 활성화하여 템플릿 계층 구조를 통해 목적에 맞는 페이지 템플릿을 생성한 다음, 그 템플릿을 사용하여 원하는 콘텐츠를 구성합니다.register_sidebar()소형 툴들을 통합함으로써, 기능이 완전하고 구조가 명확한 테마의 기본 형태가 완성됩니다. 이는 단순한 기술적 구현을 넘어서, WordPress의 콘텐츠 관리 논리에 대한 깊은 이해를 보여주는 것입니다.
자주 묻는 질문
개발 주제를 만들기 전에 반드시 하위 주제를 사용해야 합니까?
꼭 그런 것은 아닙니다. 만약 처음부터 완전히 새로운 주제를 만들어야 한다면, 부모 주제(parent theme)를 직접 생성하는 것도 가능합니다. 하지만 자식 주제(subtopic)를 사용하는 가장 좋은 상황은 기존의 주제(부모 주제)를 커스터마이징하고 수정한 후, 향후에도 그 수정 사항을 유지하면서 부모 주제를 안전하게 업데이트하고 싶을 때입니다. 처음부터 개발을 배우면서 부모 주제를 직접 생성하는 것이 전체 아키텍처를 이해하는 데 더 도움이 됩니다.
왜 제 테마가 백엔드의 “외관” 설정에서 표시되지 않나요?
이는 보통 다음과 같은 이유로 발생합니다:style.css파일 상단의 주제 정보에 대한 주석 블록의 형식이 올바르지 않거나, 누락되었거나, 문법 오류가 있어서 발생하는 문제입니다. 파일의 시작 부분에 있는 주석 블록이 형식에 따라 정확하게 작성되었는지 반드시 확인해 주세요. 특히…Theme Name:이 줄은 반드시 존재해야 하며 올바르게 작성되어야 합니다. 또한, 주제 폴더가 올바른 위치에 배치되어 있는지 확인하십시오.wp-content/themes/카테고리 아래에.
함수.php와 플러그인의 차이점은 무엇입니까?
functions.php파일에 포함된 코드는 특정 테마와 밀접하게 연결되어 있어서 테마를 변경하면 해당 기능들이 대부분 작동하지 않게 됩니다. 이러한 코드는 테마의 외관, 레이아웃, 템플릿 기능과 직접 관련된 내용을 담는 데 적합합니다. 반면, 플러그인은 특정 테마와 무관하게 여러 테마에서 사용할 수 있는 기능을 제공하는 데 사용됩니다. 간단한 원칙은 이렇습니다: 어떤 기능이 웹사이트의 외관이나 레이아웃에 영향을 미친다면, 그 기능은 테마 내에 포함되어야 합니다.functions.php중; 독립적인 비즈니스 로직(예: 연락처 양식, SEO 최적화 등)을 추가해야 하는 경우에는 플러그인으로 제작해야 합니다.
내 테마를 다국어로 지원하려면 어떻게 해야 하나요?
주제를 다국어로 지원하도록 만드는 과정(국제화 및 현지화)은 주로 두 단계를 포함합니다. 첫째로,style.css주석 블록과functions.php모든 번역이 필요한 문자열에는 “像”와 같은 표현을 사용하세요.__( ‘文本’, ‘my-first-theme’ )이러한 번역 함수를 래핑하는 것은… (Wrapping such a translation function is…)‘my-first-theme’이것은 당신의 텍스트 도메인(Text Domain)입니다. 다음으로, Poedit와 같은 도구를 사용하여 테마 파일을 스캔하여 필요한 내용을 생성해야 합니다..pot템플릿 파일을 준비하고, 각 언어에 맞는 파일을 생성하세요..po그리고.mo변환하려는 파일들을 해당 주제의 폴더에 넣어 주세요./languages/카테고리 아래에.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어