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

How to Create a Custom WordPress Theme: A Complete Step-by-Step Guide from Scratch

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

워드프레스 테마의 기본 구조를 이해하세요.

코딩을 시작하기 전에, WordPress 테마의 기본 구성을 이해하는 것이 매우 중요합니다. 테마는 단순한 스타일시트 모음이 아니라, 특정 표준을 따르는 일련의 템플릿 파일들로 구성된 유기적인 전체입니다. 이러한 파일들은 함께 작동하여 WordPress에 웹사이트 콘텐츠를 어떻게 표시할지 지시합니다. 테마 디렉터리는 보통 다음과 같은 위치에 있습니다: /wp-content/themes/당신이 생성하는 각 주제에는 독립적인 폴더가 있어야 합니다.

가장 기본적인 WordPress 테마는 단 두 개의 파일만 필요합니다:style.css 그리고 index.php그중에서,style.css 스타일 설정뿐만 아니라, 해당 파일의 헤더에 포함된 주석 블록은 테마의 “신분증”과도 같은 역할을 합니다. 이 주석 블록을 통해 WordPress에 테마의 이름, 저자, 설명 등의 정보를 명시할 수 있습니다. index.php 이 파일은 기본적인 메인 템플릿 파일로, 더 구체적인 템플릿과 일치하는 것이 없을 때 WordPress가 페이지를 렌더링하는 데 사용됩니다.

하지만 기능이 완벽하게 구성된 사용자 정의 테마에는 더 많은 템플릿 파일이 포함되어 있으며, 각 파일은 특정 페이지나 기능에 해당합니다. 예를 들어,header.php 웹사이트의 헤더 영역을 정의합니다.footer.php 바닥 영역을 정의합니다.single.php 단일 기사를 표시하는 데 사용됩니다.page.php 독립적인 페이지를 표시하는 데 사용됩니다.functions.php 이는 특정 테마에 고유한 기능을 추가하고 다양한 구성 요소를 등록하는 데 사용됩니다.

추천 읽기 워드프레스 테마 개발 입문 가이드: 처음부터 자신만의 테마를 만들기。

WordPress는 템플릿 계층 시스템을 사용하여 특정 요청에 어떤 템플릿 파일을 사용할지 결정합니다. 이를 통해 웹사이트의 모든 페이지에 대해 개별적으로 코드를 작성할 필요가 없습니다. 다양한 계층의 템플릿 파일을 만들어 기사, 페이지, 카테고리, 작성자 페이지 등과 같은 다양한 유형의 콘텐츠가 어떻게 표시될지를 정확하게 제어할 수 있습니다. 이러한 계층 구조를 이해하는 것은 효율적으로 테마를 만드는 데 매우 중요합니다.

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

커스텀 테마를 개발하기 위한 환경을 설정하는 방법

파일을 직접 생성하기 전에, 로컬 개발 환경을 설정하는 것이 전문적인 작업 흐름의 첫 번째 단계입니다. 이를 통해 온라인 웹사이트에 영향을 주지 않고 개발 및 테스트를 진행할 수 있습니다. Local by Flywheel, XAMPP, MAMP, Docker와 같은 도구를 사용하면 로컬 컴퓨터에 Apache/Nginx, PHP, MySQL을 포함한 WordPress 환경을 빠르게 설정할 수 있습니다.

로컬 환경이 준비되면, WordPress 설치 디렉터리 내에서 필요한 작업을 진행해야 합니다. wp-content/themes 폴더 내에 새로운 폴더를 만드세요. 이 새로운 폴더의 이름은 여러분의 주제를 나타내는 식별자가 될 것입니다. 소문자, 숫자, 하이픈(-)을 사용하는 것이 좋으며, 기존 주제와 이름이 겹치지 않도록 주의하세요. 예를 들어, “my-new-topic”과 같은 이름을 사용하는 것이 좋습니다. my-custom-theme。

다음으로, 필수적인 첫 번째 파일을 생성하세요:style.css그 상단에 반드시 올바른 형식의 주제 정보 주석 블록을 추가해 주세요.

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始创建的自定义 WordPress 主题。
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

그런 다음, 마찬가지로 필수적인 것을 생성하세요. index.php 파일입니다. 처음에는 매우 간단할 수 있으며, 단지 한 줄의 HTML 코드만을 포함할 수도 있습니다.

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

<!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)”로 이동하세요. 그러면 사용 중인 테마가 목록에 표시될 것입니다. 해당 테마를 활성화한 후 웹사이트의 홈 페이지를 방문하면, 위 코드에서 출력된 간단한 메시지를 확인할 수 있습니다. 이는 사용자 정의한 테마가 성공적으로 적용되었음을 의미합니다.

주제의 핵심 템플릿 파일을 구축합니다.

실행 가능한 테마 프레임워크를 갖추었다면, 다음 단계는 그 프레임워크를 모듈화하고 WordPress의 핵심 기능을 활용하여 동적 콘텐츠를 처리하는 것입니다. 모듈화의 핵심은 재사용 가능한 부분들을 별도의 템플릿 파일로 분리하는 것입니다.

