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

워드프레스 테마 개발을 위한 입문자를 위한 완전한 가이드: 0부터 1까지 첫 번째 테마를 만들기

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

환경 준비 및 기본 개념

코드를 작성하기 시작하기 전에, 적합한 로컬 개발 환경이 필요합니다. Local by Flywheel, XAMPP 또는 MAMP와 같은 통합된 로컬 서버 소프트웨어 패키지를 사용하는 것을 권장합니다. 로컬 사이트에 WordPress의 핵심 파일들이 이미 설치되어 있어야 합니다.

모든 WordPress 테마는 두 개의 가장 기본적인 파일을 반드시 포함해야 합니다:style.css 그리고 index.php。style.css 스타일시트뿐만 아니라, 테마의 “신분증”과도 같은 역할을 합니다. 이 테마는 특별한 파일 헤더(Theme Header)를 통해 WordPress에 자신의 정보를 알립니다.index.php 이 파일은 주제의 기본 템플릿 파일로, 특정 템플릿이 지정되지 않은 모든 페이지 요청을 처리하는 역할을 합니다.

일반적인 테마의 디렉터리 구조는 명확한 계층 구조를 따릅니다. 핵심 템플릿 파일은 보통 테마의 루트 디렉터리에 직접 위치하며, CSS, JavaScript, 이미지 리소스들은 각각 별도의 디렉터리에 저장됩니다. /css、/js 그리고 /images 이러한 하위 디렉터리 내에서는, 더 복잡한 주제에 대한 내용도 찾아볼 수 있습니다. /template-parts 디렉터리는 재사용 가능한 템플릿 조각들을 저장하는 데 사용됩니다./inc 디렉터리는 기능이 향상된 파일들을 저장하는 데 사용됩니다.

추천 읽기 WordPress 테마 개발의 궁극적인 가이드: 제로에서 시작하여 사용자 정의 템플릿을 구축하는 방법。

워드프레스 테마 계층을 이해하기

WordPress는 “템플릿 계층구조”(Template Hierarchy)라는 지능형 시스템을 사용하여 특정 페이지에 어떤 템플릿 파일을 사용할지 결정합니다. 이 시스템은 테마 개발의 핵심 논리입니다.

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

예를 들어, 사용자가 블로그의 홈페이지를 방문하면 WordPress는 먼저 ‘example’이라는 이름의 파일이 있는지를 확인합니다. front-page.php 해당 파일이 없다면, 프로그램은 계속해서 다른 파일을 찾을 것입니다. home.php만약 여전히 문제가 해결되지 않는다면, 결국 기본 설정으로 돌아가게 됩니다. index.php단일 글에 대한 WordPress의 검색 순서는 다음과 같습니다:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。

템플릿 계층 구조를 잘 이해하고 활용하면 블로그 글, 정적 페이지, 분류별 아카이브, 검색 결과 페이지 등 다양한 유형의 페이지에 맞춰 매우 맞춤화된 레이아웃과 외관을 쉽게 만들 수 있습니다. 이를 위해 복잡한 조건 판단 로직을 작성할 필요가 없습니다.

주제 정보 선언문

style.css 파일의 시작 부분에는 반드시 CSS 주석 형식의 헤더 정보가 포함되어야 하며, 이 정보는 주제에 대한 메타데이터를 정의하는 데 사용됩니다. 최소화된 예시는 다음과 같습니다:

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是我的第一个 WordPress 主题，用于学习主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

여기서 “Text Domain”은 국제화를 위해 사용되며, 이후 번역 함수를 호출할 때 반드시 사용해야 하는 식별자입니다. 이 파일의 헤더 부분은 WordPress가 귀하의 테마를 인식하고 활성화하는 데 유일한 기준이 됩니다.

추천 읽기 WordPress 테마 개발 입문부터 전문가 수준까지: 맞춤형 웹사이트 구축을 위한 핵심 가이드。

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

가장 중요한 템플릿 파일부터 시작하여 구축해 봅시다. 먼저… index.php 기본 구조를 중심으로 문서를 작성하세요. 표준 템플릿 파일은 헤더, 메인 콘텐츠 영역, 사이드바, 푸터에 대한 참조를 포함해야 합니다.

