WordPress 테마 개발 기초 및 환경 설정
코드를 작성하기 시작하기 전에, WordPress 테마의 기본 구성을 이해해야 합니다. 테마는 본질적으로 하나의 폴더로, PHP, CSS, JavaScript, 이미지 등의 파일들을 포함하고 있으며, 이 파일들이 함께 웹사이트의 외관과 일부 기능을 정의합니다. 이 폴더는 반드시 WordPress가 설치된 디렉터리 내에 위치해야 합니다.wp-content/themes목록에 있습니다. 각 주제마다 핵심 스타일 파일이 필요합니다.style.css그리고 하나의 기본 템플릿 파일과 함께…index.php이것은 어떤 주제 기반 개발 프로젝트를 시작하기 위한 최소한의 요구 사항입니다.
효율적인 개발을 위해 로컬 개발 환경을 구축하는 것을 강력히 권장합니다. 이를 통해 온라인 웹사이트에 영향을 주지 않고 자유롭게 테스트를 진행할 수 있습니다. XAMPP, MAMP, Local by Flywheel, DevKinsta와 같은 통합 도구킷을 사용하면 Apache/Nginx, PHP, MySQL을 한 번에 설치할 수 있습니다. 로컬 환경에서는 VS Code,PhpStorm, Sublime Text와 같은 코드 편집기도 필요하며, 이러한 편집기들은 PHP, HTML, CSS의 문법을 강조 표시하고 유용한 힌트를 제공하여 코딩 효율성을 크게 향상시켜 줍니다.
준비 작업이 완료되었으면, 이제 다음 단계를 진행해야 합니다.wp-content/themes디렉터리 내에 새로운 폴더를 생성하세요. 예를 들어, `new_folder`라는 이름으로 폴더를 만들 수 있습니다.my-first-theme다음으로, 우리는 필수적인 첫 번째 파일을 생성합니다.
추천 읽기 WordPress 테마 개발을 처음부터 마스터하기: 사용자 정의 웹사이트를 구축하는 최고의 실천 사례와 가이드。
Create a core style file.
주제 폴더 내에 ‘’라는 이름의 새 폴더를 만드세요.style.css이 파일은 웹사이트의 스타일을 담당할 뿐만 아니라, 파일의 시작 부분에 있는 주석 헤더(Comment Header)가 WordPress가 테마를 인식하는 유일한 방법입니다. 주석 헤더에는 테마의 이름, 작성자, 설명 등의 메타정보가 포함되어 있습니다.
아래는…style.css파일 헤더의 표준 예시:
/*
Theme Name: 我的第一个主题
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://example.com/
Description: 一个用于学习WordPress主题开发的简洁入门主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: 博客, 简洁, 响应式
Text Domain: my-first-theme
*/파일 헤더 다음부터는 일반적인 CSS를 작성하는 것처럼 웹사이트 요소에 스타일 규칙을 추가할 수 있습니다. 텍스트 도메인(Text Domain)my-first-theme이는 주제의 국제화(번역)를 위해 예약된 식별자로, 주제 폴더의 이름과 일치해야 합니다.
주제 핵심 템플릿 파일을 구축합니다.
템플릿 파일은 WordPress 테마의 기본 구조를 이루며, 다양한 유형의 콘텐츠가 어떻게 구성되고 표시되는지를 결정합니다. 이 파일들은 주로 PHP 코드로 작성되며 HTML 태그가 혼합되어 있습니다. 가장 기본적인 템플릿 파일은…index.php이것은 모든 페이지의 대체 템플릿으로, 더 구체적인 템플릿(예: 특정 기능을 위한 전용 템플릿)이 없을 때 사용됩니다.single.php또는page.php그때 WordPress가 그것을 사용하게 됩니다.
기본 인덱스 파일을 생성합니다.
테마 폴더 내에 생성하세요.index.php가장 간단하지만 기능이 완전한…index.phpWordPress의 ‘The Loop’을 포함할 수 있습니다. 이는 데이터베이스에서 글의 내용을 가져와 표시하는 데 사용되는 핵심 메커니즘입니다.
추천 읽기 WordPress 테마 개발 입문부터 전문가 수준까지: 맞춤형 웹사이트 구축을 단계별로 안내합니다.。
한 개의 최소화된…index.php예시는 다음과 같습니다:
<!DOCTYPE html>
<html no numeric noise key 1017>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1014>
<header>
<h1><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>
<main>
<article>
<h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
<div></div>
</article>
<p>현재 기사가 없습니다.</p>
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>이 파일에는 몇 가지 핵심적인 부분들이 포함되어 있습니다:wp_head()그리고wp_footer()후크(hooks)는 WordPress 코어, 플러그인, 그리고 기타 스크립트가 페이지의 시작과 끝 부분에 필요한 코드(예: CSS, JS)를 삽입할 수 있도록 해주는 메커니즘입니다.the_post()함수는 반복문 내에서 현재 기사의 데이터를 설정하는 데 사용되며, 그 후에…the_title()그리고the_content()등의 템플릿 태그를 사용하면 해당하는 콘텐츠가 출력됩니다.
스타일과 스크립트를 가져오기
오직…style.css파일이 충분하지 않으므로, 함수를 사용하여 WordPress에 언제 해당 파일을 로드해야 하는지 알려야 합니다. 이를 위해 테마 폴더에 또 다른 매우 중요한 파일을 생성해야 합니다.functions.php이 파일은 템플릿 파일이 아니라, 테마의 기능을 확장하고 등록 메뉴, 사이드바를 구성하며, 스타일시트와 스크립트를 안전하게 적용하기 위한 “기능 라이브러리”입니다.
확장 주제 기능 및 스타일 로딩 (Extended Topic Features and Style Loading)
functions.php이 파일은 주제와 관련된 코드들이 저장되는 곳입니다. 직접적인 페이지 출력과 관련이 없는 모든 PHP 코드는 여기에 배치해야 합니다. 이 파일에서는 적절한 구조와 규칙을 사용하여 코드를 관리해야 합니다.add_action()이 함수는 사용자의 코드를 WordPress의 특정 액션 후크(Action Hook)에 연결하여, 해당 코드가 올바른 시점에 실행되도록 보장합니다.
안전하게 스타일시트를 로드하기 (Load Style Sheets Safely)
올바른 방법은 템플릿 파일 내에서 직접 태그를 사용하여 해당 요소를 가져오는 것이 아닙니다.style.css대신, 다음과 같은 방법을 통해…wp_enqueue_style()이 함수는 파일들을 순서대로 로드하기 위한 대기열을 관리합니다. 이는 WordPress의 의존성 관리 메커니즘을 따르며, 파일이 중복으로 로드되는 것을 방지합니다.
Infunctions.php다음 코드를 추가하세요:
추천 읽기 2026년 인기 입문 가이드: 제로에서 시작하여 첫 번째 WordPress 테마를 만드는 방법。
<?php
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 可以在此加载其他样式或脚本，例如：
// wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );여기,get_stylesheet_uri()함수는 주제에 대한 정보를 자동으로 가져옵니다.style.css파일 경로.add_action( 'wp_enqueue_scripts', ... )우리의 로딩 함수가 WordPress가 프론트엔드 스크립트와 스타일을 준비할 때 호출되도록 해야 합니다.
기본 테마 기능을 활성화합니다.
Infunctions.php또한, 현대 웹사이트에 매우 중요한 기능들을 활성화할 수도 있습니다. 예를 들어, 글과 페이지에 특별한 이미지(글의 썸네일)를 표시하는 기능을 활성화하거나, 웹사이트에 사용자 정의 메뉴 위치를 추가하는 것이 가능합니다.
// 启用文章特色图像
add_theme_support( 'post-thumbnails' );
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
// 为WordPress生成的标签添加title属性支持
add_theme_support( 'title-tag' );add_theme_support()이 함수는 특정 주제가 지원하는 다양한 기능들을 선언하는 데 사용됩니다.register_nav_menus()이는 WordPress 관리자의 “외관(Appearance)” → “메뉴(Menus)” 섹션에서 메뉴의 위치를 설정할 수 있음을 의미합니다.
전용 템플릿과 테마를 생성하여 테스트합니다.
주제 기반 기능이 완성됨에 따라, 단일한…index.php이 파일은 더 이상 모든 페이지 유형의 표시 요구를 충족시킬 수 없습니다. WordPress의 템플릿 계층 구조를 통해 홈페이지, 개별 글, 페이지, 아카이브 페이지 등에 맞는 전용 템플릿 파일을 생성할 수 있으며, 이를 통해 더 세밀한 제어가 가능합니다.
기사 단일 페이지 템플릿을 생성합니다.
사용자가 특정 기사의 전문을 읽기 위해 클릭하면, 해당 기사의 단일 페이지로 이동합니다. 이름은 “기사 상세 페이지”로 지정하겠습니다.single.php해당 파일은 해당 콘텐츠의 표시를 전문적으로 제어하기 위해 사용됩니다. 일반적으로 분류, 태그, 작성자, 댓글과 같은 더 완전한 기사 정보를 포함하고 있습니다.
<main>
만일 게시물이 있다면 : while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1013>
<h1></h1>
<div class="meta">
게시 날짜: | 작성자:
</div>
<?php if ( has_post_thumbnail() ) : ?>
<div class="featured-image">
<?php the_post_thumbnail(); ?>
</div>
<div class="content">
</div>
<div class="taxonomies">
分类：
<br>
标签：
</div>
</article>
주석 템플릿을 표시하세요.
</main>
\n이 템플릿은 새로운 템플릿 함수를 도입했습니다:get_header(), get_sidebar()그리고get_footer()그것들은 각각 “”이라는 이름의 파일을 로드할 것입니다.header.php、sidebar.php그리고footer.php템플릿 구성 요소 파일입니다. 이 방식을 사용하면 페이지 구조를 모듈화하여 코드 중복을 방지할 수 있습니다. 해당 파일들을 생성한 후, 그 안에 필요한 내용을 추가해야 합니다.index.php해당 페이지의 상단, 하단, 측면 바에 사용되는 코드입니다.
테스트 및 주제의 유효성 확인하기
핵심 템플릿을 생성한 후에는 WordPress 관리자에 로그인하여 “외관” -> “테마”로 이동하세요. “내 첫 번째 테마”가 테마 목록에 표시되는 것을 확인할 수 있을 것입니다. 이 테마를 활성화한 다음, 웹사이트의 홈 페이지와 개별 글 페이지를 방문하여 모든 요소(제목, 콘텐츠, 메뉴, 푸터)가 예상대로 표시되는지 확인해 보세요.
브라우저의 개발자 도구를 사용하여 HTML 구조가 올바른지, CSS가 제대로 적용되고 있는지 확인하세요. 특징적인 이미지, 분류 정보, 태그가 포함된 테스트 글을 몇 개 작성해 보고, 이러한 요소들이 템플릿 내에서 올바르게 호출되고 표시되는지 확인해 보세요. 이것이 잠재적인 문제를 발견하고 수정하는 가장 좋은 방법입니다.
요약
축하합니다! 첫 번째 WordPress 테마의 기본 구조를 완성하셨습니다. 이 가이드를 통해 테마 폴더를 처음부터 생성하는 방법과 필요한 파일들을 작성하는 방법을 익혔으니, 이제 자신만의 테마를 개발하는 데 한 걸음 더 나아갈 수 있을 것입니다.style.css그리고index.php파일을 활용하는 방법에 대해…functions.php기능을 강화하고 리소스를 로드한 후, 전용 템플릿 파일을 생성하며 모듈화된 개발을 진행하는 전체 프로세스입니다. 이것은 테마 개발 세계의 시작에 불과하며, 이후에는 더 많은 템플릿 파일들을 자세히 탐구할 수 있습니다.page.php、archive.php툴바, 애드온 기능, 사용자 정의 글 유형과 같은 고급 기능들을 추가하며, 코드 구조와 디자인을 지속적으로 최적화하세요.
자주 묻는 질문
###: 왜 제 테마가 백엔드에서 표시되지 않나요?
이는 보통 다음과 같은 이유로 발생합니다:style.css이 문제는 파일 내의 테마 관련 주석 헤더의 형식이 올바르지 않거나 누락되어 발생한 것입니다. 해당 파일이 테마 폴더의 루트 디렉터리에 위치해 있는지, 그리고 주석 헤더의 정보가 완전하고 형식이 정확한지 확인해 주세요. 또 다른 가능한 원인은 파일 권한 문제일 수 있으니, WordPress가 테마 폴더를 읽을 수 있는 권한을 가지고 있는지 확인해 주세요.
functions.php 파일은 반드시 필요한가요?
기술적으로 볼 때, 단지…style.css그리고index.php해당 주제도 잘 작동할 수 있습니다. 하지만…functions.php기본 HTML 출력을 넘어서는 기능들(예: 등록 메뉴, 사이드바 추가, 스크립트 및 스타일의 안전한 로딩 등)을 구현하기 위해서는 이 기능이 필수적입니다. 이는 테마의 기능을 확장하고 커스터마이징하는 표준적인 방법이므로, 실용적인 테마라면 반드시 필요한 요소입니다.
내 테마에 사이드바를 어떻게 추가하나요?
먼저,functions.php중국에서 사용하세요.register_sidebar()이 함수는 하나 이상의 툴바 영역(사이드바)을 등록합니다. 그런 다음, 사이드바를 표시하고자 하는 템플릿 파일에서 해당 툴바들을 사용할 수 있습니다.index.php또는single.php이 게임에서는 In this game, you usedynamic_sidebar()이 함수를 사용하여 해당 기능을 호출할 수 있습니다. 마지막으로, 사용자는 WordPress 관리자의 “외관(Appearance)” -> “플러그인(Plugins)” 페이지에서 해당 플러그인을 원하는 위치로 드래그 앤 드롭하여 설치할 수 있습니다.
개발 주제를 다룰 때 고려해야 할 보안 사항은 무엇인가요?
절대로 사용자가 입력한 데이터나 데이터베이스에서 가져온 데이터를 그대로 신뢰해서는 안 됩니다. 페이지에 동적인 콘텐츠를 출력할 때는 반드시 WordPress가 제공하는 이스케이프 함수(escape functions)를 사용해야 합니다.esc_html()、esc_url()그리고wp_kses_post()주제에 사용자 정의 기능이나 양식을 도입할 때는 WordPress의 nonce(일회용 식별자) 및 권한 검사 메커니즘을 준수해야 합니다.wp_enqueue_style()그리고wp_enqueue_script()리소스를 로드하기 위해 사용하는 방법은 하드코딩이나 태그 사용이 아닙니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어