개발 환경 설정 및 프로젝트 초기화
맞춤형 WordPress 테마를 만들기 시작하기 전에 효율적인 개발 환경을 설정하는 것이 매우 중요합니다. 이는 코드의 표준화뿐만 아니라 개발 효율성과 디버깅 경험을 크게 향상시킵니다.
로컬 개발 환경 설정
PHP, MySQL 및 Apache/Nginx를 포함하는 운영 환경을 신속하게 설정하려는 경우 로컬 서버 소프트웨어인 Local by Flywheel, MAMP 또는 XAMPP을 사용하는 것이 좋습니다. 로컬 서버를 설치한 후 WordPress의 최신 버전을 다운로드하고 설치하십시오. 다음으로, WordPress 설치 디렉토리의 wp-content/themes 폴더 안에 새로운 폴더를 만듭니다. 예를 들어, my-custom-theme여기는 당신의 주제의 루트 디렉토리가 될 것입니다.
주제 핵심 파일의 생성 (Creation of the Theme Core File)
가장 기본적인 워드프레스 테마는 두 개의 파일만 필요합니다:style.css 그리고 index.php먼저, 생성하세요. style.css 이 파일은 스타일을 정의하는 것 말고도, 더 중요하게도 파일 머리부분의 주석 정보를 통해 WordPress에게 당신의 테마를 알리는 역할을 합니다.
추천 읽기 워드프레스 테마 개발을 위한 최종 가이드: 자신만의 워드프레스 웹사이트 테마를 처음부터 만들기。
/*
Theme Name: My Custom Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个从零开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/Text Domain 국제화를 위해 이것은 후속 번역 텍스트의 식별자 역할을 할 것입니다. 그 다음, 가장 기본적인 것을 만들어 보자. index.php 파일은 간단한 HTML 구조만 포함할 수 있습니다. 이 두 파일을 완료한 후 WordPress 관리자의 “外观”->“主题'에서 이 공석 테마를 보고 활성화할 수 있습니다.
주제 구조와 템플릿 계층
WordPress의 템플릿 계층을 이해하는 것은 테마를 개발할 때 매우 중요합니다. 이는 WordPress가 게시물 페이지, 페이지, 카테고리 아카이브 등 서로 다른 요청에 따라 해당하는 템플릿 파일을 자동으로 선택하여 렌더링할 수 있게 하기 때문입니다.
핵심 템플릿 파일과 그 역할
워드프레스는 특정한 순서로 테ม파일을 검색합니다. 가장 기본적인 프로세스는 가장 구체적인 테ม에서 가장 일반적인 테姆으로 되돌아가는 것입니다. 예를 들어, 개별 글을 방문할 경우, 워드프레스는 다음과 같은 순서로 테ม을 검색합니다.single-post-{id}.php, single-post.php, single.php마지막으로는… singular.php만일 그들 중 하나도 찾아지지 않았다면, 다음과 같이 사용하세요. index.php마찬가지로, 메인 페이지는 먼저 검색을 합니다. front-page.php그리고 나서 home.php이 계층 관계를 이해하면 특정 템플릿 파일을 만들어 서로 다른 페이지의 레이아웃을 정확하게 제어할 수 있습니다.
자주 사용하는 템플릿 파일을 만드세요.
또한… index.php완전한 테마 구조를 구축하려면 다음 주요 템플릿 파일을 차례로 만들어야 합니다.
- header.php웹사이트의 상단 부분을 포함합니다. <head> 지역 및 상단 네비게이션.
- footer.php웹사이트의 하단 부분.
- sidebar.php: 사이드바.
- functions.php주제의 기능 파일. 기능 추가, 메뉴 등록, 위젯 영역 등에 사용됩니다.
- page.php단일 페이지를 렌더링하는 데 사용됩니다.
- single.php`: 단일 기사를 렌더링하는 데 사용됩니다.
- archive.php분류, 태그, 저자 등의 아카이브 페이지를 렌더링하는 데 사용됩니다.
In index.php 에서 사용할 수 있습니다 get_header(), get_footer(), get_sidebar() 이러한 모듈화된 부분들을 導入하기 위해 템플릿 태그를 사용하여 코드의 재사용을 구현할 수 있습니다.
추천 읽기 WordPress 테마 개발에 대한 심층 분석: 입문서부터 전문가용 核心 기술 가이드까지。
핵심 기능 및 테마 옵션
functions.php 파일은 당신의 테마의 “두뇌'이며, 모든 백엔드 로직과 기능 향상이 여기에서 이루어집니다. 그것은 테마가 초기화되었을 때 자동으로 로드됩니다.
주제 지원 및 등록 기능 추가
통과합니다. add_theme_support() 함수를 사용하면 테마가 지원하는 다양한 기능들을 선언할 수 있습니다. 예를 들어, 기사의 썸네일(특징적인 이미지)을 표시하는 기능은 현대적인 테마에서 표준으로 제공됩니다.
function my_theme_setup() {
// 添加文章和评论的 RSS feed 链接到 head
add_theme_support( 'automatic-feed-links' );
// 启用文章缩略图功能
add_theme_support( 'post-thumbnails' );
// 启用自定义菜单功能
add_theme_support( 'menus' );
// 让 WordPress 管理文档标题
add_theme_support( 'title-tag' );
// 启用对古腾堡编辑器的宽对齐和颜色支持
add_theme_support( 'align-wide' );
add_theme_support( 'editor-color-palette', array( /* ... */ ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );또한 네비게이션 메뉴 위치와 위젯 영역(사이드바)을 등록해야 합니다.
function my_theme_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '底部菜单', 'my-custom-theme' ),
) );
}
add_action( 'init', 'my_theme_menus' );
function my_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_theme_widgets_init' );스타일시트와 스크립트 파일을 가져오기
올바른 리소스 인터프레트 방법은 다음과 같습니다. wp_enqueue_style() 그리고 wp_enqueue_script() 함수를 마운트할 wp_enqueue_scripts 훅에 걸려 있어요.
function my_theme_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );
// 引入自定义 JavaScript 文件
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true );
// 如果评论功能开启且是单篇文章/页面，加载评论回复脚本
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );루프와 템플릿 태그
“루프’는 WordPress가 데이터베이스에서 내용을 검색하여 페이지에 표시하는 기본 메커니즘입니다. 루프를 이해하고 올바르게 사용하는 것은 동적 내용 표시의 기초입니다.
표준 루프의 구조
템플릿 파일에서는 아래와 비슷한 코드 구조를 종종 볼 수 있는데, 이것이 WordPress의 주 루프입니다.
추천 읽기 WordPress 테마 개발 입문부터 전문가 수준까지: 제로에서 시작하여 커스텀 테마를 구축하는 방법。
만일 게시물이 있다면: ?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1008>
<header class="entry-header">
<h2 class="entry-title"><a href="/ko/</?php the_permalink(); ?>"></a></h2>
</header>
<div class="entry-content">
</div>
</article>
<p><?php _e( '抱歉，没有找到任何内容。', 'my-custom-theme' ); ?></p>have_posts() 그리고 the_post() 함수가 반복문의 실행을 제어합니다.the_title(), the_content(), the_permalink() 등 템플릿 태그는 현재 글의 구체적인 정보를 출력하는 데 사용됩니다. 루프 바깥에서는 < 태그를 사용할 수 있습니다. is_home(), is_single(), is_page() 다양한 논리를 실행하기 위해 현재 페이지 유형을 판단하기 위한 조건 태그를 사용합니다.
커스텀 쿼리 및 반복 (Custom Queries and Loops)
때로는 메인 루프(주요 처리 과정)가 아닌 다른 내용을 표시해야 할 때가 있습니다. 예를 들어, 홈페이지에 특정 카테고리의 글들을 보여주고 싶을 때가 그런 경우입니다. 이럴 때는 다음과 같은 방법을 사용할 수 있습니다. WP_Query 사용자 정의 쿼리를 만들려면 클래스를 사용해야 합니다.
<?php
$custom_query = new WP_Query( array(
'category_name' => 'featured',
'posts_per_page' => 3,
) );
if ( $custom_query->have_posts() ) :
while ( $custom_query->have_posts() ) : $custom_query->the_post();
// 输出文章内容...
endwhile;
wp_reset_postdata(); // 重置全局 $post 数据
endif;
?>요약
워드프레스 테마를 처음부터 개발하는 것은 체계적인 프로젝트로, 환경 설정, 구조 계획, 기능 구현, 동적 콘텐츠 표시에 이르는 전체 프로세스를 포함합니다. 핵심은 템플릿 계층 메커니즘을 이해하는 것으로, 이는 페이지의 렌더링 로직을 결정합니다. 또한, 이러한 기능을 능숙하게 사용하는 것이 매우 중요합니다. functions.php 테마 기능을 확장하고, 데이터를 출력하기 위한 기본 요소인 “루프'를 마스터하십시오. WordPress 코딩 표준 및 최고 사례를 준수하여 리소스를 올바르게 포함하고, 번역 함수를 사용하며, 적당한 테마 지원을 추가하면 테마가 강력하고 효율적이며 유지 보수하기 쉽게 됩니다. 이 가이드의 단계를 따라 실천하면 구조화된 코드와 완전한 기능을 갖춘 사용자 정의 테마를 구축할 수 있으며, 더 고급한 개발을 위한 견고한 기반을 마련할 수 있습니다.
자주 묻는 질문
###: WordPress 테마를 개발하려면 어떤 핵심 기술들을 숙달해야 할까요?
당신은 백엔드 로직과 템플릿을 위한 PHP, HTML/CSS(구조와 스타일을 위한), 그리고 인터랙티브성을 위한 JavaScript의 기본 지식이 필요합니다. 가장 중요한 것은, 템플릿 계층, 후크(Hooks), 액션 및 필터(Actions & Filters), 루프(The Loop), 그리고 WordPress가 제공하는 다양한 함수와 클래스와 같은 WordPress 핵심 개념을 이해하는 것입니다.
내 테마가 구텐베르크 에디터(Gutenberg Editor)를 지원하도록 하려면 어떻게 해야 하나요?
먼저, functions.php 중국에서 사용하세요. add_theme_support() 관련 기능을 활성화하세요, 예를 들어 editor-styles、align-wide 그리고 사용자 정의 색상 패널. 다음으로, 편집기를 위한 전용 스타일 시트를 만들고 이를 통해 사용자가 원하는 방식으로 편집기를 사용할 수 있게 합니다. add_editor_style() 함수는 백그라운드 편집기의 시각적 경험이 프로그램의 전면과 일치하도록 도입되었습니다. 또한 더 풍부한 편집 기능을 제공하기 위해 블록 스타일(Block Styles) 또는 사용자 정의 블록(Custom Blocks)을 만들 수도 있습니다.
주제 개발에서 다국어 지원을 어떻게 구현할 수 있습니까?
WordPress는 GNU gettext 프레임워크를 사용하여 국제화(i18n)를 수행합니다. 코드 내에서 번역이 필요한 모든 텍스트는 특정 함수로 래핑되어야 합니다. () PHP에서 번역을 위해 사용됩니다._e() 번역하고 바로 표시하기 위한 용도입니다.esc_html() HTML을 번역하고 이스케이프하는 데 사용됩니다. JavaScript에서는 이를 < 로 사용합니다. wp.i18n.__()그런 다음 Poedit 등의 도구를 사용하여 이 텍스트를 .pot 파일로 추출하고, .po 및 .mo 파일로 번역합니다. 마지막으로, style.css 헤더가 올바르게 설정되었습니다. Text Domain 그리고 그것은 functions.php 중국에서 사용하세요. load_theme_textdomain() 번역 파일을 로드하세요.
제 테마에 사용자 정의 설정 페이지를 추가하는 방법은 무엇입니까?
간단한 옵션의 경우, WordPress의 내장된 “커스터마이저(Customizer)” API를 사용할 수 있습니다. 이 도구는 직관적인 실시간 미리보기 인터페이스를 제공합니다. 더 복잡한 요구 사항의 경우, 옵션 페이지(Options Page)를 기반으로 한 설정 인터페이스를 만들 수도 있습니다. WordPress 설정 API를 사용하여 설정을 안전하게 등록, 검증 및 저장할 수 있습니다. 또한 ACF(Advanced Custom Fields)나 카본 필드(Carbon Fields)와 같은 서드 파티 라이브러리를 사용하여 사용자 정의 필드와 옵션 페이지를 더 쉽게 만들 수도 있습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어