기본 템플릿 파일에는 일반적으로 다음과 같은 WordPress 코어 함수 호출들이 포함되어 있습니다:get_header()、get_footer()、get_sidebar() too get_template_part()이러한 함수들은 해당 템플릿 파일을 가져와 페이지 구조를 모듈화합니다.

Header template creation

header.php 이 파일에는 모든 페이지의 상단에 표시되는 내용이 포함되어 있습니다. 이 파일은 최소한 HTML5 문서 유형 선언을 포함해야 합니다. <!DOCTYPE html>、<head> 지역 및 페이지 본문이 시작되는 부분입니다. <body> 及 <header> 태그.

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

In <head> 이 지역에서 매우 중요한 것은 사용하는 것입니다. wp_head() 후크(hook)입니다. 이 후크를 사용하면 WordPress 코어, 플러그인, 그리고 여러분이 사용하는 테마 자체가 페이지 헤더에 스타일시트 링크, 메타 태그, 스크립트와 같은 필수 코드를 삽입할 수 있습니다. 간단한 헤더 템플릿 예시는 다음과 같습니다:

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

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

body_class() 이 함수는 현재 페이지의 유형에 따라 일련의 CSS 클래스 이름을 출력하여 스타일 제어에 큰 편의를 제공합니다.

메인 루프를 생성하고 콘텐츠를 표시합니다.

WordPress는 “The Loop”이라는 메커니즘을 사용하여 현재 검색된 글 목록을 순회하고 표시합니다. The Loop는 템플릿 파일에서 가장 핵심적인 부분으로, 대부분의 경우 템플릿 파일의 시작 부분에 위치합니다. index.php、single.php 또는 archive.php 가운데.

추천 읽기 WordPress 테마 개발 마스터하기: 제로에서 시작하는 완전한 구축 및 적용 가이드。

전형적인 메인 루프 구조는 다음과 같습니다:

만일 게시물이 있다면: ?&gt;
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
            <div class="entry-content">
                
            </div>
        </article>
     

    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>

반복문 내부에서는 “the_”로 시작하는 일련의 템플릿 태그들을 사용할 수 있습니다. the_title()、the_content()、the_excerpt() 그리고 the_post_thumbnail(), 기사의 각 부분을 출력합니다.

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

스타일과 기능을 추가합니다.

주제의 시각적 표현은 CSS에 의해 제어됩니다. style.css 스타일을 직접 코드로 작성하는 것 외에도, 더 전문적인 방법은 외부 파일을 사용하는 것입니다. 예를 들어, CSS(Cascading Style Sheets) 파일을 만들어 스타일을 정의하고, 이 파일을 웹 페이지에 참조하는 것이죠. 이 방식을 사용하면 스타일을 더 쉽게 관리하고 재사용할 수 있습니다. functions.php 파일들은 스타일시트와 스크립트를 순서대로 로드하기 위해 대기열에 올라가며, 이를 통해 올바른 의존 관계와 로딩 순서가 보장됩니다.

functions.php 이 파일은 귀하의 테마와 관련된 “기능 향상 도구”입니다. 이 파일은 템플릿 파일이 아니며, 테마가 초기화될 때 자동으로 로드되는 PHP 파일로서 함수, 클래스, 후크(Hooks), 필터(Filters)를 정의하는 데 사용됩니다.

스타일과 스크립트를 올바르게 가져오는 방법입니다.

당신은 다음을 사용해야 합니다: wp_enqueue_style() 그리고 wp_enqueue_script() 이 함수들은 리소스를 추가하는 역할을 합니다. 이러한 함수들은 반드시 적절한 위치에 마운트되어야 합니다. wp_enqueue_scripts 이 동작은 ‘후크(hook)’를 통해 이루어집니다. 이렇게 하는 장점은 WordPress가 리소스를 통합적으로 관리할 수 있어, 중복 로딩이나 의존성 충돌을 방지할 수 있다는 것입니다.

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
    // 加载一个自定义的 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' );

