준비 작업 및 환경 구축
주제 코드를 작성하기 시작하기 전에, 안정적이고 효율적인 로컬 개발 환경을 갖추는 것이 필수적입니다. 이를 통해 수정 사항을 신속하게 미리 확인할 수 있을 뿐만 아니라, 온라인 웹사이트에 직접적인 영향을 미치는 것을 방지할 수 있습니다. Local by Flywheel, XAMPP, MAMP와 같은 도구를 사용하여 PHP와 MySQL을 포함한 로컬 서버를 한 번에 설정하는 것을 권장합니다.
다음으로, 주제의 디렉터리 구조를 결정해야 합니다. 표준적인 WordPress 테마는 일반적으로 다음과 같은 핵심 파일들을 포함합니다:style.css(주제 스타일 시트 및 정보 헤더)index.php(주 템플릿 파일)functions.php(주제 기능 파일) 그리고header.php、footer.php、sidebar.php등 템플릿 관련 파일들은 WordPress의 설치 디렉터리 내에서 찾을 수 있습니다.wp-content/themes/먼저 “my-custom-theme”과 같은 새로운 폴더를 생성한 다음, 이 폴더 내에서 필요한 파일들을 만들어 나가세요.
Create a theme information header file
주제의 “신분증”은…style.css이 파일은 테마의 스타일을 정의할 뿐만 아니라, 파일 상단에 있는 주석 블록이 WordPress가 해당 테마를 인식하는 데 중요한 역할을 합니다. 이 정보 헤더는 반드시 지정된 형식을 엄격히 준수해야 합니다.
추천 읽기 나에게 맞는 WordPress 테마 선택 및 맞춤 설정。
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从头开始构建的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/그중에서,Text Domain이 파일은 국제화(i18n)를 위해 사용되며, 테마 폴더의 이름과 반드시 일치해야 합니다. 이는 번역 파일을 로드하는 데 중요한 식별자입니다. 이 파일을 작성한 후에는 해당 테마가 WordPress 관리자의 “외관” -> “테마” 목록에 표시되게 됩니다. 하지만 아직은 실제 기능이 없습니다.
기본 템플릿 파일을 구축합니다.
WordPress는 템플릿 계층 시스템을 사용하여 다양한 페이지 요청에 어떤 템플릿 파일을 사용할지 결정합니다. 기본 템플릿을 만드는 것은 테마를 구성하는 데 있어 핵심적인 첫 단계입니다.
먼저는…index.php이것은 모든 페이지의 최종 복구(리커버리)를 위한 템플릿입니다. 가장 간단한 형태로 말하자면…index.php다른 템플릿 부분에 대한 호출을 포함할 수 있습니다.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 包含文章内容模板
get_template_part( 'template-parts/content', get_post_type() );
endwhile;
the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>创建页头和页脚模板
header.php 파일에는 일반적으로 문서 유형을 나타내는 선언이 포함되어 있습니다.지역 및 웹사이트 헤더의 공통 부분입니다. 반드시 사용해 주세요.wp_head()이 함수를 통해 플러그인과 테마가 여기에 필요한 코드(예: 스타일, 스크립트, 메타 태그 등)를 삽입할 수 있습니다.
<!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>
<header id="masthead" class="site-header">
<!-- 你的导航菜单、Logo等代码在这里 -->
</header>그에 따라,footer.php종료해야 합니다.header.php중에서 열린 태그를 확인하고, 반드시 해당 태그에 대한 처리를 수행해야 합니다.wp_footer()후크(hook)는 많은 플러그인(예: 코드 분석 도구)과 WordPress의 핵심 기능에 필수적인 요소입니다.
추천 읽기 顶级WordPress主题开发指南：从零到精通构建与定制。
테마 기능과 사용자 정의 기능을 강화합니다.
functions.php이 파일은 여러분의 테마에 대한 “제어 센터” 역할을 합니다. 이 파일을 사용하여 테마에 필요한 기능들을 추가하거나, 메뉴와 사이드바를 등록하며, 스타일시트 및 스크립트를 테마에 적용할 수 있습니다.
주제 기반의 기본 지원을 추가합니다.
통과합니다.add_theme_support()함수를 사용하면 자신의 테마에서 다양한 WordPress 기능을 지원하도록 설정할 수 있습니다. 예를 들어, 글의 썸네일(프로필 이미지)을 활성화하거나 사용자 정의 로고를 추가하는 것은 현대적인 테마에서 흔히 제공되는 기능들입니다.
function my_custom_theme_setup() {
// 让主题支持文章和评论的RSS feed链接
add_theme_support( 'automatic-feed-links' );
// 启用文章特色图像功能
add_theme_support( 'post-thumbnails' );
// 启用自定义Logo功能
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
// 让WordPress生成和管理文档<title>标签
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );등록 메뉴와 사이드바
WordPress 메뉴는 다음과 같은 방법으로 생성 및 관리됩니다:register_nav_menus()함수 등록. 여러 메뉴 위치를 정의할 수 있습니다. “주 네비게이션'과 ”페이지 하단 네비게이션'과 같이 예를 들어요.
function my_custom_theme_menus() {
register_nav_menus(
array(
'menu-1' => esc_html__( 'Primary Menu', 'my-custom-theme' ),
'menu-2' => esc_html__( 'Footer Menu', 'my-custom-theme' ),
)
);
}
add_action( 'init', 'my_custom_theme_menus' );侧边栏（或称“小工具区域”）通过register_sidebar()함수 등록: 각 사이드바에는 고유한 ID와 설명이 필요합니다.
function my_custom_theme_widgets_init() {
register_sidebar(
array(
'name' => esc_html__( 'Sidebar', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', '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' );스타일, 스크립트, 템플릿의 계층 구조
주제의 스타일과 스크립트가 올바르게 로드되고 다른 플러그인과 충돌하지 않도록 하기 위해서는 WordPress가 제공하는 큐에 넣는 함수를 사용해야 합니다.
스타일과 스크립트를 올바르게 적용하는 것입니다.
절대로 템플릿 파일 내에서 직접 리소스를 사용하거나 태그를 통해 리소스를 가져오지 마세요. 대신 다음과 같은 방법을 사용해야 합니다:wp_enqueue_style()그리고wp_enqueue_script()함수.
추천 읽기 워드프레스 테마 개발을 위한 완전한 가이드: 0부터 출시까지의 실제 튜토리얼。
function my_custom_theme_scripts() {
// 排入主样式表
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 排入自定义JavaScript文件
wp_enqueue_script( 'my-custom-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_custom_theme_scripts' );템플릿 계층 구조를 이해하고 활용하는 것은 매우 중요합니다. 템플릿 계층 구조란 템플릿이 어떻게 구성되어 있으며, 각 요소들이 어떻게 상호 연결되어 있는지를 의미합니다. 이를 통해 템플릿을 더 효율적으로 관리하고, 수정
WordPress의 템플릿 계층 구조는 매우 강력한 시스템입니다. 예를 들어, 블로그 글을 조회할 때 WordPress는 다음과 같은 순서로 템플릿을 찾습니다:single-post-{slug}.php -> single-post-{id}.php -> single-post.php -> single.php -> singular.php -> index.php。
당신은 기본적으로 표시되는 내용을 덮어쓰기 위해 특정 템플릿 파일을 만들 수 있습니다. 예를 들어, 다음과 같은 템플릿 파일을 생성할 수 있습니다:page-about.php이 파일은 “about” 페이지를 표시하는 데 특별히 사용될 것입니다(단, 페이지의 별칭이 “about”인 경우에만 해당합니다). 또 다른 강력한 도구는…front-page.php이것은 웹사이트의 프론트엔드 표시 페이지를 정의하는 데 사용되며, 다른 설정보다 우선순위가 높습니다.home.php(블로그 글 목록 페이지)
요약
이 가이드는 WordPress 커스텀 테마를 처음부터 구축하는 데 필요한 핵심 단계들을 체계적으로 설명합니다. 로컬 환경을 설정하는 것부터, 필요한 정보가 포함된 헤더를 생성하는 것까지…style.css…에서 구축에 이르기까지index.php、header.php、footer.php기본 템플릿 파일들을 통해 주제의 골격이 형성되었습니다.functions.php파일에 관해서는 테마 기능을 대폭 개선했습니다. 여기에는 테마 지원 기능의 추가, 네비게이션 메뉴 및 사이드바의 등록 기능이 포함됩니다. 마지막으로, WordPress의 표준 방법을 사용하여 스타일과 스크립트를 배치하는 것의 중요성을 강조했으며, 강력한 템플릿 계층 시스템에 대해서도 설명했습니다. 이 시스템을 통해 개발자들은 다양한 콘텐츠 유형에 맞게 정확한 표시 템플릿을 만들 수 있습니다. 이러한 모범 사례를 따르면 구조가 잘 정리되고 유지보수가 용이한 테마를 만들 수 있을 뿐만 아니라, WordPress 코어 및 플러그인과의 호환성도 보장할 수 있습니다.
자주 묻는 질문
내 테마에 사용자 정의 페이지 템플릿을 어떻게 추가하나요?
커스텀 페이지 템플릿을 만들려면 먼저 테마 디렉터리 내에 새로운 PHP 파일을 생성해야 합니다. 예를 들어, `custom_page_template.php`와 같은 이름으로 파일을 만들 수 있습니다.template-fullwidth.php이 파일의 맨 위에는 특정 템플릿 이름에 대한 주석을 추가해야 합니다.
<?php
/**
* Template Name: 全宽页面模板
* Description: 一个没有侧边栏的全宽页面模板。
*/그런 다음, 이 파일에 전체 화면 너비의 페이지 레이아웃 코드를 작성할 수 있습니다. 보통은…get_header();페이지를 저장한 후, WordPress 관리자에서 페이지를 편집하거나 새로 생성할 때 “페이지 설정” -> “템플릿” 드롭다운 메뉴에서 “전체 너비 페이지 템플릿”을 확인하고 사용할 수 있습니다.
왜 제가 만든 사용자 정의 메뉴가 표시되지 않나요?
메뉴가 표시되지 않는 데에는 몇 가지 이유가 있습니다. 먼저, 테마 설정을 확인하여 모든 필수 설정이 올바르게 적용되었는지 확인해 주세요.functions.php중국을 통해register_nav_menus()함수가 채소 단위 위치를 등록했습니다.
둘째, WordPress 관리자의 “외관(Appearance)” -> “메뉴(MeMenus)” 페이지로 이동하여 새로운 메뉴를 생성하세요. 메뉴에 페이지, 글, 사용자 정의 링크와 같은 항목을 추가한 다음, “메뉴 설정(MeMenu Settings)” 영역의 하단에서 이 메뉴를 테마에 등록한 메뉴 위치(예: “주 메뉴(Main Navigation)”에 할당해야 합니다.
마지막으로, 템플릿 파일(보통은…)에서 필요한 작업을 완료해야 합니다.header.php메뉴는 `( )` 안에서 호출됩니다. 사용 방법은 다음과 같습니다.wp_nav_menu()함수를 호출할 때 올바른 “theme_location” 매개변수를 지정해야 합니다. 예를 들어:wp_nav_menu( array( ‘theme_location’ => ‘menu-1’ ) );이 세 단계를 모두 완료해야만 메뉴가 올바르게 표시됩니다.
내 테마를 어떻게 번역(국제화) 기능을 지원하도록 만들 수 있을까요?
테마를 번역에 지원하도록 설정하는 것을 국제화(i18n)라고 합니다. 이 과정은 주로 세 단계로 나뉩니다. 첫 번째 단계는 “준비”입니다: 테마 내에서 번역이 필요한 모든 텍스트에 WordPress가 제공하는 번역 함수를 사용하여 해당 텍스트를 감싸야 합니다. 가장 자주 사용되는 방법은…esc_html__( ‘文本’, ‘my-custom-theme’ )(출력된 HTML 내용은 이미 이스케이프 처리가 되어 있으므로, 별도의 변환은 필요하지 않습니다.)_e( ‘文本’, ‘my-custom-theme’ )(출력 결과: `[(“(输出并转义)。务必确保第二个参数（文本域）与你在…”)]`)style.css중국에서 정의된Text Domain완전히 일치합니다.
두 번째 단계는 “생성”입니다: Poedit와 같은 도구를 사용하여 테마의 PHP 파일을 스캔하고, 그 결과로 필요한 파일을 생성합니다..pot(Portable Object Template) 템플릿 파일입니다. 번역자는 이 파일을 기반으로 해당 언어에 맞는 콘텐츠를 생성할 수 있습니다..po그리고 컴파일된 후.mo파일.
세 번째 단계는 “로드”입니다: 당신의…functions.php문서에서after_setup_theme후크 함수 내에서 사용합니다.load_theme_textdomain( ‘my-custom-theme’, get_template_directory() . ‘/languages’ )번역 파일을 로드하세요. 이렇게 하면 사용자가 웹사이트 언어를 변경할 때, 테마 텍스트도 자동으로 해당 언어로 변경됩니다.
functions.php 파일에 오류가 발생하면 어떤 결과가 생길까요?
functions.php파일에 있는 문법 오류나 치명적인 오류로 인해 전체 웹사이트가 “화면이 비어 있는 상태로 멈추는” 현상이 발생할 수 있으며, 백엔드에서는 치명적인 오류 메시지가 표시될 수 있습니다. 이는 해당 파일이 WordPress가 초기화되는 단계에서 로드되기 때문에, 그 안의 오류가 WordPress의 전체 로딩 프로세스를 중단시키기 때문입니다.
이런 상황에 처했다면 몇 가지 복구 방법이 있습니다. 가장 직접적인 방법은 FTP나 호스트가 제공하는 파일 관리자를 사용하여 문제가 발생한 파일을 다시 업로드하거나 삭제하는 것입니다.functions.php파일 이름 변경 (예: 다른 이름으로 바꾸기)functions.php.bak또는 파일의 내용을 삭제하세요. 이렇게 하면 WordPress는 해당 파일을 빈 파일로 간주하고, 웹사이트는 다시 접속 가능해집니다. 하지만 테마의 사용자 정의 기능은 일시적으로 작동하지 않을 것입니다. 수정이 완료된 후에는 코드 오류를 바로잡고 파일을 다시 복원하시면 됩니다.functions.php먼저 백업을 수행하고 로컬 개발 환경에서 충분히 테스트하는 것은 매우 좋은 습관입니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어