커스텀 WordPress 테마를 개발하는 것은 자신의 창의성을 온라인 세계에 구현하고 웹사이트의 외관 및 기능을 완전히 제어할 수 있는 최고의 방법입니다. 기성 테마를 사용하는 것과 달리, 커스텀 테마를 통해 처음부터 시작하여 자신이나 고객의 요구사항에 완전히 맞는 독특한 웹사이트를 구축할 수 있습니다. 이 과정이 다소 어려워 보일 수 있지만, WordPress의 공식 지침과 단계별 절차를 따른다면 명확하게 완료할 수 있습니다. 이 글에서는 기본 파일을 생성하는 것부터 핵심 기능을 구현하는 것까지의 전체 과정을 안내해 드리겠습니다.
준비 작업 및 환경 구축
첫 번째 코드 줄을 작성하기 전에, 적합한 개발 환경과 명확한 프로젝트 계획이 필요합니다.
로컬 개발 환경의 설정 (Setting up a local development environment)
먼저, 로컬 컴퓨터에 PHP 서버 환경을 설정해야 합니다. XAMPP, MAMP 또는 Local by Flywheel과 같은 통합된 소프트웨어 패키지를 사용하는 것을 추천합니다. 이러한 도구들을 사용하면 Apache, MySQL, PHP를 한 번에 설치할 수 있어 복잡한 설정 과정을 거치지 않아도 됩니다. XAMPP를 예로 들면, 설치가 완료되면 웹사이트 파일들은 일반적으로 설치 디렉터리 내에 위치하게 됩니다.htdocs폴더 안에 있습니다. 여기서 새로운 폴더를 만들 수 있습니다. 예를 들어,my-custom-theme이 디렉터리가 당신의 테마에 대한 루트 디렉터리가 될 것입니다.
추천 읽기 워드프레스 테마 개발을 처음부터 배우기: 개인화된 웹사이트를 만들기 위한 핵심 가이드。
테마 프로젝트 구조 계획
표준적인 WordPress 테마는 적어도 두 개의 핵심 파일을 포함합니다:style.css그리고index.php하지만 프로젝트를 시작하기 전에는 명확하고 확장 가능한 디렉터리 구조를 계획하는 것이 좋습니다. 전형적인 현대적인 테마 구조는 다음과 같을 수 있습니다:
my-custom-theme/
├── style.css // 主样式表，包含主题信息头
├── index.php // 主模板文件
├── functions.php // 主题功能与函数文件
├── header.php // 头部模板
├── footer.php // 底部模板
├── sidebar.php // 侧边栏模板
├── page.php // 页面模板
├── single.php // 文章页模板
├── archive.php // 文章归档页模板
├── 404.php // 404错误页模板
├── search.php // 搜索结果页模板
├── assets/ // 静态资源目录
│ ├── css/ // 样式文件
│ ├── js/ // 脚本文件
│ └── images/ // 图片资源
└── templates/ // 可选的模板部件目录좋은 구조를 갖추는 것은 코드의 조직화와 유지보수에 도움이 됩니다.
핵심 주제 파일 만들기
이것은 테마를 구축하는 데 있어 기본이 되는 요소입니다. 파일 내의 정보 헤더는 WordPress에 이 테마가 유효한 테마임을 알려줍니다.
Define the theme style sheet.
style.css이것은 테마의 “신분증”과 같은 역할을 하며, 상단에 있는 주석 블록(테마 정보 헤더)은 필수적입니다. WordPress는 이러한 정보를 바탕으로 백엔드에서 테마를 인식하고 표시합니다. 하나를 만들어 보세요.style.css파일을 열고 다음 내용을 입력하세요:
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个为了学习从零开始开发而创建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/그중에서,Text Domain이 값은 국제화(i18n)를 위해 사용되며, 테마의 고유 식별자입니다. 일반적으로 테마 폴더의 이름과 동일합니다. 이 주석 블록 다음부터 CSS 스타일을 작성할 수 있습니다.
추천 읽기 WordPress 테마 개발 가이드: 초보자에서 전문가까지의 완벽한 실전 튜토리얼。
기본 템플릿 파일을 구축합니다.
index.php이것은 모든 페이지의 기본 복구(리디렉션) 템플릿입니다. 가장 기본적인 형태이지만, 간단한 HTML 구조부터 시작할 수 있습니다. 먼저, 하나를 만들어 봅시다.header.php이 파일은 문서의 헤더 정보를 저장하는 데 사용됩니다.<!DOCTYPE html>열려면<body>(태그 부분) 및footer.php폐쇄 태그와 페이지 하단 내용을 저장하는 데 사용됩니다.
header.php예시:
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1003>
<header>
<h1><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>주의: 사용되었습니다.wp_head()후크(hook)는 WordPress의 코어, 플러그인, 테마에서 스크립트나 스타일을 추가하는 데 필수적인 요소입니다.
footer.php예시:
<footer>
<p>© . 판권 소유.</p>
</footer>
</body>
</html>여기에 사용되었습니다.wp_footer()후크(Hook).
이제, 당신의…index.php“매우 간결하게 만들 수 있습니다.”
추천 읽기 WordPress 테마 개발 완전 가이드: 제로에서 프로페셔널급 테마 구축하기。
<main>
만일 게시물이 있다면: ?>
<article>
<h2></h2>
<div></div>
</article>
<p><?php _e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
</main>
\n이 템플릿은 WordPress의 핵심 루프(The Loop)를 사용하여 글 목록을 표시합니다.
기능 및 동적 콘텐츠의 도입
진정한 테마는 단순한 정적 페이지 그 이상입니다. WordPress 코어와 상호작용하며, 필요한 리소스를 로드하고 동적 기능을 구현해야 합니다.
“Write a theme function file”는 프로그래밍에서 테마 관련 기능을 구현하기 위한 함수들을 모아 둔 파일을 만드는 것을 의미합니다. 이 파일에는 특정 프로그램의 외관이나 동작 스타일을 정의하는 코드들이 포함되며, 이를 통해 프로그램의 전반적인 느낌을 조정할 수 있습니다. 예를 들어, 웹사이트
functions.php이 파일은 “뇌(Brain)”라는 주제에 맞게 사용되며, 기능 추가, 메뉴 등록, 사이드바 설정, 스타일 및 스크립트 로딩 등을 위한 용도로 사용됩니다. 이 파일을 생성하고 기본 기능들을 추가하기 시작해 보세요.
<?php
// 主题设置
function my_custom_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和评论的RSS feed链接
add_theme_support( 'automatic-feed-links' );
// 启用文章缩略图（特色图像）
add_theme_support( 'post-thumbnails' );
// 注册一个导航菜单
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );
// 注册小工具区域（侧边栏）
function my_custom_theme_widgets_init() {
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' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );add_theme_support()이 함수는 테마 기능을 활성화하는 데 사용됩니다.register_nav_menus()그리고register_sidebar()그렇다면 각각 내비게이션 메뉴와 도구 모음 영역을 등록해야 합니다.
스타일과 스크립트를 로드합니다.
올바른 리소스 로드 방법은 스타일시트와 JavaScript 파일을 통해 수행하는 것입니다.wp_enqueue_scripts후크 대기열(Hook Queue). 당신의…functions.php중에 다음을 추가하세요:
function my_custom_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
// 加载自定义JavaScript文件
wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );
// 如果使用评论功能，加载评论回复脚本（仅当需要时）
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );get_stylesheet_uri()얻기style.css의 URLget_template_directory_uri()주제 디렉터리의 URL을 가져옵니다.
템플릿 계층 구조를 생성합니다.
WordPress는 템플릿 계층 구조를 사용하여 특정 페이지에 어떤 템플릿 파일을 적용할지 결정합니다. 전용 템플릿 파일을 만들면 콘텐츠의 표시 방식을 더욱 세밀하고 유연하게 제어할 수 있습니다.
서로 다른 콘텐츠 유형에 맞는 템플릿을 만들어보세요.
다양한 유형의 페이지에 맞는 전용 템플릿을 만들어야 합니다. 예를 들어:
* single.php단일 기사를 표시하는 데 사용됩니다.
* page.php단일 페이지를 표시하는 데 사용됩니다.
* archive.php분류, 태그, 작성자, 날짜 등의 정보를 표시하는 아카이브 페이지에 사용됩니다.
* search.php검색 결과를 표시하는 데 사용됩니다.
* 404.php“Not Found” 페이지를 표시하는 데 사용됩니다.
기본적인single.php아마도 다음과 같을 것입니다:
<main>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
<header>
<h1></h1>
<div>
|
</div>
</header>
<?php if ( has_post_thumbnail() ) : ?>
<div>
<?php the_post_thumbnail(); ?>
</div>
<div>
</div>
<footer>
<?php the_tags( '标签: ', ', ', '<br />' ); ?>
</footer>
</article>
</main>
\n이 템플릿은 사용했습니다.the_post_thumbnail()특색 이미지를 표시하고, 또한…comments_template()댓글 영역을 로드하기 위해…
템플릿 컴포넌트를 사용하여 모듈화를 구현합니다.
코드의 재사용성을 더욱 향상시키기 위해, 페이지 내에서 반복되는 부분들(예: 글의 메타정보, 글 목록 항목 등)을 템플릿 부품(Template Parts)으로 추출할 수 있습니다. 예를 들어, 다음과 같이 템플릿 부품을 만들 수 있습니다:template-parts/content.php파일을 다운로드한 후에는…index.php또는archive.php`for` 루프 내에서 사용합니다.get_template_part( 'template-parts/content' );이를 사용하여 호출하세요. 이렇게 하면 주 템플릿 파일을 더 간결하게 유지할 수 있습니다.
요약
위의 단계를 통해 기본적이지만 기능이 완전한 사용자 정의 WordPress 테마를 개발하는 데 성공했습니다. 이 과정은 환경 설정, 핵심 파일 생성, WordPress 기능의 도입, 템플릿 계층 구축과 같은 중요한 단계들을 모두 포함합니다. 테마 개발은 반복적인 과정이라는 점을 기억하세요. 가장 기본적인 기능부터 시작하여 사용자 정의 게시물 유형, 테마 커스터마이저 옵션, 반응형 디자인과 같은 더 복잡한 기능들을 점차 추가할 수 있습니다. 가장 중요한 것은 WordPress의 코딩 표준과 모범 사례를 준수하는 것입니다. 이를 통해 테마가 안전하고 효율적이며 유지보수가 용이해집니다. 이제, 테마 폴더를 WordPress 설치 디렉터리로 복사하세요.wp-content/themes/중에서, “배경 설정” -> “테마” 메뉴를 통해 해당 테마를 확인하고 활성화할 수 있습니다.
자주 묻는 질문
WordPress 테마를 개발하려면 어떤 프로그래밍 언어 기술이 필요한가요?
WordPress 테마를 개발하려면 HTML, CSS, PHP를 숙달하는 것이 필수적입니다. HTML은 페이지 구조를 만드는 데 사용되며, CSS는 스타일 디자인을 담당합니다. PHP는 WordPress의 서버 측 프로그래밍 언어로, 로직 처리, 데이터베이스 쿼리, 동적 콘텐츠 생성 등을 담당합니다. 또한, 인터랙티브 기능을 추가하기 위해서는 기본적인 JavaScript 지식도 도움이 됩니다.
왜 반드시 `get_header()`와 `get_footer()` 함수를 사용해야 할까요?
get_header()그리고get_footer()이것들은 WordPress의 템플릿 태그입니다. 이 태그들은 특정 콘텐츠를 포함시키거나 템플릿의 구조를 정의하는 데 사용됩니다.header.php그리고footer.php파일을 다룰 때는 이러한 함수들을 사용하는 것이 직접적으로 파일을 조작하는 것보다 더 좋습니다.include‘스테이트мент(Statement)’은 WordPress 템플릿 계층 구조와 서브테마(subtheme) 메커니즘의 핵심입니다. 서브테마는 동일한 이름의 파일을 생성함으로써 상위 템플릿의 헤더(head)와 푸터footer) 부분을 재정의할 수 있게 해주어, 매우 높은 유연성을 제공합니다.
내 테마를 다국어(국제화)로 지원하려면 어떻게 해야 하나요?
당신은 WordPress의 국제화(i18n) 함수를 사용하여 테마에서 출력되는 모든 텍스트 문자열을 감싸야 합니다. 주로 다음과 같은 함수들을 사용하게 됩니다:__()、_e()등의 함수들을 사용하며,style.css중에서 올바른 설정을 해주세요.Text Domain. 그런 다음 Poedit과 같은 도구를 사용하여.pot“翻译模板文件”：This template file can be used by translators to create content in the target language (e.g., English, Chinese, etc.).zh_CN.po그리고.mo)의 번역 파일입니다. 마지막으로,functions.php중국을 통해load_theme_textdomain()Function loading.
테마 개발이 완료된 후에는 그 호환성을 어떻게 테스트할 수 있을까요?
주제를 프로덕션 환경에 게시하거나 배포하기 전에 철저한 테스트를 수행하는 것이 매우 중요합니다. 먼저, 다양한 브라우저(Chrome, Firefox, Safari, Edge)와 장치(데스크톱, 태블릿, 스마트폰)에서 반응형 테스트를 실시해야 합니다. 또한, WordPress 환경의 다양한 설정을 사용하여 테스트를 진행해야 하며, 여기에는 다양한 플러그인의 활성화/비활성화, 다른 종류의 글 및 위젯의 사용이 포함됩니다. 추가로, WordPress 공식 플러그인인 ‘Theme Check’를 사용하여 주제가 최신 WordPress 코딩 표준과 모범 사례를 준수하는지 확인할 수 있습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어