WordPress 테마 개발의 첫걸음을 내딛고 싶다면, 제대로 작동하는 기본 테마를 구축하는 것이 가장 중요합니다. 표준적인 WordPress 테마는 다음과 같은 위치에 있습니다:/wp-content/themes/디렉터리 내의 폴더에는 반드시 두 개의 기본 파일이 포함되어 있어야 합니다.index.php그리고style.css。
style.css이 파일은 테마의 스타일만 정의하는 것이 아니라, 파일 상단에 있는 주석 블록이 테마의 식별 정보 역할을 합니다. WordPress는 이러한 정보를 통해 사용자의 테마를 인식하고 표시합니다.
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/index.php이 파일은 주요 템플릿 파일로, 콘텐츠를 방문자에게 표시하는 역할을 합니다. 가장 간단한 예를 들어보면…index.php기본적인 HTML 구조와 WordPress 코어 함수를 호출하는 PHP 코드만 포함할 수 있습니다.
추천 읽기 워드프레스 테마 개발 초보자 가이드: 처음부터 사용자 정의 템플릿 구축하기。
<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1005>
<header>
<h1><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>
<main>
</main>
</body>
</html>Core Templates and File Structure
기능이 완전한 테마는 단순한 홈페이지 그 이상입니다. WordPress의 템플릿 계층 시스템을 사용하면 다양한 유형의 페이지에 맞는 특정 템플릿 파일을 생성할 수 있습니다.
템플릿 계층 구조 메커니즘을 이해합니다.
템플릿 계층结构는 WordPress가 현재 페이지를 표시하기 위해 어떤 템플릿 파일을 사용할지 결정하는 논리적 규칙입니다. 예를 들어, 특정 글을 방문할 때 WordPress는 순서에 따라 적절한 템플릿 파일을 찾아서 해당 페이지를 렌더링합니다.single-post.php、single.php마지막으로…index.php이 메커니즘을 이해하고 잘 활용하는 것이 유연한 테마를 만드는 데 핵심입니다.
주요 템플릿 파일의 역할
또한…index.php또한 몇 개의 핵심 템플릿 파일을 만들어야 합니다.header.php문서의 헤더를 생성하는 책임이 있으며, 여기에는 다음과 같은 내용이 포함됩니다:지역 및 사이트의 상단 네비게이션;footer.php그런 다음 푸터 내용을 출력하고 태그를 닫습니다.get_header()그리고get_footer()함수들은 다른 템플릿에서도 사용될 수 있습니다.
functions.php이 파일은 테마의 기능을 담당하는 파일로, 템플릿은 아닙니다. 하지만 매우 중요합니다. 이 파일에 테마 관련 기능들, 등록 메뉴 및 위젯 영역, 스크립트, 스타일시트 등을 추가할 수 있습니다.
// 在 functions.php 中添加主题支持
function my_theme_setup() {
// 支持文章和页面中的特色图像
add_theme_support( 'post-thumbnails' );
// 支持自定义标志
add_theme_support( 'custom-logo' );
// 为文章生成可用的RSS源链接
add_theme_support( 'automatic-feed-links' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );주제 기능과 사용자 정의 기능 (Theme Features and Custom Features)
주제 기반 인프라가 완성되면서, 다음 단계는 그 기능을 확장하여 더 전문적이고 사용하기 쉽게 만드는 것입니다.
추천 읽기 WordPress 테마 개발을 처음부터 마스터하기까지의 완벽한 가이드: 사용자 정의 웹사이트 구축하기。
등록하기: 네비게이션 메뉴 및 위젯 생성
사용자들이 백엔드에서 메뉴와 사이드바를 쉽게 관리할 수 있도록 하기 위해서는 다음과 같은 작업이 필요합니다:functions.php이러한 지역들을 등록하려면 사용해 주세요.register_nav_menus()함수는 하나 이상의 메뉴 항목 위치를 등록할 수 있습니다.
function my_theme_menus() {
register_nav_menus(
array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
)
);
}
add_action( 'init', 'my_theme_menus' );등록 위젯 영역(또는 “사이드바”)을 사용할 수 있습니다.register_sidebar()함수: 사용자가 등록하면 “외관” -> “도구 모음” 설정을 통해 이러한 영역에 도구 모음을 드래그 앤 드롭할 수 있습니다.
안전하게 스크립트와 스타일을 로드하기 (Loading scripts and styles securely)
절대로 템플릿 파일에 CSS나 JavaScript 파일의 링크를 직접 하드코딩해서는 안 됩니다. 올바른 방법은 해당 파일들을 외부에 저장한 후, 템플릿에서 해당 파일을 참조하는 방식을 사용하는 것입니다.wp_enqueue_style()그리고wp_enqueue_script()함수를 마운트할wp_enqueue_scripts“Hooked on the hook.” 이는 의존 관계가 올바르게 설정되었으며, 동일한 리소스가 중복으로 로드되지 않도록 보장합니다.
function my_theme_scripts() {
// 排入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
// 排入自定义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' );Advanced Development and Theme Customization
기본 기능과 구조가 안정적으로 확립된 후에는, 개발 효율성과 테마의 전문성을 높이기 위한 더 강력한 도구들을 탐색할 수 있습니다.
WordPress에서 반복적으로 콘텐츠를 출력하는 방법
WordPress의 반복 처리 기능(루프)은 테마 개발의 핵심입니다. 이는 PHP 코드의 일부로, 글이 존재하는지 확인한 다음, 그 글들을 반복적으로 출력하는 역할을 합니다. 보다 고급된 사용법에는 이러한 반복 처리 기능을 활용한 다양한 응용이 포함됩니다.WP_Query클래스를 사용하여 사용자 정의 쿼리를 생성하여 특정 카테고리, 태그 또는 사용자 정의된 기사 유형의 콘텐츠를 출력할 수 있습니다.
커스텀된 기사 유형과 분류 체계를 통합하기
제품이나 포트폴리오와 같은 비표준 콘텐츠를 표시해야 하는 경우, 사용자 정의 문서 유형(CPT: Custom Post Type)과 사용자 정의 분류 체계를 만드는 것이 이상적인 해결책입니다. 플러그인을 사용하여 이를 구현할 수는 있지만,functions.php중국에서 사용하세요.register_post_type()함수를 직접 등록하면 테마의 기능이 더 완전하고 독립적으로 작동합니다.
추천 읽기 처음부터 끝까지 워드프레스 테마 개발: 최신 반응형 워드프레스 테마를 구축하는 완벽한 가이드。
function my_theme_register_portfolio() {
$args = array(
'public' => true,
'label' => '作品集',
'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
'has_archive' => true,
);
register_post_type( 'portfolio', $args );
}
add_action( 'init', 'my_theme_register_portfolio' );주제 커스터마이저 설정을 구현합니다.
WordPress의 커스터마이저(Customizer)를 사용하면 사용자가 색상, 로고, 레이아웃과 같은 테마 설정을 실시간으로 미리 보고 수정할 수 있습니다.$wp_customize->add_setting()그리고$wp_customize->add_control()이 방법을 사용하면 테마에 다양한 설정 옵션을 추가할 수 있어, 테마의 사용성과 전문성을 크게 향상시킬 수 있습니다.
요약
WordPress 테마 개발은 기본 파일 구성부터 시작하여 템플릿 계층, 기능 확장, 고급 커스터마이징에 이르기까지 점차적으로 심화되는 시스템적인 과정입니다. 핵심 템플릿 파일을 숙지하고 이를 능숙하게 활용함으로써…functions.php기능을 추가하고 보안적인 리소스 관리와 같은 모범 사례를 따르면, 개발자는 강력하고 유연하며 표준을 준수하는 테마를 만들 수 있습니다. 사용자 정의 기사 유형이나 커스터마이저(Customizer)를 통합하는 등의 고급 기술을 활용하면 테마의 수준을 제품급으로 끌어올릴 수 있습니다. 이 기술을 마스터하는 데에는 지속적인 학습과 실습이 필수적입니다.
자주 묻는 질문
WordPress 테마를 개발하기 위해서는 어떤 기초 지식이 필요한가요?
HTML과 CSS에 대한 탄탄한 지식이 필요합니다. 이는 웹페이지의 외관을 구성하는 데 기초가 됩니다. 또한, PHP는 WordPress의 서버 측 프로그래밍 언어이므로 그 기본 문법을 이해해야 하며, 특히 HTML과 어떻게 함께 사용하는지 알아야 합니다. JavaScript에 대한 기본적인 지식도 있으면 인터랙티브한 기능을 추가하는 데 도움이 됩니다.
스타일.CSS 파일의 텍스트 도메인(Text Domain)은 어떤 역할을 하는가?
Text Domain이는 테마의 국제화를 위한 식별자입니다. 이 식별자는 WordPress에 어떤 “텍스트 영역”이 해당 테마의 번역 파일(.po/.mo 파일)을 포함하는 데 사용될지 알려줍니다. 테마 내에서 번역 함수를 사용할 때 이 정보가 필요합니다.__()또는_e()이 텍스트 필드를 반드시 입력해야만 주제가 다른 언어로 올바르게 번역될 수 있습니다.
왜 제가 만든 사용자 정의 템플릿 파일이 적용되지 않나요?
이런 문제는 대부분 파일명이 템플릿의 계층 구조 규칙을 따르지 않거나, 파일이 테마의 루트 디렉터리에 위치하지 않아서 발생합니다. 파일명의 접두사가 올바른지 확인해 주세요(예를 들어, 페이지 템플릿의 경우 특정 접두사가 필요할 수 있습니다).page-{slug}.php파일을 주제 폴더 내에 직접 저장하되, 하위 디렉터리에는 저장하지 마세요. 또한, 사이트 캐시와 브라우저 캐시를 삭제하는 것도 문제를 해결하는 데 도움이 될 수 있습니다.
내 테마에 페이지 생성기와의 호환성을 어떻게 추가할 수 있나요?
주제가 Elementor, WPBakery와 같은 주류 페이지 빌더와 잘 호환되도록 하려면, 주제의 마크업 구조가 표준적이고 깔끔해야 합니다. 내장 스타일이나 고정된 컨테이너 너비를 과도하게 사용하지 않도록 주의해야 합니다. 가장 중요한 것은…functions.php중에서 이러한 빌더들에 대한 지원을 명시하고 있습니다. 예를 들어, Elementor의 경우 다음과 같이 추가할 수 있습니다:add_theme_support( 'elementor' );동시에, 테마의 핵심 요소(예: 헤더, 푸터)에 충분한 인터페이스(“훅”)를 제공하여 페이지 빌더 플러그인이 원활하게 통합될 수 있도록 해야 합니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어