코드 작성을 시작하려면 먼저 로컬 개발 환경이 필요합니다. 여기에는 일반적으로 로컬 서버(예: XAMPP, MAMP 또는 Local by Flywheel), PHP, MySQL 데이터베이스, 코드 편집기(예: VS Code, Sublime Text)가 포함됩니다. 사용 중인 PHP 버전이 공식 워드프레스 요구사항을 충족하는지 확인하세요.
다음으로, WordPress가 설치된 디렉터리 내에서…wp-content/themes폴더 안에서 새로운 폴더를 만들어 보세요, 예를 들어…my-first-theme이 폴더에는 당신의 주제와 관련된 모든 파일들이 저장될 것입니다.
가장 기본적인 WordPress 테마는 단 두 개의 파일만 필요로 합니다:style.css그리고index.php먼저, 생성하세요.style.css파일을 열고 파일 헤더에 워드프레스에서 테마를 인식하는 데 필요한 테마 정보 주석을 추가합니다.
추천 읽기 개인화된 워드프레스 테마: 전문적인 웹사이트 디자인을 처음부터 만들는 완전한 가이드。
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 一个简单的入门级响应式WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/그런 다음 가장 간단한index.php파일에는 당분간 HTML 스켈레톤과 “Hello World”라는 문구만 포함되어 있습니다.
<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1001>
<h1>이것이 저의 첫 번째 테마입니다.</h1>
</body>
</html>이제 워드프레스 백엔드에 로그인하고 모양 -> 테마에서 “내 첫 번째 테마”가 표시되고 다음을 수행할 수 있어야 합니다. 활성화합니다. 지금은 그다지 기능적이지는 않지만 워드프레스에서 인식할 수 있는 테마를 성공적으로 만들었습니다.
주제의 핵심 템플릿 파일을 구축합니다.
전체 테마는 사이트의 여러 부분의 표시를 제어하는 일련의 템플릿 파일로 구성됩니다. 가장 중요한 파일부터 시작해 보겠습니다.
머리글과 바닥글 분리
중복 코드(헤더 및 바닥글 등)를 별도의 파일로 분리하는 것이 첫 번째 단계입니다. 만들기header.php파일의 데이터를 포함하는<!DOCTYPE html>열려면<body>태그 앞에 있는 모든 내용.
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
</head>
<body no numeric noise key 1003>
<header id="masthead" class="site-header">
<h1 class="site-title"><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>Createfooter.php파일에 바닥글 콘텐츠와 닫는 태그를 추가합니다.
추천 읽기 처음부터 나만의 워드프레스 테마 만들기: 아키텍처, 디자인, 개발을 위한 완벽한 가이드。
<footer id="colophon" class="site-footer">
<p>©</p>
</footer>
</body>
</html>그런 다음index.php파일을 사용하여get_header()그리고get_footer()함수를 사용하여 이러한 부분들을 가져옵니다.
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) .
the_post();
// 글의 내용이 여기에 표시됩니다.
the_title( '<h2>', '</h2>' );
the_content();
한편
else :
echo '<p>콘텐츠를 찾을 수 없습니다.</p>'; endif.
endif; ?
? >endif; ?
</main>포스트 루프 및 사이드바 만들기
upperindex.php글 목록을 검색하고 표시하는 데 사용되는 기본 워드프레스 메인 루프(The Loop)가 포함되어 있습니다. 다음으로sidebar.php를 클릭하여 사이드바를 추가합니다.
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>페이지에 사이드바를 도입하려면 사이드바에index.php을 사용하여 구조 조정 전후의 주요 콘텐츠 영역의get_sidebar()함수를 사용해야 합니다. 또한functions.php파일을 사용하여 이 사이드바 위젯 영역을 등록합니다.
반응형 레이아웃과 스타일을 구현하는 방법
반응형 디자인은 테마가 다양한 기기에서 잘 표시되도록 합니다. 기본적인 CSS 구조와 미디어 쿼리부터 시작하겠습니다.
기본 스타일 및 탄성 상자 모델 설정하기
In yourstyle.css테마 정보 댓글 아래에 재설정 스타일과 기본 레이아웃을 추가합니다. Flexbox를 사용하여 간단한 반응형 레이아웃을 만드는 것이 좋은 시작점입니다.
/* 基础重置与样式 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
/* 主要布局容器 */
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-main {
flex: 1;
padding: 2rem;
}
/* 头部与底部样式 */
.site-header, .site-footer {
background-color: #f8f9fa;
padding: 1rem 2rem;
text-align: center;
}미디어 문의 추가
미디어 쿼리는 반응형 디자인의 핵심입니다. 화면 너비가 768px 미만(일반적인 태블릿 기기 아래)일 때 콘텐츠 영역과 사이드바의 레이아웃을 나란히 배열하는 방식에서 쌓아 올리는 방식으로 변경하는 간단한 중단점을 추가합니다.
추천 읽기 워드프레스 테마 개발: 초보자부터 숙달까지 완벽한 가이드。
먼저 다음과 같은 HTML 구조를 수정합니다.index.php메인 콘텐츠와 사이드바를 컨테이너에 넣습니다.
<div class="content-area">
<main id="primary" class="site-main">
<!-- 主循环内容 -->
</main>
<?php get_sidebar(); ?>
</div>그런 다음 해당 스타일을 CSS에 추가합니다.
.content-area {
display: flex;
flex-wrap: wrap;
}
.site-main {
flex: 3;
min-width: 300px;
}
#secondary {
flex: 1;
min-width: 250px;
padding-left: 2rem;
}
/* 响应式断点：平板及以下 */
@media (max-width: 768px) {
.content-area {
flex-direction: column;
}
#secondary {
padding-left: 0;
padding-top: 2rem;
}
.site-header, .site-footer, .site-main {
padding: 1rem;
}
}functions.php를 통한 테마 개선 사항
functions.php문서는 기능을 추가하고, 기능을 등록하고, 스크립트와 스타일을 안전하게 도입하는 데 사용되는 테마의 “엔진룸'입니다.
등록하기 – 네비게이션 메뉴 및 툴바 영역
Infunctions.php중, 사용register_nav_menus함수를 사용하여 테마의 탐색 메뉴 위치를 등록할 수 있습니다.
esc_html__( 'Primary Menu', 'my-first-theme' ),
'footer' => esc_html__( 'Footer Menu', 'my-first-theme' ),
) );
// 注册侧边栏小工具区域
register_sidebar( array(
'name' => esc_html__( 'Main Sidebar', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>등록하시면 이용하실 수 있습니다.header.php그리고footer.php중국에서 사용하세요.wp_nav_menu()함수를 사용하여 이러한 메뉴를 호출할 수 있습니다.
스타일 및 스크립트의 안전한 로딩
템플릿 파일에 CSS 또는 JavaScript 파일을 직접 하드 링크하지 마세요. 다음을 사용해야 합니다.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' );더 많은 템플릿 파일을 만들어 기능을 강화하세요.
현재 테마는 하나뿐입니다.index.php모든 페이지에 사용되며 워드프레스 템플릿 계층 구조에 따라 다양한 유형의 페이지에 대해 보다 구체적인 템플릿을 찾게 됩니다. 몇 가지를 만들어 보겠습니다.
단일 글 및 페이지 템플릿
Createsingle.php단일 글을 표시하는 데 사용됩니다.
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content', 'single' );
// 显示文章导航
the_post_navigation();
// 如果评论开启，则加载评论模板
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Createpage.php정적 페이지를 표시하는 데 사용됩니다. 정적 페이지를 표시하는 데 사용되는single.php유사하지만 일반적으로 카테고리, 태그 등과 같은 메타 정보는 표시하지 않습니다.
DRY(반복하지 않기) 원칙을 따르기 위해 글과 페이지의 콘텐츠 표시 부분을 템플릿 부분으로 추출할 수 있습니다. 테마 루트 디렉터리에서template-parts폴더를 생성하고 그 안에 파일을 추가하세요.content-single.php그리고content-page.php。
문서 아카이브 페이지 템플릿
Createarchive.php를 사용하여 카테고리, 태그, 작성자 등과 같은 아카이브 페이지를 표시할 수 있습니다. 재사용할 수 있습니다.index.php를 사용할 수 있지만 일반적으로 아카이브 제목을 상단에 표시합니다.
<main id="primary" class="site-main">
<header class="page-header">
<?php
the_archive_title( '<h1 class="page-title">', '</h1>' );
the_archive_description( '<div class="archive-description">', '</div>' );
? >
</header>
<?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>
\n요약
이 가이드를 통해 기본적이면서도 완벽한 반응형 워드프레스 테마를 구축했습니다. 테마의 기본 파일 구조를 이해하고, 템플릿 위젯(헤더, 푸터, 사이드바)을 분리하는 방법을 배웠으며, 핵심 워드프레스 루프를 구현하고, CSS 미디어 쿼리를 사용하여 반응형 레이아웃을 구축했습니다. 또한 반응형 레이아웃을 만드는 기능을 익혔습니다.functions.php파일에 메뉴, 위젯, 리소스를 안전하게 로드하는 방법을 등록하고 워드프레스의 강력한 템플릿 계층구조를 시작하세요.
테마 개발은 계속 진행 중인 과정입니다. 다음으로 더 많은 템플릿 파일(404.php、search.php), 워드프레스의 바디 클래스와 포스트 클래스를 사용하여 스타일 제어에 세분성을 더하는 방법을 배우고, 테마 커스터마이저 API를 살펴보고, 사용자에게 시각적 설정 옵션을 제공하고, Sass나 ES6 같은 최신 프론트엔드 워크플로우를 개발 프로세스에 통합하는 방법도 배워보세요.
자주 묻는 질문
워드프레스 테마에 필요한 최소 파일은 무엇인가요?
워드프레스에서 인식하는 미니멀리스트 테마는 두 개의 파일만 필요합니다:style.css그리고index.php。style.css헤더에는 올바른 주제 정보 주석이 반드시 포함되어야 합니다.index.php그러면 모든 페이지의 기본 템플릿으로 사용됩니다.
내 테마가 다국어 번역을 지원하도록 하려면 어떻게 해야 하나요?
두 가지 일을 잘 해야 합니다. 첫째로,style.css헤더 주석 및 텍스트가 사용되는 모든 위치(예: 예를 들어__()또는_e()(기능) 텍스트 도메인을 사용합니다.) 이 가이드에서 사용하는 텍스트 도메인은 “my-first-theme”입니다. 그런 다음 Poedit과 같은 도구를 사용하여 .pot 파일을 만들고 .po 및 .mo 파일로 번역한 다음 테마의/languages디렉터리 내에 있습니다. 마지막으로,functions.php중국에서 사용하세요.load_theme_textdomain()Function loading.
왜 제가 정의한 사용자 정의 스타일이나 스크립트가 적용되지 않나요?
이는 일반적으로 워드프레스 권장 방법을 통해 로드를 대기열에 넣지 않았기 때문입니다. 워드프레스의functions.php파일 내에서 사용합니다.wp_enqueue_style()그리고wp_enqueue_script()함수를 작성하고 이들을 매핑하십시오.wp_enqueue_scripts스타일과 스크립트를 추가하기 위해 후크가 나타납니다. 템플릿 파일에 직접 작성된 링크는 캐싱 플러그인에 의해 무시되거나 경우에 따라 잘못된 순서로 로드될 수 있습니다.
내 테마에 사용자 정의 로고를 추가하려면 어떻게 해야 하나요?
이것은 매우 일반적인 기능입니다. 새 함수를 추가해야 합니다.functions.php파일을 테마 설정 기능의after_setup_theme(훅 실행), 추가add_theme_support( 'custom-logo' ). 여러 매개변수를 전달하여 로고의 크기 및 기타 속성을 정의할 수 있습니다. 로고를 추가한 후 사용자는 모양 -> 사용자 정의 -> 사이트 아이덴티티에서 로고를 업로드할 수 있습니다. 프런트엔드에서 로고를 업로드하려면the_custom_logo()함수를 사용하여 그것을 표시하세요.
개발 중 PHP 오류를 디버깅하는 방법은 무엇인가요?
로컬 개발 환경은 다음과 같습니다.wp-config.php파일에서 WordPress 디버깅 모드를 활성화하세요.WP_DEBUG상수를 다음과 같이 설정합니다:true. 또한 동시에 설정할 수도 있습니다.WP_DEBUG_LOG그리고WP_DEBUG_DISPLAY를 사용하여 오류를 로그 파일에 기록할지 또는 화면에 표시할지 여부를 제어할 수 있습니다. 테마를 온라인에 올리기 전에 항상 디버그 모드를 꺼야 한다는 점을 잊지 마세요.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어