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

WordPress 테마 개발 입문: 첫 번째 커스텀 테마를 단계별로 만드는 방법

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

준비 작업 및 환경 설정

첫 번째 코드를 쓰기 전에 적합한 개발 환경이 필요합니다. 이에는 로컬 서버 환경과 코드 편집기가 포함됩니다. XAMPP, MAMP 또는 Laragon과 같은 도구를 사용하여 로컬 서버를 설치하고 운영하면 Apache, MySQL 및 PHP를 한 번에 설치하고 실행할 수 있습니다. 또한, 비주얼 스튜디오 코드, 서블리임 텍스트 또는 PHP스토ーム 같은 코드 편집기를 선택하면 코드 하이라이트 및 자동 완성 기능으로 개발 효율성을 대폭 향상시킬 수 있습니다.

다음으로, 새 테마를 위한 디렉토리를 로컬 WordPress 설치에 만들어야 합니다. 모든 WordPress 테마는 다음 위치에 저장됩니다. /wp-content/themes/ 폴더 내에서. 이 폴더 안에, 당신이 만들려는 테마를 위한 새 폴더를 만들어 주세요. 예를 들면 이름을 달리는 것처럼. my-first-theme이 폴더의 이름이 바로 당신의 테마 아이디이며, 백그라운드의 테마 목록에 표시될 것입니다.

동시에, 워드프레스 테마 개발의 두 가지 기본 요소인 템플릿 파일과 스타일 시트 파일에 대한 이해가 필요합니다. 가장 기본적인 워드프레스 테마는 두 개의 파일만 필요합니다:style.css 그리고 index.php。style.css 그것은 웹사이트의 시각적 스타일뿐만 아니라, 파일 헤더의 주석 블록은 주제의 “신분증'이며, 주제 이름, 작성자, 설명 등의 메타 정보가 포함되어 있습니다.index.php 그것은 기본 주요 템플릿 파일입니다.

추천 읽기 워드프레스 테마 개발 완전 가이드: 기본부터 커스터마이즈된 테마 만들기。

핵심 주제 파일 만들기

주제 스타일 및 정보 정의

모든 것이 style.css 시작하려면 테마 폴더의 루트 디렉토리에 이 파일을 만들고 파일의 상단에 포맷된 주석 블록을 추가하세요. 이 주석 블록은 WordPress가 테마를 인식하고 로드하는 데 중요합니다. 아래 코드는 기본 스타일시트 헤더를 보여줍니다:

UltaHost의 WordPress 호스팅 서비스
30일 환불 보장, 무제한 대역폭 및 데이터베이스 이용, 무료 DDoS 보호 서비스 제공. 3년 구매 시 50% 용량이 할인됩니다.
울타호스트(ULTAHost) 로고 액세스 페이지 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个学习 WordPress 主题开发而创建的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

그중에서,Text Domain 국제화(i18n)를 위해 미래의 다국어 번역을 준비하십시오. 이 파일을 만들고 나면, WordPress 관리자의 “외관”->“테마” 페이지에서 당신의 테마를 볼 수 있을 것입니다. 비록 현재는 아무런 기능이 없겠지만요.

기본 템플릿 구조 만들기

다음으로 주제의 구조 파일을 만들어 보자. index.php이것은 가장 기본적인 템플릿입니다. 워드프레스가 더 구체적인 템플릿 파일을 찾을 수 없는 경우에 사용됩니다. single.php 또는 page.php그때 사용하게 됩니다. 가장 간단한 예시는… index.php 단순히 WordPress 헤더, 루프, 및 푸터의 기본 함수만 포함할 수 있습니다.

<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1008>
    
    <header>
        <h1><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
        <p></p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // 글의 내용을 출력합니다.
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            한편
        else :
            echo '<p>현재 글이 없습니다. </p>';
        endif;
        ? &gt;
    </main>

<footer>
        <p>©</p>
    </footer>
    
</body>
</html>

이 파일은 WordPress의 핵심 템플릿 태그를 사용합니다. bloginfo() 웹사이트 정보를 받습니다.the_title() 그리고 the_content() 루프 내에서 기사 제목과 내용을 출력하세요.wp_head() 그리고 wp_footer() 이것들은 매우 중요한 钩子이며, WordPress 코어, 플러그인, 그리고 다른 스크립트들이 페이지에 내용을 추가할 수 있게 해줍니다. <head> 그리고 <footer> 지역 인젝션 코드.

템플릿 분할 및 기능 도입

모듈식 템플릿 파일

"将" index.php 모든 코드를 하나의 파일에 쓰는 것은 코드를 유지 보수하기 어렵게 만든다. 최선의 방법은 여러 템플릿 파트(Template Parts)로 분할하는 것입니다. 코드 구조를 조직화하기 위해 다음 파일을 만들어 보세요:
* header.php저장하기 <head> 지역 및 웹사이트 상단 네비게이션 등과 같은 공용 헤더 콘텐츠.
* footer.php웹사이트 하단에 있는 저작권 정보 및 기타 공용 끝 내용을 저장합니다.
* sidebar.php사이드바 위젯 영역을 저장하려면 여기를 클릭하세요(선택 사항).
* functions.php주제의 기능 함수 파일.

