워드프레스 테마를 사용자 정의하는 것은 워드프레스의 핵심 기능을 마스터하는 최고의 방법입니다. 서브 테마나 페이지 빌더를 사용하는 것과 달리, 처음부터 만들면 완전한 제어권을 갖게 되고, 성능이 우수하고 특정 요구 사항에 맞는 독특한 웹사이트를 만들 수 있습니다. 이 가이드는 환경 설정부터 테마 출시까지의 전체 프로세스를 안내해 드립니다.
워드프레스 테마의 기본 및 파일 구조
워드프레스 테마는 기본적으로 위치에 있는 것입니다. /wp-content/themes/ 카탈로그 아래에 있는 폴더로, 여러 개의 필수 및 선택적 파일이 포함되어 있습니다. 이러한 파일의 역할을 이해하는 것은 개발의 첫 번째 단계입니다.
핵심 템플릿 파일의 역할
각 주제는 두 개의 핵심 파일을 포함해야 합니다:style.css 그리고 index.php。
style.css 스타일 시트뿐만 아니라, 그 파일의 헤더 주석도 주제의 메타 데이터를 포함하고 있습니다. index.php 이것은 기본 템플릿 파일이며, WordPress가 더 구체적인 템플릿을 찾을 수 없을 때 사용됩니다.
추천 읽기 워드프레스 테마 개발의 핵심 개념.。
두 파일 외에도, 추가적으로 템플릿 파일을 추가하여 웹사이트의 다양한 영역의 표시를 정확히 제어할 수 있습니다. 예를 들어,header.php 웹사이트의 헤더(예: doctype, head 태그, 웹사이트 타이틀 및 네비게이션)를 제작할 책임이 있습니다.footer.php 아래 부분의 내용을 출력할 책임이 있고, single.php 그것은 단일 기사 페이지를 렌더링하는 데 사용됩니다.
주제 정보 및 함수 파일의 초기화
In style.css ธี마의 헤더에서는 워드프레스가 당신의 ธี마를 인식하는 기준이 되는 주요 정보를 정의해야 합니다.
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习目的而创建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/또 다른 매우 중요한 파일은 functions.php그것은 템플릿 파일이 아니고, 테마의 “기능 엔진'입니다. 테마 지원, 등록된 메뉴, 사이드바 추가, 스크립트 및 스타일 추가에 사용됩니다. 대부분의 사용자 정의 PHP 코드는 여기에 쓰입니다. 좋은 방법은 파일의 시작 부분에 텍스트 도메인을 정의하여 후속 번역 준비에 사용하는 것입니다.
개발 환경 설정 및 핵심 템플릿 제작
코딩을 시작하기 전에 로컬 개발 환경(Local, XAMPP, Docker 등)을 설정하는 것이 매우 중요합니다. 이를 통해 테스트와 디버깅을 안전하게 수행할 수 있습니다.
주제의 상단과 하단을 만들기
중복된 코드를 모杜러 만들는 것은 효율적인 개발의 열쇠입니다. 만들기 header.php 이 파일은 HTML 문서의 시작 부분을 포함하며, WordPress 함수를 사용하여 정보를 동적으로 출력합니다.
추천 읽기 WordPress 테마 개발 입문: 제로에서 시작하여 첫 번째 커스텀 테마를 만들어보세요。
<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1004>
<header class="site-header">
<h1 class="site-title"><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p class="site-description"></p>
</header>해당하는 (corresponding) footer.php 파일을 닫고 태그를 달고, 꼭 호출해야 합니다. wp_footer() 함수는 플러그인과 테마 스크립트가 올바르게 로드되는 데 필요합니다.
In index.php 여기서 당신은 사용할 수 있습니다. get_header() 그리고 get_footer() 함수를 사용하여 그것들을 가져옵니다.
인덱스 및 기사 페이지 템플릿 개발
index.php 이것은 당신의 메인 템플릿입니다. 전형적인 구현에서는 포스트를 표시하는 WordPress의 메커니즘인 루프(The Loop)가 포함됩니다.
<main class="site-main">
만일 게시물이 있다면: ?>
<article no numeric noise key 1010>
<h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
<div class="entry-content">
</div>
</article>
<p>아직 글이 없습니다.</p>
</main>
\n한 篇의 기사에 대해서는, 당신은 그것을 만들어야 합니다. single.php그것의 구조는 인덱스와 비슷하지만, 대부분의 경우 사용되지 않습니다. the_content() 전체 텍스트를 출력하고 코멘트 템플릿이 포함될 수 있습니다. comments_template()。
주제 기능 향상 및 스타일 통합
통과합니다. functions.php 문서에 따르면, 여러분은 주제에 대한 일련의 현대적인 기능을 활성화할 수 있고, 프론트엔드 리소스를 올바르게 관리할 수 있습니다.
등록 메뉴와 사이드바
먼저, 사용하기 위해… add_theme_support() 함수 선언은 기사 미니어처(특정 이미지), HTML5 태그 등과 같은 주제별 기능을 지원합니다. 다음으로, 태그를 사용하십시오. register_nav_menus() 네비게이션 메뉴 위치를 등록하는 함수.
추천 읽기 워드프레스 테마 개발 입문: 처음부터 첫 번째 반응형 테마를 만들기。
function my_theme_setup() {
add_theme_support( 'post-thumbnails' );
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '底部菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );위젯 영역(사이드바)을 만들려면 다음을 사용하세요. register_sidebar() 함수. 그런 다음 템플릿에서 를 통해 함수를 호출할 수 있습니다. dynamic_sidebar() 그것을 표시하려면…
스크립트와 스타일을 올바르게 로드하십시오.
절대로 템플릿 내에서 CSS나 JS 파일에 직접 하드링크를 걸어서는 안 됩니다. 대신 다른 방법을 사용해야 합니다. wp_enqueue_style() 그리고 wp_enqueue_script() 함수를 작성하고 이들을 매핑하십시오. wp_enqueue_scripts 후크上。 이것은 의존성이 올바르게 되어 있는지 확인하고 중복 로드를 방지합니다.
function my_theme_scripts() {
// 加载主题主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0.0' );
// 加载主 JavaScript 文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );템플릿 계층 및 고급 기능
워드프레스의 템플릿 계층을 이해하는 것은 유연한 테마를 만들는 열쇠입니다. 워드프레스는 현재 방문한 페이지의 유형에 따라 가장 구체적인 템플릿 파일을 자동으로 선택합니다.
특정 페이지를 만들려면 템플릿 계층을 사용하세요.
예를 들어, ID가 5인 글을 방문할 경우, WordPress는 다음과 같은 순서로 검색을 합니다.single-post-5.php -> single-post.php -> single.php -> singular.php -> index.php특정 카테고리나 페이지에 대한 템플릿을 만들 수도 있습니다. category-news.php 또는 page-about.php。
검색 양식과 페이지 네비게이션 구현
주제에 검색 기능을 통합하는 것은 간단합니다. 하나를 만들어 보세요. searchform.php 주제 스타일에 맞는 검색 양식이 포함된 파일입니다. 그런 다음 필요한 모든 장소에서 그것을 사용할 수 있습니다. get_search_form() 함수가 그것을 호출합니다.
분页 기능을 구현할 때, 사용하는 방법 외에도 다른 고려사항들이 있습니다. 예를 들어, 사용자 인터페이스의 디자인, 데이터의 양과 구조, 페이지 넘김의 편리성 등이 중요합니다. 또한, 적절한 페이지 크기와 콘텐츠 배치를 통해 사용자가 정보를 쉽게 이해하고 탐색할 수 있도 the_posts_navigation()또한, 당신은 이것을 사용할 수 있습니다. the_posts_pagination() 숫자 페이지를 포함하는 링크를 생성하려면, 이는 일반적으로 사용자 경험과 SEO에 더 친화적입니다.
주제 커스터마이저 기능을 추가합니다.
사용자가 백그라운드에서 “외관 -> 사용자 정의'에서 로고, 색상 등과 같은 일부 설정을 조정할 수 있도록 하려면 WordPress 사용자 정의 애피를 사용할 수 있습니다. 이는 에서 처리되며, 사용자는 여러 설정을 변경할 수 있습니다. functions.php 중국에서 사용하세요. $wp_customize 객체를 사용하여 설정, 컨트롤 및 세그먼트를 추가할 수 있습니다.
function my_theme_customize_register( $wp_customize ) {
// 添加一个“主题选项”板块
$wp_customize->add_section( 'theme_options', array(
'title' => __( '主题选项', 'my-custom-theme' ),
'priority' => 130,
) );
// 在板块中添加一个“页脚文本”设置
$wp_customize->add_setting( 'footer_text', array(
'default' => __( '版权所有', 'my-custom-theme' ),
'sanitize_callback' => 'sanitize_text_field',
) );
$wp_customize->add_control( 'footer_text', array(
'label' => __( '页脚文本', 'my-custom-theme' ),
'section' => 'theme_options',
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_theme_customize_register' );그런 다음 footer.php 중, 사용 get_theme_mod( 'footer_text' ) 사용자가 설정한 값을 출력하세요.
요약
WordPress 테마를 처음부터 만들는 것은 체계적인 작업으로, 프로젝트 구조 계획, PHP 템플릿 개발, 기능 함수 작성에서부터 프론트엔드 리소스 관리에 이르는 모든 면을 포함합니다. 핵심은 템플릿 계층을 이해하고, WordPress의 내장 함수와 후크를 유연하게 사용하며, 최고 사례(예: 올바른 스크립트 라이닝, 번역 지원)를 준수하는 것입니다. 테마를 직접 만들면 자신의 요구 사항에 완전히 맞는 웹사이트 외관을 얻을 수 있을 뿐만 아니라, WordPress의 작동 메커니즘을 더 깊이 이해하고 더 복잡한 플러그인 또는 애플리케이션을 개발하는 확실한 기반을 마련할 수 있습니다. 기억하세요, 계속 테스트를 실시하고 공식 매뉴얼을 읽고, 코어 테마 코드를 참조하는 것은 기술을 향상시키는 최고의 방법입니다.
자주 묻는 질문
워드프레스 테마를 만들려면 어떤 기술을 가져야 하나요?
템플릿 로직과 기능 함수를 작성하는 데 사용되는 PHP의 기본 지식이 필요합니다. 동시에, 페이지 구조와 스타일을 구축하려면 HTML과 CSS에 대한 지식이 필요합니다. JavaScript(특히 jQuery)에 대한 기본 지식은 대화식 기능을 추가하는 데 도움이 됩니다. 가장 중요한 점은 WordPress 특유의 템플릿 태그, 行动 및 필터, 그리고 루프(The Loop)의 사용법을 배워야 합니다.
주제 개발이 완료된 후 다른 사람들이 사용할 수 있도록 출시하는 방법은 무엇인가?
출시 전에 서로 다른 환경, 서로 다른 화면 크기 등에서 호환성 테스트를 실시하고 워드프레스 테마 개발 표준을 준수해야 합니다. 그런 다음 테마 폴더를 .zip 파일로 압축하여 워드프레스 관리자를 통해 직접 업로드하고 설치할 수 있습니다. 워드프레스 공식 테마 디렉토리에 제출하려는 경우에는 보안, 코드 스타일, 국제화 등의 요구 사항을 포함하여 더 엄격한 코드 검토 표준을 준수해야 합니다.
사용자 정의 테마는 향후 업데이트와 호환되도록 어떻게 설정되는가?
호환성을 보장하기 위해서는 WordPress 核心 파일을 직접 변경해서는 안 되며, 기능을 추가할 때는 WordPress가 제공하는 함수와 후크를 사용해야 합니다. 코드에서는 항상 프론트엔드로 출력되는 데이터에 이스케이프 함수(예: <)를 적용해야 합니다. esc_html， esc_url예를 들어, 사용자로부터 받은 데이터에 정리 함수를 적용하십시오. sanitize_text_field워드프레스의 주요 업데이트에 관심을 기울이고 당신의 테마를 적시에 테스트하십시오.
하위 주제와 사용자 정의 주제는 어떻게 선택해야 합니까?
만일 기존 테마의 색상이나 레이아웃 등을 조금 변경하고 싶다면 서브 테마를 만드는 것이 더 빠르고 안전한 선택입니다. 서브 테마는 기존 테마가 업데이트되더라도 변경 사항을 유지할 수 있게 해줍니다. 만일 독특한 디자인이나 새로운 기능, 특정 유형의 내용을 포함하는 웹사이트가 필요하고 기존 테마로는 간단히 변경할 수 없다면 커스터마이징 테마를 처음부터 만드는 것이 더 적합합니다. 이는 최대의 유연성과 제어권을 제공합니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어