워드프레스 테마의 기본 구조 이해
WordPress 테마는 본질적으로 일련의 파일들로 구성되어 있으며, 이 파일들이 함께 웹사이트의 전면적인 외관과 기능을 정의합니다. 그 중에서도 모든 테마에 반드시 포함되어야 하는 파일이 두 개 있습니다:style.css그리고index.php. 그것들은 주제의 기초를 이룹니다.
가장 기본적인 수준에서, WordPress 테마는 템플릿 파일 시스템을 통해 작동합니다. 방문자가 페이지를 요청하면, WordPress는 요청된 페이지의 유형(홈페이지, 글 페이지, 아카이브 페이지 등)에 따라 특정 템플릿 구조를 참조하여 어떤 PHP 템플릿 파일을 로드하여 콘텐츠를 렌더링할지 결정합니다. 이러한 설계 덕분에 개발자는 다양한 유형의 페이지 출력을 매우 유연하게 제어할 수 있습니다.
주제 파일 구조 개요
표준 WordPress 테마에는 일련의 특정 파일들이 포함되어 있습니다. 필수적인 파일들 외에도…style.css그리고index.php기능이 완벽한 테마는 일반적으로 다음과 같은 요소들도 포함합니다:functions.php、header.php、footer.php、sidebar.php그리고 각기 다른 페이지에 맞는 템플릿 파일들도 있습니다.single.php(기사 페이지) 그리고page.php(페이지).functions.php파일은 테마의 “두뇌” 역할을 하며, 기능을 추가하거나 메뉴, 사이드바 등을 등록하는 데 사용됩니다.
추천 읽기 WordPress 테마 개발 입문: 제로에서 시작하여 첫 번째 웹사이트 스킨을 만들어보세요。
style.css이 파일에는 스타일시트뿐만 아니라, 파일 헤더에 포함된 주석들도 주제에 대한 메타데이터를 담고 있습니다. 여기에는 주제의 이름, 저자, 설명, 버전 등이 포함됩니다. 이러한 메타데이터가 WordPress가 특정 주제를 인식하는 데 중요한 역할을 합니다.
/**
* Theme Name: My Custom Theme
* Author: Your Name
* Description: A custom theme built from scratch.
* Version: 1.0
*/로컬 개발 환경 구축
코드를 작성하기 시작하기 전에 전문적인 로컬 개발 환경을 설정하는 것이 매우 중요합니다. 이를 통해 온라인 웹사이트에 영향을 미치지 않으면서 안전하고 격리된 환경에서 모든 기능을 테스트할 수 있습니다.
추천되는 도구 조합으로는 Local by Flywheel, XAMPP, MAMP가 있으며, 이들을 사용하면 PHP, MySQL, WordPress를 한 번에 설치할 수 있습니다. 또한, 강력한 코드 편집기(예: VS Code, PhpStorm)와 버전 관리 시스템(Git)도 현대적인 테마 개발에 필수적인 도구들입니다.
첫 번째 주제 폴더를 만드세요.
먼저, WordPress의 설치 디렉터리 내에서…wp-content/themes/폴더 안에 새로운 폴더를 만들어 보세요, 예를 들어…my-first-theme이 폴더의 이름이 바로 당신의 주제 식별자입니다.
그런 다음, 해당 폴더에 가장 기본적인 두 개의 파일을 생성하세요:style.css그리고index.php확실히 하세요.style.css파일의 헤더 정보를 완전히 작성하세요. 이제 WordPress 관리자의 “외관(Appearance)” -> “테마(Themes)” 페이지에 로그인하면, 새로 만든 테마가 표시될 것입니다. 다만 아직은 어떠한 스타일이나 기능도 없는 상태입니다.
추천 읽기 WordPress 테마 개발 완전 가이드: 초보자용 코드부터 실전 기술까지。
핵심 템플릿 구성 요소를 도입합니다.
DRY(Don’t Repeat Yourself) 원칙을 준수하기 위해, WordPress 테마는 공통된 부분들을 분리하기 위해 템플릿 컴포넌트를 사용합니다.header.php、footer.php그리고sidebar.php。
Inindex.php중, 사용get_header()、get_footer()그리고get_sidebar()이러한 구성 요소들을 도입하기 위한 함수들이 있습니다. 이 함수들은 WordPress의 핵심 템플릿 태그로, 해당 이름의 템플릿 파일을 자동으로 찾아서 로드합니다.
// 在 index.php 中的典型结构
<?php get_header(); ?>
<main id="main">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 输出文章内容
endwhile;
endif;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>심층적으로 코어 템플릿과 반복문을 이해하기 (Deep Understanding of Core Templates and Loops)
WordPress의 “루프(cycle)”는 콘텐츠를 표시하는 데 핵심적인 메커니즘입니다. 이는 PHP 코드 구조로, 현재 페이지에 글(또는 페이지)이 있는지를 확인하는 데 사용됩니다. 글이 존재하는 경우, 해당 글들을 순회하며 그 내용을 출력합니다.
메인 루프와 질의를 이해하기
가장 기본적인 반복 구조는 다음과 같습니다. 이 구조는 거의 모든 템플릿 파일에서 사용되며, 글 목록이나 개별 글의 내용을 가져와 표시하는 데 사용됩니다.
만일 게시물이 있다면: ?>
<article>
<h2></h2>
<div></div>
</article>이 순환에서,have_posts()그리고the_post()함수들이 프로세스를 제어합니다. 템플릿 태그들도 마찬가지로…the_title()그리고the_content()현재 글의 구체적인 정보를 출력하는 데 사용됩니다.
커스텀 페이지 템플릿을 생성합니다.
특정 페이지에 독특한 레이아웃을 만들 수 있습니다. 이를 위해서는 새로운 PHP 파일을 생성하고, 그 파일의 상단에 해당 템플릿의 이름을 나타내는 주석을 추가해야 합니다.
추천 읽기 WordPress 테마 개발 전략: 초보자부터 전문가까지의 핵심 기술과 실전 가이드。
예를 들어, ‘example’이라는 이름의 파일을 생성하려면…template-fullwidth.php해당 파일의 시작 부분에 다음과 같은 내용을 작성하세요:
<?php
/**
* Template Name: 全宽页面
* Description: 一个没有侧边栏的全宽度页面模板。
*/저장한 후에 WordPress 관리자에서 어떤 페이지든 편집하면, “페이지 설정” -> “템플릿” 드롭다운 메뉴에서 “전체 화면 너비 페이지” 옵션을 볼 수 있습니다. 이 옵션을 선택하면 해당 페이지가 사용자 정의한 템플릿을 사용하여 렌더링됩니다.
함수 파일을 활용하여 테마 기능을 향상시킵니다.
functions.php이곳은 ‘테마 툴박스’입니다. 여기서 테마 지원 기능을 추가하거나, 네비게이션 메뉴를 등록하고, 위젯 영역을 정의하며, 스타일 및 스크립트 파일의 로딩 순서를 설정할 수 있습니다. 또한 사용자 정의 함수도 생성할 수 있습니다.
주제 설정 기능과 등록 메뉴를 추가하세요.
활용add_theme_support()함수들을 사용하면 WordPress의 핵심 기능들을 활성화할 수 있습니다. 예를 들어, 글의 썸네일 기능을 활성화하는 것은 많은 테마에서 기본적으로 제공되는 기능입니다.
function mytheme_setup() {
// 支持文章特色图像
add_theme_support( 'post-thumbnails' );
// 支持HTML5标记（用于评论表单、搜索表单等）
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );등록된 네비게이션 메뉴 사용register_nav_menus()함수입니다. 등록하시면 백엔드의 “외관” -> “메뉴”에서 이러한 메뉴 항목들의 위치를 관리하실 수 있으며, 템플릿에서도 해당 메뉴들을 사용하실 수 있습니다.wp_nav_menu()“Call it.”
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-theme' ),
'footer' => __( '页脚菜单', 'my-theme' ),
) );스타일과 스크립트를 안전하게 導入하세요.
절대로 템플릿 파일에 CSS 및 JS 파일의 링크를 직접 하드코딩해서는 안 됩니다. 올바른 방법은 해당 파일들을 템플릿 파일에서 참조하는 것입니다.wp_enqueue_style()그리고wp_enqueue_script()함수를 작성하고 이들을 매핑하십시오.wp_enqueue_scripts이 후크에 달려 있습니다. 이를 통해 의존 관계가 올바르게 처리되고, 중복 로딩을 방지할 수 있습니다.
function mytheme_scripts() {
// 引入主题主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
// 引入自定义JavaScript文件
wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );반응형 디자인과 테마 사용자 정의를 구현하십시오.
현대적인 테마는 반응형(responsive)이어야 합니다. 즉, 테마의 레이아웃과 스타일이 스마트폰에서 데스크톱에 이르기까지 다양한 화면 크기에 자동으로 적응할 수 있어야 합니다. 이는 주로 CSS 미디어 쿼리(CSS Media Queries)를 통해 구현됩니다.
모바일 우선(Mobile First) 원칙에 따른 CSS를 구축하는 것은 웹사이트가 모바일 기기에서도 잘 작동하도록 보장하는 데 매우 중요합니다. 모바일 우선 디자인은 먼저 모바일 사용자 경험을 최적화한 다음, 데스크톱 및 기타 큰 화면 기기에 맞게 디자인을 조정하는
“모바일 퍼스트(Mobile First)” CSS 전략을 채택하는 것이 좋습니다. 먼저 작은 화면에 적합한 기본 스타일을 작성한 다음, 미디어 쿼리(media queries)를 사용하여 큰 화면에 맞는 스타일을 점차 추가하거나 기존 스타일을 대체하세요.
/* 基础样式（针对移动设备） */
.container {
width: 100%;
padding: 1rem;
}
/* 中等屏幕（平板） */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* 大屏幕（桌面） */
@media (min-width: 992px) {
.container {
width: 970px;
}
}WordPress 커스터마이저 통합
WordPress 커스터마이저를 사용하면 사용자가 테마의 특정 설정(예: 색상, 글꼴 등)을 실시간으로 미리 보고 수정할 수 있습니다.WP_Customize_Manager오브젝트에 대해 말하자면, 주제에 맞춰 사용자 정의 옵션을 추가할 수 있습니다.
먼저…functions.php중에서 함수를 하나 만들고, 그 함수를 사용하세요.customize_register후크(Hook).
function mytheme_customize_register( $wp_customize ) {
// 添加一个设置项，用于保存主题色
$wp_customize->add_setting( 'primary_color', array(
'default' => '#0073aa',
'sanitize_callback' => 'sanitize_hex_color',
) );
// 添加一个颜色控件到某个面板或节
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
'label' => __( '主题主色', 'my-theme' ),
'section' => 'colors',
'settings' => 'primary_color',
) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );그런 다음, 프론트엔드 CSS에서 이를 사용할 수 있습니다.get_theme_mod( 'primary_color' )사용자가 설정한 값을 가져와 동적 스타일을 출력합니다.
요약
WordPress 테마 개발은 창의성과 기술을 결합하는 과정입니다. 기본적인 파일 구조, 템플릿 계층, 핵심 로직(코어 루프)을 이해하는 것부터 시작하여, 개발 환경을 설정하고 템플릿 구성 요소를 작성하며, 최종적으로 테마를 완성하는 단계까지 진행됩니다.functions.php인젝션 기능부터 반응형 디자인과 커스터마이징 옵션의 구현에 이르기까지, 모든 단계는 이전 단계에 대한 이해를 바탕으로 이루어집니다. 이러한 핵심 기술들을 숙달하면, 제로부터 기능이 풍부하고 디자인이 우수하며 최고의 관행에 부합하는 WordPress 테마를 만들 수 있습니다. 기억하세요: 실습이 학습의 열쇠입니다. 지속적으로 시도하고 공식 문서를 참고하며 프로젝트를 진행하는 것이 기술을 향상시키는 가장 좋은 방법입니다.
자주 묻는 질문
WordPress 테마를 개발하려면 PHP에 대해 잘 알고 있어야 하나요?
네, 탄탄한 PHP 기초가 필수적입니다. WordPress의 코어 자체가 PHP로 작성되었기 때문에 모든 템플릿 파일과 기능 함수들이 PHP 없이는 작동할 수 없습니다. 적어도 변수, 배열, 함수, 반복문, 조건문과 같은 기본 문법을 이해해야 하며, WordPress의 특정 함수 및 훅(hook)과 어떻게 상호작용하는지도 알아야 합니다.
주제의 style.css 파일의 헤더 정보는 수정할 수 있습니다.
네, 하지만 신중해야 합니다. 파일 헤더 정보에 있는 “Theme Name”은 테마가 백엔드에서 인식되는 유일한 식별자입니다. 개발 과정에서 이 값을 수정하면 WordPress는 해당 테마를 완전히 새로운 테마로 간주합니다. 이미 온라인에 배포된 테마의 이름을 직접 수정하면 사용자의 웹사이트에서 테마가 변경되거나 설정이 손실될 수 있습니다.
내 테마가 다국어 번역을 지원하도록 하려면 어떻게 해야 하나요?
주제의 국제화(i18n)를 위한 준비를 철저히 해야 합니다. 코드 내에서 사용자에게 표시되는 모든 문자열은 WordPress의 번역 함수를 사용하여 처리해야 합니다. 예를 들어,__( ‘文本’, ‘my-theme-textdomain’ )또는_e( ‘文本’, ‘my-theme-textdomain’ )그런 다음, Poedit와 같은 도구를 사용하여 생성하세요..pot템플릿 파일을 통해 번역자는 다양한 언어로 된 콘텐츠를 생성할 수 있습니다..po그리고.mo파일. 마지막으로, 사용하세요.load_theme_textdomain()Function loading.
자주제(subtopic)와 부모주제(parent topic)의 차이점은 무엇이며, 언제 어떻게 사용해야 할까요?
자식 주제는 부모 주제의 모든 기능과 스타일을 상속받으며, 부모 주제를 안전하게 수정하거나 새로운 기능을 추가하거나 스타일을 덮어쓸 수 있게 해줍니다. 기존에 완성도 높은 주제(부모 주제)를 기반으로 심층적으로 커스터마이징하고자 하면서도, 향후 부모 주제가 업데이트될 때 자신이 만든 커스터마이징 내용이 손실되지 않도록 하고 싶다면 자식 주제를 만드는 것이 좋습니다. 자식 주제는 단 하나만 필요합니다.style.css그리고 한 명과…functions.php그 파일만 있으면 작동할 수 있습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어