무화과 시작/지식 관련/워드프레스/콘텐츠 세부 정보

워드프레스 테마 개발 시작하기: 처음부터 첫 번째 사용자 정의 테마 만들기

3분 읽기
2026-03-10
2026-06-04
2,047
아래 링크를 통해 쇼핑하면 추가 비용 없이 수수료를 받을 수 있습니다.

완전한 기능을 갖춘 WordPress 테마를 구축하려면 일련의 핵심 파일을 준비해야 합니다. 이 파일들은 테마의 기본 구조를 형성하며, 각 파일은 고유한 역할을 가지고 있습니다.

가장 기본적인 파일들은 다음과 같습니다:
* `style.css`：主题的样式表，同时也是主题的“身份证”，包含主题名称、作者、描述等元信息。
* `index.php`：主题的主模板文件，是默认的首页和文章列表页模板。
* `header.php`：网站的头部模板，通常包含`<head>`部分和网站顶部的导航区域。
* `footer.php`：网站的底部模板，通常包含版权信息、脚本等。
* `functions.php`：主题的功能文件，用于添加自定义功能、注册菜单、侧边栏等。

`style.css` 파일을 만드는 것부터 시작해 보겠습니다. 파일의 맨 위에는 주제에 대한 정보를 담은 헤더 주석을 추가해야 합니다.

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习WordPress主题开发而创建的简单自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

다음으로 `index.php` 파일을 생성하세요. 가장 기본적인 버전에서는 헤더(head)와 푸터footer)를 포함시켜야 하며, 글들을 반복적으로 출력해야 합니다.

<main id="main-content">
    만일 게시물이 있다면: ?&gt;
            <article id="post-<?php the_ID(); ?>">
                <h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
                <div class="entry-content">
                    
                </div>
            </article>
        
        <p>현재 기사가 없습니다.</p>
    
</main>

`header.php`와 `footer.php` 파일은 각각 웹사이트 전체에 공통적으로 사용되는 상단 및 하단 HTML 구조를 포함하고 있습니다. `functions.php` 파일은 테마의 기능을 향상시키는 데 사용됩니다.

UltaHost의 WordPress 호스팅 서비스
30일 환불 보장, 무제한 대역폭 및 데이터베이스 이용, 무료 DDoS 보호 서비스 제공. 3년 구매 시 50% 용량이 할인됩니다.
울타호스트(ULTAHost) 로고 액세스 페이지

템플릿 계층 구조와 반복 이해

WordPress는 다양한 페이지 콘텐츠를 어떻게 표시할지 결정하기 위해 지능적인 템플릿 계층 시스템을 사용합니다. 예를 들어, 특정 글을 방문하면 WordPress는 먼저 `single.php` 파일을 찾습니다. 분류 페이지를 방문하면 `category.php` 파일을 찾으며, 이 파일들이 없을 경우 `archive.php` 파일로 이동하고, 그마저 없으면 `index.php` 파일로 이동합니다.

What is the main loop?

`the loop`是WordPress主题开发的核心概念。它是一段PHP代码，用于从数据库中获取文章内容并将其显示在网页上。你在`index.php`中看到的`while ( have_posts() ) : the_post();`就是循环的开始。在循环内部，你可以使用一系列模板标签来输出文章信息，如`the_title()`, `the_content()`, `the_permalink()`等。

추천 읽기 WordPress 테마 개발 완전 가이드: 초보자부터 전문가까지。

다른 템플릿 파일을 생성하세요.

주제를 더 전문적으로 만들기 위해서는 몇 가지 템플릿 파일을 만들어야 합니다. 예를 들어, `single.php` 파일을 만들어서 글을 개별적으로 표시할 수 있도록 해야 합니다.

<main>
    
        <article>
            <h1></h1>
            <div class="post-meta">
                게시 날짜:  | 작성자:
            </div>
            <div class="post-content">
                
            </div>
        </article>
        
</main>

마찬가지로, `page.php`를 만들어 페이지 템플릿을 정의하고, `archive.php`를 만들어 카테고리, 태그 등의 아카이브 페이지 템플릿을 정의할 수 있습니다.

통합 메뉴와 사이드바

현대적인 테마는 일반적으로 사용자 정의 가능한 네비게이션 메뉴와 사이드바에 위치한 도구 영역을 포함합니다. 이러한 기능들은 `functions.php` 파일을 통해 등록하고 활성화해야 합니다.