추천 읽기 제로에서 시작하기: 사용자 정의 WordPress 테마 개발 방법을 단계별로 안내합니다.。

그런 다음, 사용하세요. get_header()、get_footer() 그리고 get_sidebar() 다음 함수들은 index.php 중국에서 그것들을 도입하세요. 개조된 후 index.php 핵심 부분은 매우 간단해질 것입니다:

<main>
    만일 게시물이 있다면 : while ( have_posts() ) : the_post(); ?&gt;
        <article>
            &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        </article>
    
        <p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
    
</main>

\n

우리가 사용한 것을 주의해 주세요. esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ) 번역이 완료된 텍스트를 출력하세요. 이것이 국제화의 표준 방법입니다.

테마 기능 향상

functions.php 파일은 당신의 테마의 “제어 센터'입니다. 테마가 지원하는 기능을 추가하고, 메뉴와 사이드바를 등록하고, 스타일 시트와 스크립트를 로드하는 데 사용됩니다. 이것은 템플릿 파일이 아니고, 테마가 초기화될 때 자동으로 로드됩니다.

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

아래는 기본적인 것입니다. functions.php 예시:

__( '기본 탐색 메뉴', 'my-first-theme' ),
    ) );

// HTML5 마크업 지원 추가
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // HTML5 마크업에 대한 지원 추가.

// 캡션 태그 지원 추가
    add_theme_support( 'title-tag' ); }
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 사이드바 위젯 영역 등록
function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name' =&gt; __( '메인 사이드바', 'my-first-theme' ),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __( '여기에 위젯 추가.' , '내 첫 번째 테마' ), 'description' =&gt; __( '여기에 위젯 추가".
        "before_widget" =&gt; "',
        'after_widget' =&gt; '</section>",
        "before_title' =&gt; '<h3 class="widget-title">',
        'after_title' =&gt; '</h3>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

