커스텀 WordPress 테마를 개발하는 것은 WordPress 프레임워크를 깊이 이해하고 프론트엔드 개발 기술을 향상시키는 가장 좋은 방법입니다. 기성 테마를 사용하는 것과 달리, 처음부터 직접 만들면 모든 것을 완전히 제어할 수 있으며, 프로젝트의 요구사항에 완벽하게 맞는 독특한 웹사이트를 만들 수 있습니다. 이 글에서는 기본적이지만 기능이 완전한 WordPress 테마를 구축하는 전 과정을 안내해 드리겠습니다.
개발 환경 및 테마 구조 설정
코드를 작성하기 시작하기 전에, 로컬 개발 환경이 필요합니다. 이 환경에는 일반적으로 로컬 서버 제품군(XAMPP, MAMP, Local by Flywheel 등), 코드 편집기(VS Code 등), 그리고 최신 버전의 WordPress가 포함됩니다.
먼저, WordPress에서… <code>wp-content/themes</code> 디렉터리 내에서 새로운 테마를 위한 폴더를 생성하세요. 예를 들어, `my_new_theme`와 같은 이름으로 폴더를 만들 수 있습니다. <code>my-custom-theme</code>가장 기본적인 WordPress 테마라도 적어도 두 개의 핵심 파일이 필요합니다.
추천 읽기 WordPress 테마 개발 완전 가이드: 제로에서 시작하여 커스텀 테마를 구축하는 방법。
스타일시트 파일을 생성하세요.
첫 번째로 필요한 파일은 style.css이 파일은 테마의 스타일만 정의하는 것이 아니라, 파일 헤더에 포함된 주석을 통해 WordPress에 테마에 대한 메타데이터도 제공합니다. 파일의 맨 위에 다음과 같은 주석을 추가해 주세요:
/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/“Text Domain”은 국제화(i18n)를 위해 사용되며, 반드시 주제 폴더의 이름과 일치해야 합니다. 그런 다음 이 파일에 모든 CSS 규칙을 작성할 수 있습니다.
Create a core function file.
두 번째로 필요한 서류는 functions.php이것은 주제의 “뇌” 역할을 하는 부분으로, 스타일시트와 자바스크립트 파일을 불러오고, 메뉴나 사이드바와 같은 기능들을 등록하며, 다양한 기능들을 추가하는 데 사용됩니다.
기본적인 functions.php 일반적으로 다음과 같이 시작하여 스타일시트를 대기열에 추가합니다:
<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );이제 아직 어떠한 템플릿 파일도 없지만, 사용 중인 테마는 WordPress 관리자의 “외관(Appearance)” → “테마(Themes)” 목록에 표시되어 활성화될 수 있습니다. 테마가 활성화되면 웹사이트의 전면 페이지에는 빈 화면이 표시됩니다. 이는 페이지 구조를 정의할 템플릿 파일이 없기 때문입니다.
추천 읽기 WordPress 테마 개발 입문 실전 가이드: 제로에서 시작하여 사용자 정의 테마 아키텍처와 템플릿을 만들어보기。
핵심 템플릿 파일을 구축합니다.
템플릿 파일은 웹사이트의 다양한 부분이 어떻게 표시되는지를 제어합니다. WordPress는 템플릿의 계층 구조를 통해 현재 요청에 어떤 템플릿을 사용할지를 결정합니다.
Create a global header and footer for the entire website.
최선의 관행은 공용 헤더(head) 및 푸터footer) 코드를 별도로 분리하는 것입니다. header.php 파일은 일반적으로 문서 유형을 명시하는 선언을 포함하고 있습니다. 지역 및 열기 (Region and Open) 태그와 메인 네비게이션.
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1004>
<header>
<h1><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
<nav>
'primary' ) ); ?>
</nav>
</header>
<main>따라서, 생성해야 합니다. footer.php “来关闭在”可以翻译为 “Come and turn it off.” header.php 중에서 열린 메인 컨테이너와 태그입니다.
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>wp_head() 그리고 wp_footer() 이것은 매우 중요한 ‘후크(hook)’로서, WordPress 코어, 플러그인, 그리고 테마 자체가 이러한 위치에 필요한 코드(예: 스타일, 스크립트 등)를 삽입할 수 있도록 해줍니다.
인덱스 생성 및 기사 템플릿 작성
index.php 이 파일은 템플릿 계층 구조의 최종 복원 파일이며, 동시에 우리 테마의 시작점이기도 합니다. 이 파일은 다음과 같은 방식으로 사용됩니다: get_header() 그리고 get_footer() 이제 분리된 모듈들을 도입해 보겠습니다.
<article>
<h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
<div></div>
</article>
<p>현재 기사가 없습니다.</p>단일 기사를 별도로 표시하기 위해 생성합니다. single.php그 구조는… index.php 비슷하지만, 다른 방법을 사용합니다. the_content() 전체 텍스트를 표시하기 위해…
추천 읽기 워드프레스 테마 개발 입문 - 처음부터 첫 번째 사용자 정의 테마를 만들기。
<article>
<h1></h1>
<div></div>
</article>테마 기능 향상
기본 구조가 갖춰진 후에, 우리는 다음 단계로 진행합니다. functions.php 더 많은 실용적인 기능을 추가하여 테마를 더 전문적이고 사용하기 쉽게 만들어야 합니다.
등록하기: 네비게이션 메뉴 및 사이드바 설정
In functions.php 다음 코드를 추가하여 메인 네비게이션 메뉴 영역과 사이드바(유틸리티 영역)를 등록하세요:
// 注册导航菜单
function my_custom_theme_register_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' );
// 注册侧边栏小工具区域
function my_custom_theme_register_sidebar() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_register_sidebar' );등록한 후에는 템플릿 내에서 해당 기능들을 사용해야 합니다. 예를 들어, header.php 우리는 이미 그것을 사용하고 있습니다. wp_nav_menu “primary” 메뉴가 호출되었습니다. 사이드바에 툴팁을 표시하려면 다음과 같이 설정하십시오: sidebar.php 중에서 사이드바 템플릿을 생성하고, 그 템플릿을 사용하여… index.php 또는 single.php 중국에서 사용하세요. get_sidebar() 도입하다.
주제 기능을 추가하여 지원합니다.
WordPress는 많은 내장 기능을 제공하지만, 테마에서 이러한 기능들을 사용하려면 명시적으로 해당 기능의 사용을 지원한다고 선언해야 합니다. 예를 들어, 글의 썸네일(특징 이미지)을 추가하는 기능이나 사용자 정의 로고, HTML5 마크업을 사용하는 기능 등이 이에 해당합니다.
// 添加主题功能支持
function my_custom_theme_setup() {
// 支持文章缩略图
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
// 对搜索表单、评论表单等使用HTML5标记
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 在管理后台提供<title>标签支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );“post-thumbnails” 기능이 추가되었으므로, 이제 글 목록에서 해당 기능을 사용할 수 있습니다. the_post_thumbnail() 이제 함수가 특별한 이미지를 출력하도록 작동합니다.
스타일 디자인(Style Design) 및 반응형 레이아웃(Responsive Layout)
아름답고 다양한 기기에 잘 적응하는 테마는 매우 중요합니다. 여러분은… style.css 모든 스타일은 HTML 파일 내에 작성해야 합니다. 모바일 기기를 우선적으로 고려하는 ‘모바일 퍼스트(mobile-first)’ 전략을 채택하는 것이 좋습니다.
기본 스타일과 레이아웃 (Basic Styles and Layout)
먼저, 일부 스타일을 초기화하고 기본적인 레이아웃을 설정하여 다양한 브라우저에서 일관된 표시가 되도록 해야 합니다.
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background: #f8f9fa;
padding: 2rem 0;
border-bottom: 1px solid #dee2e6;
}
/* 导航菜单样式 */
.main-navigation ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
.main-navigation a {
text-decoration: none;
color: #007bff;
}반응형 디자인을 구현하기
미디어 쿼리를 사용하여 다양한 화면 크기에 맞게 레이아웃을 조정하세요. 예를 들어, 화면 크기가 작아질 때 네비게이션 메뉴를 세로로 배열하도록 변경할 수 있습니다.
/* 移动端样式 */
@media (max-width: 768px) {
.main-navigation ul {
flex-direction: column;
gap: 0.5rem;
}
.container {
padding: 0 15px;
}
article {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
}
}이미지도 반응형으로 만들어지도록 해야 합니다.
img {
max-width: 100%;
height: auto;
}요약
위의 단계를 통해, 이제 기능이 완전한 사용자 정의 WordPress 테마를 성공적으로 만들었습니다. 우리는 개발 환경을 설정하고 가장 기본적인 구성 요소들을 만드는 과정부터 시작했습니다. style.css with functions.php 파일의 시작 부분에서부터 핵심 템플릿 파일들이 점차적으로 구축되었습니다.header.php, footer.php, index.php, single.php그리고 주제의 실용적인 기능들을 강화했습니다. 예를 들어, 등록 메뉴, 사이드바, 그리고 특별한 이미지들을 지원하도록 했죠. 마지막으로, 주제에 기본적인 스타일과 반응형 레이아웃을 추가하여 다양한 장치에서도 잘 보일 수 있도록 했습니다. 이것은 단지 시작점에 불과합니다; 여기서부터 더욱 발전시켜 페이지 템플릿을 만들어 나갈 수 있습니다.page.php), 아카이브 템플릿 (Archive Template)archive.php검색 템플릿 (Search Template)search.php심지어 하위 주제(subtopics)를 활용하여 웹사이트를 맞춤화함으로써, 더욱 강력하고 전문적인 웹사이트를 만들 수 있습니다.
자주 묻는 질문
WordPress 테마를 개발하기 위해서는 어떤 기술들을 숙달해야 할까요?
기본적인 WordPress 테마를 개발하려면 HTML, CSS, PHP를 숙달해야 합니다. HTML은 페이지 구조를 구성하는 데 사용되며, CSS는 스타일 디자인과 레이아웃을 담당합니다. PHP는 WordPress의 동적 콘텐츠를 구현하는 데 핵심적인 역할을 합니다. 또한, JavaScript에 대한 기본적인 이해는 인터랙티브 기능을 추가하는 데 도움이 됩니다. WordPress의 핵심 개념들, 예를 들어 템플릿 계층 구조(The Template Hierarchy), 루프(The Loop), 후크(Hooks), 함수(Function) 등을 이해하는 것은 테마를 성공적으로 개발하는 데 매우 중요합니다.
functions.php 파일은 웹사이트의 템플릿 시스템에서 중요한 역할을 합니다. 이 파일에는 웹사이트 전체에 적용되는 공통 기능들이 정의되어 있습니다. 예를 들어, 메뉴의 생성, 페이지의 레이아웃 설정, 폼의 작동 방식 등이 functions.php 파일에 포함될 수 있습니다. 템플릿 시스템을 사용하는
functions.php 파일은 워드프레스 테마의 기능 센터입니다. 주요 기능으로는 CSS 및 JavaScript 파일을 추가하고, 네비게이션 메뉴와 사이드바 위젯 영역을 등록하며, 테마가 지원하는 기능(예: 게시물 미리보기, 사용자 정의 로고)을 선언하고, 사용자 정의 함수를 정의하며, 워드프레스의 기본 동작을 액션 후크 및 필터 후크를 통해 수정하는 것이 포함됩니다. 이를 통해 워드프레스 코어 파일을 수정하지 않고도 테마의 기능을 상당히 확장하고 사용자 정의할 수 있습니다.
내 테마가 다국어를 지원하도록 하려면 어떻게 해야 하나요?
주제를 다국어로 지원하도록 만드는 과정(국제화)에는 주로 두 가지 단계가 포함됩니다. 첫째로, style.css “Text Domain” 및 번역 함수가 사용되는 모든 곳에서는 일관된 텍스트 도메인을 사용해야 합니다. 이 텍스트 도메인은 일반적으로 주제 폴더의 이름과 동일합니다. 또한, 번역할 문자열을 준비할 때는 WordPress의 번역 함수를 사용하는 것이 좋습니다. __()、_e() 또는 _x()그런 다음, Poedit와 같은 도구를 사용하여 생성할 수 있습니다. .pot 템플릿 파일을 생성하고, 그에 맞는 내용도 함께 생성합니다. .po 그리고 .mo 번역 파일. 번역 파일을 주제에 넣어 두세요. /languages 디렉터리 내에 있는 파일들은 워드프레스가 웹사이트의 언어 설정에 따라 자동으로 로드합니다.
자식 주제를 생성하는 것이 부모 주제를 직접 수정하는 것에 비해 어떤 장점이 있을까요?
자식 주제를 생성하는 것은 기존의 부모 주제 기능을 수정하거나 확장하는 데 있어 가장 좋은 방법입니다. 그 핵심적인 장점은 업데이트의 안전성에 있습니다: 부모 주제에 업데이트가 적용될 때, 자식 주제에 대해 직접 추가한 사용자 정의 변경사항(스타일, 기능, 템플릿 등)이 손실되지 않고 안전하게 유지됩니다. 자식 주제는 단 하나만 필요합니다. style.css 그리고 선택적으로 (and optionally) functions.php 파일만 있으면 작동합니다. 하위 주제(subtopic)의 경우에도 마찬가지입니다. style.css 중, 통해 @import 또는 더 나은 대기 방식을 사용하여 상위 테마 스타일을 적용한 후, 자신만의 CSS 규칙을 추가하여 그 스타일을 덮어쓰세요. 하위 테마의 경우… functions.php 부모 주제의 동일한 이름을 가진 파일과 동시에 로드되며, 파일이 덮어쓰이지 않습니다. 이를 통해 새로운 기능을 안전하게 추가할 수 있습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어