등록 메뉴와 사이드바

WordPress의 메뉴와 사이드바(툴바 영역)는 먼저 설정해야 합니다. functions.php 먼저 “등록”을 해야만 해당 템플릿 파일에서 내용을 “표시”할 수 있습니다.

활용 register_nav_menus() 함수를 사용하여 메뉴 항목의 위치를 등록합니다:

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

그런 다음, header.php 여기서 당신은 사용할 수 있습니다. wp_nav_menu() 함수를 사용하여 메인 메뉴를 표시합니다.

활용 register_sidebar() `function to register the widget area:`

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( 'Main Sidebar', 'my-first-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( 'Add widgets here.', '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() 이 함수를 사용하여 해당 영역을 호출합니다.

주제 테스트 및 배포 (Theme Testing and Deployment)

개발이 완료된 후에는 반드시 전면적인 테스트를 실시해야 합니다. 여기에는 다양한 브라우저(Chrome, Firefox, Safari, Edge)와 다양한 기기 크기(데스크톱, 태블릿, 스마트폰)에서 테마의 표시效果를 확인하는 작업이 포함됩니다. 모든 링크가 정상적으로 작동하는지, 폼 기능이 제대로 작동하는지, 그리고 메뉴가 작은 화면에서도 올바르게 반응하는지를 확인해야 합니다.

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

개발 과정에서 WordPress의 디버깅 모드를 활성화하는 것을 강력히 권장합니다. 이를 통해 PHP 오류, 경고, 알림을 신속하게 발견할 수 있습니다. wp-config.php 파일에서 다음 줄을 찾아서 수정하세요:

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

열다 WP_DEBUG_LOG 오류 메시지를 로그 파일에 기록함으로써 민감한 정보가 웹사이트 방문자에게 직접 노출되는 것을 방지할 수 있습니다.

주제 표준을 검토합니다.

테마를 게시하거나 사용하기 전에는 가능한 한 《WordPress 테마 개발 가이드라인》을 준수해야 합니다. 여기에는 다음 사항이 포함되지만 이에 국한되지 않습니다: 페이지에 출력되는 모든 데이터가 적절하게 이스케이프 처리되었는지 확인하는 것입니다(예: 특수 문자나 코드를 안전하게 표시하기 위해). esc_html()、esc_url() 등 함수), 모든 번역 가능한 텍스트는 사용됩니다. __() 또는 _e() 함수가 패키징되었으며, 주제 코드에는 하드코딩된 URL이 전혀 포함되어 있지 않습니다.

공식적인 “Theme Check” 플러그인을 사용하여 테마의 자동화된 규정 준수성 검사를 수행할 수 있습니다. 이 플러그인은 코드를 스캔하여 잠재적인 문제, 보안 취약점, 또는 표준과 일치하지 않는 부분을 식별해 줍니다.

발행 준비 중입니다.

주제 개발, 테스트, 검토가 모두 완료되면, 그 주제를 WordPress.org의 주제 디렉터리에 게시하거나 개인 또는 고객이 사용할 수 있도록 패키지로 만들 수 있습니다. 게시용 패키지에는 주제에 필요한 폴더와 파일만 포함되어야 하며, 모든 버전 관리 파일(예: Git 저장소 파일 등)은 제거되어야 합니다. .git개발 도구 설정 및 백업 파일도 함께 준비해야 합니다. 또한, 반드시 모든 것이 올바르게 구성되었는지 확인해야 합니다. style.css 중의 주제 정보가 완전하고 정확하며, 명확한 이미지 한 장도 준비되어 있습니다. screenshot.png(1200x900 픽셀) 주제 썸네일로 사용됩니다.

요약

