준비 작업 및 환경 구축
코드를 작성하기 시작하기 전에, 적합한 개발 환경이 필요합니다. 여기에는 로컬 서버 환경(예: XAMPP, MAMP 또는 Local by Flywheel)과 코드 편집기(예: VS Code, Sublime Text 또는 PHPStorm)가 포함됩니다. 로컬 서버 환경을 사용하면 온라인 서버를 모방하여 자신의 컴퓨터에서 주제를 안전하게 개발하고 테스트할 수 있으며, 변경 사항을 매번 네트워크 서버에 업로드할 필요가 없습니다.
핵심 파일은 모든 WordPress 테마의 기반이 됩니다. 가장 기본적인 테마라도 최소한 두 개의 파일이 필요합니다:style.css 그리고 index.php그중에서,style.css 스타일시트뿐만 아니라, 이 파일의 더 중요한 기능은 테마의 “정보 헤더”로서의 역할입니다. 이 정보 헤더는 WordPress 시스템에 테마에 대한 정보를 알려주는 데 사용됩니다. 이 파일 내에서는 특정 주석 블록을 통해 테마의 이름, 저자, 설명, 버전 등의 메타정보를 정의해야 합니다.
또한, 반드시 필요한 것은 아니지만, 생성하는 것을 강력히 권장합니다.functions.php 이 파일은 “기능 증강기”(Feature Enhancer)라는 주제에 사용되며, 사용자 정의 기능을 추가하거나 메뉴와 사이드바를 등록하고, 다른 스크립트 및 스타일 파일을 가져올 수 있도록 해줍니다. 이를 통해 핵심 파일을 수정하지 않고도 주제의 기능을 확장할 수 있습니다.
추천 읽기 WordPress 테마 개발 입문: 제로에서 시작하여 첫 번째 커스텀 테마를 만들어보세요。
현대의 WordPress 테마 개발에서는 자식 테마(Child Theme)의 사용을 권장합니다. 이는 부모 테마 파일을 직접 수정하지 않고도 테마를 커스터마이징하거나 새로운 기능을 추가할 수 있는 안전한 방법입니다. 부모 테마가 업데이트되더라도 자식 테마에 저장된 사용자 정의 내용은 그대로 유지됩니다. 자식 테마를 만들기 위해서도 위에서 언급한 두 개의 핵심 파일이 필요합니다.style.css 스타일 헤더를 통해…Template:필드는 자신의 상위 주제(parent topic)를 명시합니다.
주제의 핵심 템플릿 파일을 구축합니다.
WordPress는 템플릿 계층구조(Template Hierarchy) 시스템을 사용하여 특정 페이지 요청에 어떤 PHP 템플릿 파일을 사용하여 콘텐츠를 렌더링할지 결정합니다. 이러한 규칙을 이해하는 것은 테마를 개발하는 데 매우 중요합니다.
Article and Page Display Templates
가장 기본적인 템플릿은…single.php그리고page.php이들은 각각 개별 블로그 글과 독립적인 페이지의 표시를 제어하는 데 사용됩니다. 이 템플릿들에서는 일련의 WordPress 코어 함수를 사용하여 콘텐츠를 반복적으로 출력합니다. 가장 중요한 반복 구조는 보통 다음과 같습니다:
만일 게시물이 있다면 : while ( have_posts() ) : the_post(); ?>
<h1></h1>
<div class="entry-content">
</div>이 코드는 기사가 있는지 확인한 후, 반복문을 실행하여 각 기사의 제목과 내용을 차례로 출력합니다. 함수의 이름은… (Function name is missing in the original text.)the_title()그리고the_content()해당 데이터를 출력하는 데 사용됩니다.
기사 목록 및 아카이브 템플릿
사용자가 블로그 홈페이지, 카테고리 목록 페이지 또는 작가의 아카이브 페이지를 방문할 때, WordPress는 목록 템플릿을 사용합니다. 가장 흔한 목록 템플릿은…index.php(마지막으로, 모든 경우에 대비한 대안으로) 그리고archive.php리스트 템플릿에서는 반복문을 사용하여 여러 글을 순회합니다.the_excerpt()来输出文章摘要而非全文。
추천 읽기 워드프레스 테마 개발 단계별 마스터하기: 처음부터 사용자 정의 테마 구축하기。
// 반복문 내에서 기사 목록 항목을 출력합니다.
<article>
<h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
</article>the_permalink()이 함수는 현재 기사의 영구 링크를 가져오는 데 사용됩니다.
주제의 일반적인 구성 요소들
코드의 재사용성과 유지보수성을 높이기 위해, 공통적으로 사용되는 페이지 요소들을 별도의 템플릿 파일로 분리하는 것이 좋습니다. 이를 통해…get_header(), get_footer(), get_sidebar()그리고get_template_part()등의 함수를 사용해 구현합니다.
예를 들어, 당신의header.php이 파일에는 HTML 문서의 헤더가 포함되어 있습니다.지역 정보와 웹사이트의 상단 네비게이션 메뉴도 포함되어 있습니다.single.php중에서는 시작 부분에만 호출하면 됩니다.get_header()그러면 WordPress가 자동으로 해당 기능을 도입합니다.header.php的内容。
마찬가지로, 여러 곳에서 반복적으로 사용되는 코드 블록(예: 글의 메타 정보)은 별도로 저장해 두었다가 필요할 때마다 재사용할 수 있습니다.content.php또는template-parts/content.php그런 다음 메인 템플릿에서 사용하세요.get_template_part('template-parts/content', get_post_format());그것을 호출하세요. 두 번째 매개변수를 사용하면 기사의 형식(예: 갤러리, 인용문 등)에 따라 다른 변형 파일을 로드할 수 있습니다.content-gallery.php）。
함수 파일을 사용하여 테마 기능을 향상시킵니다.
functions.php 파일은 테마의 “제어 센터” 역할을 하며, 직접적인 HTML 출력에 속하지 않는 모든 기능적인 코드는 여기에 배치되어야 합니다. 이 코드들은 테마가 초기화될 때 WordPress에 의해 자동으로 로드됩니다.
등록된 주제 기능 및 메뉴
기본적이면서도 필수적인 작업은 ‘사용’하는 것입니다.add_theme_support() 함수를 사용하여 해당 테마가 어떤 WordPress 기능을 지원하는지 명시해야 합니다. 예를 들어, 글의 특별 이미지를 표시하거나, 사용자 정의 메뉴를 설정하거나, HTML5 마크업을 지원하는 것은 일반적인 관행입니다.
추천 읽기 워드프레스 핵심 아키텍처와 작동 방식。
function my_theme_setup() {
// 添加文章和页面特色图片支持
add_theme_support('post-thumbnails');
// 为导航菜单功能添加支持
add_theme_support('menus');
// 为评论列表、搜索表单等添加HTML5标记支持
add_theme_support('html5', array('comment-list', 'search-form'));
}
add_action('after_setup_theme', 'my_theme_setup');그런 다음, 당신은 사용할 수 있습니다.register_nav_menus() 이 함수는 테마 내에서 사용 가능한 메뉴 위치(예: “상단 메인 네비게이션” 및 “하단 네비게이션”)를 정의하는 역할을 합니다.
스타일시트와 자바스크립트를 도입합니다.
CSS와 JavaScript 파일을 올바르게 큐에 추가하는 것(enqueue)은 전문적인 개발에서 매우 중요합니다. 이를 통해 의존 관계가 제대로 처리되고 스크립트 간의 충돌을 방지할 수 있습니다. 절대로 템플릿 파일 내에서 직접 이러한 파일들을 사용해서는 안 됩니다.또는태그를 사용하여 리소스를 가져옵니다.
function my_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style('my-theme-style', get_stylesheet_uri());
// 引入自定义JavaScript文件，依赖于jQuery
wp_enqueue_script('my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');후크(Hook)wp_enqueue_scripts 이것은 웹사이트의 프론트엔드에서 스크립트와 스타일을 로드하는 데 사용됩니다.get_stylesheet_uri()그리고get_template_directory_uri() 이 함수를 사용하면 주제 디렉터리의 올바른 URL을 얻을 수 있습니다.
툴바 영역을 생성합니다.
사이드바나 푸터에 있는 위젯 영역(Widget Areas)을 통해 사용자는 백엔드의 드래그 앤 드롭 인터페이스를 사용하여 콘텐츠를 자유롭게 커스터마이징할 수 있습니다.register_sidebar() 함수를 사용하면 새로운 도구 영역을 생성할 수 있습니다.
function my_theme_widgets_init() {
register_sidebar(array(
'name' => '主侧边栏',
'id' => 'sidebar-1',
'description' => '此区域的小工具将显示在文章和页面侧边。',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
));
}
add_action('widgets_init', 'my_theme_widgets_init');등록한 후에는 템플릿 파일(예:sidebar.php)에서 사용됩니다.dynamic_sidebar('sidebar-1');이 함수는 해당 영역의 내용을 출력합니다.
반응형 레이아웃 제작 및 스타일 작성
현대 웹사이트는 다양한 장치에서도 잘 보여져야 합니다. 이를 위해서는 사용하는 테마가 반응형(responsive)이어야 합니다. 반응형 디자인을 구현하는 데에는 주로 CSS 미디어 쿼리(Media Queries)와 유동적 레이아웃(Fluid Layouts)이 사용됩니다.
모바일 우선의 스타일 전략(Mobile-First Style Strategy)
“모바일 우선”의 CSS 작성 전략을 채택하는 것이 좋습니다. 즉, 먼저 모바일 기기(소형 화면)를 위한 기본 스타일을 작성한 다음, 미디어 쿼리를 사용하여 더 큰 화면에 맞는 스타일을 점차 추가하거나 기존 스타일을 재정의하는 것입니다.
/* 基础样式（针对移动设备） */
.container {
width: 100%;
padding: 0 15px;
}
.article {
font-size: 16px;
line-height: 1.6;
}
/* 针对平板及以上设备 */
@media (min-width: 768px) {
.container {
max-width: 750px;
margin: 0 auto;
}
}
/* 针对桌面设备 */
@media (min-width: 992px) {
.container {
max-width: 970px;
}
.article {
font-size: 18px;
}
}이러한 전략을 통해 핵심 콘텐츠가 모든 장치에서 접근 가능하도록 보장하며, 동시에 더 큰 화면에서의 사용자 경험을 점차 개선해 나갑니다.
이미지와 미디어 파일을 유연하게 처리합니다.
이미지와 내장된 콘텐츠(예: 비디오)가 그 컨테이너를 벗어나지 않도록 하는 것은 반응형 디자인의 기본 요구사항입니다. 간단하고 일반적인 규칙은 다음과 같습니다:
img,
iframe,
video {
max-width: 100%;
height: auto;
}이 CSS 규칙은 미디어 요소의 너비가 부모 컨테이너의 너비를 초과하지 않도록 하며, 높이는 비율에 따라 자동으로 조정되어 레이아웃이 손상되는 것을 방지합니다.
WordPress의 보조 클래스와 함수를 활용하기
WordPress 자체에서 많은 유용한 CSS 클래스를 제공하며, 이를 활용하면 스타일을 더 정확하게 제어할 수 있습니다. 예를 들어,태그에는 페이지나 기사의 유형을 나타내는 클래스가 추가됩니다(예:.page, .single-post), 그리고 기사 ID 관련 클래스(예:.postid-123). 기사 목록의 반복 처리 중에,post_class()이 함수는 각 기사의 컨테이너에 일련의 클래스 이름(예: 기사 형식, 분류 등)을 출력하며, 이는 세밀한 스타일 디자인을 위해 매우 유용합니다.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- 文章内容 -->
</article>스타일시트에서는 다음과 같이 위치를 지정할 수 있습니다:
/* 为所有文章添加通用样式 */
article {
margin-bottom: 2em;
}
/* 仅为“引语”格式的文章添加特殊样式 */
.format-quote {
background-color: #f9f9f9;
border-left: 4px solid #ccc;
padding-left: 1em;
}요약
WordPress 테마 개발은 창의성, 프론트엔드 기술(HTML, CSS, JavaScript), 그리고 백엔드 기술(PHP)을 결합하는 과정입니다. 시작하기 위해서는 먼저 기본적인 웹 개발 지식과 WordPress 플랫폼에 대한 이해가 필요합니다. 테마 개발을 통해 웹사이트의 디자인과 기능을 자유롭게 커스터마이징할 수 있으며, 이는 웹사이트의 전반style.css그리고index.php기본 폴더부터 시작하여 템플릿 계층 시스템을 점차적으로 학습하고 구현하세요. 페이지를 재사용 가능한 템플릿 구성 요소로 분해하세요. 핵심은…functions.php파일은 테마 기능을 확장하고, 메뉴를 등록하며, 스크립트를 작성하는 데 사용되는 중요한 도구입니다. 마지막으로, 반응형 CSS 디자인을 통해 테마가 스마트폰부터 데스크톱 컴퓨터에 이르기까지 모든 장치에서 우수한 브라우징 경험을 제공할 수 있도록 해야 합니다. 하위 테마를 사용하여 수정을 가하거나, 스크립트와 스타일을 올바르게 배치하는 등의 모범 사례를 따르면 테마가 더 전문적이고 안전해지며, 유지보수도 더 용이해집니다.
자주 묻는 질문
PHP 기초가 없어도 WordPress 테마를 개발할 수 있습니다. WordPress는 PHP로 작성되었지만, 많은 기능과 설정이 이미 내장되어 있어 기본적인 PHP 지식만 있으면 충분합니다. 또한, WordPress의 템플릿 시스템과 플러그인을 활용하면 코딩 없이도 테마의 외관과 기능을 수정할 수 있습니다. 다양한 온
이론적으로는 HTML과 CSS만 수정하여 기존 테마의 외관을 변경할 수 있지만, 기능이 완전하고 WordPress 표준을 준수하는 새로운 테마를 제작하려면 PHP 지식이 필수적입니다. 기본적인 PHP 문법, 함수 호출, 그리고 WordPress 고유의 템플릿 태그와 후크(Hooks) 시스템을 이해해야 합니다. 적어도 PHP와 WordPress의 기본 템플릿 태그부터 먼저 학습하는 것을 권장합니다.
주제 개발이 완료된 후 다른 사람들이 사용할 수 있도록 출시하는 방법은 무엇인가?
주제를 WordPress 공식 테마 디렉터리에 게시하거나 상업적으로 판매하기 전에는 엄격한 테스트를 거쳐야 하며, 해당 주제가 《WordPress 테마 개발 안내서》에 명시된 코딩 표준을 준수하는지 확인해야 합니다. 여기에는 코드의 보안 검토, 주제의 완전한 반응형 기능 보장, 그리고 국제화(i18n)를 위한 준비(번역 함수 사용 등)가 포함됩니다.__()그리고_e()그런 다음 모든 디버깅 코드를 제거하세요. 그 후에는 공식 디렉터리에 코드를 제출하거나, 자신의 웹사이트를 통해 코드를 배포할 수 있습니다.
자주제(subtopic)와 부주제(parent topic)의 업데이트는 어떤 관계가 있나요?
자식 주제(subtopic)의 존재 목적은 부모 주제(parent topic)를 안전하게 수정할 수 있도록 하는 데 있습니다. 자식 주제를 사용할 때, 스타일과 기능에 대한 모든 사용자 정의 설정은 자식 주제의 파일에 저장됩니다. 부모 주제에 업데이트가 발생하면 다른 주제를 업데이트하는 것과 마찬가지로 부모 주제만 업데이트하면 됩니다. 이렇게 하면 자식 주제의 파일은 그대로 유지되며, 모든 사용자 정의 설정도 그대로 보존됩니다. 이는 핵심 기능(부모 주제)을 업데이트하면서도 개성화된 디자인(자식 주제)을 잃지 않는 최선의 방법입니다.
내 테마에 사용자 정의 옵션 페이지를 어떻게 추가하나요?
고급 테마에 사용자 정의 옵션 페이지를 추가하려면 일반적으로 WordPress의 설정 API(Settings API)를 사용하거나, Redux, Kirki와 같은 인기 있는 옵션 프레임워크를 통합하거나 Carbon Fields 라이브러리를 활용하는 방법이 있습니다. 설정 API는 WordPress 코어에서 제공하는 표준화된 인터페이스로, 옵션을 안전하게 생성, 검증, 저장하는 데 사용됩니다. 초보자의 경우 성숙한 프레임워크를 사용하면 사용자 친화적인 옵션 패널을 더 빠르게 구축할 수 있지만, 테마의 복잡성과 파일 크기가 증가할 수 있습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어