헤더(Header) 및 푸터(Footer) 템플릿을 생성합니다.

먼저, 우리는… index.php 중간의 코드를 분리하여 상단과 하단 부분으로 나누세요. 새로운 파일을 생성하고 그 파일의 이름을 ‘header_and_bottom_code.js’로 지정하세요. header.php일부 합계의 시작 부분을 안쪽으로 이동시키세요.

호스팅닷컴 공유 호스팅
AMD EPYC CPU, NVMe SSD 스토리지 및 LiteSpeed를 통한 고성능, 연중무휴 24시간 전문가 사내 지원, SSL, 무차별 공격, 멀웨어 및 DDoS 보호를 포함한 고급 보안 조치, 최대 73%의 비용 절감.
호스팅닷컴 로고 액세스 페이지 
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    
</head>
<body no numeric noise key 1004>

<header id="masthead" class="site-header">
    <h1 class="site-title"><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
    <p class="site-description"></p>
</header>

다음으로, 만들어보자. footer.php 파일에 바닥글 콘텐츠와 닫는 태그를 추가합니다.

<footer id="colophon" class="site-footer">
    <p>©  . 판권 소유.</p>
</footer>

</body>
</html>

그런 다음, 수정하세요. index.phpWordPress의 템플릿을 사용하여 함수를 호출할 수 있습니다.

<main id="primary" class="site-main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 文章内容输出将在这里
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    else :
        _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' );
    endif;
    ?&gt;
</main>

Create article and page templates.

기사와 페이지의 다양한 레이아웃을 구현하기 위해, 다음과 같은 방법을 사용할 수 있습니다: single.php 단일 기사를 처리하는 것뿐만 아니라, page.php 독립적인 페이지들을 처리해야 합니다. 이 페이지들의 기본 구조는 비슷하지만, WordPress의 조건부 태그를 활용할 수 있습니다. is_single() 그리고 is_page() 필요할 때는 구별을 해야 합니다.
Create one. functions.php 이 파일은 매우 중요하며, 테마 기능을 향상시키는 데 사용됩니다. 이 파일을 통해 메뉴와 사이드바(툴바 영역)를 등록하고, 기사의 썸네일이나 사용자 정의 제목 태그와 같은 테마 관련 기능을 추가할 수 있으며, 스타일시트 및 스크립트 파일도 관리할 수 있습니다.

추천 읽기 워드프레스 테마 최종 가이드: 선택, 사용자 정의, 개발에 이르는 완전한 솔루션。

<?php
function my_custom_theme_setup() {
    // 让 WordPress 负责管理文档标题标签
    add_theme_support( 'title-tag' );
    // 启用文章和页面特色图像
    add_theme_support( 'post-thumbnails' );
    // 注册一个主菜单
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

function my_custom_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
    // 排入自定义脚本
    wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );
?>

앱 스타일 적용 및 인터랙티브 기능 추가

기능 중심의 테마라 할지라도, 사용성과 가독성을 보장하기 위해서는 기본적인 스타일이 필요합니다. style.css 기존의 주 스타일 시트를 기반으로 확장하여, 반응형 레이아웃과 시각적으로 매력적인 인터페이스를 만들어냅니다.

기본적인 반응형 디자인을 구현하기

먼저 일부 CSS 설정을 초기화하고 기본 스타일을 정의한 다음, 모바일 기기에 최적화된 반응형 디자인을 위한 미디어 쿼리를 작성하세요.

InterServer 공유 호스팅
공유 호스팅 월 $2.50 USD, 첫 달 $0.1 USD 프로모션 코드 tryinterserver, 461개 클라우드 앱 스크립트, 원클릭 설치.
인터서버(InterServer) 로고 액세스 페이지 
/* style.css */
/* 基础重置与样式 */
* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
/* 移动端响应式 */
.site-header, .site-footer {
    padding: 1rem 0;
    text-align: center;
}
/* 平板及以上设备 */
@media (min-width: 768px) {
    .site-main {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }
}

Create a navigation menu script

모바일 메뉴를 인터랙티브하게 만들기 위해 간단한 JavaScript 파일을 만들 수 있습니다. 먼저, header.php 중에서 메뉴 버튼에 HTML 구조를 추가한 다음, /js/navigation.js 제어 로직을 추가하세요.

// /js/navigation.js
document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.querySelector('.menu-toggle');
    const primaryMenu = document.querySelector('#primary-menu');

if (menuButton) {
        menuButton.addEventListener('click', function() {
            primaryMenu.classList.toggle('toggled');
            this.setAttribute('aria-expanded', 
                this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
            );
        });
    }
});

마지막으로, WordPress의 커스터마이저 API를 활용하거나 테마 옵션 페이지를 만들어 사용자에게 사이트 색상이나 로고 업로드와 같은 간단한 커스터마이징 옵션을 제공할 수 있습니다. 이는 일반적으로 테마 설정 파일이나 관리자 패널을 통해 이루어집니다. functions.php 중국에서 사용하세요. add_theme_support 관련 API 함수를 사용하여 구현합니다.