등록하기 | 네비게이션 메뉴

`functions.php` 파일에 다음 코드를 추가하면 “메인 메뉴”와 같은 메뉴 위치를 테마에 등록할 수 있습니다.

function my_first_theme_setup() {
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

등록한 후에는 사용자가 WordPress 관리자의 “외관(Appearance)” → “메뉴(Menus)”에서 해당 메뉴를 원하는 위치에 배치할 수 있습니다. 그런 다음, `header.php` 파일에서 메뉴를 표시하고자 하는 곳에 다음 코드를 추가하여 해당 메뉴를 호출하면 됩니다:

호스팅닷컴 공유 호스팅
AMD EPYC CPU, NVMe SSD 스토리지 및 LiteSpeed를 통한 고성능, 연중무휴 24시간 전문가 사내 지원, SSL, 무차별 공격, 멀웨어 및 DDoS 보호를 포함한 고급 보안 조치, 최대 73%의 비용 절감.
호스팅닷컴 로고 액세스 페이지 
<nav id="site-navigation">
    <?php
    wp_nav_menu( array(
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
    ) );
    ?>
</nav>

툴바 사이드바를 추가하세요.

워드프레스의 “소도구(Widgets)”는 매우 유연한 기능입니다. 사이드바를 추가하려면 `functions.php` 파일에 ‘소도구 영역(Widget Area)’을 등록해야 합니다.

함수 my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( '메인 사이드바', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( '여기에 위젯을 추가합니다.' , 'my-first-theme' ), 'description' =&gt; __( '여기에 위젯 추가.
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

그런 다음, 사이드바를 표시하고자 하는 템플릿 파일(예: `sidebar.php`)에서 `dynamic_sidebar()` 함수를 사용하여 사이드바를 출력하세요.

<aside id="secondary" class="widget-area">
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>

마지막으로, `index.php` 또는 `single.php` 파일에서 `get_sidebar();`를 사용하여 이 사이드바 파일을 포함시키는 것을 잊지 마세요.

추천 읽기 워드프레스 테마 개발 가이드: 처음부터 사용자 정의 테마 구축하기。

스타일과 스크립트를 추가하세요.

为了保持代码的整洁和可维护性，不应该直接在HTML中硬编码样式和脚本链接。正确的方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数将它们加入队列。

스타일시트를 가져오세요.

`style.css` 파일은 반드시 필요하지만, WordPress는 이 파일을 자동으로 로드하지 않습니다. 따라서 이 파일을 명시적으로 로딩 대기열에 추가해야 합니다. 일반적으로 메인 스타일시트와 리셋 스타일시트를 별도로 관리합니다.

InterServer 공유 호스팅
공유 호스팅 월 $2.50 USD, 첫 달 $0.1 USD 프로모션 코드 tryinterserver, 461개 클라우드 앱 스크립트, 원클릭 설치.
인터서버(InterServer) 로고 액세스 페이지 
function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入一个自定义样式表 (假设位于 /assets/css/main.css)
    wp_enqueue_style( 'my-first-theme-main', get_template_directory_uri() . '/assets/css/main.css' );

// 引入一个自定义JavaScript文件 (假设位于 /assets/js/navigation.js)
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

현대적인 CSS 개발 방식을 사용하기

2026년의 프론트엔드 개발에서는 반응형 디자인과 접근성에 큰 관심을 기울이는 것이 매우 중요합니다. `style.css` 파일이나 별도의 `main.css` 파일 내에서 미디어 쿼리를 사용하여 웹사이트가 다양한 장치에서도 잘 표시되도록 해야 합니다.

/* 基础样式 */
body {
    font-family: sans-serif;
    line-height: 1.6;
}

/* 响应式导航菜单 */
@media screen and (max-width: 768px) {
    #primary-menu {
        display: none;
    }
    /* 移动端菜单样式 */
}

Testing and Debugging

주제 개발이 완료된 후에는 테스트가 필수적인 단계입니다. 다양한 환경, 브라우저, 그리고 장치에서 포괄적인 테스트를 수행해야 합니다.

디버깅 모드를 활성화합니다.

개발 과정에서 반드시 WordPress의 디버깅 모드를 활성화해야 합니다. 이를 통해 PHP 오류, 경고, 알림을 신속하게 발견할 수 있습니다. `wp-config.php` 파일을 열고 다음 코드를 찾아서 추가하세요:

추천 읽기 2026년 워드프레스 테마 개발 입문 가이드: 0부터 1 까지 반응형 기업 웹사이트를 구축하는 방법。

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误，更安全

Subject Unit Testing

공식적인 WordPress 테마 단위 테스트 데이터를 사용하여 테마를 철저히 테스트하는 것을 권장합니다. 이 데이터에는 다양한 유형의 글, 페이지, 미디어, 댓글 등이 포함되어 있어, 테마가 다양한 콘텐츠를 처리할 때 올바르게 표시되는지, 스타일이나 레이아웃에 문제가 없는지를 확인할 수 있습니다.

요약

기본적인 `style.css`와 `index.php` 파일을 만드는 것부터 템플릿의 계층 구조와 반복 구조를 이해하는 것, 메뉴와 사이드바를 등록하는 것, 그리고 스타일 스크립트를 안전하게 추가하는 것에 이르기까지, 이제는 기본적이지만 완전한 커스텀 WordPress 테마를 구축하는 전 과정을 거쳤습니다. 테마 개발은 반복적인 과정이라는 것을 기억하세요. 가장 단순한 버전부터 시작하여 점차 기능을 추가하고 디테일을 완성해 나가는 것이 최선의 방법입니다. 템플릿 태그, 액션 후크, 필터에 대한 지식을 지속적으로 학습하면 더 강력하고 유연한 테마를 만들 수 있게 될 것입니다.

자주 묻는 질문

WordPress 테마를 개발하기 위해서는 어떤 기초 지식이 필요한가요?

HTML, CSS, PHP의 기초 지식을 숙달해야 합니다. JavaScript에 대한 이해도 있으면 상호작용 기능을 추가하는 데 매우 유용할 것입니다. 또한, WordPress의 기본 개념(예: 글, 페이지, 카테고리, 태그, 플러그인, 메뉴)에 익숙해지는 것이 필수적입니다.

왜 제 테마 변경 사항이 백엔드에서 적용되지 않나요?

이 문제는 대부분 브라우저 캐시나 WordPress 캐시로 인해 발생합니다. 먼저 브라우저를 강제로 새로고침해 보세요 (Ctrl + F5 또는 Cmd + Shift + R). 문제가 여전히 해결되지 않는다면, 스타일과 스크립트가 올바르게 큐에 추가되었는지 확인하고 `functions.php` 파일에 문법 오류가 없는지 검토해 주세요. 극히 드문 경우에는 서버나 플러그인의 캐시를 삭제해야 할 수도 있습니다.

내 테마를 다국어로 지원하려면 어떻게 해야 하나요?

你需要做好主题的“国际化”准备。这意味着在代码中所有需要翻译的文本，都应使用翻译函数（如`__()`， `_e()`）进行包装，并为`text-domain`设置一个唯一标识（在`style.css`的头部已定义）。然后，你可以使用如Poedit这样的工具创建`.po`和`.mo`翻译文件，使你的主题能够被轻松翻译成其他语言。

커스텀 테마와 서브테마의 차이점은 무엇인가요?

커스텀 테마는 처음부터 독립적으로 개발된 새로운 테마입니다. 반면에 서브테마(subtheme)는 기존의 “부모 테마(parent theme)”를 기반으로 하며, 부모 테마의 모든 기능, 스타일, 템플릿 파일을 상속받습니다. 서브테마를 사용하면 필요한 부분(주로 스타일과 일부 템플릿 파일)만 수정하거나 추가할 수 있으며, 부모 테마를 변경할 필요가 없습니다. 이 방식은 인기 있는 테마를 커스터마이징하거나 업그레이드할 때 수정 사항이 덮어쓰이는 것을 방지할 수 있어 더 안전하고 효율적인 접근법입니다.

다음 단계는 무엇인가요?

만약 당신이 WordPress 웹사이트를 구축하거나 최적화하고 있다면, 성능 최적화, 플러그인 구성, 테마 사용자 정의와 관련된 내용을 계속 읽는 것이 좋습니다.

확장된 독서 및 실무 지식

다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.

태그.