주제의 기본 구조와 핵심 파일을 이해하는 것
표준 WordPress 테마의 핵심은 특정 파일들을 포함하는 폴더로, 이 폴더는 다음과 같은 위치에 있습니다:/wp-content/themes/디렉터리 내에 있습니다. 각 주제는 WordPress에 의해 인식되고 활성화되기 위해 최소 두 개의 핵심 파일이 필요합니다.
먼저는…style.css이 파일은 단순한 테마의 스타일시트가 아니라, 정보 파일이기도 합니다. 파일 상단의 주석 블록에는 테마의 기본 정보가 정의되어 있으며, 여기에는 테마 이름, 작성자, 설명, 버전 등이 포함됩니다. 이러한 올바른 형식의 헤더 주석이 없으면 WordPress는 백엔드의 테마 목록에 해당 테마를 표시할 수 없습니다.
또 다른 필수 파일은index.php이 파일은 주제의 기본 템플릿 파일입니다. WordPress가 콘텐츠를 표시하기 위한 더 구체적인 템플릿을 찾을 수 없을 때 이 파일을 사용합니다.
추천 읽기 WordPress 테마 개발 입문 가이드: 제로에서 시작하여 맞춤형 웹사이트 디자인을 만들어보세요。
그 외에도, 기능이 완벽한 테마는 일반적으로 다음과 같은 파일들을 포함합니다:header.php、footer.php、sidebar.php그리고functions.php。문서functions.php가장 중요한 점은, 이것이 주제의 “뇌” 역할을 한다는 것입니다. 즉, 핵심 코드를 수정하지 않고도 기능을 추가하거나 사이드바를 등록하고, 네비게이션 메뉴를 정의하는 등의 작업을 할 수 있게 해줍니다.
How to design a standard theme information header
Instyle.css파일 내의 헤더 정보 형식은 반드시 엄격히 준수해야 합니다. 다음은 표준적인 예시입니다:
/*
Theme Name: 我的第一个主题
Theme URI: https://www.example.com/my-first-theme/
Author: 你的名字
Author URI: https://www.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
*/이 정보들은 WordPress 관리자 페이지의 “외관(Appearance)” -> “테마(Themes)” 메뉴에 표시됩니다.Text Domain국제화를 위해 사용되며, 주제를 다른 언어로 번역할 준비를 할 때 매우 중요합니다.
기본 페이지 템플릿 구조를 생성합니다.
템플릿 파일은 WordPress 테마의 기본 구조를 이루며, 다양한 유형의 콘텐츠가 어떻게 표시될지를 결정합니다. WordPress의 템플릿 계층 구조를 이해하고 효과적으로 활용하는 것은 효율적인 개발의 핵심입니다.
페이지의 헤더(head) 및 테일러(tailer) 파일을 구성합니다.
페이지 내에서 반복되는 부분을 별도의 파일로 분리하는 것은 코드를 깔끔하고 유지보수하기 쉽게 만드는 최선의 방법입니다.header.php파일에는 일반적으로 문서 유형을 나타내는 선언이 포함되어 있습니다.<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="site-header">
<h1><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>그에 따라,footer.php이 파일에는 푸터 정보(예: 저작권 정보)가 포함되어 있으며, 해당 정보가 파일의 끝에서 마무리됩니다.header.php중에서 열린 HTML 태그들을 동시에 호출합니다.wp_footer()함수.
<footer id="site-footer">
<p>©</p>
</footer>
</body>
</html>wp_head()그리고wp_footer()이 두 개의 ‘후크(hook)’는 필수적입니다. 이를 통해 플러그인과 WordPress 코어 자체가 페이지의 상단과 하단에 각각 코드를 삽입할 수 있습니다.
홈페이지와 기사 페이지의 템플릿을 구현합니다.
주제를 다루는 일반적인 컨테이너로서…index.php이 파일은 WordPress 템플릿 태그를 사용하여 다른 템플릿 부분을 가져오고, 글들을 반복적으로 출력합니다.
<main id="primary">
만일 게시물이 있다면: ?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
<h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
<div class="entry-content">
</div>
</article>
</main>
\n단일 기사 페이지에 대해서는 다음과 같은 내용을 생성해야 합니다:single.php그 구조는…index.php비슷하지만, 보통은 특정 함수나 메서드가 호출됩니다.the_post_thumbnail()특색 이미지를 표시하기 위해 사용됩니다.the_category()그리고the_tags()분류와 태그를 표시하기 위해…
주제 함수 파일에서 기능을 확장합니다.
functions.php파일은 WordPress 테마에 모든 사용자 정의 기능과 설정을 추가하는 곳입니다. 이 파일은 마치 또 다른 플러그인과 같지만, 특정 테마에만 해당하는 것입니다.
주제 설정의 기본 지원 기능들
활용add_theme_support()함수는 기사의 특징적인 이미지, 사용자 정의 로고, HTML5 마크업 등과 같이 테마가 지원하는 다양한 기능들을 선언할 수 있습니다. 이러한 설정들은 일반적으로 특정 파일이나 설정 파일 내에서 이루어집니다.after_setup_theme후크가 호출한 함수 내에서 작업이 완료됩니다.
추천 읽기 WordPress 테마 개발 완전 가이드: 제로에서 시작하여 전문적인 반응형 웹사이트를 구축하는 방법。
function my_theme_setup() {
// 启用文章特色图像
add_theme_support( 'post-thumbnails' );
// 注册导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
'footer' => __( '页脚菜单', 'my-first-theme' ),
) );
// 支持HTML5标记
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );사이드바와 툴바 영역을 구현하기
플러그인은 WordPress의 중요한 구성 요소입니다. 테마에 플러그인 영역(사이드바)을 추가하려면 다음과 같은 단계를 따라야 합니다:functions.php중국에서 사용하세요.register_sidebar()함수.
function my_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在这里添加小工具。', 'my-first-theme' ),
'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_theme_widgets_init' );등록하시면 바로 사용하실 수 있습니다.sidebar.php템플릿 파일에서 사용됩니다.dynamic_sidebar( ‘sidebar-1’ )이제 이 영역을 호출해야 합니다.
스타일시트와 스크립트 파일을 통합하기
CSS 스타일시트와 JavaScript 스크립트를 주제(theme)에 올바르게 추가하는 것은 성능과 호환성을 보장하는 데 매우 중요합니다. 절대로 템플릿 파일에 직접 링크를 하드코딩하지 마시고, WordPress가 제공하는 ‘대기열 처리(enqueue)’ 시스템을 사용하시기 바랍니다.
주제의 주요 스타일 시트를 정의합니다.
비록style.css필수적이지만, 우리는 보통 주제를 식별하기 위한 정보만을 유지하고 실제 스타일은 다른 CSS 파일에 작성한 뒤, 그 파일을 통해 적용합니다.wp_enqueue_style()Function loading.
function my_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 加载一个自定义样式表
wp_enqueue_style( 'my-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array('my-theme-style'), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );get_stylesheet_uri()이 함수는 자동으로 주제의 루트 디렉터리(즉, 주제 관련 파일들이 저장된 최상위 디렉터리)를 가리킵니다.style.css파일: 대기열 시스템을 사용하면 플러그인이나 서브테마가 쉽게 사용자의 스타일을 참조하거나 대체할 수 있습니다.
커스텀 스크립트를 추가하고 통합하기
JavaScript 파일의 경우 절차는 비슷하지만, 다음과 같은 방법을 사용해야 합니다:wp_enqueue_script()함수. 좋은 관행은 스크립트를 페이지 하단에 로드하는 것으로, 이를 통해 페이지 렌더링 속도를 향상시킬 수 있습니다.
function my_theme_scripts() {
// ... 样式加载代码 ...
// 在页脚加载一个自定义JS文件，并依赖jQuery
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );마지막 매개변수에 주의하세요.true이 설정은 WordPress에게 스크립트를 페이지의 푸터(footer) 부분에 배치하도록 지시합니다. 만약 여러분의 스크립트가 특정 위치에서 실행되어야 한다면…<head>false。
요약
WordPress 테마 개발은 디자인, HTML, PHP, 그리고 WordPress 코어에 대한 지식을 통합하는 과정입니다. 테마의 구조와 기능을 이해하는 것부터 시작하여, 사용자의 요구사항에 맞게 테마를 커스터마이징하고 최적화하는 것까지, 이 과정에는 다양한 기술과 경험이 필요합니다.style.css그리고index.php두 개의 가장 기본적인 파일을 시작점으로 삼아, 별도의 템플릿 파일을 생성함으로써 페이지 구조를 구축합니다. 그런 다음 강력한 도구들을 활용하여…functions.php이 파일은 여러분의 테마에 다양한 기능을 추가해 줍니다. 마지막으로, 스타일과 스크립트를 표준적인 큐잉 방식을 통해 관리합니다. WordPress의 코딩 표준과 템플릿 계층 구조를 준수함으로써, 구조가 명확하고 유지보수가 용이한 테마를 만들 수 있을 뿐만 아니라, 전체 WordPress 생태계와의 호환성도 보장할 수 있습니다. 가장 기본적인 테마 폴더를 만드는 것부터 시작하여 점차 기능을 추가해 나가는 것이 이 기술을 익히는 가장 좋은 방법입니다.
자주 묻는 질문
워드프레스 테마를 개발하려면 어떤 언어들을 숙달해야 할까요?
기본적인 WordPress 테마를 개발하려면 HTML, CSS, PHP를 반드시 숙달해야 합니다. HTML은 페이지의 구조를 만드는 데 사용되며, CSS는 스타일과 레이아웃을 제어하는 데 사용됩니다. PHP는 WordPress의 서버 측 스크립트 언어로, 모든 동적 기능을 구현하는 데 사용됩니다. 보다 복잡하고 상호작용성이 높은 테마를 개발할 경우에는 JavaScript에 대한 지식도 필수적입니다.
내 테마가 다국어를 지원하도록 하려면 어떻게 해야 하나요?
테마가 여러 언어를 지원하도록 만드는 과정을 국제화(internationalization)라고 합니다. 이를 위해서는 다음과 같은 작업이 필요합니다:style.css헤더 정보의 해당 부분을 올바르게 설정해야 합니다.Text Domain그리고…functions.php중국에서 사용하세요.load_theme_textdomain()함수가 언어 파일을 로드합니다.
그 후, 주제에 관한 PHP 파일에서 번역이 필요한 모든 문자열은 다음과 같은 방식을 사용해야 합니다:__('Hello World', 'my-theme-text-domain')이러한 번역 함수를 래핑 처리한 후, Poedit와 같은 도구를 사용하여 최종 결과물을 생성합니다..po그리고.mo언어 파일은 번역자가 사용하기 위한 것입니다.
반응형 디자인은 테마 개발에서 필수적인가요?
2026년의 오늘날, 반응형 디자인은 더 이상 “추가적인 장점’이 아니라 테마 개발에 필수적인 요소가 되었습니다. 전 세계 웹 트래픽의 절반 이상이 모바일 기기에서 발생하고 있으며, 반응형 디자인이 없는 테마는 사용자 경험을 크게 저해하고 모바일 기기에서의 웹사이트 검색 엔진 순위에도 부정적인 영향을 미칩니다.
CSS 미디어 쿼리와 같은 기술을 사용하여 테마의 레이아웃이 다양한 화면 크기에 자동으로 적응하도록 해야 합니다. 데스크톱 컴퓨터부터 스마트폰에 이르기까지 모든 기기에서 우수한 브라우징 경험을 제공할 수 있도록 해야 합니다. 많은 현대적인 CSS 프레임워크(예: Tailwind CSS)도 반응형 인터페이스를 빠르게 구축하는 데 도움을 줍니다.
내 주제는 어떻게 하면 사용자가 백엔드를 통해 커스터마이징할 수 있을까요?
사용자에게 백엔드 사용자 정의 옵션을 제공하는 것은 주로 WordPress의 “커스터마이저”(Customizer) API를 통해 이루어집니다. 여러분은…functions.php중국에서 사용하세요.$wp_customize->add_setting()그리고$wp_customize->add_control()설정 및 컨트롤을 추가하는 방법입니다.
예를 들어, 사용자가 웹사이트 제목의 색상을 변경할 수 있도록 옵션을 추가할 수 있습니다. 이러한 설정 값들은 테마 템플릿 파일에서 설정할 수 있습니다.get_theme_mod()이 함수는 테마의 설정 정보를 가져와 출력합니다. 이를 통해 사용자는 코드를 수정하지 않고도 테마의 외관을 자신의 취향에 맞게 커스터마이징할 수 있으며, 테마의 사용 편의성과 전문성이 크게 향상됩니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어