// 테마의 스타일시트 로드
function my_first_theme_scripts() {
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get('Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' ); ?
? &gt;

이 파일에서는 함수를 정의했습니다. my_first_theme_setup그리고 통해… add_action( ‘after_setup_theme’， ‘my_first_theme_setup’ ) 이것을 WordPress 초기화 테마의 특정 액션 후크에 연결하십시오. 마찬가지로, 우리는 register_sidebar 함수는 작은 도구 영역을 등록하고 이를 통해 다음과 같은 작업을 수행합니다. wp_enqueue_style 함수는 주제 스타일시트를 올바르게 임포트했습니다.

전용 템플릿과 스타일을 만들기

서로 다른 페이지 유형에 맞게 템플릿을 사용자 정의하십시오.

워드프레스의 템플릿 계층 구조를 통해 서로 다른 유형의 페이지에 특정 템플릿 파일을 만들 수 있습니다. 예를 들어:
* front-page.php정적인 첫 페이지로 사용합니다.
* home.php블로그 게시물 목록 페이지.
* single.php단일 기사의 세부 페이지.
* page.php단일 페이지.
* archive.php분류, 태그, 작가와 같은 아카이브 페이지.
* search.php검색 결과 페이지.
* 404.php오류 404 페이지.

추천 읽기 WordPress 테마 개발 입문 실전 가이드: 제로에서 시작하여 사용자 정의 테마 아키텍처와 템플릿을 만들어보기。

Create page.php 당신은 모든 페이지의 외관을 독립적으로 제어할 수 있고, 이는 게시물 페이지에는 영향을 미치지 않습니다. 그것의 구조는 index.php 비슷하지만, 일반적으로 날짜, 작성자 등 게시물의 메타데이터는 표시되지 않습니다.

반응형 레이아웃과 인터ै크션을 디자인하기

현대적인 WordPress 테마는 반응형이어야 합니다. 이는 당신의 CSS가 모바일 기기에서 데스크톱에 이르는 모든 화면 크기에 적합되어야 한다는 것을 의미합니다. 모바일 우선(Mobile First) CSS 전략을 사용하는 것이 좋습니다. 이는 작은 화면을 위한 기본 스타일부터 시작한 다음, 미디어 쿼리(Media Queries)를 사용하여 큰 화면에 추가 스타일을 추가하는 것입니다.

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

동시에, 당신의 주제는 드롭다운 메뉴, 회전 그림 등과 같은 대화식 기능을 제공하기 위해 일부 자바스크립트가 필요할 수 있습니다. 올바른 방법은 다음과 같습니다. functions.php 중국에서 사용하세요. wp_enqueue_script() 함수를 사용하여 스크립트를 등록하고 대기열에 넣고, jQuery와 같은 종속성이 올바르게 선언되었는지 확인합니다. 이를 통해 스크립트 충돌 및 중복 로드를 방지하며, WordPress의 스크립트 최적화 기능과 호환됩니다.

요약

위의 단계를 통해 당신은 가장 기본적인 실행 가능한 WordPress 사용자 정의 테마를 완성했습니다. 당신은 테마 정보를 정의하는 방법을 배웠습니다. style.css기본 구조를 만들기 index.php 템플릿, 템플릿을 모ду러블한 구성 요소로 분할하고, functions.php 워드프레스의 테마 기능을 강화시킵니다. 또한, 워드프레스의 강력한 템플릿 계층 구조에 대해서도 알게 되었고, 이는 더 복잡한 사용자 정의 템플릿 페이지를 만들 수 있도록 해줍니다.

테마 개발은 계속 반복하고 심화되는 과정입니다. 다음으로, 기존 테마를 안전하게 수정하려면 자식 테마(Child Theme) 개발을 통해 테마를 만들 수 있고, WordPress 커스터마이저(Customizer) API를 사용하여 사용자가 백엔드에서 실시간으로 테마 설정을 조정할 수 있습니다. 또는 WordPress의 REST API를 통해 프론트엔드 프레임워크와 연계된 테마를 만들 수도 있습니다. 공식 개발자 문서에 계속 주의를 기울이고 커뮤니티에 적극적으로 참여하는 것이 지속적인 발전의 열쇠입니다.

자주 묻는 질문

WordPress 테마를 개발하려면 필수적으로 PHP에 대한 지식이 있어야 하나요?

예, PHP에 대한 扎실한 기반 지식은 WordPress 테마 개발에 필수적입니다. WordPress는 원래 PHP로 작성되었기 때문에, 모든 테마 파일(예: )도 마찬가지로 PHP로 작성되어야 합니다. index.php、single.php및 기능 파일(functions.php모든 것은 PHP 코드를 사용하여 동적으로 생성되고, WordPress 함수를 호출하며, 데이터를 조작합니다.

동시에, 페이지 구조와 스타일을 만들기 위해 HTML과 CSS에 대한 지식이 필요하며, 대화식 기능을 추가하려면 JavaScript(특히 WordPress 核心에 포함된 jQuery)에 대한 기본 지식이 필요합니다.

제 테마 변경 내용이 WordPress 관리자에서 표시되지 않는 이유는 무엇입니까?

일반적으로 이는 브라우저나 서버 캐시로 인해 발생합니다. 우선 브라우저에서 <를 누른 후 다시 시도해 보십시오. Ctrl + F5(Windows/Linux) 또는 Cmd + Shift + R(Mac) 브라우저 캐시를 지우려면 강제 새로고침을 실시하세요.

만일 문제가 여전히 발생한다면, 서버 쪽이나 WordPress 캐시 플러그인(예: W3 Total Cache, WP Super Cache)에 오래된 파일이 캐시되어 있을 수 있습니다. 모든 캐시 플러그인의 캐시를 지우십시오. 개발 단계에서는 간섭을 방지하기 위해 이러한 캐시 플러그인을 일시적으로 비활성화하는 것이 좋습니다.

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

주제가 다국어를 지원하려면(국제화 및 로컬화, i18n 및 l10n), 주로 WordPress의 번역 함수에 의존해야 합니다. 주제에서 모든 사용자 지향적인 텍스트 문자열은 직접 쓰여서는 안 되며, 번역 함수로 감싸여야 합니다.

예를 들어, (‘文本’， ‘my-first-theme’) 번역을 하거나, echo esc_html(‘文本’， ‘my-first-theme’) 출력 및 에스케이프를 수행하십시오. 당신은 안에 이것을 넣어야 합니다. style.css 의 헤더와 load_theme_textdomain() 함수 호출에서 올바르게 설정하십시오. Text Domain(텍스트 영역), 그런 다음 Poedit 같은 도구를 사용하여 만들어보세요. .pot 번역 템플릿과 .po/.mo 언어 파일.

테마의 functions.php 파일과 플러그인의 기능은 어떻게 다른가?

functions.php 파일 내의 코드는 플러그인 코드와 비슷하게 작동하며, 모두 WordPress를 확장하는 데 사용할 수 있습니다. 주요 차이점은 범위와 용도입니다.

functions.php 이 기능은 현재 테마와 밀접히 연결되어 있습니다. 사용자가 테마를 변경하면, 이러한 기능은 일반적으로 더는 사용할 수 없습니다. 이 기능은 테마의 시각적 표현, 레이아웃, 템플릿과 직접 관련된 기능(예: 등록 메뉴 위치, 테마 지원 옵션 추가)을 추가하는 데 적합합니다.

그리고 플러그인은 테마와 독립적으로 제공되는 기능을 가지고 있습니다. 어떤 테마를 사용하든, 플러그인이 활성화되어 있는 한 그 기능은 존재합니다. 이는 테마의 외관과 관련이 없는 일반적인 기능(예: 연락처 양식, SEO 최적화, 전자 상거래 기능 등)을 추가하는 데 적합합니다. 만일 기능이 테마를 바꾸어도 여전히 유지되어야 한다면, 그 기능은 플러그인으로 구현되어야 합니다.

다음 단계는 무엇인가요?

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

확장된 독서 및 실무 지식

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

태그.