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

WordPress 테마 개발 입문: 제로에서 시작하여 첫 번째 커스텀 테마를 만들어보세요

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

준비 작업: 완전한 테마 환경을 생성하기

어떤 코드를 작성하기 전에도, 명확한 구조를 가진 개발 환경을 설정하는 것이 성공의 핵심입니다. 먼저 로컬 컴퓨터나 원격 서버에 WordPress를 설치해야 합니다. 테마를 저장할 디렉터리를 만들어야 하는데, 이 디렉터리는 WordPress가 설치된 디렉터리 내에 위치해야 합니다. /wp-content/themes/ 네. 우리는 ‘(Name of the Project)’라는 이름의 프로젝트를 만들 것입니다. my-first-theme 새로 만든 폴더입니다. 이 폴더가 바로 우리가 직접 정의한 테마의 핵심 디렉터리입니다.

가장 기본적인 WordPress 테마는 시스템에서 인식하기 위해 두 개의 파일만 필요합니다. 첫 번째 파일은 스타일시트 파일입니다. style.css이 템플릿은 사이트의 외관만을 정의하는 것이 아니라, 헤더에 포함된 주석 정보가 해당 테마의 “신분증” 역할을 합니다. 이 정보에는 테마의 이름, 작성자, 설명 등의 메타데이터가 포함되어 있습니다. 두 번째 파일은 핵심 템플릿 파일입니다. index.php이 파일은 WordPress의 기본 시작 페이지(홈페이지) 템플릿입니다.

먼저 만들어 봅시다. style.css 파일에 필요한 헤더 정보를 작성하세요.

추천 읽기 WordPress 테마 개발: 커스텀 테마를 제작하는 완전한 가이드。

