WordPress 테마 개발 환경 설정하기
WordPress 테마를 개발하기 전에 적합한 로컬 개발 환경을 설정해야 합니다. 이를 통해 인터넷이나 서버 없이 코드를 작성하고, 디버그하고, 테스트할 수 있습니다. 우선 XAMPP, MAMP 또는 Local by Flywheel 등의 도구를 사용하여 로컬 서버 환경을 설치해야 합니다. 이러한 도구는 Apache, MySQL 및 PHP를 통합하며, 원하는 경우 한 번의 클릭으로 온라인 서버와 유사한 환경을 설정할 수 있습니다.
다음으로, WordPress 核心 파일을 다운로드하여 로컬 서버의 루트 디렉토리에 설치하십시오. 설치 중에는 테스트용 데이터베이스를 만들어야 합니다. WordPress의 초기 설정이 완료되면 테마를 만들기 시작할 수 있습니다.
주제의 기본 구조 만들기
모든 WordPress 테마는 다음 위치에 있습니다./wp-content/themes/폴더 아래에. 여기에 새 폴더를 만들어 주십시오, 예를 들면 이렇게요.my-first-theme이 폴더의 이름은 당신의 주제 식별자이며, 소문자와 하이ف를 사용하는 것이 좋습니다.
추천 읽기 전문적인 WordPress 테마를 처음부터 구축하는 방법: 완전한 개발 가이드。
이 새 폴더에서 당신이 만들어야 할 첫번째이자 가장 중요한 파일은style.css이 파일의 헤더 주석은 스타일을 정의하는 데만 사용되는 것이 아니고, 더 중요하게도 WordPress가 테마를 인식하는 데 필요한 메타 정보를 제공하기 위한 용도입니다.
/*
Theme Name: My First Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 一个简洁的自定义主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/
/* 从这里开始才是实际的CSS样式 */핵심 템플릿 파일 상세 설명
워드프레스 테마 개발은 특정한 템플릿 계층 구조를 따른다. 시스템은 사용자가 방문한 페이지의 유형(예: 첫 페이지, 기사 페이지, 카테고리 페이지)에 따라 해당 템플릿 파일을 자동으로 선택하여 렌더링한다. 이러한 파일을 이해하는 것은 개발의 핵심이다.
주제에 포함되어야 하는 템플릿 파일.
가장 기본적인 WordPress 테마는 단 두 개의 파일만 필요합니다:style.css 그리고 index.php。index.php 이것은 템플릿 계층 구조의 마지막 대체 파일로, 다른 더 구체적인 템플릿이 존재하지 않을 경우 WordPress가 이를 사용합니다.
그러나, 구조화되고 잘 작동하는 웹사이트를 만들려면 다음 주요 템플릿 파일을 만들어야 합니다.
header.php페이지의 헤더 영역을 정의하며, 일반적으로 다음과 같은 내용을 포함합니다.<head>일부, 웹사이트 로고, 그리고 주요 네비게이션 메뉴.footer.php페이지의 하단 영역을 정의하며, 일반적으로 저작권 정보, 페이지 하단 네비게이션 및 위젯 영역이 포함됩니다.sidebar.php측면바의 내용을 정의하세요.index.php주 템플릿 파일.single.php개별 블로그 게시물 또는 사용자 정의 게시물 유형의 내용을 표시하는 데 사용됩니다.page.php정적인 페이지를 표시하는 데 사용됩니다.front-page.php만일 있다면, 이 파일은 웹사이트의 정적인 첫 페이지로 사용되며, 다른 페이지보다 우선순위가 더 높습니다.home.php。archive.php분류, 태그, 작성자, 날짜 등 아카이브 목록을 표시하는 데 사용됩니다.
템플릿 파일의 도입 및 조합
워드프레스는 이러한 템플릿 파일들을 조합하기 위해 특정 함수를 사용합니다.index.php여러분은 다음과 같은 구조를 볼 것입니다:
추천 읽기 WordPress 테마 개발 완벽 가이드: 제로에서 실제 서비스까지。
\n
<main id="main">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 输出文章内容
the_title( '<h1>', '</h1>' );
the_content();
endwhile;
else :
echo '<p>没有找到内容。</p>';
endif;
?>
</main>여기,get_header()、get_sidebar()그리고get_footer()각 함수는 해당 템플릿 파일을 포함시키는 데 사용됩니다.
주제 기능과 사용자 정의
강력한 테마는 아름다운 디자인뿐만 아니라 완벽한 기능 지원도 필요합니다. 이러한 기능은 대부분 테마의 추가 기능을 통해 제공됩니다.functions.php파일을 사용하여 구현합니다.
테마를 향상시키는 functions.php 사용
functions.php파일은 당신의 테마의 “기능 센터'이며, 사용자 정의 기능, 등록된 메뉴, 위젯 영역 및 테마의 초기 설정을 추가하는 데 사용됩니다.
테마에 메뉴 지원 추가하기
function mytheme_setup() {
// 테마가 WordPress가 제공하는 title 태그 기능을 지원하게 하기
add_theme_support( 'title-tag' );
// 게시물과 페이지의 특징 이미지(사진) 사용 가능 하게 하기
add_theme_support( 'post-thumbnails' );
// 네비게이션 메뉴 위치 등록하기
register_nav_menus( [
'primary' => __( '주 네비게이션 메뉴', 'my-first-theme' ),
] );
// HTML5 태그 지원 추가하기
add_theme_support( 'html5', [ 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ] );
}
add_action( 'after_setup_theme', 'mytheme_setup' );
// 사이드바 위젯 영역 등록하기
function mytheme_widgets_init() {
register_sidebar([
'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', 'mytheme_widgets_init' );
// 스타일시트와 스크립트 파일 로드하기
function mytheme_scripts() {
// 주 스타일시트 로드하기
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
// 사용자 정의 JavaScript 파일 로드하기
wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', [], '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
?>자신만의 기사 유형을 만들기
기본 “게시물” 및 “페이지'가 요구 사항을 충족하지 못할 경우, 코드를 통해 사용자 정의 게시물 유형을 만들 수 있습니다. 예를 들어, ”포트폴리오'라는 새 유형을 만들 수 있습니다.
function mytheme_create_portfolio_cpt() {
register_post_type( 'portfolio',
[
'labels' => [
'name' => __( '作品集', 'my-first-theme' ),
'singular_name' => __( '作品', 'my-first-theme' )
],
'public' => true,
'has_archive' => true,
'menu_icon' => 'dashicons-portfolio',
'supports' => [ 'title', 'editor', 'thumbnail', 'excerpt' ],
'rewrite' => [ 'slug' => 'portfolio' ],
]
);
}
add_action( 'init', 'mytheme_create_portfolio_cpt' );주제 개발의 고급 및 보안
기본 기능과 인터페이스를 완료한 후에는 코드의 구조, 성능, 보안 및 유지 보수에 초점을 맞추어 테마를 전문적인 수준으로 향상시키아야 합니다.
하위 주제를 사용하여 사용자 정의를 하세요.
부모 테마(예: Underscores 또는 인기 있는 프레임워크 테마)를 직접 변경하는 것은 추천되지 않습니다. 부모 테마를 업데이트하면 모든 변경 사항이 덮여버리기 때문입니다. 최선의 방법은 자식 테마를 사용하는 것입니다. 자식 테마에는 오직style.css、functions.php당신이 커버하고자 하는 부모 테마 템플릿 파일은 부모 테마의 모든 기능을 상속하며, 안전하게 사용자 정의를 할 수 있게 해줍니다.
추천 읽기 WordPress 테마 개발 전략: 제로에서 시작하여 맞춤형 웹사이트 구축하기。
서브테마의style.css머리부분에는 부모 주제를 표기해야 합니다:
/*
Theme Name: My Child Theme
Template: parent-theme-folder-name
*/자식 주제 내에서 (Within the sub-topic)functions.php중국에서, 코드는 부모 주제보다 먼저 처리됩니다.functions.php로드하면, 새 기능을 추가하거나 후크를 사용하여 부모 테마의 동작을 수정할 수 있습니다.
주제 검열 표준 및 안전을 준수하십시오.
주제의 품질, 안전성 및 호환성을 보장하기 위해 당신의 주제는 대략적으로 아래와 같은 방식을 따라야 합니다.워드프레스 테마 검토 표준여기에는 코드 보안 에스케이프(<를 사용하여)를 포함하지만 이에 제한되지는 않습니다.esc_html(), esc_url()다양한 함수(예: translate), 번역 가능한 문자열의 국제화 처리(예: use)__()그리고_e()함수 사용, 주제의 반응형 디자인, 핵심 기능의 하드코딩 방지와 같은 것들입니다.
2026년의 개발 환경에서는 더 광범위한 CSS 그리드/플렉스박스 애플리케이션, 원생 게으른 로드 등과 같은 새로운 웹 기술 지원 및 PHP 새 버전 기능의 안전한 사용에 특히 주의를 기울여야 합니다. 항상 테마 코드가 PHP 경고 또는 오류 로그를 생성하지 않도록 하십시오.
요약
워드프레스 테마 개발은 기본 구조부터 고급 기능 구현에 이르는 체계적인 프로세스입니다. 당신은 테ม의 계층 구조를 이해하고, 핵심 기능을 마스터해야 합니다.header.php、footer.php、single.php이러한 파일들의 사용법에 대해 설명합니다. 강력한 기능을 통해…functions.php문서에서는 메뉴, 위젯, 사용자 정의 게시물 유형 등과 같은 다양한 기능을 주제에 추가할 수 있습니다. 개발 후기에서는 하위 주제 전략을 통해 사용자 정의, 주제 개발 표준 준수 및 코드 보안 및 성능에 초점을 맞춘 것이 주제를 전문적인 수준으로 향상시키는 중요한 단계입니다. 실습은 학습의 최고의 방법이며, 간단한 주제 프레임워크에서 시작하여 기능을 점차 추가하고 결국 잘 설계되고 기능이 완전한 워드프레스 주제를 만들는 것이 좋습니다.
자주 묻는 질문
WordPress 테마를 개발하려면 어떤 프로그래밍 언어를 배워야 하나요?
워드프레스 테마를 개발하려면 주로 HTML, CSS, PHP 및 기본 JavaScript에 대한 지식이 필요합니다. HTML과 CSS는 프론트엔드 인터페이스를 구축하고 보다 매력적으로 만들기 위해 사용됩니다. PHP는 워드프레스의 핵심 언어로, 데이터 로직을 처리하고 워드프레스의 다양한 함수를 호출하는 데 사용됩니다. JavaScript는 페이지의 대화식 효과를 구현하는 데 사용됩니다. 또한, SQL 기본 지식은 워드프레스의 데이터 조작을 이해하는 데 도움이 됩니다.
제 테마에 사용자 정의 페이지 템플릿을 추가하는 방법은 무엇입니까?
먼저, 주제 루트 디렉토리 아래에 새 PHP 파일을 만들어 보자. 예를 들어,template-fullwidth.php해당 파일의 상단에 특정 템플릿 이름 주석을 추가해야 합니다. 그런 다음 다른 템플릿 파일을 편집하는 것처럼 이 파일을 편집할 수 있습니다. 완료된 후, WordPress 관리 페이지의 페이지 편집기에서 “페이지 속성'의 ”템플릿“ 드롭다운 메뉴에 당신이 만든 새 템플릿 옵션이 나타납니다.
<?php
/* Template Name: 全宽页面模板 */
get_header();
?>
<!-- 你的全宽页面内容 -->
<?php get_footer(); ?>제 주제를 업데이트한 후 사용자 정의 변경 내용이 사라진 이유는 무엇입니까?
이는 당신이 사용하고 있는 테마 파일을 직접 수정했기 때문입니다. 해당 테마에 새 버전이 출시되었을 때 당신이 업데이트를 클릭하면, WordPress는 새 파일로 오래된 파일을 덮어쓰게 되고, 당신의 사용자 정의 변경 사항은 사라집니다. 이러한 상황을 방지하려면, 모든 사용자 정의 변경 사항을 “자식 테마'에서 수행하는 것이 강력히 권장됩니다. 자식 테마는 부모 테마와 독립적이며, 부모 테마가 업데이트되더라도 당신의 사용자 정의 내용은 유지됩니다.
내 테마를 다국어(국제화)로 지원하려면 어떻게 해야 하나요?
모든 사용자 인터페이스 텍스트 문자열을 포함하도록 WordPress의 국제화(i18n) 함수를 사용해야 합니다. PHP 템플릿에서는 < 를 사용하십시오.__('文本', 'text-domain')사용하여 번역을 얻으세요._e('文本', 'text-domain')그냥 출력을 하세요. 자바스크립트 파일에서는 다음과 같이 사용해야 합니다.wp_set_script_translations()함수. 마지막으로, Poedit 같은 도구를 사용하여 만들어 보세요..pot템플릿 파일을 번역하세요..po/.mo언어 패키지 파일.
저는 테마를 처음부터 개발해야 하는가, 아니면 기존의 테마 프레임워크를 사용해야 하는가?
그것은 당신의 목표, 기술 수준 및 프로젝트 요구 사항에 달려 있습니다. 입문자나 빠르게 시작하고 싶은 개발자는 표준 기반 코드 구조를 제공하고 디자인과 기능 구현에 집중할 수 있도록 해 주는 라이트급 시작 프레임워크(예: Underscores)를 사용하는 것이 좋은 선택입니다. 복잡하고 확장 가능한 제품을 구축해야 하는 전문 개발자는 기존에 없는 것부터 시작하는 것이 가장 많은 유연성과 제어력을 제공하지만, 더 많은 시간을 투자해야 합니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어