개발 환경 설정 및 프로젝트 초기화
현대적인 WordPress 테마 개발을 시작하는 첫 번째 단계는 효율적이고 표준을 준수하는 로컬 개발 환경을 설정하는 것입니다. 오늘날에는 더 이상 서버에서 직접 개발을 진행하지 않고, 로컬 도구 체인을 사용하여 효율성을 높입니다.
로컬 환경에서는 통합된 도구를 선택할 수 있습니다. 예를 들어, 다음과 같은 도구들이 있습니다: Local、Laragon 또는 MAMP이러한 도구들을 사용하면 Apache/Nginx, PHP, MySQL을 한 번의 클릭으로 설치할 수 있어, 환경 설정 과정을 크게 간소화할 수 있습니다. 어떤 도구를 선택할지는 주로 사용하는 운영체제의 선호도와 특정 기능 요구사항에 따라 결정됩니다.
주제 디렉터리 구조를 올바르게 설정하는 방법은 무엇인가요?
명확하고 체계적인 디렉터리 구조는 전문적인 테마 개발의 기초입니다. 이 구조를 통해 코드를 쉽게 관리할 수 있을 뿐만 아니라, 다른 개발자들이 코드를 이해하고 협업하는 데에도 도움이 됩니다. 현대의 WordPress 테마들은 대체로 “패턴”(pattern)과 유사한 구조를 따릅니다.
추천 읽기 WordPress 테마 개발 입문: 제로에서 시작하여 첫 번째 커스텀 테마를 만들어보세요。
당신의 WordPress 설치 디렉토리 내의 wp-content/themes 폴더 안에 자신의 주제 이름으로 된 폴더를 만드세요. 예를 들어, my-awesome-theme그런 다음, 이 폴더 내에 다음과 같은 핵심 디렉터리를 만드는 것을 권장합니다:
* /assets모든 정적 리소스를 저장하는 데 사용됩니다.
* /assets/css스타일시트를 저장하는 곳입니다. 예를 들어… style.css 그리고 editor-style.css。
* /assets/jsJavaScript 파일을 저장하는 곳입니다.
* /assets/images이곳에는 이미지, 아이콘 및 기타 미디어 파일들이 저장되어 있습니다.
* /assets/fonts사용자 정의 글꼴을 저장하는 곳입니다.
* /template-parts재사용 가능한 템플릿 조각들을 저장하는 곳으로, 헤더, 푸터, 기사 메타데이터 등이 포함됩니다.
* /inc 또는 /includes주제 기능을 강화하는 파일들이 저장되는 곳으로, 사용자 정의 함수, 유틸리티 도구의 등록, 사용자 정의된 글 유형의 정의 등이 포함됩니다.
* /patterns(선택 사항이지만 권장됨): 전체 사이트의 편집기에 사용되는 블록 모드 정의 파일을 저장하는 곳.
필수적인 테마 정보 파일을 생성하세요.
모든 WordPress 테마는 반드시 ‘’라는 이름의 파일을 포함해야 합니다. style.css 이 파일은 단순한 스타일시트가 아니라, 테마의 “신분증”과도 같은 역할을 합니다. 파일 상단에 있는 주석 정보는 WordPress가 해당 테마를 인식하는 데 필수적인 요소입니다.
/*
Theme Name: 我的炫酷主题
Theme URI: https://example.com/my-awesome-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 一个专为博客和杂志网站设计的现代化、响应式WordPress主题。
Version: 1.0.0
Tested up to: 6.5
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
Domain Path: /languages
*/그중에서,Text Domain 국제화를 위해 사용되며, 이는 번역 파일 내에서 주제를 식별하는 유일한 정보입니다.Requires at least 그리고 Requires PHP 이는 특정 테마를 실행하는 데 필요한 최소 WordPress 및 PHP 버전을 명시한 것으로, 사용자 경험과 보안 측면에서 매우 중요합니다.
또한, 전체 사이트 편집기(FSE) 기능을 지원하려면 다음을 만들어야 합니다. theme.json 이 파일은 구텐베르크(Gutenberg) 편집기와 테마(themes) 간의 소통을 위한 다리 역할을 하며, 스타일, 색상 팔레트, 레이아웃 설정 등을 전역적으로 정의하는 데 사용됩니다.
핵심 주제 템플릿을 구축합니다.
템플릿 파일은 WordPress 테마의 기본 구조를 이루며, 다양한 유형의 콘텐츠가 어떻게 표시될지를 결정합니다. WordPress는 “템플릿 계층 구조”에 따라 적절한 템플릿 파일을 자동으로 선택하여 페이지를 렌더링합니다.
추천 읽기 WordPress 테마 개발 입문 가이드: 제로에서 시작하여 맞춤형 웹사이트를 만들어보세요。
가장 기본적인 두 개의 템플릿 파일은 index.php(주 템플릿, 마지막 선택지로 사용됨) 그리고 style.css(스타일시트). 하지만 기능이 완전한 테마를 만들기 위해서는 다음과 같은 핵심 템플릿들을 기반으로 구축을 시작해야 합니다.
How to build a website’s header and footer
웹사이트의 헤더와 푸터는 모든 페이지에서 공통적으로 사용되는 부분입니다. 우리는 이들을 각각 별도의 위치에 배치할 것입니다. header.php 그리고 footer.php 가운데.
In header.php 파일 내에는 HTML 문서의 head 부분을 포함시켜야 하며, WordPress의 핵심 함수들을 호출해야 합니다. 주요 함수들은 다음과 같습니다: wp_head()이 기능을 통해 WordPress 코어, 플러그인, 그리고 테마에서 필요한 코드(예: 스타일시트, 메타 태그 등)를 여기에 삽입할 수 있습니다.
<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1002>
<header id="masthead" class="site-header">
<!-- 你的网站导航和Logo代码 -->
</header>footer.php 그러면 해당 기능을 비활성화하는 책임이 있습니다. header.php 중에서 열린 태그를 확인하고, 해당 태그를 호출합니다. wp_footer() 함수는 스크립트와 플러그인 기능을 로드하는 데 매우 중요합니다.
How to create an article loop
기사 순환은 WordPress 테마의 핵심 로직으로, 데이터베이스에서 기사를 검색하여 표시하는 데 사용됩니다. 이 로직은 보통 테마의 파일 구조 내에서 특정 파일에 포함되어 있습니다. index.php、single.php(단일 기사) 또는 page.php(One-page) 내용입니다.
기본적인 문서 반복 구조는 다음과 같습니다. 이 구조는… have_posts() 그리고 the_post() 이 함수는 쿼리를 통해 검색된 기사들을 순회합니다.
추천 읽기 궁극의 가이드: 강력하고 유연한 워드프레스 테마를 개발하는 방법。
만일 게시물이 있다면: ?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
<header class="entry-header">
<h2 class="entry-title"><a href="/ko/</?php the_permalink(); ?>"></a></h2>
</header>
<div class="entry-content">
</div>
</article>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-awesome-theme' ); ?></p>이 순환 구조에서 여러 개의 템플릿 태그를 사용하셨습니다. the_title() 기사 제목:the_content() 출판물 내용입니다.the_permalink() 기사 링크를 가져오세요.
주제 기능과 사용자 정의
모든 테마 기능이 개선된 코드는 각 템플릿 파일에 흩어져 있는 대신, 한곳에 집중적으로 관리되어야 합니다. 가장 좋은 방법은 테마의 루트 디렉터리에 ‘enhanced_codes’라는 이름의 폴더를 만드는 것입니다. functions.php 이 파일은 테마가 초기화될 때 자동으로 로드되며, 마치 테마의 “플러그인”과 같은 역할을 합니다.
How to register a navigation menu and sidebar
커스텀 네비게이션 메뉴와 사이드바(유틸리티 영역)는 테마의 기본 기능입니다. 여러분은 이를 설정해야 합니다. functions.php 특정 함수를 사용하여 이들을 등록해야 하며, 그 후에야 백엔드의 “외관(Appearance)” 메뉴에서 관리할 수 있습니다.
활용 register_nav_menus() 함수를 사용하여 메뉴 위치를 등록합니다. 예를 들어, “메인 메뉴”와 “푸터 메뉴”를 등록할 수 있습니다.
function my_awesome_theme_setup() {
register_nav_menus(
array(
'primary' => esc_html__( 'Primary Menu', 'my-awesome-theme' ),
'footer' => esc_html__( 'Footer Menu', 'my-awesome-theme' ),
)
);
}
add_action( 'after_setup_theme', 'my_awesome_theme_setup' );등록용 도구 영역(사이드바)을 사용하려면… register_sidebar() 함수입니다. 사이드바의 이름, ID, 설명, 그리고 사이드바를 감싸는 HTML 태그들을 정의할 수 있습니다.
How to add support for featured images in an article
특색 이미지(기사의 썸네일)는 현대적인 콘텐츠 웹사이트에서 필수적인 기능입니다. WordPress는 기본적으로 이 기능을 활성화하지 않으며, 테마에서 이 기능을 지원한다고 명시적으로 설정해야 합니다.
You can use what was mentioned above. my_awesome_theme_setup() 함수 내에서 사용하기 add_theme_support() 이 기능을 활성화하기 위한 함수가 있습니다. 이 함수는 다양한 WordPress 코어 기능 및 테마 기능을 활성화하는 데 사용됩니다.
function my_awesome_theme_setup() {
// ... 之前的菜单注册代码 ...
add_theme_support( 'post-thumbnails' ); // 为“文章”和“页面”启用特色图像
// 你还可以设置缩略图尺寸
set_post_thumbnail_size( 800, 450, true ); // 默认特色图像尺寸， true表示裁剪
add_image_size( 'my-theme-blog-list', 400, 250, true ); // 自定义一个图像尺寸
}활성화되면 기사 편집 인터페이스에 “특색 이미지” 메타 상자가 표시되어 사용자가 이미지를 업로드하거나 선택할 수 있습니다. 템플릿에서 이 기능을 사용할 수 있습니다. the_post_thumbnail() 그것을 출력하기 위한 함수입니다.
스타일, 스크립트, 그리고 성능 최적화
CSS와 JavaScript 파일을 올바르게 큐에 추가하는 것은 WordPress 개발의 핵심적인 관행입니다. 절대로 템플릿 파일 내에서 직접 이러한 파일들을 사용해서는 안 됩니다. <link> 또는 <script> 태그에 리소스를 하드코딩하는 대신, 다음과 같은 방법을 사용하는 것이 좋습니다: wp_enqueue_style() 그리고 wp_enqueue_script() 함수.
CSS와 JS를 올바르게 큐에 추가하는 방법
In functions.php 새로운 함수를 생성하여 주제 리소스를 등록하고 대기열에 추가하는 기능을 구현하세요. 그런 다음, 이 함수를 해당 시스템에 마운트하세요. wp_enqueue_scripts 이 동작은 훅에 연결되어 있습니다.
function my_awesome_theme_scripts() {
// 注册并排队主样式表（style.css）
wp_enqueue_style( 'my-awesome-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 注册并排队一个自定义的CSS文件
wp_enqueue_style( 'my-awesome-theme-main-css', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0.0' );
// 注册并排队一个自定义的JavaScript文件
wp_enqueue_script( 'my-awesome-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );
// 如果需要在脚本中使用PHP变量（如ajax_url），可以使用wp_localize_script
wp_localize_script( 'my-awesome-theme-navigation', 'myThemeData', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
));
}
add_action( 'wp_enqueue_scripts', 'my_awesome_theme_scripts' );참고로, 마지막 매개변수는… true 이는 스크립트가 문서의 맨 아래에 위치하고 있음을 나타냅니다.</body>로딩을 미리 수행하면 일반적으로 페이지 렌더링 성능을 향상시킬 수 있습니다.
How to implement internationalization and localization
당신의 테마가 전 세계에서 사용될 수 있도록 하기 위해서는 국제화(i18n) 작업이 필요합니다. 이는 템플릿과 PHP 코드에서 출력되는 모든 텍스트 문자열이 번역 함수에 의해 감싸져야 한다는 것을 의미합니다.
가장 많이 사용되는 함수는 esc_html__()(용도: 이스케이프 처리된 HTML을 출력하기 위해 사용됩니다.) esc_html_e()(직접 이스케이프 처리된 HTML을 출력하는 데 사용됩니다.) 이들 모두는 테마 헤더 정보에서 정의된 내용을 제공해야 합니다. Text Domain。
// 기사 순환 중 “기사가 없습니다”라는 메시지가 표시될 때
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-awesome-theme' ); ?></p>
// 在导航菜单注册时
'primary' => esc_html__( 'Primary Menu', 'my-awesome-theme' ),코드를 준비한 후에는 Poedit와 같은 도구를 사용하여 모든 번역 문자열을 스캔하고, 그 결과를 생성할 수 있습니다. .pot(템플릿 파일을 사용한 후), 그에 맞는 내용을 생성합니다. .po 그리고 .mo 변경 사항이 포함된 파일을 번역한 후, 해당 주제에 맞는 위치에 저장해 주세요. /languages 카탈로그.
요약
이 긴 글에서는 현대적인 WordPress 테마 개발의 전반적인 프로세스, 즉 환경 설정부터 기능 완성에 이르기까지의 과정을 체계적으로 설명합니다. 우리는 표준화된 프로젝트 구조를 구축하는 것부터 시작하여 그 중요성을 강조합니다. style.css 그리고 theme.json 그 중요성에 대해 논의한 후, 우리는 템플릿 계층을 구축하는 논리에 대해 자세히 살펴보았습니다. 특히, 기사를 반복적으로 처리하여 콘텐츠를 동적으로 표시하는 방법에 대해 집중적으로 고민했습니다. 기능 향상 부분에서는 어떻게 해당 기 functions.php 주제를 확장해 보자면, 등록 메뉴와 유틸리티 기능을 추가하고 특별한 이미지도 지원할 수 있도록 해야 합니다.
마지막으로, 프론트엔드 리소스 관리와 코드 품질에 초점을 맞추어서 WordPress의 표준 방법을 사용하여 스타일 스크립트를 추가하고 국제화를 위한 준비를 하는 것의 중요성을 강조했습니다. 이러한 모범 사례를 따르면 구조가 명확하고 유지보수가 용이한 테마를 개발할 수 있을 뿐만 아니라, 그 테마의 호환성, 보안성, 확장성도 보장할 수 있어 더 복잡한 프로젝트를 구축하는 데 탄탄한 기반을 마련할 수 있습니다.
자주 묻는 질문
주제(Theme)와 플러그인(Plugin)의 차이점은 무엇인가요? 기능 코드는 어디에 배치해야 하나요?
테마는 웹사이트 콘텐츠의 시각적 표현과 레이아웃(즉, “외관”)을 제어하는 역할을 하며, 플러그인은 웹사이트에 새로운 기능(예: 연락처 양식, SEO 최적화, 전자상거래 기능 등)을 추가하는 데 사용됩니다. 간단한 원칙은 다음과 같습니다: 코드가 웹사이트의 외관을 변경하는 역할을 한다면 그 코드는 테마에 속하며, 새로운 기능을 추가하는 역할을 한다면 그 코드는 플러그인으로 만들어야 합니다. 장기적으로 볼 때, 기능적인 코드를 플러그인으로 구성해 두면 테마를 교체할 때도 해당 기능들을 그대로 유지할 수 있습니다.
theme.json 파일을 반드시 사용해야 하나요? 그 파일이 어떤 장점이 있나요?
미래 지향적인 현대적인 주제 개발을 위해서는 사용을 강력히 추천합니다. theme.json이 기능은 더 이상 선택적인 고급 기능이 아니라, WordPress의 전체 사이트 편집기 아키텍처의 핵심이 되었습니다. 이 기능의 장점은 다음과 같습니다: 전역 스타일과 설정(색상, 글꼴, 간격)을 중앙에서 관리할 수 있어 블록 편집기에서 더 일관된 사용자 경험을 제공하고, 내장 스타일 사용을 줄일 수 있으며, 반응형 디자인과 어두운 모드의 구현을 간소화할 수 있습니다. WordPress 5.8부터 이 기능은 테마 개발에 있어 매우 중요한 부분이 되었습니다.
WordPress의 기본 위젯 출력을 어떻게 사용자 정의할 수 있을까요?
WordPress의 핵심 플러그인(예: 카테고리 목록, 최신 글 목록)에서 생성되는 HTML 코드에는 종종 불필요한 중첩 구조가 많이 포함되어 있습니다. div 클래스 이름과 함께, 필터(Filter)를 사용하여 이들을 사용자 정의할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다: widget_categories_args 필터는 분류 디렉터리 관련 유틸리티의 쿼리 매개변수를 수정할 수 있으며, 보다 근본적인 방법으로는 해당 유틸리티의 내부 로직을 직접 변경함으로써 쿼리 동작을 제어할 수도 있습니다. widget_categories_output 일부 필터들은 생성된 HTML을 직접 수정합니다. 더 현대적이고 유연한 방법으로는 기존의 작은 도구들을 대체하기 위해 자신만의 사용자 정의 블록을 만드는 것입니다.
템플릿 계층이란 무엇이며, 어떻게 활용할 수 있을까요?
템플릿 계층 구조는 WordPress가 현재 페이지를 표시하기 위해 어떤 템플릿 파일을 사용할지 결정하는 시스템입니다. 이 시스템은 “가장 구체적인” 템플릿부터 “가장 일반적인” 템플릿까지의 순서를 따릅니다. 예를 들어, ID가 123인 글의 경우, WordPress는 다음과 같은 순서로 템플릿을 찾습니다:single-post-123.php -> single-post.php -> single.php -> singular.php -> 마지막으로… index.php당신은 더 구체적인 템플릿 파일을 만들어서 이를 사용할 수 있습니다. category-news.php “뉴스” 카테고리 페이지를 별도로 디자인함으로써 각 페이지의 외관을 정확하게 제어할 수 있습니다. 이는 단일 파일 내에 수많은 조건 판단 문장을 작성하는 것보다 훨씬 더 명확하고 관리하기 쉽습니다.
테마를 개발할 때 어떻게 디버깅하고 오류를 찾아내나요?
첫 번째 단계는 다음과 같습니다: wp-config.php 파일에서 WordPress 디버깅 모드를 활성화하세요. WP_DEBUG 상수를 다음과 같이 설정합니다: true이렇게 하면 모든 PHP 오류, 경고, 및 알림이 페이지에 표시됩니다. 또한, 설정을 적절히 조정하는 것이 좋습니다. WP_DEBUG_LOG 그것은 true오류를 기록하세요. /wp-content/debug.log 파일 내에서는 오류 메시지가 방문자에게 직접 노출되지 않도록 주의해야 합니다. 또한, 브라우저 개발자 도구(콘솔 및 네트워크 탭)를 사용하여 JavaScript 오류와 리소스 로딩 문제를 확인하는 것은 프론트엔드 디버깅에 필수적인 기술입니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어