준비 작업 및 환경 구축
코드 작성을 시작하기 전에 적절한 개발 환경이 필요합니다. 여기에는 로컬 서버 환경(예: XAMPP, MAMP 또는 Local by Flywheel), 코드 편집기(예: VS Code 또는 PhpStorm), 그리고 완전히 새로 설치한 WordPress가 포함됩니다. 최신 기능과 API를 사용할 수 있도록 WordPress가 최신 버전인지 확인하세요.
다음으로, WordPress의wp-content/themes디렉터리 아래에 새 폴더를 만들고, 이 폴더의 이름이 테마의 슬러그입니다. 예를 들어my-first-theme. 이 폴더는 모든 테마 파일이 자리 잡게 될 곳입니다. 워드프레스 테마의 가장 기본적인 파일은 두 개뿐입니다:index.php그리고style.css그중에서,style.css스타일시트일 뿐만 아니라 테마 메타데이터를 포함하는 “헤더 파일”이며, 그 주석 정보는 워드프레스가 당신의 테마를 인식하는 데 매우 중요합니다.
기본 생성style.css파일의 헤더 주석에는 다음 정보가 포함되어야 합니다:
추천 읽기 완벽한 WordPress 테마를 만들기: 제로에서 마스터까지의 전체 개발 가이드。
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.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
*/Text Domain국제화를 위해 사용되며, 테마 폴더 이름과 일치해야 합니다. 동시에, 가장 간단한 것을 하나 만드세요.index.php파일, 한 문장만 포함하면 됩니다<?php get_header(); ?>그리고 한 명과…<h1>안녕하세요, 세계!</h1>이제 WordPress 관리자 화면의 “외모”->“테마”에서 테마를 확인하고 활성화할 수 있습니다. 하지만 아직은 아무것도 표시되지 않습니다(아직 만들지 않았기 때문입니다header.php）하지만 이는 당신이 이미 성공적으로 첫걸음을 내디뎠다는 것을 의미합니다.
핵심 템플릿 파일 및 템플릿 계층 구조 이해
워드프레스는 특정 페이지 요청에 대해 어떤 템플릿 파일을 사용해 콘텐츠를 표시할지 결정하기 위해 “템플릿 계층’이라고 불리는 지능적인 시스템을 사용합니다. 이 계층을 이해하는 것은 테마 개발의 핵심입니다. 시스템은 가장 구체적인 템플릿 파일부터 찾기 시작하며, 그것이 존재하지 않으면 더 일반적인 파일로 되돌아갑니다.
가장 기본적인 템플릿 파일에는 다음이 포함됩니다:
* index.php: 최종 기본 템플릿으로, 모든 요청은 더 구체적인 템플릿을 찾지 못하면 이를 사용합니다.
* header.php: 문서를 포함한<head>부분과 웹사이트의 페이지 머리글 영역. 통해get_header()함수 소개.
* footer.php: 웹사이트의 바닥글 영역을 포함합니다. 통해get_footer()함수 소개.
* sidebar.php: 사이드바 구성 요소를 포함합니다. 통해get_sidebar()함수 소개.
* functions.php：这不是一个模板文件，而是你主题的“功能库”，用于添加功能、注册菜单、小工具等。
对于不同类型的页面，有更具体的模板：
* 单篇文章：查找顺序是single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* 静态页面：查找顺序是custom-template.php（自定义模板）-> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
* 文章列表（博客首页、分类页等）：查找顺序是home.php（블로그 게시물 목록 페이지용）-> front-page.php홈 index.php。
헤더와 푸터 템플릿을 구축합니다.
먼저 생성하세요.header.php그것은 반드시<!DOCTYPE html>시작하고, 중요한 WordPress 함수 호출(예:wp_head()。
추천 읽기 고급 워드프레스 테마 커스터마이징: 디자인, 개발, 최적화 실무 가이드。
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body no numeric noise key 1004>
<header>
<h1><a href="/ko/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
<nav>
'primary')); ?>
</nav>
</header>마찬가지로, 생성하세요.footer.php그리고 호출을 보장wp_footer()함수.
<footer>
<p>© . 판권 소유.</p>
</footer>
</body>
</html>이제, 업데이트할 수 있습니다index.php, 이러한 템플릿 부품을 사용합니다.
<main>
<h1>메인에서 온 Hello World!</h1>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
the_title('<h2>', '</h2>');
the_content();
endwhile;
else :
echo '<p>No content found.</p>';
endif;
?>
</main>
\nfunctions.php를 통한 테마 개선 사항
functions.php文件是你的主题的“大脑”。你在这里添加功能、注册WordPress核心组件如菜单和小工具区域，以及排入样式表和脚本文件。
주제 설정 기능과 등록을 위한 네비게이션 메뉴를 추가하세요.
首先，让我们启用一些基本的主题功能。使用add_theme_support()이 함수는 특정 주제가 지원하는 기능들을 선언하는 역할을 합니다.
<?php
// functions.php
function my_first_theme_setup() {
// 让WordPress管理文档标题
add_theme_support('title-tag');
// 启用文章和页面的特色图像功能
add_theme_support('post-thumbnails');
// 为文章中的图像添加响应式图片支持
add_theme_support('responsive-embeds');
// 添加对HTML5标记的支持
add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');接下来，注册一个导航菜单位置。这允许用户在后台“外观”->“菜单”中配置菜单，并在模板中使用wp_nav_menu()함수가 그것을 호출합니다.
function my_first_theme_menus() {
register_nav_menus(array(
'primary' => __('Primary Menu', 'my-first-theme'),
'footer' => __('Footer Menu', 'my-first-theme'),
));
}
add_action('init', 'my_first_theme_menus');스타일시트 및 스크립트에 포함하기
올바른 스타일 및 스크립트 로드 방식은 다음과 같습니다wp_enqueue_style()그리고wp_enqueue_script()함수를 마운트할wp_enqueue_scripts훅에 걸려 있어요.
추천 읽기 WordPress 테마 개발에 대한 종합적인 분석: 초보자부터 전문가까지의 실전 가이드。
function my_first_theme_scripts() {
// 排入主样式表
wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
// 排入自定义JavaScript文件
wp_enqueue_script('my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');创建循环与内容模板
“루프”는 데이터베이스에서 글을 검색하고 표시하는 데 사용되는 WordPress의 PHP 코드 구조입니다. 이는 거의 모든 템플릿 파일의 핵심입니다.
理解主循环的结构
위에 있는 내용입니다.index.php예제에서 우리는 이미 기본 반복문 하나를 보았습니다. 이제 그것을 분해해 봅시다:
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
<article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
<h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
<?php the_post_thumbnail(); ?>
<div class="entry-content">
</div>
</article>
<!-- 分页链接 -->
<!-- 如果没有文章 -->
<p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>단일 글 템플릿 만들기
现在，让我们创建一个专门用于显示单篇文章的模板single.php。它比列表页的循环更详细。
<main id="primary">
<?php
while (have_posts()) : the_post();
?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
<header>
<h1></h1>
<div class="entry-meta">
<?php
printf(
__('Posted on %s by %s', 'my-first-theme'),
get_the_date(),
get_the_author_posts_link()
);
?>
</div>
제발, 저의 요청을 이해해 주십시오. 저는 우리 회사의 로고를 사용하고 싶습니다.
</header>
<div class="entry-content">
<?php
// 分页，适用于使用 <!--nextpage--> 标签的长文章
wp_link_pages(array(
'before' => '<div class="page-links">' . __('Pages:', 'my-first-theme'),
'after' => '</div>',
));
?>
</div>
<footer>
<?php the_tags('<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?>
</footer>
</article>
</main>
\n요약
이 가이드를 통해 여러분은 처음부터 기본 WordPress 테마를 구축하는 핵심 여정을 이미 마쳤습니다. 우리는 개발 환경을 구축하고 기본 파일을 만드는 것에서 시작해, 점차 유연한 테마를 구축하는 초석인 WordPress의 템플릿 계층 시스템을 이해하는 단계로 깊이 들어갔습니다. 여러분은 재사용 가능한 것을 구축하는 방법을 배웠습니다.header.php그리고footer.php模板部件，并通过强大的functions.php文件为你的主题添加了关键功能支持，如导航菜单和样式加载。最后，我们探索了WordPress的“循环”机制，并创建了用于显示文章列表和单篇文章的模板。
이것은 단지 시작점일 뿐입니다. 다음으로, 더 많은 특정 템플릿(예:page.php, archive.php), 위젯 영역을 등록하고, 사용자 정의 게시물 유형과 분류 체계를 추가하며, 더욱 고급스러운 반응형 디자인과 JavaScript 상호작용을 구현합니다. 공식 개발자 문서를 참고하고 꾸준히 실습하는 것이 실력을 향상시키는 가장 좋은 방법임을 기억하세요.
자주 묻는 질문
테마를 활성화한 후 웹사이트가 하얗게만 표시됩니다(화이트 스크린). 어떻게 해야 하나요?
이것은 보통 PHP 치명적인 오류로 인해 발생합니다. 먼저 당신의 것을 확인하세요functions.php文件中是否有语法错误，比如缺少分号或括号。打开WordPress的WP_DEBUG모드는 구체적인 오류 정보를 확인하는 데 도움이 될 수 있습니다.wp-config.php파일 내에서, 해당 내용을 처리할 것입니다.define('WP_DEBUG', false);로 변경define('WP_DEBUG', true);。
如何为我的主题添加自定义Logo功能？
In yourfunctions.php문서의add_theme_support部分，添加一行：add_theme_support('custom-logo');。你还可以传递一个数组参数来定义Logo的大小和是否灵活高度等。之后，用户可以在“外观”->“自定义”->“站点身份”中上传Logo，并在模板中使用the_custom_logo();함수가 그것을 호출합니다.
为什么我注册的导航菜单在后台不显示？
다음 사항을 확인해 주세요. 첫째, 등록 코드가 있는지 확인하세요.functions.php中，并且已经正确挂载到init후크 또는after_setup_theme후크에. 둘째, 당신이 정의한theme_location(예'primary'）호출 중wp_nav_menu()시간과 완전히 일치합니다. 셋째, 메뉴를 만든 후에는 관리자 화면의 “외모” -> “메뉴” -> “위치 관리” 탭에서 등록한 위치에 메뉴를 할당해야 합니다.
작은 도구 영역(사이드바)은 어떻게 생성하나요?
먼저,functions.php중국에서 사용하세요.register_sidebar()函数注册一个小工具区域。你需要提供一个数组参数来定义其ID、名称、描述等。然后，在你希望显示侧边栏的模板文件（如sidebar.php이 게임에서는 In this game, you usedynamic_sidebar()函数并传入小工具的ID来调用它。最后，在index.php또는single.php등의 템플릿에서 사용합니다.<?php get_sidebar(); ?>引入侧边栏模板。
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어