/*
Theme Name: My First Theme
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 这是我开发的第一个 WordPress 主题，用于学习和实践。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

/* 以下是正式的样式内容 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

다음으로, 가장 기본적인 것을 만들어 봅시다. index.php 이 파일은 매우 간단할 수 있으며, 단지 테마가 올바르게 인식되었는지를 확인하는 데만 사용됩니다.

UltaHost의 WordPress 호스팅 서비스
30일 환불 보장, 무제한 대역폭 및 데이터베이스 이용, 무료 DDoS 보호 서비스 제공. 3년 구매 시 50% 용량이 할인됩니다.
울타호스트(ULTAHost) 로고 액세스 페이지 
<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1001>
    <h1>안녕하세요, 세상이여! 이것은 제 첫 번째 테마입니다.</h1>
    
</body>
</html>

이 두 파일을 완성한 후에는 WordPress 관리자에 로그인하여 “외관(Appearance)” → “테마(Themes)” 페이지로 이동하세요. 그러면 방금 생성한 “My First Theme” 테마가 보일 것입니다. 이 테마를 활성화한 다음 웹사이트의 홈 페이지를 방문하면 가장 기본적인 출력 결과를 확인할 수 있습니다. 이것으로 여러분의 테마 프레임워크가 성공적으로 설정된 것입니다.

핵심 템플릿 파일과 그 계층 구조를 이해하는 것은 매우 중요합니다.

WordPress는 템플릿 계층구조(Template Hierarchy)를 사용하여 다양한 페이지 요청에 맞게 어떤 템플릿 파일을 사용하여 페이지를 렌더링할지 결정합니다. 이러한 규칙을 이해하는 것은 테마 개발의 핵심입니다. 간단히 말해, 사용자가 특정 페이지에 접속하면 WordPress는 일정한 우선순위에 따라 매칭되는 템플릿 파일을 찾습니다. 가장 기본적인 원리는 다음과 같습니다: index.php그것은 모든 페이지에 대한 최종 복구(리커버리) 옵션입니다.

예를 들어, 블로그 글의 특정 내용을 조회할 때, WordPress는 먼저 해당 내용을 찾아냅니다. single-post.php만약 없다면, 찾아보세요. single.php만약 아직 없다면, 그때에만 사용됩니다. index.php기사 목록을 표시하는 페이지에 대해서는, 해당 페이지에서 순차적으로 검색을 진행합니다. home.php、front-page.php、index.php。

기능이 완전한 블로그 테마를 구현하기 위해서는 적어도 다음과 같은 몇 가지 핵심 템플릿 파일을 만들어야 합니다:header.php(웹사이트 헤더)footer.php(웹사이트 푸터)sidebar.php(사이드바, 선택 사항)index.php(주요 콘텐츠 인덱스)single.php(단일 기사)page.php(단일 페이지) 그리고 style.css(스타일시트).

추천 읽기 어떻게 제로부터 사용자 정의 WordPress 테마를 개발할 수 있을까요?。

통과합니다. get_header()、get_footer() 그리고 get_sidebar() 이러한 템플릿 함수들을 통해 일반적인 코드를 모듈화하여 코드의 재사용을 실현할 수 있습니다. 주 템플릿 파일은 다음과 같습니다: index.php 그 구조가 이로 인해 매우 명확해질 것입니다.

<?php get_header(); ?>

<main id="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
        endwhile;
    else :
        // 没有找到内容的提示
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

이러한 모듈화된 설계 방식은 코드의 유지보수를 더 용이하게 만들 뿐만 아니라, 다양한 유형의 페이지에 맞는 특정 헤더와 푸터를 쉽게 생성할 수 있도록 해줍니다.

실습 개발: 메인 루프 생성 및 글 내용 호출하기

모든 블로그 테마의 핵심은 “The Loop”입니다. 이는 WordPress가 데이터베이스에서 글의 내용을 가져와 페이지에 표시하기 위해 사용하는 PHP 코드 구조입니다. The Loop 내에서는 일련의 템플릿 태그(Template Tags)를 사용하여 글의 제목, 내용, 작성자, 날짜 등의 정보를 출력할 수 있습니다.

호스팅닷컴 공유 호스팅
AMD EPYC CPU, NVMe SSD 스토리지 및 LiteSpeed를 통한 고성능, 연중무휴 24시간 전문가 사내 지원, SSL, 무차별 공격, 멀웨어 및 DDoS 보호를 포함한 고급 보안 조치, 최대 73%의 비용 절감.
호스팅닷컴 로고 액세스 페이지

자, 가장 기본적인 것부터 시작해 봅시다.index.php파일에서, 메인 루프 내에서 기사 목록을 표시합니다.

<div class="content-area">
    <main class="site-main">
        、《PHP》 만약 (have_posts()) がある なら:
            <header class="page-header">
                <h1 class="page-title">최신 기사</h1>
            </header>
            <?php
            while ( have_posts() ) : the_post();
            ?>
                <article no numeric noise key 1011 id="post-<?php the_ID(); ?>">
                    <h2 class="entry-title">
                        <a href="/ko/</?php the_permalink(); ?>">
                            
                        </a>
                    </h2>
                    <div class="entry-meta">
                        게시일:<time datetime="<?php echo get_the_date( 'c' ); ?>"><?php echo get_the_date(); ?></time> | 作者：
                    </div>
                    <div class="entry-content">
                        <?php the_excerpt(); // 输出文章摘要 ?>
                    </div>
                </article>
            <?php
            endwhile;
            // 输出分页导航
            the_posts_navigation();
        else :
            ?>
            <p>죄송합니다. 해당 내용에 관한 기사를 찾을 수 없었습니다.</p>
        
    </main>
    <?php get_sidebar(); ?>
</div>

위 코드에서, 우리는… have_posts() 그리고 the_post() 순환 구조를 구축하기 위해 템플릿 태그를 사용합니다. the_title()、the_permalink()、the_excerpt() 등은 해당 콘텐츠를 출력하는 데 사용됩니다.post_class() 이 함수는 기사 콘텐츠를 담는 컨테이너에 매우 유용한 CSS 클래스들을 자동으로 생성해 줍니다. 이를 통해 스타일 디자인을 보다 쉽고 효율적으로 진행할 수 있습니다.

단일 기사에 대해서는 다음과 같은 작업을 해야 합니다: single.php그 구조는 인덱스 페이지와 비슷하지만, 보통은 한 편의 기사만 순환하여 그 내용을 전체적으로 표시합니다.the_content())。

추천 읽기 WordPress 테마 개발 입문 가이드: 제로에서 시작하여 사용자 정의 테마를 구축하는 방법。

<?php get_header(); ?>

<main id="primary">
    <?php
    while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content', 'single' );
    endwhile;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

여기서 더 강력한 함수가 도입되었습니다. get_template_part()이것은 테마 디렉터리에 위치한 다른 템플릿 파일을 로드하는 데 사용됩니다. 예를 들어,get_template_part( 'template-parts/content', 'single' ); 우선적으로 로드됩니다. template-parts/content-single.php 파일이 존재하지 않는 경우, 해당 파일을 로드합니다. template-parts/content.php이를 통해 코드의 구조가 더욱 명확해지고 재사용성도 향상되었습니다.

주제 기능 향상 및 모범 사례

기본 테마가 완성되면, 테마 기능 파일을 추가하고 모범 사례를 따르는 방식으로 그 테마를 더욱 강력하고 안정적으로 만들 수 있습니다. 가장 중요한 파일 중 하나는… functions.php。

InterServer 공유 호스팅
공유 호스팅 월 $2.50 USD, 첫 달 $0.1 USD 프로모션 코드 tryinterserver, 461개 클라우드 앱 스크립트, 원클릭 설치.
인터서버(InterServer) 로고 액세스 페이지

주제에 관한functions.php파일은 필수적인 것은 아니지만, 주제(테마)에 기능을 추가하거나 특정 기능을 등록하고 WordPress의 코어 API와 상호작용할 수 있도록 해줍니다. 이 파일은 주제의 “플러그인”과 같은 역할을 하지만, 주제와 직접 연결되어 있습니다. 여기서 해야 할 일은 내용을 직접 출력하는 것이 아니라, 해당 기능을 “등록”하고 “선언”하는 것입니다.

한 개의 표준적인…functions.php다음과 같은 내용들을 포함해야 합니다:

1. 등록 메뉴: 사용하기 register_nav_menus() 함수.
2. 등록용 사이드바: 사용하기 register_sidebar() 함수.
3. 주제 기능 추가: 사용 가능 add_theme_support() 이 함수는 기사의 특징적인 이미지나 사용자 정의 로고와 같은 핵심 기능들을 활성화하는 역할을 합니다.
4. 스타일과 스크립트 로드하기: 사용하기 wp_enqueue_style() 그리고 wp_enqueue_script() 函数，并正确地使用 wp_enqueue_scripts 후크(Hook).

__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载谷歌字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap', array(), null );
    // 加载主 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

// 注册一个右侧边栏
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '主侧边栏', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', 'my-first-theme' ),
        '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' );
?&gt;

이러한 모범 사례들을 따르세요: 훅(hook)을 사용하여 기능을 추가하고, 리소스를 올바르게 순서대로 로드하며, 번역 함수를 활용하세요. __() 그리고 _e() 주제를 국제화함으로써 주제의 보안성과 효율성을 보장하고, WordPress 공식 개발 표준을 준수할 수 있습니다.

요약

“Create a document that contains…” style.css 그리고 index.php 기본 폴더부터 시작하여, 여러분은 커스텀 WordPress 테마를 구축하는 주요 과정을 거치셨습니다. 우리는 템플릿 계층 구조에 대해 자세히 살펴보았으며, WordPress가 어떻게 다양한 페이지를 렌더링하기 위해 적절한 템플릿 파일을 지능적으로 선택하는지 이해했습니다. 또한 메인 루프의 구축을 실습하며, 다양한 템플릿 태그를 사용하여 콘텐츠를 동적으로 출력하는 방법을 배웠습니다. 마지막으로… functions.php 이 주제에 더 강력한 기능과 표준화된 구조가 적용되었습니다. 비록 이것이 단지 시작점에 불과하지만, 이를 통해 더 많은 템플릿 파일을 추가하고, 더 풍부한 스타일과 상호작용 기능을 구현함으로써 귀하나 고객의 요구사항에 완전히 부합하는 독특한 웹사이트를 만들어 나갈 수 있는 문을 열어줍니다.

자주 묻는 질문

테마 개발을 하려면 반드시 PHP를 알아야 하나요?

네, WordPress 테마를 심층적으로 개발하려면 기본적인 PHP 지식이 필요합니다. WordPress는 PHP로 구축되었기 때문에 모든 템플릿 파일, 함수 호출, 데이터 처리 로직이 PHP와 밀접하게 연관되어 있습니다. 초보자라면 PHP의 기본 문법, 변수, 배열, 반복문, 조건문, 함수 등을 반드시 숙지해야 합니다.

내 테마를 모바일 기기에 최적화하려면 어떻게 해야 하나요?

테마에 반응형 디자인을 적용하는 것은 현대 웹사이트의 기본적인 요구사항입니다. CSS 미디어 쿼리(Media Queries)를 사용하여 다양한 화면 너비에 맞게 레이아웃과 스타일을 조정해야 합니다. 개발 시에는 항상 “모바일 우선(Mobile First)” 전략을 따르는 것이 중요합니다. 먼저 작은 화면에 적합한 스타일을 작성한 다음, 미디어 쿼리를 통해 더 큰 화면에 추가적인 스타일을 적용하거나 기존 스타일을 재정의해 나가야 합니다.

개발 및 테스트 작업을 효과적으로 수행하는 가장 좋은 방법은 무엇인가요?

테마 개발은 로컬 개발 환경에서 진행하는 것을 강력히 권장합니다. Local by Flywheel, XAMPP, MAMP 또는 Docker와 같은 도구를 사용하여 로컬 서버 환경을 설정하면 온라인 웹사이트에 영향을 주지 않고 빠르게 반복적으로 개발하고 테스트할 수 있습니다. 또한, WordPress의 관련 기능들을 활성화하여 개발 과정을 더욱 효율적으로 진행할 수 있습니다. WP_DEBUG 모드는 매우 중요합니다. 모드를 통해 PHP 오류와 경고를 화면에 표시할 수 있어, 코드 문제를 즉시 발견하고 수정하는 데 도움이 됩니다.

어떤 프론트엔드 기술들을 익혀야 할까요?

PHP 외에도 HTML과 CSS를 숙련하게 다룰 필요가 있습니다. 이 두 가지는 웹 페이지의 구조와 스타일을 정의하는 데 기본이 되는 기술들입니다. 보다 복잡한 상호작용 및 동적인 효과를 구현하기 위해서는 JavaScript에 대한 지식도 매우 중요합니다. 특히, WordPress에서 JavaScript 파일을 안전하고 올바르게 도입하고 사용하는 방법을 배우는 것이 중요합니다. wp_enqueue_script), 그리고 WordPress에 내장된 JavaScript 라이브러리를 사용하는 방법을 배우세요.

다음 단계는 무엇인가요?

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

확장된 독서 및 실무 지식

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

태그.