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

WordPress 테마 개발의 궁극적인 가이드: 제로에서 시작하여 첫 번째 커스텀 테마를 만들어보세요.

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

준비 작업 및 환경 구축

코드를 작성하기 시작하기 전에, 안정적이고 효율적인 로컬 개발 환경을 갖추는 것이 매우 중요합니다. 이를 통해 오프라인 상태에서 작업할 수 있을 뿐만 아니라, 온라인 서버에서 직접 작업할 때 발생할 수 있는 위험도 줄일 수 있습니다. 먼저, XAMPP, MAMP 또는 더 전문적인 Local by Flywheel과 같은 로컬 서버 환경을 설치해야 합니다. 이러한 도구들은 Apache, MySQL, PHP를 자동으로 설정해 주며, 이는 WordPress를 실행하는 데 필수적인 구성 요소들입니다.

다음으로, 최신 버전의 WordPress 코어 파일을 다운로드하여 로컬 서버에 설치해야 합니다. 기본 설치가 완료되면 자신만의 테마 디렉터리를 만들 수 있습니다. 모든 WordPress 테마는 해당 디렉터리에 위치해 있습니다. /wp-content/themes/ 디렉터리 내에 있습니다. 여기에 새로운 폴더를 만들어 주세요. 예를 들어, ‘new_folder’라는 이름으로 폴더를 만들 수 있습니다. my-first-theme이 폴더의 이름이 바로 당신의 주제를 나타내는 식별자입니다.

유효한 WordPress 테마는 적어도 두 개의 핵심 파일을 필요로 합니다:style.css 그리고 index.php。style.css 이 파일은 단순한 스타일시트가 아니라, 특정 테마의 “신분증”과도 같습니다. 파일의 헤더에 포함된 주석에는 해당 테마에 대한 모든 메타정보가 담겨 있습니다.

추천 읽기 전문 웹사이트 만들기: 제로에서 시작하여 사용자 정의 WordPress 테마를 개발하는 완전한 가이드。

Subject Style Sheet File Header Information

style.css 파일의 시작 부분에는 반드시 특정 CSS 주석을 포함해야 합니다. 이 주석은 WordPress에 여러분의 테마에 대한 정보를 제공하는 데 사용됩니다. 이 정보는 관리자 패널의 “외관” -> “테마” 설정 페이지에 표시됩니다.