요약

커스텀 WordPress 테마를 제로부터 만드는 것은 체계적인 학습 과정입니다. 이를 위해서는 PHP, HTML, CSS, JavaScript의 기초 지식뿐만 아니라 WordPress의 핵심 아키텍처와 API에 대한 이해도 필요합니다. 전체 과정은 기본적인 설정을 구축하는 것부터 시작됩니다. style.css 그리고 index.php 먼저, 모듈화를 통해 헤더, 푸터, 사이드바 등의 템플릿 파일을 분리합니다. 그런 다음 템플릿 계층 시스템을 활용하여 콘텐츠의 표시를 정확하게 제어합니다. functions.php 워드프레스 테마에는 다양한 기능들이 내장되어 있으며, 필요에 따라 다양한 컴포넌트들을 추가할 수 있습니다. 최종적으로는 반응형 CSS와 필요한 JavaScript 스크립트를 사용하여 테마를 더욱 아름답고 사용자 친화적으로 만들 수 있습니다. 이러한 접근 방식을 따르면 독특한 웹사이트 디자인을 만들 수 있을 뿐만 아니라, 워드프레스의 작동 원리를 더 깊이 이해하고, 보다 고급된 테마나 플러그인 개발을 위한 탄탄한 기반을 마련할 수 있습니다.

자주 묻는 질문

WordPress 테마를 만들기 위해서는 어떤 프로그래밍 언어들을 숙달해야 할까요?

완전한 기능을 갖춘 WordPress 테마를 만들기 위해서는 몇 가지 핵심 기술을 숙달해야 합니다. PHP가 가장 중요한데, 이는 WordPress 자체가 PHP로 작성되었기 때문이며 모든 템플릿 파일과 논리 처리가 PHP에 의존하기 때문입니다. HTML은 페이지 구조를 구성하는 데 사용되며, CSS는 스타일과 레이아웃을 제어하여 테마의 외관과 반응형 디자인을 보장합니다. JavaScript(주로 jQuery)는 메뉴 전환, 슬라이드 쇼와 같은 프론트엔드 인터랙션 효과를 추가하는 데 사용됩니다.

커스텀 테마를 사용하는 것과 기존 테마나 페이지 빌더를 사용하는 것의 주요 차이점은 무엇인가요?

커스텀 테마는 최대한의 유연성과 독창성을 제공합니다. 웹사이트의 모든 코드, 기능, 성능을 완전히 제어할 수 있어 특정 브랜드 및 비즈니스 요구사항에 맞는 웹사이트를 만들 수 있으며, 일반적으로 코드도 더 간결하고 효율적입니다. 반면에 기존 테마나 페이지 빌더를 사용하면 초기 설정이 빠르긴 하지만, 불필요한 코드가 많이 포함되어 있거나, 커스터마이징 옵션이 제한적이며, 플러그인에 대한 의존성이 높고, 웹사이트의 동질성이 증가할 수 있는 위험이 있습니다. 따라서 독특한 브랜드 이미지, 특정 기능, 또는 고성능이 요구되는 프로젝트에는 커스텀 테마가 더 적합합니다.

내가 만든 커스텀 테마를 WordPress 공식 표준에 맞게 만들려면 어떻게 해야 하나요?

당신의 테마가 WordPress 核心 표준에 준수하고 공식 디렉토리에 포함되려면, 'WordPress 테마 개발 매뉴얼'을 엄격히 준수해야 합니다. 이에는 올바른 템플릿 계층 구조를 사용하고, 모든 동적 데이터 출력에 대한 국제화(i18n) 및 지역화 처리를 적용하며, 모든 사용자 입력 및 출력을 안전하게 처리하고, WordPress 코딩 표준을 준수하는 테마 코드를 제공하며, A11y 지원을 제공하며, 테마가 핵심 기능을 온/오프 할 때에도 잘 작동되도록 하는(테마 유니트 테스트) 것이 포함됩니다.

개발 주제를 다룰 때, functions.php 파일의 주요 역할은 무엇인가요?

functions.php 파일은 당신의 테마의 “기능 工具箱'입니다. 이는 페이지의 직접적인 출력을 생성하는 데 사용되지 않지만, 테마의 기능과 동작을 정의하는 데 사용됩니다. 주요 기능에는 후크(Hooks)를 통해 WordPress 핵심 기능을 추가하거나 수정하고, 네비게이션 메뉴 위치와 사이드바(위젯 영역)를 등록하며, 테마에 특정 기능(예: 게시물 미리보기, 사용자 정의 로고)을 추가하고, 테마의 스타일시트와 JavaScript 스크립트 파일을 안전하게 포함시키는 것이 포함됩니다. 이는 당신의 테마 외관과 WordPress 백엔드 기능을 연결하는 중요한 다리 역할을 합니다.

다음 단계는 무엇인가요?

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

확장된 독서 및 실무 지식

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

태그.