WordPress 테마 개발 기초 및 환경 설정
WordPress 테마 개발을 시작하기 전에는 전문적인 로컬 개발 환경을 설정해야 합니다. 이를 통해 개발 효율성을 높일 수 있을 뿐만 아니라, 온라인 웹사이트에 부정적인 영향을 줄일 수도 있습니다. XAMPP, MAMP, Local by Flywheel과 같은 통합 개발 환경을 사용하는 것을 추천합니다. 이러한 환경들은 PHP, MySQL, Apache/Nginx를 한 번에 설정할 수 있는 원스톱 솔루션을 제공합니다.
환경을 설정한 후에는 WordPress 설치 디렉터리 내에서 필요한 작업을 수행해야 합니다.wp-content/themes폴더 내에 새로운 테마 폴더를 생성하세요. 하나의 테마는 최소 두 개의 파일로 구성되어야 합니다: 스타일시트 파일입니다.style.css그리고 핵심 템플릿 파일들index.php。
style.css스타일 파일뿐만 아니라, 이 파일은 테마의 “신분증” 역할도 합니다. 파일의 상단에 테마에 대한 정보를 담은 주석을 추가해야 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
*/index.php이 파일은 테마의 기본 시작점이며, WordPress는 페이지를 렌더링할 때 이 파일을 우선적으로 사용합니다. 처음에는 콘텐츠가 매우 간단할 수 있지만, 이 파일은 반드시 필요합니다. 이 두 파일을 생성한 후에는 WordPress 관리자의 “외관” -> “테마” 메뉴에서 자신이 만든 테마를 확인하고 활성화할 수 있습니다.
주제의 핵심 파일 구조를 이해하세요.
완전한 기능을 갖춘 WordPress 테마는 표준적인 파일 구조를 따르며, 이는 코드의 체계적인 구성과 유지보수에 도움이 됩니다.style.css그리고index.php다음은 몇 가지 다른 중요한 파일들입니다:
functions.php이 파일은 테마의 “심장부”라고 할 수 있습니다. 이 파일은 브라우저에서 직접 실행되는 스크립트가 아니라, WordPress 코어에 의해 자동으로 로드되는 파일입니다. 등록 메뉴, 사이드바, 테마 지원 기능의 추가, 그리고 스크립트 및 스타일의 로딩 등 모든 테마 기능의 개선 사항들이 이 파일을 통해 이루어집니다.
header.php그리고footer.php각각 웹사이트의 상단(헤더)과 하단(푸터) 부분을 담당합니다.get_header()그리고get_footer()함수들을 다른 템플릿 파일로 가져와서 코드를 재사용할 수 있습니다.
page.php정적 페이지를 렌더링하는 데 사용됩니다.single.php단일 기사를 렌더링하는 데 사용됩니다.archive.php분류, 태그 등의 아카이브 페이지를 렌더링하는 데 사용됩니다. WordPress의 템플릿 계층 구조에 따라, 시스템은 다양한 유형의 페이지 요청에 맞게 가장 구체적인 템플릿 파일을 자동으로 선택하여 표시합니다.
추천 읽기 고성능 WordPress 테마를 처음부터 만들기 위한 완전한 가이드입니다.。
템플릿 시스템과 템플릿 계층 구조
WordPress의 템플릿 시스템은 명확한 계층 구조의 규칙에 기반을 두고 있으며, 이를 “템플릿 계층구조(Template Hierarchy)”라고 합니다. 이 규칙에 따라 특정 페이지에 접속할 때 WordPress는 어떤 템플릿 파일을 자동으로 찾아서 로드할지 결정됩니다. 이러한 구조를 이해하는 것은 효율적인 테마 개발을 위한 핵심입니다.
예를 들어, 블로그 글을 방문할 때 WordPress는 다음 순서로 템플릿 파일을 찾습니다:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php그것은 찾은 첫 번째 사용 가능한 파일을 사용합니다. 이는 특정 글 유형이나 특정 글에 맞게 매우 맞춤화된 템플릿을 만들 수 있다는 것을 의미합니다.
커스텀 페이지 템플릿을 생성하고 사용하는 방법
시스템에预设된 템플릿 외에도 사용자 정의 페이지 템플릿을 만들어 원하는 페이지에 적용할 수 있습니다. 이를 통해 독특한 페이지 레이아웃을 디자인하는 데 매우 큰 유연성을 얻을 수 있습니다.
커스텀 페이지 템플릿을 만들려면 템플릿 파일의 상단에 특정 PHP 주석 블록을 추가해야 합니다. 예를 들어, “전체 화면 너비 페이지”라는 이름의 템플릿을 만들려면 다음과 같이 새 파일을 생성할 수 있습니다:template-fullwidth.php그리고 맨 앞에 다음과 같이 쓰세요:
<?php
/**
* Template Name: 全宽页面
* Description: 一个没有侧边栏的全宽度页面模板。
*/코드 작성을 완료한 후, WordPress 관리자 페이지에서 페이지를 편집할 때 “페이지 속성”의 “템플릿” 드롭다운 메뉴에서 “전체 너비 페이지” 옵션을 찾을 수 있습니다. 이 옵션을 선택하고 페이지를 업데이트하면, 사용자가 정의한 템플릿이 해당 페이지의 렌더링에 적용됩니다.
조건 태그를 사용하여 동적 콘텐츠를 구현합니다.
조건 태그(Conditional Tags)는 WordPress가 제공하는 일련의 논리 함수로, 현재 페이지가 특정 조건을 만족하는지 여부를 판단하는 데 사용됩니다. 이러한 태그들은 템플릿 파일에서 콘텐츠의 동적인 표시를 제어하는 데 널리 활용됩니다.
추천 읽기 워드프레스 테마 개발 가이드: 맞춤형 웹사이트 인터페이스를 처음부터 구축하는 방법。
예를 들어is_front_page()웹사이트의 첫 페이지인지 판단하는 방법입니다.is_single()단일 기사 페이지인지 판단하기is_page()정적 페이지인지 판단하는 방법입니다.is_archive()判断是否为任何归档页。通过它们，你可以用简单的if语句为不同页面定制不同的逻辑和输出。
<?php if ( is_front_page() ) : ?>
<h1>저희 홈페이지에 오신 것을 환영합니다!</h1>
<?php elseif ( is_single() ) : ?>
<h1></h1>
<div class="post-meta">发布时间：</div>Theme Features and Core Functions
functions.php파일은 테마 기능의 중심지입니다. 여기서 WordPress 코어 파일을 수정하지 않고도 안전하게 테마를 확장할 수 있습니다.
등록하기: 네비게이션 메뉴 및 사이드바 설정
WordPress는 테마가 지원하는 네비게이션 메뉴 위치를 명시할 수 있도록 허용합니다. 이는 테마 설정을 통해 이루어집니다.register_nav_menus()함수 구현. 보통 우리는…functions.php`%s`는 파일 시스템의 경로를 나타내는 변수입니다. 이 문장은 “`%s`에 마운트된 파일 시스템을 사용하여…”라는 의미입니다.after_setup_theme후크에 연결된 함수를 사용하여 작업을 완료합니다.
function mytheme_setup() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
'footer' => __( '页脚菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );등록한 후에는 사용자가 “외관” -> “메뉴”에서 이 두 위치에 메뉴를 할당할 수 있습니다. 템플릿에서는 해당 기능을 사용하여 메뉴를 설정해야 합니다.wp_nav_menu( array( 'theme_location' => 'primary' ) )메뉴를 표시합니다.
사이드바(또는 “툴바”라고도 함)의 등록 방법은 비슷합니다. 사용 방법은 다음과 같습니다:register_sidebar()함수입니다. 그 후 사용자는 “외관” -> “도구 모음”에서 이러한 영역에 다양한 도구 모음을 추가할 수 있습니다.
주제 기능을 추가하여 지원합니다.
많은 현대적인 WordPress 테마의 기능들은 명시적으로 지원을 선언해야만 사용할 수 있습니다. 예를 들어, 글이나 페이지에 독특한 이미지(썸네일)를 추가하려면 해당 기능에 대한 지원을 추가해야 합니다. 이는 다른 기능들에도 마찬가지로 적용됩니다.functions.php초기화 작업은 해당 객체의 초기화 함수에서 완료됩니다.
function mytheme_setup() {
// ... 其他设置代码
add_theme_support( 'post-thumbnails' ); // 支持特色图像
add_theme_support( 'title-tag' ); // 让WordPress管理标题标签
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 支持HTML5标记
}스크립트와 스타일을 안전하게 도입하는 방법
CSS 및 JavaScript 파일을 올바르게 큐에 추가하는 것은 WordPress 개발의 모범 사례입니다. 이를 통해 리소스 충돌과 중복 로딩을 방지할 수 있습니다.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' );고급 주제 개발 기술 (Advanced Topic Development Techniques)
기초를 익힌 후에는 몇 가지 고급 기술을 활용하여 여러분의 주제를 더욱 강력하고 전문적으로 만들 수 있습니다.
자체 요구 사항에 맞게 주제를 사용자 정의하기 위해 하위 주제를 생성하세요.
부모 주제를 직접 수정하는 것은 위험하고 지속 가능하지 않은 방법입니다. 주제가 업데이트되면 모든 수정 사항이 삭제되기 때문입니다. 올바른 방법은 하위 주제(subtopic)를 생성하는 것입니다. 하위 주제에는 자신만의 사용자 정의 파일들만 포함시키면 됩니다.style.css、functions.php(덮어쓰인 템플릿 파일과 함께) 부모 테마의 모든 기능을 상속합니다.
서브테마의style.css헤더 주석에는 반드시 다음 내용이 포함되어야 합니다:Template:`line`은 상위 주제의 디렉터리 이름을 지정하는 데 사용됩니다.
/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/서브테마의functions.php이 기능은 상위 주제보다 먼저 로드됩니다. 여기서 새로운 기능을 추가하거나 기존 기능을 수정할 수 있습니다.
WordPress에서 반복적으로 콘텐츠를 출력하려면 `loop` 함수를 사용합니다. `loop` 함수는 템플릿 파일 내에서 사용되며, 데이터베이스에서 가져온 정보를 기반으로 콘텐츠를 순서대로 표시합니다. 예를 들어, 블로그 글 목록을 표시할 때 `loop` 함수를 사용할 수 있습니다. 아래는 간단한 예제입니다
“The Loop”는 WordPress 템플릿에서 데이터베이스에서 여러 개의 콘텐츠를 가져와 표시하기 위해 사용되는 PHP 코드 구조입니다. 이는 거의 모든 템플릿 페이지의 핵심입니다.
만일 게시물이 있다면 : while ( have_posts() ) : the_post(); ?>
<article>
<h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
<div></div>
</article>반복문 내에서는 `%s`, `%1$s`, `{{var}}`, `:name`과 같은 일련의 템플릿 태그를 사용할 수 있습니다.the_title()、the_content()、the_excerpt()、the_permalink()등록하여 현재 기사의 정보를 확인하세요.
주제 사용자 정의 기능을 구현합니다.
WordPress의 커스터마이저(Customizer)를 사용하면 사용자가 테마의 특정 설정(예: 색상, 로고 등)을 실시간으로 미리 보고 수정할 수 있습니다.functions.php당신의 주제에 맞는 사용자 정의 옵션을 추가하세요.
이것은 사용과 관련이 있습니다.WP_Customize_Manager클래스를 사용하여 설정, 컨트롤, 그리고 블록을 추가할 수 있습니다. 코드가 다소 복잡할 수 있지만, 이를 통해 사용자에게 원활한 맞춤화 경험을 제공할 수 있습니다. 일반적으로는 패널을 하나 추가한 다음, 그 패널 아래에 여러 섹션을 더하고, 각 섹션에 구체적인 설정과 컨트롤을 배치합니다.
function mytheme_customize_register( $wp_customize ) {
// 添加一个设置
$wp_customize->add_setting( 'header_color', array(
'default' => '#ffffff',
'sanitize_callback' => 'sanitize_hex_color',
) );
// 添加一个控件来控制这个设置
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
'label' => __( '头部背景色', 'my-first-theme' ),
'section' => 'colors',
) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );그런 다음 템플릿에서 사용하세요.get_theme_mod( 'header_color' )사용자가 설정한 값을 가져와 페이지에 적용합니다.
요약
WordPress 테마 개발은 기본 파일 구조를 이해하는 것부터 시작하여 점차 템플릿 시스템과 기능 함수에 대한 지식을 쌓고, 최종적으로 고급 커스터마이징 기술을 마스터하는 과정입니다. 성공적인 개발자는 PHP, HTML, CSS, JavaScript에 능숙해야 할 뿐만 아니라, 템플릿 계층 구조, 반복문, 훅(hook), 함수와 같은 WordPress의 핵심 개념을 깊이 이해해야 합니다. 자식 테마(subtheme)를 사용하거나 관련 모범 사례(best practices)를 따르는 것과 같은 실천적인 접근 방식도 중요합니다.functions.php기능을 추가하고 스크립트 스타일을 안전하게 구현함으로써, 구축한 테마가 안정적이고 효율적이며 유지보수가 용이해집니다. 지속적인 실습을 통해 다양한 요구사항을 충족시킬 수 있는 강력하고 전문적인 WordPress 테마를 만들 수 있게 될 것입니다.
자주 묻는 질문
WordPress 테마를 개발하려면 PHP에 대해 잘 알고 있어야 하나요?
네, PHP는 WordPress 테마 개발의 핵심 언어입니다. PHP의 기본 문법을 숙달하고, HTML 내에 PHP 코드를 삽입하여 동적으로 콘텐츠를 출력하는 방법을 이해해야 합니다. 프론트엔드 기술(HTML, CSS, JavaScript)도 마찬가지로 중요하지만, WordPress와의 데이터 교환, 논리적 판단, 기능 확장 등은 모두 PHP 없이는 불가능합니다.
주제의 style.css 파일 이름을 다른 이름으로 바꿀 수 있나요?
할 수 없습니다.style.css이 파일명은 WordPress가 테마와 그 메타데이터(예: 테마 이름, 버전, 저자 등)를 인식하는 데 필수적인 요소입니다. 반드시 이 파일명을 사용해야 하며, 파일을 테마의 루트 디렉터리에 저장해야 합니다. 하지만…functions.php다른 추가적인 CSS 파일들을 사용하여 스타일 코드를 더 잘 구성하세요.
내 테마가 다국어 번역을 지원하도록 하려면 어떻게 해야 하나요?
테마를 국제화(i18n)에 대응하도록 만드는 것이 매우 중요합니다. 개발 과정에서는 모든 사용자에게 표시되는 텍스트 문자열을 특정 번역 함수로 감싸야 합니다. 예를 들어,__( ‘文本’, ‘text-domain’ )또는_e( ‘文本’, ‘text-domain’ ). 동시에,style.css의 헤더 주석에 올바르게 설정되어 있는지 확인합니다.Text Domain그리고…functions.php중국에서 사용하세요.load_theme_textdomain()이 함수는 번역 파일을 로드하는 역할을 합니다. 작업이 완료되면, 번역자는 Poedit와 같은 도구를 사용하여 번역 작업을 진행할 수 있습니다..po그리고.mo변환할 파일을 업로드해 주세요. 파일이 업로드되면 자동으로 번역이 시작됩니다.
제가 만든 사용자 정의 템플릿이 페이지 속성 드롭다운 목록에 나타나지 않는 이유는 무엇인가요?
커스텀 템플릿 파일의 맨 위에 형식이 올바른 PHP 주석 블록을 반드시 추가하십시오. 주석 블록에는 “Template Name:”이라는 줄이 포함되어야 하며, 해당 파일은 테마의 루트 디렉터리 또는 하위 디렉터리에 위치해야 합니다. 또한, 파일에 구문 오류가 없는지 확인하십시오. 구문 오류로 인해 WordPress가 파일 헤더 정보를 올바르게 읽지 못할 수 있습니다. 커스텀 템플릿은 “페이지”에만 적용되므로, “기사”가 아닌 “페이지”를 편집하고 있는지 확인하십시오.
주제에 SQL 쿼리를 직접 작성하여 데이터를 가져오는 것이 좋을까요?
이것은 매우 권장되지 않는 방법입니다. SQL 쿼리를 직접 작성하면 WordPress의 핵심 데이터 보안 메커니즘(예: 데이터 정제, 캐싱, 권한 검사)을 우회하게 되어 SQL 인젝션과 같은 보안 취약점이 발생할 수 있으며, 향후 출시될 WordPress 버전의 데이터베이스 구조와의 호환성 문제도 발생할 수 있습니다. 데이터를 가져오기 위해서는 항상 WordPress가 제공하는 API와 함수를 사용해야 합니다.WP_Query클래스,get_posts()、get_pages()등, 이들은 더 안전하고 효율적이며 유지보수도 더 용이합니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어