준비 작업 및 환경 구축
코드를 직접 작성하기 시작하기 전에, 안정적이고 전문적인 로컬 개발 환경이 필요합니다. 온라인 서버에서 테마 파일을 직접 수정하는 것은 강력히 권장하지 않습니다. 로컬 개발 환경을 사용하면 웹사이트의 정상적인 접속에 영향을 주지 않으면서 자유롭게 테스트를 진행할 수 있습니다. XAMPP, MAMP (Mac), Laragon (Windows)과 같은 통합 개발 환경 소프트웨어를 사용할 수 있으며, 이러한 소프트웨어들은 Apache, MySQL, PHP를 한 번에 설치하고 설정해 줍니다.
WordPress 자체도 로컬 환경에 설치해야 합니다. WordPress 공식 웹사이트에 접속하여 최신 설치 파일을 다운로드한 후, 이 파일을 로컬 서버의 웹사이트 루트 디렉터리(예: XAMPP의 경우)에 압축을 해제하세요. htdocs 폴더를 생성한 후, 브라우저를 사용하여 유명한 “5분 설치” 과정을 완료하세요. 설치하는 동안에는 자신이 설정한 데이터 정보를 꼭 기억해 두시기 바랍니다.
마지막으로, 편리하게 사용할 수 있는 코드 편집기나 통합 개발 환경이 필요합니다. Visual Studio Code, PhpStorm, Sublime Text 모두 훌륭한 선택지로, 구문 강조 기능, 코드 완성 기능, 파일 관리 기능을 제공하여 개발 효율성을 크게 향상시켜 줍니다.
추천 읽기 워드프레스 테마 개발 단계별 마스터하기: 처음부터 사용자 정의 테마 구축하기。
理解 WordPress 主题基础结构
워드프레스 테마는 기본적으로 위치에 있는 것입니다. /wp-content/themes/ 디렉터리 내의 폴더에는 특정 규칙을 따르는 일련의 파일과 디렉터리가 포함되어 있습니다. 이러한 파일들은 함께 작동하여 WordPress가 웹사이트의 외관과 콘텐츠를 어떻게 표시할지 결정합니다.
그 가장 핵심적인 메커니즘은 “템플릿 계층 구조”입니다. WordPress는 현재 접속 중인 페이지의 유형에 따라 적절한 템플릿 파일을 자동으로 선택하여 콘텐츠를 표시합니다. 예를 들어, 블로그 글을 읽을 때 WordPress는 먼저 해당 글에 맞는 템플릿을 찾아서 콘텐츠를 렌더링합니다. single.php블로그 홈페이지에 접속하면 다음과 같은 내용을 찾게 됩니다: home.php 또는 index.php이러한 메커니즘은 테마에 매우 큰 유연성을 부여합니다.
각 주제는 반드시 두 개의 기본 파일을 포함해야 합니다:style.css 그리고 index.php。style.css 이 파일의 역할은 단순히 스타일을 제공하는 것에 그치지 않습니다. 파일의 맨 위에 있는 주석 블록은 해당 테마의 “신분증”과 같은 역할을 하며, WordPress에 테마의 이름, 저자, 설명 등의 메타정보를 알려줍니다.index.php 이것은 마지막 보안 장치입니다. 다른 더 구체적인 템플릿 파일들이 존재하지 않을 경우, WordPress는 이 파일을 사용하게 됩니다.
일반적인 주제 헤더 주석은 다음과 같습니다:
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的简单 WordPress 主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/Text Domain 국제화를 위해 사용되며, 이후 번역 함수를 호출할 때 사용되는 식별자입니다.
추천 읽기 전문 웹사이트 구축: 제로에서 시작하여 사용자 정의 WordPress 테마를 만드는 완전한 가이드。
이 두 파일 외에도, 기능이 완전한 테마는 일반적으로 다음과 같은 요소들을 포함합니다:header.php(웹 페이지 헤더)footer.php(웹페이지 하단),sidebar.php(사이드바) 그리고 functions.php(주제 기능 향상 파일). 이 기본 구조를 이해함으로써, 주제 개발의 골격을 파악하게 됩니다.
핵심 템플릿 파일을 생성합니다.
이제, 첫 번째 테마를 만들어 보겠습니다. 당신의… /wp-content/themes/ 디렉터리 내에 새로운 폴더를 만들어주세요. 예를 들어, 그 폴더의 이름을 ‘new_folder’로 지정하실 수 있습니다. my-first-theme그런 다음, 해당 폴더 내에 가장 기본적인 파일을 생성하세요.
먼저 생성하세요. style.css그리고 앞서 언급한 주제에 대한 헤더 주석을 추가하세요. 다음으로, 생성하세요. index.php이것이 당신의 첫 번째 템플릿 파일입니다. 가장 간단한 형태의 템플릿입니다. index.php 기사 제목과 내용만을 포함하는 반복 구조를 사용할 수 있습니다.
<main>
만일 게시물이 있다면: ?>
<article>
<h2></h2>
<div></div>
</article>
<p>현재 내용이 없습니다.</p>
</main>
\n이 코드는 템플릿 태그를 사용하고 있습니다. get_header(), get_sidebar(), get_footer(), the_title() 그리고 the_content()이것을 작동시키기 위해서는 해당하는 헤더(header), 사이드바(sidebar), 그리고 바닥부분(bottom) 파일을 생성해야 합니다.
Create header.php그것은 HTML 문서의 시작 부분부터 주요 콘텐츠 영역이 시작되는 부분까지를 포함해야 합니다.
<!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>
<h1><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
<nav>
'primary'
) );
?>
</nav>
</header>여기,wp_head() 이것은 매우 중요한 기능으로, WordPress 코어, 플러그인, 그리고 테마가 페이지 상단에 필요한 코드(예: 스타일시트 링크)를 삽입할 수 있도록 해줍니다.body_class() 이 함수는 일련의 의미 있는 CSS 클래스 이름을 출력하여, 보다 세밀한 스타일 제어를 가능하게 해줍니다.
추천 읽기 워드프레스 핵심 아키텍처와 작동 방식。
Create footer.php 열려 있는 탭을 닫으려면:
<footer>
<p>©</p>
</footer>
</body>
</html>주의하세요.wp_footer() 是与 wp_head() 상대적인 끝부분의 훅(hook) 역시 마찬가지로 필수적입니다.
Create sidebar.php일시적으로는 간단한 컨트롤만 호출하는 것으로 충분합니다:
<aside>
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<?php dynamic_sidebar( 'sidebar-1' ); ?>
<?php endif; ?>
</aside>이제 여러분의 테마는 기본적인 “템플릿 적용” 기능을 갖추고 있으며, 백엔드에서 활성화하고 미리 보실 수 있습니다. 비록 간단하지만, WordPress의 핵심 아키텍처를 따르고 있습니다.
Functions.php를 사용하여 테마 기능을 확장합니다.
functions.php 이 파일은 여러분의 테마의 “제어 센터” 역할을 합니다. 이 파일은 단순한 템플릿 파일이 아니라, 테마가 초기화될 때 자동으로 로드되는 PHP 파일로서 기능을 추가하거나, 컴포넌트를 등록하거나, WordPress의 다양한 API에 연결하는 데 사용됩니다. 이는 테마를 더 전문적으로 만드는 데 있어 매우 중요한 요소입니다.
이 파일을 테마의 루트 디렉터리에 생성해야 합니다. 먼저, 테마에 스타일시트와 스크립트 파일을 추가해 보겠습니다. 올바른 방법은 WordPress가 제공하는 함수를 사용하여 이 파일들을 추가하는 것이며, HTML 코드에 직접 작성하는 것이 아닙니다. <link> 태그.
<?php
function my_first_theme_scripts() {
// 添加主题的主样式表
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
// 添加一个自定义样式表
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
// 添加一个 JavaScript 文件
wp_enqueue_script( 'main-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );여기,wp_enqueue_style() 그리고 wp_enqueue_script() 이 함수는 리소스를 안전하게 추가하기 위해 사용됩니다.get_stylesheet_uri() 주제에 관한 내용입니다. style.css。add_action() Our function needs to be mounted to... wp_enqueue_scripts 이 훅에 대해, 올바른 시점에 실행되도록 반드시 확인해야 합니다.
다음으로, 네비게이션 메뉴와 사이드바(유틸리티 영역)를 등록하세요:
function my_first_theme_setup() {
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
'footer' => __( '底部菜单', 'my-first-theme' ),
) );
// 启用文章特色图像功能
add_theme_support( 'post-thumbnails' );
// 为“文章”类型启用文章格式支持
add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );
// 添加对 HTML5 标记格式的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 启用标题标签功能
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );register_nav_menus() 백엔드의 “외관” -> “메뉴” 인터페이스에 선택 가능한 메뉴 항목들이 표시되도록 하세요.add_theme_support() 이 함수는 다양한 테마 기능을 활성화하는 데 사용되며, 이는 현대 테마 개발의 표준적인 방법입니다. 예를 들어, 특정 기능을 활성화하기 위해 이 함수를 사용할 수 있습니다. title-tag 그 후에는 더 이상 할 필요가 없습니다. header.php 중에서 수동으로 출력합니다. <title> 태그를 달았습니다.
마지막으로, 사이드바에 작은 도구 영역을 등록해 보세요:
함수 my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '메인 사이드바', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '여기에 위젯을 추가합니다.' , 'my-first-theme' ), 'description' => __( '여기에 위젯 추가.
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );이제까지, 해당 테마는 기본적인 표현 방식에서부터 기능이 향상된 상태까지의 전체 과정을 갖추게 되었습니다. 백엔드 설정 메뉴를 통해 설정을 변경하거나 추가적인 도구들을 추가함으로써, 테마가 어떻게 동적으로 변화하는지 직접 확인할 수 있습니다.
요약
“Create a document that contains…” style.css 그리고 index.php 해당 폴더에서 시작하여, 분리된 템플릿 구성 요소들을 구축하는 과정까지…header.php, footer.php그리고 강력한 기능을 통해… functions.php 파일 등록 메뉴와 사이드바를 설정하고 리소스를 안전하게 로드하는 방법을 배웠으니, 이제는 커스텀 WordPress 테마를 만드는 과정의 핵심 단계들을 모두 거쳤습니다. 이 과정의 핵심은 WordPress의 템플릿 구조와 훅 시스템을 이해하고 그에 따라 작업하는 데 있습니다.
이제 당신은 단순한 템플릿 사용자가 아니라, 그 템플릿을 직접 만들어내는 창작자가 되었습니다. 이러한 기초 지식을 익혔으니, 더 복잡한 템플릿 파일들에 대해 심도 있게 공부해 나갈 수 있을 것입니다. single.php、page.php、archive.phpWordPress의 반복 구조(루프)를 활용하는 다양한 방법을 탐색해 보세요. 조건부 태그(conditional tags)와 같은 도구들을 적극적으로 사용하여 코드를 더욱 효율적이고 유연하게 만들어 보세요. is_page(), is_single()더 세밀한 페이지 제어를 구현하는 것입니다. 테마 개발의 세계는 넓고 흥미롭으며, 이것은 단지 견고한 출발점에 불과합니다.
자주 묻는 질문
WordPress 테마를 개발하려면 PHP에 능통해야 하나요?
需要具备 PHP 的基础知识，但无需达到精通的水平。你至少需要理解变量、数组、条件语句（if/else）、循环（while/foreach）以及函数的基本概念。因为 WordPress 主题开发大量使用了其内置的 PHP 函数（模板标签）和钩子系统，所以学习重点在于理解 WordPress 特有的 PHP 函数如何使用，而非从头编写复杂的 PHP 算法。
왜 반드시 `wp_head()`와 `wp_footer()` 함수를 사용해야 할까요?
이 두 함수는 WordPress의 핵심 후크(hook)입니다.wp_head() 위치한 곳은 </head> 태그 앞에 이 영역이 존재하기 때문에, WordPress 코어, 플러그인, 그리고 사용자가 직접 만든 테마가 페이지 상단에 필요한 코드를 삽입할 수 있습니다. 예를 들어, CSS 스타일시트 링크, 메타 태그, JavaScript 변수 등이 이에 해당합니다.wp_footer() 위치한 곳은 </body> 태그 앞에는 분석 코드나 지연 로딩되는 JavaScript 파일을 삽입하는 데 자주 사용됩니다. 이러한 태그들이 없으면 많은 플러그인이 제대로 작동하지 않을 수 있으며, 심지어 WordPress 자체의 일부 기능에도 이상이 발생할 수 있습니다.
내 테마에 페이지 템플릿을 어떻게 추가하나요?
새로운 PHP 파일을 생성하세요. 예를 들어, 파일 이름을 `new_file.php`로 지정할 수 있습니다. page-fullwidth.php이 파일의 맨 위에는 특정 템플릿 이름에 대한 주석 블록을 추가해야 합니다. 예를 들어:
<?php
/**
* Template Name: 全宽页面
* Description: 一个没有侧边栏的页面模板
*/그런 다음, 이 파일 내에 다른 내용을 작성할 수 있습니다. page.php 的 HTML 结构，比如省略 get_sidebar() 페이지를 저장한 후, WordPress 관리자의 편집 페이지에서 “페이지 속성”의 “템플릿” 드롭다운 목록에 “전체 너비 페이지” 옵션이 추가되어 선택할 수 있게 됩니다.
주제 개발 중에 CSS와 JavaScript를 어떻게 처리하는 것이 최선의 방법일까요?
최선의 방법은 WordPress가 제공하는 기능들을 사용하는 것입니다. wp_enqueue_style() 그리고 wp_enqueue_script() 함수, 그렇죠. functions.php 중간에 마운트됨 wp_enqueue_scripts 钩子来添加资源。这种方式可以：1）正确处理依赖关系（例如你的脚本依赖 jQuery）；2）避免重复加载同一资源；3）方便插件和其他主题代码进行管理；4）符合 WordPress 编码标准。绝对要避免直接在模板文件中使用 <link> 또는 <script> 태그를 통해 리소스를 하드코딩하는 방식입니다.
내 주제를 어떻게 다국어 지원(국제화)으로 구현할 수 있을까요?
당신은 두 가지 일을 해야 합니다. 첫째로, style.css 헤더 주석과 호출된 텍스트를 번역할 때는 올바른 “텍스트 도메인”(Text Domain)을 사용해야 합니다. 가이드라인에 명시된 대로 정의해야 합니다. Text Domain: my-first-theme둘째, functions.php 모든 템플릿 파일에서 번역이 필요한 모든 사용자 인터페이스 텍스트를 WordPress의 번역 기능으로 감싸야 합니다. 가장 일반적으로 사용되는 방법은… __()번역된 문자열을 반환하고 상세히 설명해 주십시오. _e()(직접 번역된 문자열을 그대로 표시합니다.) 예를 들어:<?php _e( ‘Hello World’, ‘my-first-theme’ ); ?>그 후에는 Poedit와 같은 도구를 사용하여 번역 결과를 생성할 수 있습니다. .pot 템플릿 파일은 번역가가 다양한 언어로 콘텐츠를 생성하는 데 사용됩니다. .po 그리고 .mo 파일.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어