준비 작업 및 환경 구축
코드 작성을 시작하기 전에 안정적이고 효율적인 로컬 개발 환경은 필수적입니다. 이는 운영 중인 웹사이트에 영향을 주지 않고 테스트를 진행할 수 있게 해줄 뿐만 아니라, 개발 효율도 크게 향상시켜 줍니다.
로컬 개발 환경 설정
Local by Flywheel, XAMPP 또는 MAMP와 같은 통합 로컬 개발 도구를 사용하는 것을 권장합니다. 이러한 도구는 WordPress 실행에 필요한 PHP, MySQL 및 웹 서버(예: Apache 또는 Nginx)를 원클릭으로 설치해 줍니다. Local by Flywheel을 예로 들면, 여러 WordPress 사이트를 빠르게 생성하고 관리할 수 있는 직관적인 인터페이스를 제공하며, 사이트 간 전환, 원클릭 HTTPS(SSL) 활성화, 메일 캡처 등 유용한 기능도 내장하고 있어 테마 개발에 매우 적합합니다.
코드 편집기 및 도구 선택
강력한 기능을 갖춘 코드 편집기는 개발자의 강력한 도구입니다. Visual Studio Code(VS Code)는 가볍고 무료이며 풍부한 플러그인 생태계로 인해 널리 사랑받고 있습니다. WordPress 테마 개발을 위해서는 다음 확장 프로그램 설치를 권장합니다: PHP Intelephense(PHP 지능형 자동 완성과 코드 힌트 제공), WordPress Snippet(대량의 WordPress 함수 코드 조각 포함), 그리고 CSS 전처리 언어(예: Sass)를 위한 관련 플러그인입니다. 또한 Git을 사용한 버전 관리는 코드 변경 관리, 협업, 그리고 이력 추적을 위한 업계 표준입니다.
추천 읽기 WordPress 테마 개발 입문부터 마스터까지: 사용자 정의 테마의 완전한 구축 가이드。
테마 기본 구조 및 핵심 파일 생성
워드프레스 테마는 기본적으로 위치에 있는 것입니다. /wp-content/themes/ 디렉터리 아래의 폴더로, 그 안에는 일련의 특정 파일이 포함되어 있습니다. 이러한 파일들이 함께 웹사이트의 모양과 기능을 정의합니다.
테마 정보 파일
각 주제는 반드시 ‘%s’라는 이름의 항목을 포함해야 합니다. style.css 파일로, 그 역할은 단순히 스타일을 작성하는 것에 그치지 않고, 더 중요한 것은 파일 헤더에 특정한 주석 블록을 통해 WordPress에 테마의 메타데이터를 선언하는 것입니다. 이것은 WordPress가 하나의 테마를 인식하는 핵심입니다.
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始构建的 WordPress 自定义主题，用于学习主题开发。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
*/그중에서,Text Domain 국제화(i18n)를 위한 것으로, 이후에 번역 함수(예: __() 또는 _e()）시 반드시 사용해야 하는 식별자.
Core template file
또한… style.css또 다른 필수 파일은 index.php이는 테마의 기본 템플릿으로, WordPress가 더 구체적인 템플릿 파일을 찾지 못할 때 대신 사용됩니다. 하지만 기능이 완전한 테마는 서로 다른 페이지의 표시를 정밀하게 제어하기 위해 일련의 템플릿 파일을 포함합니다.
header.php： 웹사이트의 머리글 영역을 정의하며, 일반적으로 포함합니다<!DOCTYPE html>선언(Declaration)<head>부분과 시작 부분<body>및 기본 탐색.footer.php： 웹사이트의 바닥글 영역을 정의하며, 일반적으로 저작권 정보, 스크립트 포함 및 닫는</body></html>태그.functions.php: 이것은 테마의 “기능 센터”로, 테마 기능 추가, 메뉴 등록, 사이드바 등록, 그리고 스타일시트와 스크립트 파일을 대기열에 추가하여 불러오는 데 사용됩니다.page.php: 단일 페이지를 표시하는 데 사용됩니다.single.php： 단일 블로그 게시물을 표시하는 데 사용됩니다.archive.php： 글 아카이브 목록(예: 카테고리, 태그, 날짜별 아카이브)을 표시하는 데 사용됩니다.front-page.php： 웹사이트 홈페이지를 사용자 지정하는 데 사용됩니다.style.css： 메인 스타일시트.
테마 기능 및 템플릿 시스템 구축
WordPress는 현재 요청된 페이지에 어떤 템플릿 파일을 사용할지 결정하기 위해 템플릿 계층 구조 시스템을 사용합니다. 이 시스템을 이해하고 활용하는 것은 유연한 테마를 구축하는 핵심입니다.
추천 읽기 완벽한 웹사이트 만들기: 처음부터 맞춤형 워드프레스 테마를 구축하는 완전한 가이드。
테마 함수 파일 상세 설명
functions.php 파일은 테마가 로드될 때 자동으로 실행됩니다. 그 주요 작업 중 하나는 사용하여 wp_enqueue_style() 그리고 wp_enqueue_script() 함수를 사용하여 리소스를 올바르게 불러오세요. 이는 WordPress에서 공식적으로 권장하는 방식으로, 의존성을 관리하고 중복 로드를 방지하며 로드 시점을 제어할 수 있습니다.
function my_theme_enqueue_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
// 引入自定义 JavaScript 文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );또한 여기에서 글 썸네일, 사용자 정의 메뉴 위치 및 글 형식과 같이 테마가 지원하는 기능도 등록해야 합니다.
function my_theme_setup() {
// 支持文章特色图像
add_theme_support( 'post-thumbnails' );
// 注册导航菜单
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
) );
// 支持 HTML5 标记
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );템플릿 태그와 반복문
템플릿 태그는 WordPress에서 제공하는 PHP 함수로, 템플릿 파일에서 내용을 동적으로 출력하는 데 사용됩니다. 가장 핵심은 “루프”(The Loop)로, 이는 현재 페이지에 글이 있는지 확인하고 각 글을 순서대로 출력하는 PHP 코드입니다.
In index.php 또는 single.php 중에서, 반복문의 기본 구조는 다음과 같습니다:
만일 게시물이 있다면 : while ( have_posts() ) : the_post(); ?>
<article>
<h2></h2>
<div class="entry-content">
</div>
</article>
<p><?php _e( '抱歉，没有找到任何内容。', 'my-custom-theme' ); ?></p>여기,the_title() 그리고 the_content() 바로 템플릿 태그로, 각각 현재 글의 제목과 본문 내용을 출력합니다. 그 밖에 자주 사용하는 템플릿 태그에는 다음과 같은 것들이 있습니다 the_permalink()（게시물 링크）、the_post_thumbnail()（대표 이미지） 및 the_author()(저자) 등.
반응형 디자인과 고급 기능을 구현하기
현대 웹사이트는 다양한 기기에서 모두 잘 표시되어야 합니다. 동시에 테마의 견고성과 유지보수성을 높이기 위해 몇 가지 고급 개발 실천 방식을 도입해야 합니다.
추천 읽기 WordPress 테마 개발 마스터하기: 초보자부터 전문가까지의 완벽한 실전 가이드。
CSS로 반응형 레이아웃 구현
반응형 디자인의 핵심은 미디어 쿼리(Media Queries)입니다. 당신은 ~할 수 있습니다 style.css 서로 다른 화면 너비에 대해 서로 다른 스타일 규칙을 정의합니다. 흔한 패턴 중 하나는 “모바일 우선”으로, 먼저 모바일용 기본 스타일을 작성한 다음 더 큰 화면에 대해 점진적으로 덮어쓰는 스타일을 추가하는 것입니다.
/* 基础样式（针对移动设备） */
.container {
width: 100%;
padding: 0 15px;
}
/* 中等屏幕（平板，768px 及以上） */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* 大屏幕（桌面，992px 及以上） */
@media (min-width: 992px) {
.container {
width: 970px;
}
}하위 테마 가져와 사용자 지정하기
부모 테마(당신이 개발 중인 테마)의 코드를 직접 수정하는 것은 위험합니다. 부모 테마가 업데이트되면 당신의 수정 내용이 덮어써집니다. WordPress의 자식 테마 기능은 이 문제를 완벽하게 해결합니다. 자식 테마는 부모 테마의 모든 기능을 상속하면서도, 수정이 필요한 파일만 덮어쓸 수 있게 해줍니다(예: style.css、functions.php 또는 어떤 템플릿 파일).
하위 테마를 만드는 것은 매우 간단합니다: 에서 /wp-content/themes/ 아래에 새 폴더를 만들고 다음 헤더 정보를 포함한 파일을 생성합니다 style.css 파일, 그중 Template: 줄은 상위 주제의 디렉터리 이름을 지정해야 합니다.
/*
Theme Name: 我的自定义主题 - 子主题
Template: my-custom-theme
*/그런 다음, 하위 주제에서… functions.php 이렇게 하면 부모 테마의 코드를 건드리지 않고도 새 기능을 안전하게 추가하거나 기존 기능을 수정할 수 있습니다. 이는 워드프레스 테마 생태계에서 강력하고 안전한 사용자 정의 및 업데이트 전략입니다.
요약
처음부터 WordPress 사용자 정의 테마를 개발하는 것은 체계적인 프로젝트로, 개발자는 PHP, HTML, CSS, JavaScript 등의 프런트엔드 기술에 익숙해야 할 뿐만 아니라 템플릿 계층 구조, 루프, 템플릿 태그, 훅 시스템과 같은 WordPress의 핵심 개념도 깊이 이해해야 합니다. 로컬 환경을 구축하고, 기본 파일 구조를 만들고, 에서 functions.php 기능을 강화하고, 템플릿 시스템을 구축한 뒤, 최종적으로 반응형 디자인과 자식 테마 전략을 적용하면, 표준에 부합하면서도 개별화된 요구를 충족하는 고품질 테마를 단계적으로 구축할 수 있습니다. 이 과정은 단순한 기술적 실천을 넘어, WordPress의 유연성과 강력한 확장 능력을 깊이 체험하는 일이기도 합니다.
자주 묻는 질문
WordPress 테마를 개발하려면 필수적으로 PHP에 대한 지식이 있어야 하나요?
네, 탄탄한 PHP 기초를 갖추는 것은 워드프레스 테마를 심층적으로 개발하기 위한 필수 조건입니다. 왜냐하면 워드프레스 자체가 PHP로 작성되었고, 모든 템플릿 파일(예: page.php, single.php) 및 핵심 기능 파일 functions.php 전부 PHP 스크립트입니다. WordPress의 함수(템플릿 태그와 API)를 호출하고, 데이터를 처리하며, 로직 흐름을 제어하려면 PHP를 사용해야 합니다. 페이지 빌더나 차일드 테마를 통해 일부 겉보기 조정은 할 수 있지만, 맞춤형 레이아웃과 기능을 진정으로 구현하려면 PHP 지식은 필수적입니다.
테마의 functions.php 파일은 여러 개일 수 있나요?
안 됩니다. 각 주제(또는 하위 주제)에는 이름이 functions.php 파일입니다. 이 파일은 테마 초기화 시 자동으로 로드됩니다. 코드를 깔끔하게 유지하기 위해 기능을 모듈화해야 한다면, 다음에서 할 수 있습니다 functions.php 중국에서 사용하세요. require_once() 또는 include_once() 구문을 사용하여 테마 디렉터리에 있는 다른 PHP 파일을 불러올 수 있습니다. 예를 들어, 다음과 같이 만들 수 있습니다 /inc/ 디렉터리에서 사용자 정의 글 유형, 위젯, 쇼트코드 등의 기능을 각각 다른 파일에 작성한 다음 메인 functions.php 중 통일적으로 도입한다.
내 테마를 다국어(국제화)로 지원하려면 어떻게 해야 하나요?
테마가 다국어를 지원하도록, 즉 국제화(i18n)하려면 주로 두 단계가 필요합니다. 먼저, 테마의 모든 텍스트 출력 부분에서 WordPress의 번역 함수를 사용해 문자열을 감싸야 합니다. 가장 자주 사용되는 것은 __()번역된 문자열을 반환하고 상세히 설명해 주십시오. _e()(번역된 문자열을 직접 출력합니다). 당신은 반드시 코드에서 지정해야 합니다 style.css 헤더에 정의된 Text Domain。
echo __( ‘这是一个示例文本‘， ‘my-custom-theme‘ );다음으로, Poedit와 같은 도구를 사용하여 테마의 모든 번역 가능한 문자열을 스캔하고 하나를 생성해야 합니다. .pot(템플릿) 파일. 번역자는 이를 바탕으로 해당 언어의 .po 그리고 컴파일된 후 .mo 파일들입니다. 이 언어 파일들을 해당 주제의 폴더에 넣어주세요. /languages/ 디렉터리 아래에서 사용자가 웹사이트 언어를 전환하면 해당 번역이 자동으로 로드됩니다.
개발이 완료된 후, 테마를 어떻게 패키징하여 배포하나요?
배포 전에 모든 디버그 코드를 제거하고, 주석에 포함된 민감한 정보를 삭제하며, 성능 향상을 위해 CSS 및 JavaScript 파일을 최소화했는지 확인하세요. 그런 다음 모든 테마 파일이 포함된 ZIP 압축 파일을 만드세요. 반드시 포함되어야 하는 주요 루트 디렉터리 파일은 다음과 같습니다:style.css(완전하고 올바른 헤더 정보가 포함되어 있습니다.)index.php 그리고 functions.php.또한 하나를 포함할 수 있습니다 screenshot.png(1200×900픽셀)을 테마의 관리자 화면 미리보기 이미지로 사용합니다. 테마를 워드프레스 공식 테마 디렉터리에 제출하려면 엄격한 코드 규범과 심사 지침을 따라야 합니다. 직접 배포하는 경우에는 테마가 GPL 라이선스를 준수하도록 하고, 명확한 readme.txt 문서는 설치 및 사용 방법을 설명합니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어