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

워드프레스 테마 개발 입문 가이드: 처음부터 첫 번째 테마를 만들기

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

워드프레스 테마의 기본 구조 이해

코드를 작성하기 시작하기 전에, WordPress 테마의 구성을 이해하는 것이 매우 중요합니다. 가장 기본적인 테마는 적어도 두 개의 파일을 필요로 합니다: 하나는 테마 정보를 정의하는 스타일시트이고, 다른 하나는 웹사이트 콘텐츠를 표시하는 PHP 템플릿 파일입니다. 이 두 파일이 함께 테마의 골격을 이루며, 특정한 디렉터리 구조와 명명 규칙을 따릅니다.

핵심 파일은…style.css이 파일은 단순히 CSS 스타일만을 포함하는 것이 아니라, 파일 헤더에 있는 주석 블록이 바로 해당 테마의 “신분증” 역할을 합니다. 이 주석 블록은 WordPress 시스템에 테마의 이름, 저자, 설명, 버전 등의 메타정보를 알려줍니다. 올바르게 포맷되지 않은 경우에는 이러한 정보들이 제대로 전달되지 않을 수 있습니다.style.cssWordPress는 귀하의 테마를 인식하거나 활성화할 수 없을 것입니다.

또 다른 필수적인 파일은index.php이 파일은 주제의 기본 템플릿 파일입니다. WordPress가 더 구체적인 템플릿 파일(예: 특정 페이지나 기능을 위한 템플릿)을 찾을 수 없을 때 사용됩니다.single.php또는page.php)을 사용할 때, 페이지 렌더링에 기본적으로 이 옵션이 적용됩니다. 이 옵션은 모든 템플릿 파일의 대체 선택지입니다.

추천 읽기 WordPress 테마 개발의 비밀을 파헤치다: 맞춤형 웹사이트를 제작하는 데 필수적인 핵심 기술들。

주제 정보 선언 문서

Subject Style Sheetstyle.css헤더에는 반드시 특정한 주석이 포함되어야 합니다. 다음은 가장 기본적인 예시입니다:

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
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

그중에서,Text Domain국제화를 위해 사용되며, 이후 번역 작업 시 참조하는 식별자입니다. 이 파일에는 일반적으로 모든 CSS 스타일 코드도 포함되어 있습니다.

Core template file

index.php파일은 주제에 대한 접근 지점입니다. 가장 간단한 예로…index.phpWordPress 코어 함수만을 사용하는 간단한 반복문을 포함시켜, 글 목록을 가져와 표시할 수 있습니다.

<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>
<body no numeric noise key 1002>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    endif;
    ?&gt;
</body>
</html>

이 코드에서,wp_head()그리고wp_footer()이 두 가지 핵심적인 ‘후크(hook)’는 WordPress 코어, 플러그인, 그리고 기타 스크립트들이 페이지의 시작 부분과 끝 부분에 스타일시트, 스크립트, 메타 태그와 같은 필수적인 코드를 삽입할 수 있도록 해줍니다.

로컬 개발 환경 구축

주제를 온라인 서버에 배포하기 전에 로컬 개발 환경을 설정하는 것이 가장 효율적이고 안전한 방법입니다. 로컬 환경을 사용하면 코드를 자유롭게 테스트하고 오류를 디버깅할 수 있으며, 이로 인해 온라인 웹사이트에 영향을 미치지 않습니다.

추천 읽기 워드프레스 테마 개발을 완전히 마스터하기: 입문서부터 전문가용 완전한 가이드。

Select local server software.

초보자에게는 통합된 로컬 서버 소프트웨어가 최선의 선택입니다. 이러한 소프트웨어들은 Apache/Nginx, PHP, MySQL 데이터베이스를 하나로 묶어 한 번의 클릭으로 설치하고 바로 사용할 수 있게 해줍니다. XAMPP, Local by Flywheel, DevKinsta 등이 대표적인 예입니다. 이러한 도구들은 실제 웹 서버 환경을 모방하여 사용자가 자신의 컴퓨터에서 WordPress를 실행할 수 있도록 해줍니다.

