커스텀 WordPress 테마를 만드는 것은 웹사이트의 외관, 기능, 성능을 완전히 제어할 수 있다는 것을 의미합니다. 기성 테마를 사용하는 것과 달리, 커스텀 개발을 통해 독특하고 효율적이며 브랜드 이미지에 완벽하게 맞는 웹사이트를 구축할 수 있습니다. 이 가이드는 기본 환경 설정부터 기능이 완전한 테마를 출시하는 과정까지 단계별로 안내해 드립니다.
개발 환경 및 기본 파일 구조
코드를 작성하기 시작하기 전에 적합한 로컬 개발 환경을 설정하는 것이 매우 중요합니다. XAMPP, MAMP를 사용하거나, 더 전문적인 도구인 Valet 또는 Local by Flywheel을 활용할 수 있습니다. 사용하는 환경이 PHP 7.4 이상 버전과 MySQL 또는 MariaDB 데이터베이스를 지원하는지 반드시 확인하십시오.
워드프레스 테마는 기본적으로 위치에 있는 것입니다. wp-content/themes/ 폴더 내에 있는 디렉터리입니다. 이 디렉터리에는 적어도 두 개의 핵심 파일이 반드시 포함되어야 합니다: 스타일시트와 인덱스 템플릿입니다.
추천 읽기 워드프레스 테마 개발 초보자 가이드: 처음부터 사이트 모양 만들기。
먼저, wp-content/themes/ 아래에서 새 폴더를 만들어 보세요, 예를 들어… my-custom-theme그런 다음, 첫 번째 필수 파일을 생성하세요:style.css이 파일은 테마의 스타일을 정의할 뿐만 아니라, 파일 헤더에 있는 주석에 테마의 메타데이터도 포함되어 있습니다.
/*
Theme Name: My Custom Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个从头开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/다음으로, 두 번째 필수 파일을 생성하세요:index.php이 파일은 주제(Theme)의 기본 템플릿 파일로, WordPress가 더 구체적인 템플릿을 찾을 수 없을 때 사용됩니다. 가장 간단한 예시 중 하나입니다. index.php 단 하나의 루프만을 포함하여 기사 목록을 표시할 수 있습니다.
<main>
<?php if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<article>
<h2></h2>
<div></div>
</article>
<?php endwhile;
endif; ?>
</main>
\n템플릿 계층을 이해하는 것은 매우 중요합니다. 템플릿 계층이란 템플릿이 어떻게 구성되어 있고, 각 부분이 어떻게 상호 연결되어 있는지를 나타내는 것입니다. 이를 통해 템플릿을 더 효율적으로 관리하고, 수정하며, 예상대로
WordPress는 템플릿 계층 구조를 사용하여 특정 페이지에 어떤 템플릿 파일을 적용할지 결정합니다. 예를 들어, 개별 글을 방문할 때 WordPress는 우선 해당 글에 맞는 템플릿을 찾습니다. single.php만약 해당 항목이 존재하지 않는다면, 이전 상태로 복귀합니다. singular.php마지막으로… index.php이러한 계층 구조를 이해하는 것은 효율적인 테마 개발의 핵심입니다. 요구 사항에 따라 해당 템플릿 파일을 생성해야 합니다. page.php(페이지)archive.php(아카이브 페이지) 그리고 single.php(단일 기사)
핵심 템플릿 파일과 테마 기능
또한… index.php 그리고 style.css기능이 완전한 테마라도 페이지 구조를 분할하고 코드를 재사용하기 위해 몇 개의 핵심 템플릿 파일이 더 필요합니다.
Create header.php 파일은 일반적으로 문서 유형을 명시하는 선언을 포함하고 있습니다.<head> 지역 정보와 웹사이트의 상단 네비게이션, 로고를 사용하세요. wp_head() 함수는 매우 중요합니다. 함수 덕분에 WordPress 코어, 플러그인, 그리고 여러분이 사용하는 테마가 여기에 필요한 코드(예: 스타일시트 링크, 메타 태그 등)를 삽입할 수 있습니다.
추천 읽기 워드프레스 테마 개발을 처음부터 배우는 가이드: 현대적인 웹사이트를 구축하는 실제 지침。
<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1002>
<header>
<h1><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>Create footer.php 이 파일에는 페이지 하단의 콘텐츠와 닫히는 HTML 태그가 포함되어 있습니다. 마찬가지로, 이 파일을 처리하기 위해서는 적절한 함수나 프로세스를 호출해야 합니다. wp_footer() 이 함수는 스크립트와 플러그인에 필요한 코드를 로드하는 데 사용됩니다.
functions.php 이 파일은 귀하의 테마의 “제어 센터” 역할을 합니다. 이 파일은 템플릿 파일이 아니라, 테마가 초기화될 때 자동으로 로드되는 PHP 파일입니다. 여기서 메뉴와 사이드바를 등록하거나, 테마에 추가할 기능들을 설정하며, 스타일시트와 스크립트를 추가할 수 있습니다.
<?php
// 添加主题支持
function my_theme_setup() {
add_theme_support( 'title-tag' ); // 让 WordPress 管理标题标签
add_theme_support( 'post-thumbnails' ); // 启用文章缩略图功能
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
// 注册导航菜单
function my_theme_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
) );
}
add_action( 'init', 'my_theme_menus' );동적으로 메뉴를 생성합니다.
In header.php 에서 사용할 수 있습니다 wp_nav_menu() 이 함수는 귀하가 등록한 메뉴를 표시합니다. 이 함수는 WordPress 관리자의 “외관 > 메뉴” 설정에서 지정된 내용을 기반으로, 올바른 CSS 클래스와 구조를 포함하는 무작위 목록을 출력합니다.
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'container' => false,
) );
?>
</nav>스타일, 스크립트, 그리고 반응형 디자인(Responsive Design)
현대적인 WordPress 테마는 CSS 및 JavaScript 파일을 로드할 때 모범 사례를 준수해야 하며, 모든 장치에서 웹사이트가 잘 표시되도록 해야 합니다.
In functions.php 중, 사용 wp_enqueue_style() 그리고 wp_enqueue_script() 이 함수는 리소스를 정렬하는 역할을 합니다. 이를 통해 올바른 의존 관계 관리와 로딩 순서가 보장되며, 플러그인 및 서브테마가 기존 설정을 덮어쓸 수 있도록 합니다.
function my_theme_scripts() {
// 排入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0.0' );
// 排入自定义 JavaScript 文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.0', true );
// 为脚本本地化数据（可选）
wp_localize_script( 'my-theme-script', 'myThemeData', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );반응형 디자인은 기본 표준으로 채택되어야 합니다. style.css 에서는 미디어 쿼리를 사용하여 다양한 화면 크기에 맞게 레이아웃을 조정합니다. 일반적인 패턴은 “모바일 우선” 방식으로, 먼저 모바일 기기를 위한 기본 스타일을 작성한 다음, 그에 따라 다른 화면 크기에 맞게 레이아웃을 조정하는 것입니다. min-width 미디어 쿼리를 사용하여 더 큰 화면에 보다 향상된 스타일을 적용합니다.
추천 읽기 강력한 사용자 정의 워드프레스 테마를 구축하기 위한 실습 가이드。
/* 基础移动样式 */
.container { width: 100%; padding: 0 15px; }
.menu { display: block; }
/* 平板电脑及以上 */
@media (min-width: 768px) {
.container { width: 750px; margin: 0 auto; }
.menu { display: flex; }
}
/* 桌面电脑 */
@media (min-width: 992px) {
.container { width: 970px; }
}WordPress에 내장된 클래스와 함수를 사용하기
WordPress는 스타일 개발을 돕기 위해 많은 유용한 CSS 클래스와 PHP 함수를 제공합니다.body_class() 이 함수는 현재 페이지의 유형에 따라 일련의 CSS 클래스를 출력합니다. home, single-post, page-id-2CSS에서 이러한 클래스를 사용하여 특정 요소에 맞는 스타일을 적용할 수 있습니다.post_class() 함수는 각 기사의 컨테이너 요소에 유사한 클래스를 출력합니다.
고급 기능과 위젯의 통합 (Integration of Advanced Features with Widgets)
주제를 더 전문적이고 사용하기 쉽게 만들기 위해, 사용자 정의 기사 유형, 위젯 영역(사이드바), 커스터마이저 설정과 같은 고급 기능들을 통합할 수 있습니다.
위젯 영역에서는 사용자가 WordPress 관리자의 “외관 > 위젯” 메뉴를 통해 모듈을 드래그 앤 드롭하여 콘텐츠를 자유롭게 커스터마이징할 수 있습니다. functions.php 사이드바 위젯 영역을 등록하세요.
function my_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );등록하시면 템플릿 파일에서 사용하실 수 있습니다. sidebar.php사용하세요. dynamic_sidebar() 이 함수를 사용하여 해당 영역을 호출합니다.
WordPress의 커스터마이저(Customizer)를 사용하면 사용자가 테마를 수정한 결과를 실시간으로 미리 볼 수 있습니다. 웹사이트의 로고나 페이지 하단에 표시되는 저작권 정보와 같은 간단한 설정들을 자신의 테마에 추가할 수도 있습니다. 이 기능을 활용하려면… WP_Customize_Manager 클래스, in… functions.php 해당 코드를 문서나 프로그램에 추가하세요.
function my_theme_customize_register( $wp_customize ) {
// 添加一个“版权信息”设置
$wp_customize->add_setting( 'footer_copyright', array(
'default' => '© 2026 Your Site Name',
'sanitize_callback' => 'sanitize_text_field',
) );
$wp_customize->add_control( 'footer_copyright', array(
'label' => __( '页脚版权文本', 'my-custom-theme' ),
'section' => 'title_tagline', // 放在“站点身份”区域
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_theme_customize_register' );그런 다음, 당신의… footer.php 에서 사용할 수 있습니다 get_theme_mod() 이 설정의 값을 출력하는 함수입니다:<?php echo esc_html( get_theme_mod( 'footer_copyright' ) ); ?>。
요약
WordPress 테마 개발은 PHP, HTML, CSS, JavaScript에 대한 지식을 WordPress의 핵심 아키텍처와 결합하는 과정입니다. 올바른 파일 구조를 설정하는 것부터 시작하여, 템플릿 계층 구조, 핵심 기능 파일, 리소스 관리, 그리고 반응형 디자인을 단계적으로 구현해 나갑니다. 위젯과 커스텀 플러그인과 같은 고급 기능을 통합함으로써, 강력하면서도 사용자 친화적인 전문 테마를 만들 수 있습니다. 핵심은 WordPress의 작동 원리를 이해하고 그 코딩 표준과 모범 사례를 따르는 데 있습니다. 이를 통해 테마가 안전하고 효율적이며 유지보수가 용이해집니다.
자주 묻는 질문
WordPress 테마를 개발하기 위해서는 어떤 사전 지식이 필요한가요?
HTML과 CSS에 대한 탄탄한 기초가 필요합니다. 이는 웹페이지의 외관을 구성하는 데 필수적인 요소들입니다. 또한, WordPress의 코어와 테마 템플릿이 모두 PHP로 작성되어 있기 때문에 PHP의 기본 문법을 반드시 숙달해야 합니다. JavaScript(특히 jQuery)에 대한 이해는 인터랙티브한 기능을 추가하는 데 매우 유용합니다. 마지막으로, WordPress의 기본 개념들(예: 반복문, 훅, 템플릿 계층 구조 등)을 이해하는 것이 테마를 성공적으로 개발하는 데 핵심입니다.
functions.php 파일의 크기는 얼마나 될 수 있을까요? 그리고 그 크기가 성능에 영향을 미칠까요?
functions.php 이론적으로 파일은 매우 길 수 있지만, 유지보수성을 위해 모듈화하는 것이 강력히 권장됩니다. 사용자 정의 기사 유형, 쇼트코드, 유틸리티와 같은 다양한 기능들을 별도의 파일로 분리한 다음, 필요에 따라 각 파일을 관리하고 업데이트할 수 있습니다. functions.php 중국에서 사용하세요. require_once 또는 include 코드를 효율적으로 작성하고 불필요한 쿼리를 피한다면, 코드의 길이가 성능에 미치는 영향은 거의 없습니다. 대규모 프로젝트의 경우 파일을 분할하는 것이 표준적인 방법입니다.
내 테마가 다국어 번역을 지원하도록 하려면 어떻게 해야 하나요?
테마를 국제화(i18n)를 지원하도록 하는 것은 전 세계 사용자를 대상으로 하는 애플리케이션을 개발할 때 중요한 단계입니다. PHP 코드 내에서 사용자에게 표시되는 모든 텍스트 문자열은 WordPress의 번역 기능을 사용하여 처리되어야 합니다. 예를 들어, __()(텍스트를 다시 표시하는 데 사용됨) 또는 _e()(텍스트를 그대로 출력하기 위해 사용됩니다.) 귀하는 다음을 필요로 합니다: style.css 의 헤더와 load_theme_textdomain() 함수 호출에서 올바르게 설정하십시오. Text Domain그 후, 개발자는 Poedit와 같은 도구를 사용하여 코드를 생성할 수 있습니다. .pot 템플릿 파일을 생성하고, 그에 맞는 내용도 작성하세요. .po 그리고 .mo 변환할 파일을 업로드해 주세요. 파일이 업로드되면 자동으로 번역이 시작됩니다.
제가 개발한 테마를 WordPress 공식 테마 디렉터리에 어떻게 제출할 수 있을까요?
공식 디렉터리에 코드를 제출하려면 엄격한 요구 사항을 충족해야 합니다. 사용자의 코드는 WordPress의 코딩 표준을 준수해야 하며, 어떠한 단축 코드나 위젯도 사용하여 콘텐츠를 하드코딩해서는 안 됩니다. 모든 기능이 안전하고 GPL 라이선스의 규정을 준수하는지 확인해야 합니다. 테마는 Theme Check 플러그인의 테스트를 통과해야 하며, 반응형 디자인, 접근성, 그리고 완전한 문서가 제공되어야 합니다. 제출 과정은 WordPress 공식 웹사이트의 제출 페이지를 통해 이루어지며, 이후 심사 팀이 코드를 검토합니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어