“Create a document that contains…” style.css 그리고 index.php 기본 폴더부터 시작하여 템플릿의 구조를 이해하고, 핵심 템플릿 파일을 구축하며, 메인 루프를 사용하여 콘텐츠를 표시하는 방법을 배우고, 그 다음에는… functions.php 스타일, 스크립트, 기능을 추가한 후에는 엄격한 테스트와 표준화 검사를 거칩니다. 이것이 바로 기본적인 WordPress 테마를 구축하는 전체 과정입니다. 이 과정을 통해 사용 가능한 테마를 얻을 뿐만 아니라, 더 중요한 것은 WordPress 테마의 아키텍처에 대한 깊은 이해를 쌓을 수 있다는 점입니다. 이 기반을 바탕으로 커스텀 문서 유형, 테마 커스터마이저 API, 블록 에디터(Gutenberg) 지원과 같은 고급 기능을 탐구할 수 있으며, 점차 전문적인 WordPress 테마 개발자로 성장할 수 있습니다.

자주 묻는 질문

WordPress 테마는 최소 몇 개의 파일로 구성되어 있나요?

WordPress에서 인식되어 활성화될 수 있는 테마는 최소한 두 개의 파일을 필요로 합니다:style.css 그리고 index.php그중에서,style.css 올바른 주제 정보가 포함된 헤더 주석을 반드시 포함해야 합니다.

왜 제가 정의한 사용자 정의 스타일이 적용되지 않나요?

이런 문제는 대부분 CSS 선택자의 우선순위가 충분하지 않거나 스타일시트가 제대로 로드되지 않았기 때문에 발생합니다. 먼저, 브라우저의 개발자 도구를 사용하여 스타일시트 파일이 성공적으로 로드되었는지, 그리고 여러분의 CSS 규칙이 더 높은 우선순위를 가진 다른 규칙에 의해 덮어쓰이지 않았는지 확인해 보세요. 그 다음에는… functions.php 중국의 wp_enqueue_style() 스타일을 HTML에 직접 작성하는 대신, 함수를 사용하여 스타일을 로드합니다. <link> 태그.

주제에 사용자 정의 페이지 템플릿을 어떻게 추가하나요?

새로운 PHP 파일을 생성하세요. 예를 들어, 파일 이름을 `new_file.php`로 지정할 수 있습니다. page-fullwidth.php이 파일의 맨 위에 다음 PHP 주석을 추가하여 템플릿 이름을 선언하세요:<?php /* Template Name: 全宽页面 */ ?>그런 다음, 이 파일에 기본 페이지 템플릿과 다른 내용을 작성할 수 있습니다. page.php 레이아웃과 코드에 관한 내용입니다. 페이지를 생성하거나 편집할 때, “페이지 속성” 모듈에서 이 새로운 템플릿을 선택할 수 있습니다.

함수.php와 플러그인의 차이점은 무엇입니까?

functions.php 이 기능은 현재 사용 중인 테마와 긴밀하게 연결되어 있으며, 테마를 변경하면 해당 기능도 함께 변경됩니다.functions.php 해당 코드는 더 이상 적용되지 않을 것입니다. 플러그인이 제공하는 기능은 테마와는 독립적이므로, 어떤 테마를 사용하든 플러그인이 활성화되어 있으면 그 기능은 계속 사용할 수 있습니다. 일반적으로 웹사이트의 시각적 표현과 밀접하게 관련된 기능들은 테마에 포함되지만, 보다 일반적이고 독립적인 기능들은 플러그인으로 만드는 것이 더 적합합니다.

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

당신은 두 가지 일을 잘 해야 합니다: 번역 파일을 준비하고 로드하는 것입니다. 먼저, 코드 내에서 사용자에게 표시되는 모든 문자열(예: ('Read More', 'my-first-theme')모든 경우에는 다음과 같은 방법을 사용해야 합니다: () 또는 _e() 이러한 번역 함수를 패키징하고, 두 번째 매개변수(텍스트 영역)를 사용합니다. style.css 중에서 선언된 “Text Domain”과 일치해야 합니다. 그런 다음, Poedit와 같은 도구를 사용하여 생성하세요. .pot 템플릿 파일입니다. .po 그리고 .mo 파일입니다. 마지막으로, functions.php 중국에서 사용하세요. load_theme_textdomain() 함수를 사용하여 번역 파일을 로드합니다.

다음 단계는 무엇인가요?

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

확장된 독서 및 실무 지식

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

태그.