개발 환경 및 기본 준비 사항
구체적인 주제 코드를 작성하기 시작하기 전에, 적절한 개발 환경을 갖추는 것이 성공의 기초입니다. 이는 단순히 코드 편집기를 설치하는 것 그 이상의 의미를 가지며, 효율성을 높이고 코드 품질을 보장하며 디버깅을 용이하게 해주는 완전한 작업 흐름을 의미합니다.
먼저, 프로덕션 환경과 유사한 개발 환경을 로컬 컴퓨터에 설정할 것을 강력히 권장합니다. 이는 일반적으로 Local by Flywheel, XAMPP, MAMP 또는 Laragon과 같은 도구를 사용하여 Apache/Nginx, PHP, MySQL을 설치하는 것을 의미합니다. 로컬 개발을 통해 파일 업로드를 기다리지 않고도 빠르게 반복 작업을 수행할 수 있으며, 새로운 기능을 안전하게 테스트할 수 있습니다.
둘째, 강력한 코드 편집기는 필수적입니다.Visual Studio Code PHP Intelephense, WordPress Snippet 등과 같은 풍부한 확장 생태계 덕분에 개발자들 사이에서 큰 인기를 얻고 있습니다. 특히 버전 관리 도구는 매우 유용합니다. Git이러한 도구들은 처음부터 작업 흐름에 통합되어야 합니다. Git을 사용하여 모든 코드 변경 사항을 추적하고, GitHub, GitLab, Bitbucket과 같은 플랫폼을 통해 백업 및 협업을 진행하세요.
추천 읽기 WordPress 테마 개발 입문부터 전문가 수준까지: 맞춤형 웹사이트 구축을 단계별로 안내합니다.。
표준 WordPress 테마의 기본 파일 구조는 다음과 같습니다. 이 파일들은 WordPress 설치 디렉터리 내에 위치해야 합니다. wp-content/themes 아래에서 새로운 폴더를 만들어 보세요, 예를 들어… my-custom-theme。
my-custom-theme/
├── style.css // 主样式表，包含主题元信息
├── index.php // 主题的默认模板文件
├── functions.php // 主题功能文件，用于添加功能与集成
├── screenshot.png // 主题后台预览图
├── assets/ // 静态资源目录
│ ├── css/
│ ├── js/
│ └── images/
└── template-parts/ // 模板零件目录그중에서,style.css 파일 헤더에 있는 주석은 테마의 “신분증”과 같은 역할을 합니다. 이 주석을 통해 WordPress에 테마의 존재와 기본 정보를 알립니다. 이 부분은 반드시 정확하게 작성되어야 합니다.
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: A custom WordPress theme built from scratch.
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/Text Domain 국제화를 위해 사용되며, 반드시 주제 폴더의 이름과 일치해야 합니다.
핵심 템플릿 파일과 계층 구조
WordPress는 “템플릿 계층 구조”를 사용하여 현재 요청된 페이지에 어떤 템플릿 파일을 사용할지 결정합니다. 이 계층 구조를 이해하는 것은 유연한 테마를 구축하는 데 매우 중요합니다. 본질적으로, WordPress는 가장 구체적인 템플릿 파일부터 찾기를 시작합니다. 해당 파일이 없으면 더 일반적인 템플릿 파일로 전환하며, 그것도 없다면 최종적으로 기본 템플릿 파일을 사용하게 됩니다. index.php。
전체 프로세스는 다음과 같이 요약할 수 있습니다: 개별 글 페이지 > 단일 페이지 > 분류 목록 페이지 > 태그 페이지 > 작가 페이지 > 날짜 페이지 > 아카이브 페이지 > 검색 페이지 > 홈 페이지 > 최종적으로 이전 페이지로 돌아가기. 글의 단일 페이지에 대해서는 WordPress가 우선적으로 해당 정보를 찾아줍니다. single-post-{slug}.php그 다음은… single-{post-type}.php그리고 나서는… single.php마지막으로… singular.php。
추천 읽기 WordPress 테마 개발 완전 가이드: 제로에서 시작하여 사용자 정의 웹사이트 구축하기。
페이지에 공통적으로 사용할 수 있는 템플릿을 구축합니다.
header.php 그리고 footer.php 웹사이트의 일관된 외관을 형성하는 기초입니다.header.php 파일에는 일반적으로 문서 유형을 나타내는 선언이 포함되어 있습니다. 지역(통해) wp_head() 함수는 핵심 메타데이터와 스크립트를 출력하며, 웹사이트의 제목, 네비게이션 등의 시작 부분 내용도 포함합니다. 헤더를 포함시켜야 하는 곳에서는 이를 사용해야 합니다. get_header() 함수.
footer.php 그러면 페이지 하단의 내용이 포함되며, 끝나기 전에 해당 내용이 실행됩니다. wp_footer() 함수(이것은 많은 플러그인이 올바르게 작동하는 데 매우 중요합니다)는 마지막에 사용됩니다. get_footer() 함수 소개.
기사의 반복 재생 및 콘텐츠 표시를 제어합니다.
대부분의 템플릿 파일의 핵심은 “루프(The Loop)”입니다. 이는 WordPress가 데이터베이스에서 콘텐츠를 검색하여 페이지에 표시하기 위해 사용하는 PHP 코드 구조입니다. 그 기본 패턴은 다음과 같습니다:
만일 게시물이 있다면: ?>
<!-- 在这里显示每一篇文章的内容 -->
<h2></h2>
<div></div>
<p>죄송합니다. 찾으신 내용이 없습니다.</p>루프 내부에서는 일련의 템플릿 태그를 사용하여 콘텐츠를 출력할 수 있습니다. 예를 들어, the_title()、the_content()、the_excerpt()、the_permalink() 등. 코드의 재사용성을 높이기 위해, 반복적으로 사용되는 부분(예: 기사 요약, 기사 메타정보 등)을 별도의 파일이나 함수로 추출하여 관리할 수 있습니다. template-parts 디렉터리 내에 있는 부품 템플릿을 사용하세요. get_template_part() 함수 호출.
주제 기능과 사용자 정의의 통합 (Theme Features and Custom Integration)
functions.php 이 파일은 여러분의 테마의 “제어 센터” 역할을 합니다. 이 파일은 템플릿 파일이 아니라, 테마가 초기화될 때 자동으로 로드되는 PHP 파일로서, 함수를 정의하고, 기능을 등록하며, 필터와 액션 후크를 추가하는 데 사용됩니다.
주제 기반의 기본 지원 기능을 추가합니다.
먼저, 당신은 다음을 사용해야 합니다: add_theme_support() 이 함수는 테마가 지원하는 기능들을 선언하는 역할을 합니다. 이를 통해 테마가 WordPress의 핵심 기능들을 사용할 수 있게 됩니다.
추천 읽기 WordPress 테마 개발을 처음부터 마스터하기: 사용자 정의 웹사이트를 구축하는 최고의 실천 사례와 가이드。
function my_theme_setup() {
// 让主题支持文章和页面的特色图像
add_theme_support( 'post-thumbnails' );
// 支持在后台自定义<title>标签
add_theme_support( 'title-tag' );
// 支持HTML5的标记格式
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 支持自定义Logo
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );등록하기: 네비게이션 메뉴 및 사이드바 설정
네비게이션 메뉴는 사용자가 백엔드의 “외관 > 메뉴” 설정에서 관리할 수 있습니다. 먼저 해당 설정을 사용해야 합니다. register_nav_menus() 함수를 등록한 후, 템플릿에서 해당 함수를 사용합니다. wp_nav_menu() 이 함수를 사용하면 해당 내용을 화면에 표시할 수 있습니다.
function my_theme_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_menus' );“소프트웨어 도구 사이드바”(또는 ‘창 위젯 영역’)는 또 다른 중요한 기능입니다. 이를 활용하면… register_sidebar() 함수를 등록합니다.
function my_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-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' );템플릿 내에서 사용하기. dynamic_sidebar( 'sidebar-1' ) “Call it.”
스크립트와 스타일을 안전하게 도입하는 방법
절대로 템플릿 파일 내에서 CSS 및 JavaScript 파일에 직접 하드링크를 걸어서는 안 됩니다. 올바른 방법은 별도의 파일에 이러한 파일들을 저장한 다음, 템플릿에서 해당 파일들을 참조하는 것입니다. wp_enqueue_scripts 액션 후크(Action Hook) 사용 방법 wp_enqueue_style() 그리고 wp_enqueue_script() 함수를 사용하여 데이터를 로드합니다.
function my_theme_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );
// 引入自定义JavaScript文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), wp_get_theme()->get('Version'), true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );고급 주제 기능 및 사용자 정의
기본 테마가 구축된 후에는 더 고급된 기술을 사용하여 그 전문성과 유연성을 향상시킬 수 있습니다.
커스텀 문서 유형과 분류 체계를 만드는 방법
블로그 글과 페이지 이외의 콘텐츠(제품, 포트폴리오, 팀 구성원 등)를 관리하기 위해서는 사용자 정의된 글 유형을 생성해야 합니다. 마찬가지로, 이러한 콘텐츠를 체계적으로 정리하기 위해 사용자 정의된 분류 체계를 사용할 수도 있습니다. 이러한 작업은 일반적으로 웹사이트나 블로그 관리 시스템에서 이루어집니다. functions.php 중국을 통해 register_post_type() 그리고 register_taxonomy() 함수가 완료되었습니다. 코드의 가독성을 유지하기 위해 이 로직을 별도의 파일에 넣고, 필요할 때 해당 파일을 참조하는 것이 좋습니다. require_once 도입하다.
WordPress 커스터마이저 통합하기
WordPress의 커스터마이저(Customizer)는 사용자에게 테마 옵션을 실시간으로 미리 보여주는 인터페이스를 제공합니다. 여기를 통해… WP_Customize_Manager 객체에 설정, 제어 기능, 그리고 다양한 섹션들을 추가할 수 있습니다. 예를 들어, 사이트 제목의 색상을 선택할 수 있는 옵션을 추가하는 것이 가능합니다.
function my_theme_customize_register( $wp_customize ) {
// 添加一个设置
$wp_customize->add_setting( 'header_color', array(
'default' => '#333333',
'transport' => 'refresh',
'sanitize_callback' => 'sanitize_hex_color',
) );
// 添加一个控制
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
'label' => __( '页眉背景色', 'my-custom-theme' ),
'section' => 'colors',
'settings' => 'header_color',
) ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );그런 다음, header.php 또는 인라인 스타일에서 사용할 수 있습니다. get_theme_mod( 'header_color' ) 이 값을 출력해 주세요.
자식 주제(subtopic) 기능을 구현합니다.
주제를 쉽게 확장하고 보안 업데이트를 적용할 수 있도록 하기 위해서는 처음부터 서브테마의 호환성을 고려하는 것이 매우 중요합니다. 이는 모든 스타일과 스크립트가 올바른 방식으로 로드되어야 함을 의미합니다. get_template_directory_uri() 그리고 get_stylesheet_directory_uri() 등의 함수들이 있으며, 그리고… style.css 절대 경로의 사용을 피하십시오. 서브테마 개발자는 여러분의 템플릿 파일을 덮어쓰는 방식으로 외관을 커스터마이징할 수 있습니다.
요약
WordPress 테마 개발은 창의성, 디자인, 프로그래밍 기술을 결합하는 과정입니다. 로컬 환경을 설정하고 템플릿의 구조를 이해하는 것부터 시작하여, 핵심 템플릿 파일을 구축하고… functions.php 강력한 기능들을 통합하는 것부터 사용자 정의 기사 유형이나 커스터마이저와 같은 고급 기능들을 구현하는 것에 이르기까지, 모든 단계는 표준을 준수하면서도 독특한 웹사이트 솔루션을 만들기 위한 것입니다. 액션 훅을 사용하고, 재사용 가능한 코드를 작성하며, 서브테마의 호환성을 보장하는 등의 모범 사례를 따르면, 여러분의 테마가 더욱 견고하고 전문적으로 보일 것이며, WordPress 생태계 내에서 장기적으로 활용될 수 있을 것입니다.
자주 묻는 질문
###: WordPress 테마를 개발하려면 어떤 핵심 기술들을 숙달해야 할까요?
현대적인 WordPress 테마를 개발하려면 다음과 같은 핵심 기술을 습득해야 합니다. HTML5 및 의미적 태그, CSS3(포함 Flexbox 및 Grid 레이아웃), PHP(특히 객체 지향 프로그래밍 기초), JavaScript(및 구텐베르크 블록 개발에 사용되는 관련 프레임워크인 리액트(React))입니다. 또한, 템플릿 계층, 루프, 액션 후크 및 필터, REST API와 같은 WordPress의 핵심 개념을 잘 알고 있어야 합니다.
함수.php와 플러그인의 차이점은 무엇입니까?
functions.php 이 기능은 테마의 일부이며, 테마와 밀접하게 연동되어 있습니다. 사용자가 테마를 변경할 때…functions.php 해당 코드는 더 이상 작동하지 않을 것입니다. 이 코드는 일반적으로 테마의 외관과 기능에 직접 관련된 기능들을 추가하는 데 사용되었는데, 예를 들어 등록 메뉴 추가, 특별 이미지 지원, 테마 전용 스타일 스크립트 로딩 등이 포함됩니다.
플러그인은 테마와는 독립적인 기능 모듈로, 다양한 테마에서 공통적으로 사용할 수 있는 기능을 제공하기 위해 만들어졌습니다. 어떤 기능이 테마의 시각적 표현과는 관련이 없으며, 사용자가 테마를 변경한 후에도 그 기능을 계속 사용하고 싶어하는 경우(예: 연락처 양식, SEO 최적화, 캐싱 등)에는 플러그인으로 개발하는 것이 더 적합합니다. 모범적인 접근 방식은 테마가 단순히 콘텐츠의 표시에만 집중하도록 하고, 복잡한 기능들은 플러그인에 맡기는 것입니다.
내 테마가 WordPress의 코딩 표준을 준수하도록 하려면 어떻게 해야 하나요?
WordPress의 코딩 표준을 준수하는 것은 코드의 품질, 가독성, 그리고 커뮤니티 내의 협업을 보장하는 데 매우 중요합니다. PHP 코드의 경우에도 동일한 원칙을 따라야 합니다. WordPress의 PHP 코딩 표준이에는 단일 인용 부호의 사용, 적절한 들여쓰기, 대괄호 스타일 등이 포함됩니다. CSS, JavaScript, HTML에도 각각 해당하는 표준이 있습니다.
PHP_CodeSniffer와 같은 도구를 WordPress의 표준 규칙 집합과 함께 사용하거나, ESLint, Stylelint와 같은 도구를 활용하여 코드 편집기나 CI/CD(지속적 통합/배포) 프로세스에서 코드를 자동으로 검사할 수 있습니다. 또한, 모든 사용자가 볼 수 있는 텍스트에는 번역 함수를 반드시 사용해야 합니다. __()、_e()）그리고 국제화 처리를 수행합니다.
테마 개발이 완료되었다면, 어떻게 테스트를 진행해야 할까요?
전면적인 테스트는 테마를 배포하기 전의 중요한 단계입니다. 먼저, 다양한 환경(다른 PHP 버전, 다른 MySQL 버전)에서 기본 기능 테스트를 수행해야 합니다. 그 다음에는 WordPress 공식 테마 검사 도구(Theme Check)를 사용하여 플러그인의 호환성을 확인하고, 더 이상 사용되지 않는 함수가 사용되지 않았는지 또는 테마 검토 지침을 위반하지 않았는지를 확인해야 합니다.
그런 다음, 크로스 브라우저 테스트와 반응형 디자인 테스트를 수행하여 주요 브라우저(Chrome, Firefox, Safari, Edge) 및 다양한 디바이스 크기에서 제대로 표시되는지 확인해야 합니다. 또한 인기 있는 플러그인들과의 호환성도 테스트해야 하며, 디버깅 모드가 활성화된 상태에서도 문제가 없는지 확인해야 합니다. wp-config.php 중국어 설정 define('WP_DEBUG', true);PHP 경고, 알림, 오류가 전혀 발생하지 않았습니다. 마지막으로 성능 테스트를 수행하여 페이지 로딩 속도를 평가했습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어