WordPress를 설치하고 테마 디렉터리를 생성하세요.

로컬 서버에서 실행한 후에는 새로운 WordPress를 설치해야 합니다. 최신 버전의 WordPress 압축 파일을 다운로드하여 로컬 서버의 웹사이트 루트 디렉터리(예: XAMPP의 htdocs 폴더)에 압축을 풀어주세요. 그런 다음 브라우저를 사용하여 로컬 주소(http://localhost)에 접속하여 유명한 “5분 안에 설치하기” 과정을 완료하시면 됩니다.

설치가 완료되면 WordPress에 접속하세요.wp-content/themes목차. 여기서 곧 개발할 주제에 맞는 새로운 폴더를 만들어 보세요. 예를 들어, “my-first-theme”와 같은 이름으로 지정하면 됩니다. 이전에 만들었던 폴더들도 마찬가지로 사용할 수 있습니다.style.css그리고index.php파일은 이 폴더에 위치해야 합니다. 이제 WordPress 관리자에 로그인한 후, “외관” -> “테마” 메뉴로 이동하면 자신이 만든 테마를 확인할 수 있을 것입니다. 물론 현재는 기능이 매우 단순한 상태입니다.

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

기본 템플릿 파일 체계를 구축합니다.

오직index.php해당 테마의 기능은 전혀 충분하지 않습니다. 완전한 기능을 갖춘 테마라면 단일 글, 독립적인 페이지, 글 아카이브 등 다양한 표시 시나리오에 대응할 수 있는 템플릿 파일 세트가 필요합니다. WordPress의 템플릿 계층 시스템은 현재 요청된 페이지에 가장 적합한 템플릿 파일을 자동으로 선택하여 렌더링합니다.

Article and Page Template

single.php이 템플릿은 개별 블로그 글을 표시하는 데 사용됩니다. 사용자가 특정 글의 전체 내용을 읽기 위해 클릭하면, WordPress가 이 템플릿을 사용하여 해당 글을 표시합니다. 이 템플릿에는 일반적으로 분류, 태그, 작성자, 댓글 영역과 같은 더 자세한 글 정보가 포함되어 있습니다.

page.php템플릿은 “회사 소개”나 “연락처”와 같은 독립적인 정적 페이지를 표시하는 데 사용됩니다. 이 템플릿은 블로그 글에 해당하는 요소들(예: 게시 시간, 분류 등)을 표시하지 않는다는 점에서 글 템플릿과 다릅니다.

추천 읽기 워드프레스 테마 개발에 대한 자세한 설명: 입문서부터 전문가용 완전한 가이드까지。

헤더 및 푸터 템플릿

DRY(Don’t Repeat Yourself) 원칙을 준수하기 위해, WordPress 테마는 일반적으로 페이지의 헤더(Header)와 푸터(Footer) 부분을 별도의 파일로 분리합니다.

header.php이 파일에는 페이지의 시작 부분부터 주요 콘텐츠 영역까지의 모든 코드가 포함되어 있습니다. 여기에는 해당 영역의 구성 요소, 사이트 식별 정보, 메인 네비게이션 메뉴 등이 포함됩니다.index.php、single.php다른 템플릿들에서도 사용할 수 있습니다.get_header()함수를 사용하여 그것을 가져옵니다.

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

마찬가지로,footer.php이 파일에는 풋터에 포함된 모든 내용, 즉 저작권 정보, 보조 네비게이션 등이 포함되어 있으며, 이를 통해…get_footer()함수의 도입에 관한 내용입니다. 또한,sidebar.php(사이드바) 또한 자주 분리되어 사용됩니다.get_sidebar()호출.

재구성된index.php매우 간결해질 것입니다:

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
        endwhile;
    endif;
    ?>
</main>

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

Integrated styles and scripts

현대적인 웹 디자인에서는 CSS 스타일시트와 JavaScript 스크립트를 올바르고 효율적으로 로드하는 것이 매우 중요합니다. WordPress는 이러한 리소스를 관리하기 위한 전용 함수들을 제공하여, 올바른 의존 관계에 따라 리소스가 로드되도록 하고 중복 로드나 충돌을 방지합니다.

함수 큐를 사용하여 스타일을 추가합니다.

올바른 방법은 다음과 같습니다:wp_enqueue_style()이 함수는 스타일시트를 큐에 추가합니다. 주제(theme) 내에 ‘style-sheet’라는 이름의 파일을 생성해야 합니다.functions.php이 파일은 주제의 기능적 핵심을 담고 있으며, 다양한 기능과 옵션을 추가하거나 기본 동작을 수정하는 데 사용됩니다.

Infunctions.php여기서, 당신은 함수를 마운트할 수 있습니다.wp_enqueue_scripts이 액션 훅에는 다음과 같은 내용이 포함되어 있습니다:

function my_first_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入一个Google字体
    wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()이 함수는 주제에 대한 정보를 자동으로 가져옵니다.style.css파일 경로입니다. 이 방식으로 파일을 로드하면 WordPress가 리소스를 더 효율적으로 관리할 수 있습니다.

함수 큐를 사용하여 스크립트를 추가합니다.

JavaScript 스크립트를 로드할 때도 큐를 사용해야 합니다. 이에 해당하는 함수는…wp_enqueue_script()당신은 같은 함수 내에 그것들을 모두 추가할 수 있습니다.

function my_first_theme_scripts() {
    // ... 加载样式的代码同上 ...

// 加载主题的主JavaScript文件，依赖于jQuery，并放在页脚
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

여기,array( 'jquery' )이 스크립트가 핵심 jQuery 라이브러리에 의존한다고 명시되어 있으므로, WordPress는 jQuery가 먼저 로드되도록 처리합니다. 마지막 매개변수는…true이는 스크립트를 페이지의 하단(이전에 위치했던 곳)에 배치함으로써 페이지 로딩 속도를 향상시킬 수 있음을 나타냅니다.

요약

제로에서 시작하여 WordPress 테마를 개발하는 것은 체계적인 학습 과정입니다. 이 과정에는 기본 파일 구조를 이해하고, 로컬 환경을 설정하며, 템플릿 시스템을 구축하고, 리소스를 올바르게 통합하는 등 여러 중요한 단계가 포함됩니다. 직접 손을 대어 테마를 개발해 보는 것은 매우 유익한 경험이 될 것입니다.style.css、index.php、header.php、footer.phptoofunctions.php이러한 핵심 파일들을 통해 당신은 단순히 실행 가능한 테마를 만들어낸 것뿐만 아니라, WordPress 템플릿의 구조와 훅 시스템(hook system)의 작동 원리에 대해서도 더 깊이 이해하게 되었습니다. 기억하세요: 테마 개발의 핵심은 WordPress의 규칙과 표준을 준수하는 데 있습니다. 이를 통해 만든 테마는 호환성이 뛰어나고 효율적이며 유지보수가 용이해집니다. 이 기반을 바탕으로, 사용자 정의 글 유형(custom post types), 테마 커스터마이저(theme customizer), 툴바 영역(toolbar areas) 등의 고급 기능들을 탐색해 나가며, 점차적으로 기능이 풍부한 맞춤형 테마를 만들어 나갈 수 있습니다.

자주 묻는 질문

테마 개발을 하려면 반드시 PHP를 숙달해야 하나요?

네, PHP를 숙달하는 것은 WordPress 테마 개발에 필수적입니다. WordPress 자체가 PHP로 작성되었기 때문에, 모든 템플릿 파일들(예:index.php、single.php이 파일들은 모두 PHP 파일이며, PHP 코드를 통해 WordPress의 핵심 함수를 호출하여 페이지 콘텐츠를 동적으로 생성합니다. 또한, 기능을 추가하는 데 사용됩니다.functions.php이 파일은 전적으로 PHP 코드로 구성되어 있습니다. HTML과 CSS는 구조와 스타일을 정의하는 데 사용되며, PHP는 동적 기능과 데이터 상호작용을 구현하는 핵심 요소입니다.

functions.php 파일은 웹사이트의 템플릿 시스템에서 사용되는 함수들을 정의하는 파일입니다. 이 파일에는 웹사이트의 다양한 기능을 구현하는 함수들이 포함되어 있으며, 이러한 함수들은 템플릿 파일에서 호출될 수 있습니다. 예를 들어, 메뉴를 생성하거나, 데이터를 처리하거나, 페이지를 표시하는 등의 작업을 수

functions.php이 파일은 귀하의 테마의 “기능 중심” 역할을 합니다. 이 파일은 템플릿 파일이 아니므로 페이지의 특정 부분을 직접 생성하지 않습니다. 대신, 테마의 기능을 수정하고 확장하는 데 사용되는 모든 PHP 코드를 저장하는 데 사용됩니다. 일반적인 용도로는 네비게이션 메뉴의 위치를 등록하거나, 툴바 영역을 정의하거나, 기타 기능을 구현하는 데 사용됩니다.wp_enqueue_scripts이 파일은 CSS 및 JavaScript 파일을 추가하고, 테마에 기능을 지원하도록 설정합니다(예: 글의 썸네일, 사용자 정의 배경 등). 또한 다양한 사용자 정의 함수도 정의합니다. 이 파일은 테마가 활성화될 때 자동으로 로드됩니다.

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

테마를 다국어로 지원하도록 만드는 과정(국제화 및 현지화)은 주로 두 단계로 나뉩니다. 첫 번째 단계는 테마 내에서 번역이 필요한 모든 텍스트에 WordPress의 특정 번역 함수를 사용하는 것입니다. 예를 들어,__('文本', 'text-domain')또는_e('文本', 'text-domain')어느text-domain반드시 함께해야 합니다.style.css중에서 선언된Text Domain일치합니다. 두 번째 단계는 Poedit와 같은 도구를 사용하여 테마 코드를 스캔하여 결과를 생성하는 것입니다..pot템플릿 파일: 번역자는 이 파일을 기반으로 해당 언어(예: 중국어)로 된 콘텐츠를 생성합니다..po그리고 컴파일된 후.mo파일을 가져와서 주제에 맞게 배치하세요./languages/디렉터리 내에 있습니다. WordPress는 웹사이트의 언어 설정에 따라 자동으로 해당 번역 내용을 로드합니다.

주제(Theme)와 플러그인(Plugin)의 차이점은 무엇인가요?

WordPress에서 테마(Theme)와 플러그인(Plugin)은 매우 다른 역할을 수행합니다. 테마는 웹사이트의 전면적인 시각적 표현, 즉 사용자가 보는 외관, 레이아웃, 스타일, 템플릿 구조를 제어합니다. 테마는 웹사이트가 “어떻게 보이는지”를 결정합니다. 반면에 플러그인은 웹사이트에 특정 기능을 추가하는 데 사용되며, 사용하는 테마와 상관없이 이러한 기능들이 정상적으로 작동합니다. 예를 들어, 연락처 양식 생성, SEO 최적화, 전자상거래 쇼핑카트 추가 등이 여기에 해당합니다. 플러그인은 웹사이트가 “무엇을 할 수 있는지”를 결정합니다. 좋은 개발 원칙은 다음과 같습니다: 시각적 표현과 레이아웃에 관련된 코드는 테마 내에 포함시키고, 핵심 기능에 관련된 코드는 가능한 한 플러그인 형태로 만드는 것입니다. 이렇게 하면 테마를 교체할 때 웹사이트의 중요한 기능들이 손실되지 않도록 할 수 있습니다.

다음 단계는 무엇인가요?

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

확장된 독서 및 실무 지식

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

태그.