제로에서 시작하기: WordPress 테마의 기본 구조 이해하기
표준적인 WordPress 테마는 특정 파일과 디렉터리를 포함하는 폴더입니다. 이러한 파일들이 함께 웹사이트의 외관과 기능을 정의합니다. 가장 기본적인 테마는 두 개의 파일만으로도 작동할 수 있지만, 기능이 완전하고 현대적인 개발 표준을 준수하는 테마는 더 많은 구성 요소를 포함합니다.
핵심 파일은…style.css그리고index.php그중에서,style.css스타일시트뿐만 아니라, 테마의 “신분증”과도 같은 역할을 하는 파일입니다. 이 파일의 헤더에 있는 주석 블록에는 테마의 메타정보가 포함되어 있으며, 여기에는 테마의 이름, 작성자, 설명, 버전 번호 등이 포함됩니다. 워드프레스 관리자는 이러한 정보를 읽어서 테마를 식별하고 표시합니다.
또 다른 필수 파일은index.php이 파일은 주제의 메인 템플릿 파일입니다. WordPress가 더 구체적인 템플릿 파일을 찾을 수 없을 때(예:single.php또는page.php그 경우, 페이지를 렌더링하는 데 기본적으로 해당 설정이 사용됩니다.
추천 읽기 WordPress 테마 개발 마스터하기: 맞춤 설정부터 고급 기능 구현까지。
이 두 파일 외에도, 잘 구성된 테마는 일반적으로 다음과 같은 디렉터리와 파일들을 포함합니다:
* 模板文件：如用于渲染单篇文章的single.php페이지를 렌더링하는 데 사용됩니다.page.php그리고 기사 목록에 사용되는 것들도 포함됩니다.archive.php그리고 홈페이지의…home.php또는front-page.php。
* 模板部件：存放于/template-parts/디렉터리 내에는 재사용 가능한 코드 조각들이 있습니다. 예를 들어, 기사 요약과 같은 내용들이 포함되어 있죠.content.php), 헤더(Header)header.php)와 푸터(footer)footer.php）。
* 函数文件：functions.php이것은 테마의 기능적 핵심입니다. 테마 지원 기능을 추가하거나, 메뉴와 사이드바를 등록하며, 스크립트와 스타일시트를 도입하는 데 사용됩니다. 또한 다양한 사용자 정의 함수를 정의하는 데에도 활용됩니다.
* 资源目录：通常包括/assets/목차, 그 아래에 또 다른 내용이 있습니다./css/、/js/、/images/하위 디렉터리들은 정적 리소스를 체계적으로 관리하는 데 사용됩니다.
Core template files and template hierarchy
WordPress는 “템플릿 계층(Template Hierarchy)”이라는 지능형 시스템을 사용하여 특정 페이지 요청에 어떤 템플릿 파일을 사용하여 페이지를 렌더링할지 결정합니다. 이 계층 구조를 이해하는 것은 테마 개발의 핵심입니다.
그 작동 원리는 다음과 같습니다: 사용자가 URL을 방문하면 WordPress는 먼저 현재 페이지가 어떤 유형인지(홈페이지, 개별 글, 카테고리 아카이브 페이지 등)를 판단한 다음, 미리 설정된 우선순위 목록에 따라 해당하는 템플릿 파일을 찾습니다. 가장 잘 맞는 파일을 찾으면 그 파일을 사용합니다. 찾지 못하면 계속 다음 파일을 찾아가다가, 마지막으로 예비 템플릿을 사용하게 됩니다.index.php。
자주 사용되는 템플릿 파일의 파싱 (Parsing of Frequently Used Template Files)
단일 문서 페이지를 예로 들면, WordPress의 검색 순서는 일반적으로 다음과 같습니다:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php이는 특정 문서 유형이나 특정 문서에 맞는 전용 템플릿을 만들 수 있다는 것을 의미합니다.
또 다른 중요한 파일은functions.php비록 템플릿 계층의 일부는 아니지만, 모든 템플릿에 백엔드 지원을 제공합니다. 여기서 필요한 기능들을 사용할 수 있습니다.add_theme_support()이 함수는 글의 특징적인 이미지, 사용자 정의 로고, 글 형식 등과 같이 테마가 지원하는 기능들을 선언하는 데 사용됩니다.
추천 읽기 WordPress 웹사이트 개발 전문 가이드: 초보자부터 전문가까지 실전까지。
// 在 functions.php 中添加主题支持
function mytheme_setup() {
// 支持特色图像
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
// 支持HTML5的标记格式
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );주제 기능과 훅 시스템의 활용
WordPress의 유연성과 확장성은 대부분 “후크(hook)” 시스템 덕분입니다. 후크에는 두 가지 종류가 있습니다: 액션 후크(Action Hooks)와 필터 후크(Filter Hooks)입니다. 액션 후크를 사용하면 특정 실행 시점에 사용자 정의 코드를 삽입할 수 있으며, 필터 후크를 사용하면 프로세스 중에 전달되는 데이터를 수정할 수 있습니다.
액션 훅을 사용하여 기능을 추가합니다.
액션 후크(Action Hook)는…do_action()함수 생성 및 사용 방법add_action()이 함수는 콜백 함수를 훅(hook)에 등록합니다. 테마 개발에서 액션 훅(action hook)은 특정 위치에 콘텐츠를 삽입하거나 특정 시점에 작업을 실행하는 데 자주 사용됩니다.
예를 들어wp_enqueue_scripts이것은 스타일시트와 JavaScript 파일을 안전하게 등록하고 대기열에 올리기 위한 핵심적인 액션 후크입니다. 전면 자원을 항상 여기에서 로드해야 하며, 템플릿 파일 내에 직접 코드를 작성해서는 안 됩니다.또는태그.
// 在 functions.php 中正确引入样式和脚本
function mytheme_scripts() {
// 引入主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
// 引入自定义JavaScript文件
wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );필터 후크를 사용하여 출력 내용을 수정합니다.
필터 후크는… (The filter hook is…)apply_filters()함수 생성 및 사용 방법add_filter()함수에 콜백 함수를 등록할 수 있습니다. 예를 들어, 기사 요약의 길이를 수정하거나 모든 기사 제목에 접두사를 추가하는 등의 작업을 할 수 있습니다.
// 修改摘要字数长度
function mytheme_excerpt_length( $length ) {
return 30; // 将摘要字数限制为30字
}
add_filter( 'excerpt_length', 'mytheme_excerpt_length' );반응형 디자인과 사용자 정의 기능을 구현합니다.
현대적인 WordPress 테마는 반응형이어야 하며, 데스크톱에서 스마트폰에 이르기까지 다양한 화면 크기에 자동으로 적응할 수 있어야 합니다. 이는 주로 CSS 미디어 쿼리를 통해 구현됩니다. 또한, WordPress의 사용자 정의 기능을 활용하면 사용자에게 친화적인 백엔드 설정 옵션을 제공할 수 있습니다.
반응형 레이아웃을 구축하는 것입니다.
흔히 사용되는 방법 중 하나는 모바일 우선(Mobile First)의 CSS 전략을 채택하는 것입니다. 먼저 모바일 기기를 위한 기본 스타일을 작성한 다음, 미디어 쿼리를 사용하여 점점 더 큰 화면에 맞는 스타일을 추가하거나 기존 스타일을 재정의합니다.
추천 읽기 전문 웹사이트 구축: 제로에서 시작하여 사용자 정의 WordPress 테마를 만드는 완전한 가이드。
/* 基础样式（针对移动设备） */
.container {
width: 100%;
padding: 10px;
}
/* 平板设备及以上 */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* 桌面设备 */
@media (min-width: 992px) {
.container {
width: 970px;
}
}커스터마이저를 통합하여 실시간 미리보기 기능을 제공합니다.
워드프레스Customizer이것은 웹사이트 관리자가 테마의 특정 설정을 실시간으로 미리 보고 수정할 수 있게 해주는 강력한 도구입니다.functions.php중국을 통해$wp_customize객체에 설정 및 컨트롤을 추가합니다.
예를 들어, 웹사이트 푸터의 저작권 정보를 수정할 수 있는 옵션을 추가하는 것입니다:
function mytheme_customize_register( $wp_customize ) {
// 添加一个“版权文本”设置
$wp_customize->add_setting( 'footer_copyright_text', array(
'default' => '© 2026 我的网站。保留所有权利。',
'sanitize_callback' => 'sanitize_text_field', // 对输入进行净化
'transport' => 'postMessage', // 支持实时预览
) );
// 为上述设置添加一个文本框控件
$wp_customize->add_control( 'footer_copyright_text', array(
'label' => __( '页脚版权文本', 'mytheme' ),
'section' => 'title_tagline', // 放在“站点身份”区域
'type' => 'text',
) );
}
add_action( 'customize_register', 'mytheme_customize_register' );그런 다음footer.php템플릿 파일에서 사용합니다.get_theme_mod()이 함수는 다음 값을 출력합니다:
echo esc_html( get_theme_mod( 'footer_copyright_text', '默认版权文本' ) );
요약
WordPress 테마 개발은 PHP, HTML, CSS, JavaScript에 대한 지식과 WordPress의 핵심 아키텍처에 대한 이해가 결합된 종합적인 기술입니다. 가장 기본적인 개념부터 시작하여…style.css그리고index.php복잡한 템플릿 구조와 훅 시스템을 익히는 것부터 시작하여, 반응형 디자인을 구현하는 단계에 이르기까지…Customizer통합 과정의 각 단계는 전문적이고 효율적이며 사용하기 쉬운 테마를 구축하는 데 있어 매우 중요합니다. 표준적인 파일 구조와 코딩 규칙을 준수함으로써 개발한 테마를 더 쉽게 유지보수할 수 있을 뿐만 아니라, WordPress 생태계 및 다양한 플러그인들과의 호환성도 보장할 수 있습니다. 우수한 테마 개발은 사용자와 개발자의 경험에 대한 이중적인 관심에서 시작된다는 점을 기억하세요.
자주 묻는 질문
가장 기본적인 WordPress 테마에는 어떤 파일들이 필요할까요?
가장 간단한 형태의 WordPress 테마라도 활성화하고 실행하려면 두 개의 파일만 필요합니다:style.css그리고index.php。style.css헤더에는 올바른 주제 정보 주석 블록이 반드시 포함되어야 합니다.index.php그렇다면 가장 기본적인 WordPress 루프와 HTML 구조를 포함해야 합니다.
내 테마에 네비게이션 메뉴를 어떻게 추가하나요?
먼저, 당신은 다음을 해야 합니다:functions.php중국에서 사용하세요.register_nav_menus()함수를 사용하여 하나 이상의 메뉴 항목을 등록합니다. 그런 다음, 테마 템플릿(보통은…)에서 해당 메뉴 항목들을 사용합니다.header.php중) 메뉴를 표시하고자 하는 위치를 지정하세요.wp_nav_menu()함수를 사용하여 등록된 메뉴를 호출하고 표시합니다.
하위 주제(Sub-Topic)란 무엇이며, 왜 사용해야 하는가?
자주제(subtopic)는 다른 주제(부모주제, parent topic)에 의존하는 주제입니다. 자주제를 사용하면 부모주제의 파일을 직접 수정하지 않고도 그 기능과 스타일을 수정하거나 확장할 수 있습니다. 이러한 방식의 장점은 부모주제가 업데이트될 때 자주제에 적용한 사용자 정의 변경사항이 손실되지 않아 업데이트의 안정성과 편의성이 보장된다는 점입니다.
내 테마를 다국어로 지원하려면 어떻게 해야 하나요?
주제를 다국어(국제화)로 지원하려면 주로 두 단계가 필요합니다. 첫째, 개발 과정에서 번역이 필요한 모든 문자열을 적절한 형식으로 처리해야 합니다.__()또는_e()먼저, 번역 함수들을 래핑하는 작업을 수행해야 합니다. 그 다음에 Poedit와 같은 도구를 사용하여 코드에서 이러한 문자열들을 추출하여 생성합니다..pot파일을 준비한 다음, 각 언어에 맞는 파일을 생성하세요..po그리고.mo마지막으로,functions.php중에서 호출합니다.load_theme_textdomain()함수를 사용하여 번역 내용을 로드합니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어