개발 환경 및 기본 파일 준비
코드를 작성하기 시작하기 전에 안정적인 로컬 개발 환경을 구축하는 것이 매우 중요합니다. 이를 통해 온라인 웹사이트에 영향을 주지 않고 테스트를 진행할 수 있습니다. Local by Flywheel, XAMPP, MAMP와 같은 도구를 사용하여 PHP와 MySQL을 포함한 로컬 서버 환경을 빠르게 설정하는 것을 추천합니다.
다음으로, WordPress 설치 디렉터리 내에서 필요한 작업을 수행해야 합니다. wp-content/themes 폴더 내에서 여러분의 주제에 맞는 새로운 폴더를 만들어 주세요. 예를 들어, ‘my_project’와 같은 이름으로 지정하실 수 있습니다. my-first-theme이 폴더가 바로 당신의 테마 루트 디렉터리입니다. 그런 다음, 가장 기본적이고 필수적인 두 개의 파일을 생성해야 합니다:style.css 그리고 index.php。
style.css 이 파일은 단순히 주제 테마 스타일시트일 뿐만 아니라, CSS 주석을 사용하여 작성된 테마 정보 헤더(Theme Header)도 포함하고 있습니다. 이 헤더는 WordPress가 해당 테마를 인식하는 데 사용되는 유일한 식별 정보입니다.
추천 읽기 0에서 1까지: WordPress 테마 개발 전체 프로세스 가이드 및 실제 기술。
/*
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
Text Domain: my-first-theme
*/index.php 이 파일은 해당 테마의 주 템플릿 파일이며, WordPress가 템플릿을 찾을 때 마지막으로 참조하는 파일입니다. 이 파일에는 적어도 WordPress 코어의 기능들이 포함되어 있어야 하며, 이를 통해 페이지 헤더, 콘텐츠 영역, 그리고 페이지 푸터가 출력됩니다.
<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1002>
</body>
</html>템플릿의 계층 구조를 이해하는 것은 주제를 효과적으로 전달하는 데 매우 중요합니다. 템플릿의 계층 구조란 템플릿이 어떻게 구성되어 있으며, 각 구성 요소가 어떤 역할을 하는지를 나타냅니다. 이를 통해 개발자나 디자이너는
다른 템플릿 파일을 생성하기 전에, WordPress의 템플릿 계층구조(Template Hierarchy)를 이해하는 것이 매우 중요합니다. 이 계층구조는 WordPress가 홈페이지, 글 페이지, 개별 페이지, 카테고리 페이지와 같은 다양한 유형의 페이지를 렌더링할 때 어떤 템플릿 파일을 사용할지 결정합니다. 예를 들어, 특정 글을 방문할 때 WordPress는 다음과 같은 순서로 템플릿을 찾습니다:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> index.php이 규칙을 숙지하면, 특정 파일을 생성함으로써 원하는 결과를 얻을 수 있습니다. single.php 또는 page.php)을 사용하여 다양한 페이지의 외관을 정확하게 제어할 수 있습니다.
주제를 구성하는 핵심 템플릿을 만들기
한 개의 완전한 주제는 단 하나만을 포함해서는 안 됩니다. index.php더 나은 코드 구조와 재사용성을 위해, 페이지를 여러 부분으로 나누고 함수를 통해 각 부분을 호출해야 합니다.
헤더와 푸터를 분리하세요.
Create header.php 이 파일은 HTML 문서의 헤더 부분(DOCTYPE, 메타 태그 등)을 저장하는 데 사용됩니다., <head> 일부 내용과 페이지 본문의 시작 부분(예: 웹사이트 제목, 주요 네비게이션 메뉴 등)을 포함합니다. 이에 따라, 해당 부분들을 생성해야 합니다. footer.php 이 파일은 페이지 하단에 표시되는 내용(예: 저작권 정보)과 마지막 닫는 태그를 저장하는 데 사용됩니다.
그 후에, index.php 중에서, 당신은 그것을 사용할 수 있습니다. get_header() 그리고 get_footer() 함수를 사용하여 이들을 도입함으로써 구조를 더 명확하게 만들 수 있습니다.
추천 읽기 워드프레스 테마 개발을 위한 입문자를 위한 완전한 가이드: 0부터 1까지 첫 번째 테마를 만들기。
사이드바 템플릿을 생성합니다.
만약 주제에 사이드바가 필요하다면, 사이드바를 생성할 수 있습니다. sidebar.php 파일 내부에서 사용됩니다. dynamic_sidebar() 이 함수는 도구 모음 영역에 등록된 사이드바를 호출하는 데 사용됩니다. 메인 템플릿에서 이 함수를 사용하십시오. get_sidebar() 함수를 사용하여 그것을 가져옵니다.
기사의 순환 및 콘텐츠 템플릿을 구현하는 방법입니다.
기사 순환은 WordPress 테마의 핵심 기능으로, 데이터베이스에서 기사를 가져와 화면에 표시하는 역할을 합니다. index.php 또는 single.php 여기서는 표준적인 반복 구조를 사용합니다. 리스트(예: 홈페이지, 아카이브 페이지)와 개별 글 페이지에서 글의 표시를 더 모듈화된 방식으로 제어하기 위해, 다음과 같은 방법을 사용할 수 있습니다: content.php 또는 각각 별도로 생성할 수도 있습니다. content-single.php 그리고 content-excerpt.php。
반복문 내부에서 사용하세요. get_template_part() 함수를 사용하여 이러한 콘텐츠 템플릿 파일들을 호출할 수 있습니다. 예를 들어:get_template_part( 'content', get_post_format() );。
주제 기능 및 스타일 통합
우수한 테마는 외관뿐만 아니라 기능 파일을 통해 그 기능을 더욱 강화해야 합니다.
주제 기능 파일을 도입합니다.
Create functions.php 이 파일은 템플릿 파일이 아니지만, 테마의 “핵심 부분”입니다. 이 파일을 통해 테마 기능을 추가하거나, 등록 메뉴와 사이드바를 설정하며, 스크립트와 스타일을 적용할 수 있습니다. 이 파일은 테마가 초기화될 때 자동으로 WordPress에 의해 로드됩니다.
이 파일에서는 다음과 같은 내용들을 사용할 수 있습니다: add_theme_support() 이 함수는 기능을 활성화하는 데 사용됩니다. 예를 들어, 기사의 썸네일(Featured Image), 사용자 정의 로고(Custom Logo), HTML5 마크업 지원과 같은 기능들이 여기에 포함됩니다.
추천 읽기 WordPress 테마 개발 입문부터 전문가 수준까지: 맞춤형 웹사이트 구축을 위한 핵심 가이드。
function my_first_theme_setup() {
// 添加文章和评论的 RSS feed 链接到 head
add_theme_support( 'automatic-feed-links' );
// 启用文章缩略图功能
add_theme_support( 'post-thumbnails' );
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );등록하기 위한 도구 영역
In functions.php 중, 사용 register_sidebar() 함수는 하나 이상의 위젯 영역(Widget Areas)을 정의할 수 있으며, 이를 통해 사용자가 백그라운드의 “위젯” 인터페이스에서 컴포넌트를 드래그 앤 드롭할 수 있습니다.
함수 my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '메인 사이드바', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '여기에 위젯을 추가합니다.' , 'my-first-theme' ), '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_first_theme_widgets_init' );스타일과 스크립트가 올바르게 로드되었습니다.
절대로 템플릿 파일 내에서 직접 사용하지 마세요. <link> 또는 <script> 태그에 CSS 및 JavaScript 파일을 하드코딩하여 포함시키는 것은 바람직하지 않습니다. 올바른 방법은 각 파일을 별도로 포함시키고, 필요한 때에만 해당 파일을 로드하는 것입니다. 이를 통해 페이지의 성능을 향상시키고, 불필요한 코드가 로드되는 것을 방지할 수 있습니다. functions.php 중국에서 사용하세요. wp_enqueue_style() 그리고 wp_enqueue_script() 함수를 작성한 후, 그 함수를 적절한 위치에 마운트해야 합니다. wp_enqueue_scripts 후크上。 이것은 의존성이 올바르게 되어 있는지 확인하고 중복 로드를 방지합니다.
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 加载导航脚本，依赖 jQuery
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );주제의 국제화 및 출시 준비
주제 번역을 구현합니다.
당신의 주제가 전 세계 사용자들에게 사용될 수 있도록 하기 위해서는 국제화(i18n)가 필수적인 단계입니다. 이는 모든 사용자를 대상으로 하는 문자열들을 번역 함수를 사용하여 처리해야 한다는 것을 의미합니다. 가장 자주 사용되는 함수는… __()(PHP에서 번역 결과를 표시하는 데 사용됩니다.) 그리고 _e()(이것은 PHP에서 번역된 내용을 출력하는 데 사용됩니다.) 동시에, style.css 의 헤더와 functions.php 로딩 함수에서는 텍스트 도메인(Text Domain)을 올바르게 설정해야 합니다. 예를 들어, 이전에 설정한 내용을 참고하시기 바랍니다. my-first-theme。
최종 테스트를 수행하고 파일을 압축합니다.
발행하기 전에는 다양한 환경(다른 PHP 버전, 다른 WordPress 버전)과 다양한 장치(데스크톱, 태블릿, 스마트폰)에서 철저한 테스트를 반드시 수행해야 합니다. 모든 템플릿 파일이 정상적으로 작동하는지, 기능들이 예상대로 구현되었는지, 그리고 WordPress 공식의 테마 검토 기준을 충족하는지 확인해야 합니다.
마지막으로, 모든 디버깅 코드와 주석을 삭제하세요(사용자에게 도움이 되는 경우는 예외입니다). 그런 다음 CodeKit이나 온라인 압축 도구와 같은 도구를 사용하여 CSS 및 JavaScript 파일의 크기를 줄이세요. 전체 테마 폴더를 ZIP 파일로 압축한 후, WordPress.org의 테마 디렉터리에 업로드하거나 사용자에게 배포할 준비가 완료됩니다.
요약
WordPress 테마를 처음부터 직접 만드는 것은 체계적인 학습 과정입니다. 이 과정에는 환경 설정, 템플릿 구조의 이해, 핵심 템플릿 파일의 제작, 그리고 해당 템플릿을 웹사이트에 적용하는 방법까지 포함됩니다. functions.php 고급 기능이 통합된 전체 프로세스의 핵심은 WordPress의 코딩 표준과 모범 사례를 준수하는 데 있습니다. 예를 들어, 내장 함수를 사용하고, 리소스를 올바르게 로드하며, 국제화를 구현하는 것이 중요합니다. 이 글에 설명된 단계들을 실제로 따라해 보면, 단순히 작동하는 테마를 만들 뿐만 아니라 WordPress 테마의 작동 원리를 깊이 이해할 수 있으며, 더 복잡하고 전문적인 테마를 개발하기 위한 탄탄한 기반을 마련할 수 있을 것입니다.
자주 묻는 질문
테마를 만들기 위해 반드시 PHP를 숙달해야 하나요?
네, PHP를 깊이 이해하는 것은 사용자 정의 WordPress 테마를 개발하는 데 필수적인 조건입니다. WordPress 자체가 PHP로 작성되었기 때문에, 모든 템플릿 파일(예: index.php, single.php및 기능 파일(functions.php모든 내용은 PHP 코드를 사용하여 동적으로 생성되며, 데이터베이스에 접근하고 논리적인 처리가 이루어집니다. PHP에 대한 지식이 없다면 테마의 핵심 부분을 이해하거나 조작하는 것이 불가능합니다.
주제 개발을 할 때 반드시 모든 코드를 처음부터 새로 작성해야만 하나요?
꼭 그런 것은 아닙니다. 초보자에게는 제로부터 시작하는 것이 최선의 학습 방법일 수 있지만, 실제 업무에서는 개발자들이 종종 “스타터 테마(Starter Theme)”나 “파생 테마(Derived Theme)”를 기반으로 작업합니다. 예를 들어, 공식적으로 제공되는 _Underscores(_s) 테마는 매우 간단하면서도 코딩 규범을 준수하는 고품질의 출발점으로, 기본적인 파일 구조와 자주 사용되는 함수들이 이미 준비되어 있습니다. 이 테마를 기반으로 자신만의 코드를 개발할 수 있으며, 이는 작업 효율성을 크게 향상시키고 코드의 품질을 보장하는 데 도움이 됩니다.
functions.php 파일에 오류가 발생하면 어떤 결과가 생길까요?
functions.php 파일 내의 문법 오류나 치명적인 오류로 인해 WordPress 사이트가 “화이트 스크린 오브 데스(White Screen of Death)” 상태가 발생할 수 있습니다. 이는 테마가 로드되는 초기 단계에서 해당 파일이 실행되기 때문에 프론트엔드 및 백엔드 관리 인터페이스 모두에 접근할 수 없게 되는 현상입니다. 이런 경우, FTP나 호스트 파일 관리자를 사용하여 오류가 있는 테마 폴더의 이름을 변경하거나 정상적으로 작동하는 테마(예: Twenty Twenty-Six)로 교체하여 사이트 접근을 복구한 후에 오류가 있는 코드를 수정해야 합니다.
내 테마가 구텐베르크 에디터(Gutenberg Editor)를 지원하도록 하려면 어떻게 해야 하나요?
주제가 구텐베르크(Gutenberg) 블록 편집기를 더 잘 지원하도록 하려면, 먼저 다음과 같은 작업을 해야 합니다: functions.php 중국에서 사용하세요. add_theme_support( ‘editor-styles’ ) 편집기 스타일 지원을 활성화하려면 먼저 해당 기능을 켜야 합니다. 그런 다음, 사용하고자 하는 스타일 설정을 적용하세요. add_editor_style() 이 함수는 사용자의 테마 스타일시트 또는 편집기용으로 특별히 작성된 CSS 파일을 백엔드 편집기에 적용합니다. 이를 통해 사용자가 편집하는 동안 보는 스타일이 프론트엔드에서 표시되는 스타일과 가능한 한 일치하도록 보장됩니다. 또한, 너비 정렬, 색상 설정과 같은 기능들도 추가로 지원할 수 있습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어