UltaHost의 WordPress 호스팅 서비스
30일 환불 보장, 무제한 대역폭 및 데이터베이스 이용, 무료 DDoS 보호 서비스 제공. 3년 구매 시 50% 용량이 할인됩니다.
울타호스트(ULTAHost) 로고 액세스 페이지 
/*
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 국제화를 위해 사용되며, 주제 폴더의 이름과 일치해야 합니다. index.php 이 파일은 테마의 기본 템플릿 파일로, 모든 페이지의 기본 템플릿 역할을 합니다. 처음에는 WordPress가 해당 테마를 올바르게 인식하는지 테스트하기 위한 간단한 HTML 구조로만 구성될 수 있었습니다.

템플릿 계층을 이해하고 핵심 템플릿을 만드는 방법

WordPress는 “템플릿 계층(Template Hierarchy)”이라는 지능형 시스템을 사용하여 특정 페이지에 어떤 템플릿 파일을 로드할지 결정합니다. 이러한 규칙을 이해하는 것은 테마 개발의 핵심입니다. 간단히 말해, 사용자가 페이지를 방문하면 WordPress는 가장 구체적인 템플릿 파일부터 가장 일반적인 템플릿 파일까지 순서대로 해당 템플릿 파일을 찾습니다.

예를 들어, ID가 5인 블로그 글을 방문할 때, WordPress는 다음과 같은 순서로 검색을 수행합니다:single-post-5.php -> single-post.php -> single.php -> singular.php -> 마지막으로… index.php만약 일치하는 파일을 찾으면 그 파일을 사용하고, 그렇지 않으면 계속 아래로 검색을 진행합니다.

기사 단일 페이지 템플릿을 생성합니다.

single.php 이 템플릿은 단일 블로그 글을 표시하는 데 사용됩니다. 이 파일에서는 일련의 WordPress 코어 템플릿 태그와 함수를 사용하여 글의 내용을 출력하게 됩니다.

추천 읽기 WordPress 테마 개발 입문: 제로에서 시작하여 첫 번째 테마를 만들어보세요。

<main id="primary" class="site-main">
    <?php
    while ( have_posts() ) :
        the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1008>
            <header class="entry-header">
                <h1 class="entry-title"></h1>
                <div class="entry-meta">
                    게시 날짜:  | 작성자:
                </div>
            </header>
            <div class="entry-content">
                
            </div>
            <footer class="entry-footer">
                &lt;?php the_tags(&#039;标签：&#039;, &#039;, &#039;, &#039;<br>'); ?&gt;
            </footer>
        </article>
        <?php
        // 输出上一篇、下一篇文章导航
        the_post_navigation();
    endwhile;
    ?>
</main>

\n

이 템플릿은 사용했습니다. the_post() 전역 설정을 해보겠습니다. $post 변수를 사용한 다음, 그를 통해… the_title()、the_content() 이 함수는 기사 데이터를 출력합니다. 또한, 템플릿 구성 요소를 도입했습니다.get_header(), get_sidebar(), get_footer()。

페이지 템플릿을 생성합니다.

page.php 템플릿은 정적 페이지를 표시하는 데 사용됩니다. 그 구조는… single.php 비슷하지만, 일반적으로 분류나 태그와 같은 전형적인 기사 메타데이터는 포함되지 않습니다. 필요에 따라 더 많은 특정 페이지 템플릿을 만들 수 있습니다. 예를 들어, “회사 소개” 페이지를 위한 템플릿을 만들 수도 있습니다. page-about.php 해당 파일이 있을 경우, WordPress는 자동으로 이 파일의 내용을 “about”라는 제목이나 별칭 slug를 가진 페이지에 적용합니다.

템플릿 컴포넌트와 네비게이션 메뉴의 통합

코드의 모듈화와 재사용성을 유지하기 위해, WordPress 테마는 일반적으로 헤더, 푸터, 사이드바 등의 부분을 별도의 “템플릿 컴포넌트” 파일로 분리합니다. 이러한 방식을 사용함으로써… get_template_part() 함수를 사용하면 다양한 템플릿에서 이러한 구성 요소들을 쉽게 가져올 수 있습니다.

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

테마의 헤더 파일을 구성합니다.

header.php 이 파일에는 HTML 문서의 헤더 부분이 포함되어 있습니다. 지역)과 웹사이트 상단의 시각적 요소들, 예를 들어 로고와 메인 네비게이션 등입니다.

<!DOCTYPE html>
<html no numeric noise key 1010>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1007>

<header id="masthead" class="site-header">
    <div class="site-branding">
        <?php
        if ( has_custom_logo() ) {
            the_custom_logo();
        } else {
            ?>
            <h1 class="site-title"><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
            <p class="site-description"></p>
            <?php
        }
        ?>
    </div>
    <nav id="site-navigation" class="main-navigation">
        'menu-primary',
                'menu_id'        =&gt; 'primary-menu',
                'container'      =&gt; false,
            )
        );
        ?&gt;
    </nav>
</header>

핵심 함수 (Key Functions) wp_head() WordPress 코어, 플러그인 및 기타 스크립트가 페이지 헤더에 필요한 코드(예: CSS, JS 링크)를 추가할 수 있도록 허용합니다.wp_nav_menu() 이 함수는 등록된 네비게이션 메뉴를 출력하는 데 사용됩니다.

등록하기 메뉴의 위치 설정

네비게이션 메뉴는 먼저 테마의 “등록(Registration)” 섹션에서 설정해야 하며, 그 후 사용자는 백엔드의 “외관(Appearance)” -> “메뉴(Me menu)”에서 해당 메뉴를 할당할 수 있습니다. 이 과정은 일반적으로 테마 설정에서 이루어집니다. functions.php 파일 작업이 완료되었습니다.

추천 읽기 WordPress 테마 개발을 처음부터 배우기: 맞춤형 웹사이트를 만드는 완벽한 가이드。

function my_first_theme_setup() {
    // 注册一个主导航菜单
    register_nav_menus(
        array(
            'menu-primary' => esc_html__( '主导航', 'my-first-theme' ),
            'menu-footer'  => esc_html__( '页脚导航', 'my-first-theme' ),
        )
    );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持文章和评论的 RSS feed 链接
    add_theme_support( 'automatic-feed-links' );
    // 支持标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

register_nav_menus() 이 함수는 두 개의 메뉴 항목 위치를 등록했습니다. add_theme_support() 이 함수를 통해 사용자 정의 로고, 제목 태그 등의 기능을 활성화할 수 있으며, 이는 현대적인 WordPress 테마 개발의 표준적인 방법입니다.

주제 기능 및 스타일 고급 활용법

functions.php 이 파일은 여러분의 테마인 “제어 센터”(Control Center)로, 기능을 추가하거나 기본 동작을 수정하고, 스크립트 및 스타일시트를 로드하는 데 사용됩니다. 플러그인과 비슷한 역할을 하지만, 특별히 여러분의 테마에만 적용됩니다.

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

스타일과 스크립트를 안전하게 導入하세요.

올바른 스타일과 스크립트를 로드하는 방법은 다음과 같이 사용하는 것입니다: wp_enqueue_style() 그리고 wp_enqueue_script() 함수를 작성하고 이들을 매핑하십시오. wp_enqueue_scripts 이 동작은 훅에 연결되어 있습니다.

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
    // 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

이 방식을 통해 의존 관계가 올바르게 설정되며, 중복 로딩을 방지할 수 있습니다. 함수 get_stylesheet_uri() Return to the main page. style.css 그 URL에 대한 내용은… get_template_directory_uri() 주제 디렉터리의 URL을 반환합니다.

사이드바 툴바 영역을 생성합니다.

사이드바(Sidebar) 영역을 통해 사용자는 백엔드에서 콘텐츠 블록을 드래그 앤 드롭하여 자유롭게 설정할 수 있습니다. 사이드바를 등록하는 방법도 마찬가지입니다. functions.php 중에서 완료됩니다.

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

등록하시면 이용하실 수 있습니다. sidebar.php 템플릿 구성 요소 내에서 사용됩니다. dynamic_sidebar( 'sidebar-1' ) 이제 이 함수를 사용하여 해당 영역의 내용을 출력할 수 있습니다.

요약

이 가이드는 WordPress 테마 개발의 핵심 프로세스를 체계적으로 설명합니다. 로컬 개발 환경을 설정하고 기본 테마 파일을 생성하는 것부터, WordPress의 강력한 템플릿 계층 구조를 이해하고 구현하는 방법, 템플릿 컴포넌트를 통합하고 네비게이션 메뉴 및 위젯 영역을 등록하는 과정까지, 그리고 최종적으로… functions.php 주제 기능을 안전하고 효과적으로 확장하려면 다음 단계를 따르세요. 이러한 과정을 통해 구조가 명확하고 기능이 완전하며 WordPress 코딩 표준을 준수하는 커스텀 테마를 성공적으로 만들 수 있습니다. 이는 향후 더 복잡하고 기능이 풍부한 테마를 개발하는 데 필수적인 기반이 됩니다. 테마 개발은 지속적인 학습의 과정이라는 점을 기억하세요. 실습을 계속하고 공식 문서를 참고하는 것이 기술을 향상시키는 데 핵심입니다.

자주 묻는 질문

###: WordPress 템플릿 계층 구조란 무엇인가요?
템플릿 계층 구조는 WordPress가 다양한 유형의 페이지에 어떤 템플릿 파일을 사용할지 결정하는 데 사용되는 일련의 규칙입니다. 이는 구체적인 템플릿에서 일반적인 템플릿으로 찾아가는 순서를 의미합니다. 예를 들어, 특정 글에 대해 WordPress는 먼저 그 글의 ID나 글 유형에 맞는 템플릿을 찾습니다. 해당 템플릿을 찾을 수 없으면, 점차 더 일반적인 템플릿으로 순서를 역추적하여 최종적으로 적절한 템플릿을 찾게 됩니다. index.php구조가 올바른 주제를 만드는 데 있어 계층 관계를 이해하는 것이 매우 중요합니다.

왜 반드시 `wp_enqueue_style`을 사용하여 스타일을 로드해야 할까요?

활용 wp_enqueue_style() 그리고 wp_enqueue_script() 이는 WordPress 공식에서 추천하는 표준화된 리소스 로딩 방식입니다. 이 방식은 의존 관계를 올바르게 처리할 수 있으며(예: 사용자 정의 스크립트보다 jQuery가 먼저 로드되도록 보장), 동일한 리소스가 중복으로 로드되는 것을 방지합니다. 또한 캐싱 플러그인, 서브테마 등의 생태계와도 잘 호환됩니다. 템플릿 파일에서 직접 이 방식을 사용할 수 있습니다. 또는 태그를 사용하는 것은 권장되지 않는 방법입니다.

플러그인과 functions.php 파일의 차이점은 무엇입니까?

functions.php 파일은 테마의 일부이며, 해당 테마가 활성화되면 그 기능도 함께 활성화되고, 테마가 변경되면 그 기능도 비활성화됩니다. 파일은 주로 해당 테마의 시각적 표현 및 기능과 밀접하게 관련된 기능들을 추가하는 데 사용됩니다. 반면에 플러그인이 제공하는 기능은 일반적으로 테마와는 독립적이어서, 테마를 바꾸더라도 플러그인의 기능은 계속 사용할 수 있습니다. 일반적으로 어떤 기능이 테마의 스타일이나 레이아웃과 밀접하게 관련되어 있다면, 그 기능은 플러그인에 포함시키는 것이 좋습니다. functions.php만약 그 기능이 일반적으로 사용될 수 있는 기능이라면, 플러그인으로 만드는 것이 더 적합할 것입니다.

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

주제를 다국어로 지원하도록 만드는 것, 즉 국제화(i18n)를 구현하는 것은 다음과 같은 몇 가지 단계를 포함합니다: 먼저, style.css “의 헤더와 모든 내용” load_theme_textdomain() 호출 중에 올바르게 설정되었습니다. Text Domain둘째, functions.php 중에서 호출합니다. load_theme_textdomain() 함수를 사용하여 언어 파일의 디렉터리를 지정합니다. 마지막으로, 가장 중요한 단계는 테마의 모든 PHP 템플릿 파일에 이를 적용하는 것입니다. functions.php 여기서는 모든 사용자를 대상으로 하는 문자열에 WordPress의 번역 기능을 적용합니다. 예를 들어… esc_html__( ‘文本’, ‘my-first-theme’ ) 또는 _e( ‘文本’, ‘my-first-theme’ )완료된 후에는 Poedit와 같은 도구를 사용하여 파일을 생성할 수 있습니다. .pot 템플릿 파일은 번역가가 다양한 언어로 콘텐츠를 생성하는 데 사용됩니다. .po 그리고 .mo 파일.

다음 단계는 무엇인가요?

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

확장된 독서 및 실무 지식

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

태그.