WordPress 테마의 핵심 구조를 이해하는 것은 매우 중요합니다. WordPress 테마는 웹사이트의 디자인과 기능을 결정하는 기본적인 구성 요소들로 이루어져 있으며, 이러한 구조를 잘 파악하면 테마를 수정하거나 새로운 테마를 만들 때 더 효율적으로 작업할 수 있습니다. 다음은 WordPress 테마의 주요
코드를 작성하기 전에, 먼저 WordPress 테마의 기본 구성 요소인 템플릿 파일과 스타일시트를 이해해야 합니다. WordPress는 표준화된 명명 규칙을 따르는 일련의 특정 파일을 호출하여 웹사이트의 다양한 부분을 렌더링합니다. 최소화된 테마의 경우, 단 두 개의 파일만 필요합니다:index.php(주요 템플릿 파일) 및style.css(핵심 스타일 시트와 테마 정보 파일은 필요하지만, 기능이 풍부한 웹사이트를 구축하기 위해서는 더 많은 것들이 필요합니다.)
style.css이 파일에는 CSS 규칙뿐만 아니라, 파일 헤더에 있는 주석 블록에도 테마에 대한 메타데이터가 정의되어 있습니다. 여기에는 테마의 이름, 저자, 설명, 버전 등이 포함됩니다. 이것이 바로 WordPress가 테마를 인식하는 방식입니다. 예를 들어, 기본적인 헤더 주석의 예는 다음과 같습니다:
/*
Theme Name: My First Custom Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A clean, custom-built WordPress theme for learning.
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/핵심 파일 외에도, 전형적인 테마 구조에는 다음과 같은 요소들이 포함됩니다:header.php(머리를 끄덕이며 서 있다)footer.php(사이트 하단)sidebar.php(사이드바) 및functions.php(주제 기능 함수 파일) 이러한 파일들을 템플릿 태그를 사용하여 어떻게 처리하는지 이해해야 합니다.get_header(), get_footer()모듈화된 방식으로 구성하는 것이 효율적인 개발의 핵심입니다.
추천 읽기 WordPress 테마 개발 입문 가이드: 제로에서 시작하여 나만의 웹사이트 인터페이스를 만들어보세요。
주제 파일과 디렉터리를 만드세요.
먼저, WordPress가 설치된 디렉터리 내에서 필요한 파일들을 찾아야 합니다.wp-content/themes/새로운 폴더를 만드세요. 이 폴더의 이름은 여러분의 주제를 나타내는 식별자가 될 것입니다. 소문자, 숫자, 하이픈(-)을 사용하는 것을 권장합니다. 예를 들어, “my-project-%year-%month”와 같은 형태로 이름을 지정하실 수 있습니다.my-first-theme모든 주제 파일은 여기에 배치될 것입니다.
핵심 스타일 시트 파일을 생성하세요.
앞서 강조했듯이,style.css이 파일은 반드시 필요합니다. 테마 폴더에 이 파일을 생성한 후, 테마에 대한 모든 정보를 포함하는 헤더를 작성해 주세요. 그런 다음 웹사이트의 외관을 정의하기 위한 기본 CSS를 작성할 수 있습니다. 브라우저의 기본 스타일이 방해가 되지 않도록 하기 위해, 보통 스타일을 초기화하는 작업부터 시작합니다.
/* 在 style.css 的头部注释块之后 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
}주 템플릿 파일을 구축합니다.
다음으로, 생성하세요.index.php이 파일은 기본적이며 가장 중요한 템플릿 파일입니다. 그 초기 구조에는 헤더, 콘텐츠 반복 구조, 그리고 푸터에 대한 호출이 포함되어야 합니다. 템플릿 태그는 WordPress의 내장 함수로, 동적 콘텐츠를 삽입하는 데 사용됩니다.
매우 심플한index.php초기 버전은 다음과 같을 수 있습니다:
<main id="primary" class="site-main">
<p> 만일 게시물이 있다면: </p>
while (have_posts()) : the_post();
// 게시물 내용은 여기에 표시될 것입니다
the_title('<h2>', '</h2>');
the_content();
endwhile;
否则:
echo '<p>현재 게시물이 없습니다.</p>';
endif;
?>
</main>
\n분해형식: 머리, 바닥, 측면패널
코드의 재사용성과 가독성을 높이기 위해, WordPress 테마에서는 페이지의 공통적인 부분들을 별도의 파일로 분리하는 것이 일반적입니다.
사이트의 헤더 템플릿을 구현합니다.
Createheader.php이 파일에는 HTML 문서의 헤더 부분이 포함되어 있습니다.도착하다태그의 시작 부분과 웹사이트 상단의 네비게이션 영역도 포함됩니다. 주요 템플릿 태그에는 다음과 같은 것들이 있습니다:bloginfo()사이트 정보를 얻기 위해 사용되며, 또한…wp_head()후크(hook)는 플러그인과 테마가 코드를 부분적으로 삽입할 수 있도록 해줍니다.
기본적인header.php예시:
추천 읽기 WordPress 테마 개발 완전 가이드: 제로에서 시작하여 사용자 정의 웹사이트 구축하기。
<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body no numeric noise key 1005>
<header class="site-header">
<div class="site-branding">
<h1 class="site-title"><a href="/ko/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
<p class="site-description"><?php bloginfo('description'); ?></p>
</div>
<nav class="main-navigation">
'primary',
'menu_id' => 'primary-menu',
));
?>
</nav>
</header>사이트 하단 템플릿을 구현합니다.
Createfooter.php그것은 메인 콘텐츠 영역이 끝난 후에 나오는 모든 내용을 포함하고 있습니다. 예를 들어, 페이지 하단의 저작권 정보나 매우 중요한 내용들이 여기에 포함됩니다.wp_footer()후크 호출(Hook Call)은 많은 플러그인(예: 코드 분석 플러그인)이 정상적으로 작동하는 데 필수적입니다.
<footer class="site-footer">
<p>© . 판권 소유.</p>
</footer>
</body>
</html>테마 기능과 사용자 정의 기능을 강화합니다.
functions.php이것은 귀하의 테마와 관련된 “뇌” 역할을 하는 부분으로, 기능을 추가하거나 기능들(예: 네비게이션 메뉴, 툴바 등)을 등록하며 스크립트 스타일을 설정할 수 있습니다. 이 모든 작업을 핵심 파일을 수정하지 않고도 수행할 수 있습니다.
등록된 주제가 지원하는 기능들:
Infunctions.php여기서 당신은 사용할 수 있습니다.add_theme_support()이 함수는 테마가 지원하는 기능들을 선언하는 데 사용됩니다. 예를 들어, 기사의 썸네일(특징적인 이미지)을 표시하거나 사용자 정의 로고를 설정하는 기능은 현대적인 테마에서 흔히 제공되는 기능들입니다.
<?php
function my_first_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-first-theme'),
));
}
add_action('after_setup_theme', 'my_first_theme_setup');
?>스타일시트 및 스크립트에 포함하기
올바른 스타일과 스크립트를 로드하는 방법은 다음과 같이 사용하는 것입니다:wp_enqueue_style()그리고wp_enqueue_script()함수를 작성하고 이들을 매핑하십시오.wp_enqueue_scripts후크에 걸려 있습니다. 이를 통해 의존 관계가 제대로 관리되고, 중복 로딩을 방지할 수 있습니다.
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-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');요약
주제 폴더를 생성하는 것부터…style.css시작부터 구축에 이르기까지.index.php、해체하여header.php그리고footer.php등의 템플릿 파일을 준비한 후, 그 파일들을 사용하여…functions.php이 파일은 귀하의 WordPress 테마에 핵심 기능과 리소스를 추가하는 데 필요한 내용을 담고 있으며, 이 과정이 바로 WordPress 테마 개발의 기본적인 프레임워크를 구성합니다. 각 단계에서는 WordPress 템플릿의 계층 구조와 관련된 개념 및 모범 사례(예: 템플릿 태그와 훅의 올바른 사용법)가 강조됩니다. 이러한 기초를 숙지하면 어떤 기능이든 커스터마이징하고 확장하여 다양한 프로젝트 요구사항을 충족시킬 수 있는 탄탄한 출발점을 갖추게 됩니다.
자주 묻는 질문
###: WordPress 테마에는 최소 몇 개의 파일이 필요하나요?
작동 가능한 WordPress 테마는 최소한 두 개의 파일이 필요합니다:index.php그리고style.css그중에서,style.css파일 상단의 주석 블록은 반드시 존재해야 하며, 올바른 테마 정보를 포함해야 합니다. 이는 WordPress가 테마를 인식하는 데 필수적인 조건입니다.
추천 읽기 0 에서 1까지: WordPress 테마 개발을 위한 최종 가이드와 실습 강좌。
내 테마에 작은 도구 영역을 어떻게 추가할 수 있나요?
You need to pass throughfunctions.php이 파일을 사용하여 앱 내의 도구 영역(사이드바)에 추가 기능을 등록할 수 있습니다.register_sidebar()함수를 정의하고 그 매개변수(예: 이름, ID, 설명 등)를 지정하세요. 그런 다음 해당 템플릿 파일에서 이 함수를 사용할 수 있습니다.sidebar.php)에서 사용됩니다.dynamic_sidebar()그것을 호출하는 함수.
왜 제 사용자 정의 네비게이션 메뉴가 표시되지 않나요?
이는 보통 해당 파일이 적절한 위치에 없거나, 필요한 설정이 완료되지 않았기 때문에 발생합니다.functions.php요리점 위치를 올바르게 등록하셨습니다. 사용하신 정보가 정확한지 확인해 주세요.register_nav_menus()함수를 사용하여 채소의 위치(예: ‘primary’)를 등록합니다.header.php중에서 호출합니다.wp_nav_menu()그때,‘theme_location’파라미터에 설정된 값이 등록 시와 완전히 일치합니다. 마지막으로, WordPress 관리자의 “외관 > 메뉴” 설정에서 특정 메뉴를 해당 위치에 할당해야 합니다.
我应该在什么时候使用get_template_part()函数？
get_template_part()이 함수는 재사용 가능한 코드 조각을 모듈화하는 데 사용되며, 특히 기사의 반복 구문에서 다양한 형식의 콘텐츠를 출력하는 데 유용합니다. 예를 들어, 다음과 같은 함수를 만들 수 있습니다:content.php먼저 파일을 사용하여 각 기사의 일반적인 HTML 구조를 정의한 다음,index.php`for` 루프 내에서 사용합니다.get_template_part(‘content’)이를 호출하면 됩니다. 이렇게 하면 코드의 재사용성과 유지보수성이 향상되며, 더 전문적인 템플릿을 만드는 데에도 도움이 됩니다.content-page.php가능해졌습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어