준비 작업 및 환경 구축
코드를 작성하기 시작하기 전에 올바른 개발 환경을 설정하는 것이 매우 중요합니다. 이는 효율성뿐만 아니라 디버깅의 편리성과 향후의 유지보수성에도 큰 영향을 미칩니다. WordPress를 실행하기 위해서는 로컬 서버 환경이 필요합니다. Local by Flywheel, XAMPP, Laragon과 같은 전문적인 로컬 개발 도구를 사용하는 것을 추천합니다. PHP(7.4 이상 버전), MySQL, 그리고 Apache나 Nginx와 같은 웹 서버를 설치하고 설정해 주세요.
다음으로, 최신 버전의 WordPress 설치 패키지를 다운로드한 후 로컬 서버 환경에서 새로운 사이트를 생성하고 설치를 완료하세요. 사이트의 루트 디렉터리를 반드시 기억해 두세요. 코드 편집과 버전 관리를 용이하게 하기 위해 VS Code나 PhpStorm과 같은 전문적인 코드 편집기를 사용하는 것을 권장하며, 관련 PHP 및 WordPress 코드 스니펫과 디버깅 플러그인도 함께 설치하시기 바랍니다.
마지막으로, WordPress 테마의 기본 구성 요소가 무엇인지 이해해야 합니다. 테마가 시스템에 의해 인식되려면 적어도 두 개의 파일이 필요합니다: 하나는 스타일시트 파일입니다. style.css또 다른 파일은 홈페이지 템플릿 파일입니다. index.php“On the site” /wp-content/themes/ 디렉터리 내에서 곧 생성할 주제에 맞는 새 폴더를 만드세요. 예를 들어, my-first-theme。
추천 읽기 제로에서 시작하기: WordPress 테마 개발의 핵심 프로세스와 실전 기술을 효율적으로 마스터하기。
주제를 생성하는 데 필요한 핵심 파일
### 주제 정보 정의 파일
각 주제의 식별 정보와 관련 선언 내용은 모두 … (The identification information and related declarations for each topic are all …) style.css 이 파일 안에 있습니다. 파일 상단의 주석 블록은 필수적인데, WordPress는 이를 통해 테마의 이름, 작성자, 설명 등의 정보를 읽어옵니다. style.css 파일은 다음과 같이 시작해야 합니다:
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个从零开始开发的 WordPress 主题演示。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/Text Domain 국제화를 위해 사용되며, 이 파일의 이름은 반드시 주제 폴더의 이름과 일치해야 합니다. 이 파일에는 모든 CSS 스타일 코드가 포함될 것입니다.
기본 템플릿 파일의 구축
템플릿 파일은 웹사이트의 다양한 페이지들의 외관을 결정합니다. 가장 핵심적인 파일들을 만들어 보겠습니다. 먼저는 홈페이지 템플릿 파일입니다. index.php이것은 모든 페이지의 기본 리디렉션(또는 롤백) 템플릿입니다. 매우 간단하지만 실제로 작동하는 템플릿입니다. index.php 파일 내용은 다음과 같습니다:
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 输出文章内容
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
echo '<p>暂无文章。</p>';
endif;
?>
</main>
\n이 코드는 세 개의 핵심 템플릿 구성 요소 함수를 가져옵니다:get_header(), get_sidebar(), get_footer()이는 당신이 해당하는 내용을 생성해야 한다는 것을 의미합니다. header.php, sidebar.php 그리고 footer.php 파일.
header.php 파일에는 일반적으로 문서 유형을 나타내는 선언과 HTML 헤더 정보가 포함되어 있습니다. wp_head() 함수 출력 결과, 사이트 제목, 그리고 메인 네비게이션 메뉴가 포함된 기본적인 구성입니다. header.php 파일은 다음과 같습니다:
추천 읽기 강력한 사용자 정의 워드프레스 테마를 구축하기 위한 실습 가이드。
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1003>
<header>
<h1><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
</header>footer.php 이 파일은 페이지 구조를 닫고 해당 함수를 호출합니다. wp_footer() 많은 플러그인들이 스크립트를 삽입하기 위해 이 핸들러(hook)에 의존합니다.
주제 기능과 스타일을 구현하기
### 등록 메뉴 및 사이드바
사용자가 백엔드 관리 메뉴를 통해 메뉴 항목을 등록할 수 있도록 하려면, 함수를 사용하여 메뉴 항목의 위치를 등록해야 합니다. 이 작업은 일반적으로 테마 설정에서 이루어집니다. functions.php 파일 작업이 완료되었습니다. 파일이 생성되었습니다. functions.php 그리고 다음 코드도 추가하세요:
<?php
function my_theme_setup() {
// 注册一个主菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
// 支持文章特色图像
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
?>그 다음에, 당신은… header.php 메뉴는 적절한 위치(예: 사이트 제목 바로 뒤)에서 호출되어야 합니다. wp_nav_menu() 함수.
마찬가지로, 사이드바와 같은 위젯(Widget) 영역을 활성화하려면 다음과 같은 작업이 필요합니다. functions.php 사이트에 바닥글을 등록하려면 다음 단계를 따르세요:
function my_theme_widgets_init() {
register_sidebar( array(
'name' => __( '주 사이드바', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '여기에 위젯을 추가하세요.', 'my-first-theme' ),
'before_widget' => ' 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 파일을 올바르게 큐에 등록하는 것은 WordPress 개발의 모범 사례입니다. 이를 통해 의존성 충돌을 방지하고 캐싱의 이점을 활용할 수 있습니다. functions.php 새로운 함수를 생성하세요:
추천 읽기 WordPress 테마 개발의 비밀을 파헤치다: 맞춤형 웹사이트를 제작하는 데 필수적인 핵심 기술들。
function my_theme_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 引入一个自定义脚本
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );이렇게 하면 WordPress가 페이지 상단에 자동으로 여러분의 스타일시트 링크를 추가해 줍니다. 동시에, 새로운… (The text seems incomplete here; the translation ends abruptly.) /js/ 목차를 만들고 그 안에 자신의 내용을 추가하세요. navigation.js 파일.
템플릿 계층 구조와 고급 기술(Template Hierarchy and Advanced Techniques)
###: 템플릿 계층 구조를 이해합니다.
WordPress는 방문한 페이지의 유형에 따라 일련의 정확한 계층 구조에 따라 해당 템플릿 파일을 선택합니다. 이는 테마 개발에서 가장 강력한 기능 중 하나입니다. 예를 들어, 단일 글을 방문할 때 WordPress는 다음과 같은 순서로 검색합니다:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> 최종적으로 원래 상태로 복귀합니다. index.php。
당신의 블로그 글을 위한 맞춤형 단일 글 템플릿을 만들 수 있습니다. single.php특정 페이지를 위한 템플릿을 만들 수 있습니다. 예를 들어, 우리에 대한 페이지를 만들려면 다음과 같은 이름을 지정할 수 있습니다. page-about.php 해당 파일은 “about”라는 페이지 별칭을 가지고 있습니다.
후크 확장 기능을 사용하기
WordPress의 플러그인 API(후크 및 필터)를 사용하면 테마나 코어 기능을 안전하게 수정할 수 있습니다. 액션 후크(Action Hooks)를 활용하면 특정 시점에 특정 작업을 수행할 수 있습니다. 예를 들어, 글 내용의 끝에 자동으로 텍스트를 추가하고 싶다면 이를 구현할 수 있습니다. the_content 필터:
function my_theme_add_footer_text( $content ) {
if ( is_single() ) {
$content .= '<p class="custom-footer">이 문서는 제가 생성한 주제를 기반으로 만들어졌습니다.</p>';
}
return $content;
}
add_filter( 'the_content', 'my_theme_add_footer_text' );요약
이 글의 단계들을 따라가면서, 여러분은 WordPress 테마 개발의 기본적인 과정을 거쳤습니다. 로컬 환경을 설정하는 준비 작업부터 시작하여, 테마에 대한 정보를 정의하는 과정까지 말이죠. style.css 그리고 페이지의 구조를 형성하는 템플릿 파일들까지… functions.php 메뉴, 사이드바 등 등록 기능과 스타일 스크립트를 추가하고, 마지막으로 템플릿 계층 및 후크 메커니즘을 이해했습니다. 두 개의 핵심 개념인 “템플릿 계층'과 ”스크립트/스타일을 올바르게 추가하는 것'을 기억하는 것은 많은 일반적인 문제를 방지할 것입니다. 테마 개발은 반복적인 프로세스이며, 기존의 우수한 테마를 계속 연습하고 분석함으로써 빠르게 발전할 수 있습니다.
자주 묻는 질문
###: 주제 개발은 반드시 처음부터 시작해야만 하나요?
그렇지 않습니다. 공식적으로 제공되는 기본 테마(Underscores)나 프레임워크(Genesis)를 시작점으로 사용할 수 있습니다. 이들은 표준화된 코드 구조와 기본 기능을 제공하여 개발 효율성과 코드 품질을 크게 향상시켜주며, 특히 초보자에게 적합합니다.
어떻게 코딩을 하지 않고 제 테마를 테스트할 수 있을까요?
로컬 개발 환경에서는 WordPress에 내장된 “테마 단위 테스트 데이터”를 사용하여 다양한 형식과 요소를 포함하는 예제 글, 페이지, 메뉴, 댓글을 대량으로 가져올 수 있습니다. 이를 통해 테마가 다양한 상황에서 어떻게 동작하는지 전반적으로 테스트할 수 있습니다.
왜 제가 수정한 스타일 설정이 백엔드에서 즉시 적용되지 않나요?
이런 문제는 대부분 브라우저 캐시로 인해 발생합니다. “Ctrl + F5” 또는 “Cmd + Shift + R”를 사용하여 강제로 페이지를 새로고침해 보세요. 만약 이 문제가 WordPress의 캐싱 플러그인 때문이라면, 해당 플러그인의 캐시를 삭제해야 합니다. 또한, 귀하의 웹사이트 설정도 확인해 주세요. style.css 파일 버전 번호가 업데이트되었는지 확인해 주세요.
테마 개발이 완료된 후에는 어떻게 패키징하여 배포하나요?
먼저, 당신은 반드시 다음 사항을 확인해야 합니다: style.css 파일 내의 주제 정보는 완전하고 정확합니다. 그런 다음, 개발 과정에서 생성된 모든 백업 파일과 버전 관리 폴더를 삭제하세요. .git) 및 임시 파일을 포함합니다. 마지막으로, 테마 폴더를 ZIP 형식으로 압축하세요. 이 ZIP 파일을 WordPress 관리자의 “외관” -> “테마” -> “테마 추가” -> “테마 업로드”를 통해 설치할 수 있습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어