WordPress 세계에 입문하는 것은 자신만의 테마를 개발하는 것입니다. 이는 웹사이트의 모양과 기능을 완전히 제어할 수 있게 해주고, WordPress의 핵심 작동 원리를 더 잘 이해할 수 있는 최고의 방법입니다. 이 가이드는 파일 구조부터 핵심 템플릿에 이르기까지 모든 주요 단계를 통해 기본적이지만 완전한 테마를 만들 수 있도록 안내해 드립니다.
개발 환경 및 테마 구조 설정
코딩을 시작하기 전에 적합한 개발 환경이 필요합니다. Apache, MySQL, PHP를 포함하는 환경을 빠르게 설정할 수 있는 XAMPP, WAMP 또는 MAMP와 같은 로컬 서버 소프트웨어를 사용하는 것이 좋습니다. 또한, Visual Studio Code, Sublime Text 또는 PHPStorm과 같은 편리한 코드 편집기도 필수적입니다.
가장 기본적인 WordPress 테마는 적어도 두 개의 파일을 필요로 합니다:style.css그리고index.php。style.css이것은 단순히 스타일시트가 아니고, 테마의 “신분증'입니다. WordPress는 이 파일의 헤더 안의 주석 정보를 읽어서 당신의 테마를 인식합니다. 먼저, 당신의 로컬 WordPress 설치 디렉토리 내의wp-content/themes폴더 안에서 새로운 폴더를 만들어 보세요, 예를 들어…my-first-theme그런 다음, 이 폴더 내에서 만들어 넣으세요.style.css파일.
추천 읽기 WordPress 테마 개발 마스터하기: 제로에서 원까지의 완벽한 가이드와 실전 기술。
주제 정보의 정의
Instyle.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
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/그중에서,Theme Name그리고Text Domain필수 입력사항입니다. 텍스트 필드는 국제화 번역을 위한 용도로 사용되며, 일반적으로 주제 폴더 이름과 일치합니다.
핵심 템플릿 파일의 생성
index.php이것은 테마의 기본 템플릿이며, 가장 중요한 백업 템플릿입니다. 워드프레스가 더 구체적인 템플릿 파일을 찾을 수 없는 경우에는 이 파일이 사용됩니다.single.php, page.php이 경우에는 이를 사용하게 됩니다. 여기에는 기본 HTML 구조와 내용을 검색 및 표시하는 WordPress 함수를 포함할 수 있습니다.
핵심 템플릿 파일과 루프
워드프레스의 테마 시스템은 템플릿 기반으로 작동하며, 서로 다른 페이지 유형은 각자 다른 템플릿 파일에 의해 제어됩니다. 이러한 핵심 템플릿 파일을 이해하고 만드는 것은 테마 개발의 핵심입니다.
가장 중요한 개념은 “워드프레스 루프(The Loop)”입니다. 이는 PHP 코드 구조로, 데이터베이스에서 포스트를 가져와 하나씩 표시하는 역할을 합니다. 거의 모든 내용 표시 템플릿 파일에는 루프가 포함되어 있습니다.
추천 읽기 How to Create a Professional WordPress Theme: A Complete Guide from Scratch to Launch。
첫 페이지 템플릿의 구성
index.php파일에는 완전한 HTML 구조와 루프가 포함되어야 합니다. 간단한 예는 다음과 같습니다:
<!DOCTYPE html>
<html no numeric noise key 1021>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1018>
<header>
<h1><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>
<main>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1010>
<h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
<div class="entry-content">
</div>
</article>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>이 파일은 웹 페이지의 기본 구조를 정의하고 주요 영역에서 게시물 목록을 반복적으로 표시합니다. 함수들은the_title()、the_excerpt()기사 내용을 출력하는 데 사용되며,wp_head()그리고wp_footer()이것은 WordPress 核心, 플러그인, 그리고 다른 스크립트가 필요한 코드를 추가할 때 사용하는 매우 중요한 钩子。
Article and Page Template
single.php단일 기사를 표시하는 데 사용됩니다.page.php단일 페이지를 표시하는 데 사용됩니다. 그들의 구조는 비슷하지만, 일반적으로single.php분류, 태그 등의 요소가 포함되며,page.php그것은 더 간단합니다. 당신은 복사할 수 있습니다.index.php그것들을 만들기 시작하고, 루프 내의 내용을 대체하세요.the_content()전체 텍스트를 표시하기 위해…
스타일과 스크립트를 가져오기
현대적인 테마는 좋은 스타일과 대화식 기능을 필요로 합니다. WordPress는 HTML 내에서 직접 사용하는 대신, CSS 및 JavaScript 파일을 안전하게 포함시키기 위한 표준 함수를 제공합니다.<link>또는<script>태그.
함수 파일의 생성 및 사용
당신은 이라는 이름의 계정을 만들어야 합니다.functions.php이 파일은 템플릿 파일이 아니고, 기능 추가, 기능 활성화 또는 WordPress의 기본 동작을 수정하는 주제의 “기능 향상” 파일입니다. 여기서는 스타일 시트와 스크립트를 등록합니다.
안전하게 자원을 방출하십시오.
Infunctions.php중, 사용wp_enqueue_style()그리고wp_enqueue_script()함수. 표준 방법은 함수를 만들어서wp_enqueue_scripts이 동작 후크를 사용하여 그것을 호출합니다.
추천 읽기 궁극적인 가이드: 0부터 전문적인 WordPress 테마를 개발하는 방법。
<?php
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
// 引入自定义CSS文件
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
// 引入JavaScript文件
wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );이 코드는 CSS 및 JS 파일이 올바른 시기에 로드되도록 합니다.get_stylesheet_uri()함수는 주제에 대한 결과를 반환할 것입니다.style.css파일 경로.get_template_directory_uri()그런 경우에는, 주제 목록의 URL을 반환합니다.
템플릿 부품과 테마 기능
주제가 점점 더 복잡해질수록, 반복되는 코드 조각들을 모듈화하는 것이 좋은 실천입니다. WordPress는 “템플릿 파트(Template Parts)”와 “네비게이션 메뉴(Navigation Menus)” 기능을 제공합니다.
재사용 가능한 템플릿 부품을 만들기
예를 들어, 웹사이트의 머리글과 바닥글을 별도의 파일로 분리하십시오. 당신은 만들 수 있습니다.header.php그리고footer.php파일, 저장할 거예요.index.php해당하는 코드를 복사한 다음 원래 위치에서 다음 함수를 사용하여 그것들을 호출하십시오:
<?php get_header(); ?>
<?php get_footer(); ?>당신은 또한, 예를 들면 더 일반적인 부품을 만들 수도 있습니다.content.php또는post-item.php루프 안에서 사용하세요.get_template_part()함수를 로드하는 것은 코드의 재사용성을 크게 향상시킵니다.
사용자 정의 네비게이션 메뉴 활성화
워드프레스의 메뉴 시스템은 매우 강력합니다. 먼저 해야 할 것은functions.php중국에서 사용하세요.register_nav_menus()함수를 사용하여 메뉴 항목의 위치를 등록합니다.
function my_first_theme_setup() {
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-first-theme' ),
'footer' => __( 'Footer Menu', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );그런 다음, 템플릿 파일(예:header.php)에서 메뉴를 표시하고 싶은 위치에 사용하세요.wp_nav_menu()그것을 출력하기 위한 함수입니다.
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>지금, 사용자는 WordPress 관리자의 “外观”->“메뉴'에서 메뉴를 만들고 이를 ”주요 메뉴“ 위치에 할당할 수 있습니다.
요약
이 가이드를 통해 여러분은 비어있는 폴더에서 기본 기능을 갖춘 WordPress 테마로 이동하는 전체 프로세스를 완료했습니다. 여러분은 필요한 파일을 만들는 법을 배웠습니다.style.css그리고index.php워드프레스 루프의 핵심 역할을 이해하고 구축했습니다.single.php그리고page.php당신은 또한 어떻게 하여 이를 통해 어떻게 성공할 수 있는지 배웠습니다.functions.php스타일과 스크립트를 안전하게 추가하고, 코드를 구성하고 테마 기능을 향상시키는 데 사용하는 템플릿 파트와 네비게이션 메뉴 시스템을 사용하는 방법. 이것은 단지 시작점일 뿐이며, 사이드바, 위젯 영역, 사용자 정의 게시물 유형, 테마 커스터마이저 API 등 더 고급한 테마를 탐색하고 계속해서 테마를 향상시키고 완성할 수 있습니다.
자주 묻는 질문
주제 개발은 반드시 처음부터 시작해야만 하나요?
그것은 반드시 그렇지는 않습니다. 입문자의 경우, 처음부터 시작하는 것이 최고의 학습 방법입니다. 그러나 실제 프로젝트에서는 기존에 구축된 강력한 기반 코드 구조에 더 초점을 맞추고 디자인과 비즈니스 로직 개발에 더 많은 시간을 할애할 수 있도록 공식 블랜크 테마(예: Underscores), 프레임워크(예: Genesis), 또는 입문자 테마(예: _s)를 시작점으로 사용할 수 있습니다.
인덱스.php 파일이 필요한 건가요?
예.index.php이것은 WordPress 테마에 필요한 템플릿 파일입니다. 이는 테마 계층의 마지막 방어선으로, 다른 더 구체적인 템플릿 파일(예: )이 없는 경우에 사용됩니다.archive.php, search.php그 항목이 존재하지 않으면, WordPress가 자동으로 다른 방법을 사용합니다.index.php표시 페이지를 통해 웹사이트에 항상 내용이 제공되도록 하십시오.
제 테마 개발 문제를 어떻게 디버그할 수 있나요?
먼저, 귀하의 시스템 또는 환경에서 필요한 설정들이 모두 제대로 되어 있는지 확인하십시오.wp-config.php파일에서 WP_DEBUG 모드가 활성화되어 있습니다. 이를 비활성화하십시오.define( ‘WP_DEBUG’, true );이 설정을 `true`로 설정하면 PHP 오류와 WordPress 경고가 페이지에 직접 표시되어 문제를 쉽게 찾을 수 있습니다. 또한, 브라우저의 개발자 도구(F12 키를 눌러 열기)를 사용하여 CSS 및 JavaScript 오류를 확인하는 것도 매우 중요한 단계입니다.
제목의 functions.php 파일에서 무엇이든 할 수 있나요?
원칙적으로는 가능하지만, 최선의 실천 방법은 주제의 외관 및 기능과 직접 관련된 코드만 추가하는 것입니다. 핵심 비즈니스 로직이나 데이터 조작과 관련된 많은 복잡한 기능은 별도의 플러그인으로 개발해야 합니다. 이러한 방법을 통해 사용자가 주제를 바꾸더라도 해당 기능은 유지되며, 코드의 유지 보수 및 재사용성이 향상됩니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어