WordPress 테마 개발 기초 및 환경 설정
어떤 코드도 작성하기 전에, 안정적인 개발 환경을 구축하는 것이 매우 중요합니다. 전문적인 개발 환경은 효율성을 높일 뿐만 아니라 최상의 개발 관행을 따르는 데에도 도움이 됩니다. WordPress 테마 개발을 위해서는 Local by Flywheel, XAMPP, MAMP와 같은 로컬 개발 도구를 사용하는 것을 강력히 권장합니다. 이러한 도구들은 PHP, MySQL, Apache/Nginx를 포함한 완전한 서버 환경을 개인 컴퓨터에서 시뮬레이션할 수 있게 해줍니다.
다음으로, 로컬 환경에 새로운 WordPress를 설치해야 합니다. 이를 통해 개발 작업이 온라인 웹사이트에 영향을 미치지 않도록 하고, 자유롭게 테스트 및 디버깅을 진행할 수 있습니다. 설치가 완료되면, 개발 테마의 핵심 단계로 넘어가야 합니다: 테마의 디렉터리 구조를 이해하는 것입니다. 표준 WordPress 테마는 최소한 두 개의 파일을 포함해야 합니다:style.css그리고index.php그중에서,style.css이 파일은 단순한 스타일시트가 아닙니다. 더 중요한 역할은 여러분의 테마에 메타정보를 제공하는 것입니다.
당신은 그것을 할 필요가 있습니다.style.css파일의 헤더 주석 블록에는 테마의 이름, 저자, 설명, 버전 번호, 그리고 라이선스 정보가 정의되어 있습니다. 이 정보가 WordPress가 특정 테마를 인식하는 유일한 방법입니다. 기본적인 스타일시트 헤더 정보의 예는 다음과 같습니다:
추천 읽기 WordPress 테마 개발을 배우고 싶으신가요? 초보자부터 전문가까지, 실전에 바탕한 완벽한 가이드입니다.。
/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-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
*/위의 두 개의 필수 파일 외에도, 기능이 완전한 테마는 일반적으로 다음과 같은 추가 템플릿 파일들을 포함합니다:header.php、footer.php、sidebar.phptoofunctions.phpwp-content/themes 디렉터리에 “my-custom-theme”와 같은 새로운 폴더를 만들어 해당 파일들을 저장할 수 있습니다. 마지막으로, WordPress 관리자의 “외관” -> “테마” 메뉴에서 방금 생성한 빈 테마를 활성화하는 것을 잊지 마세요. 이것이 모든 후속 개발 작업을 시작하는 출발점이 됩니다.
핵심 템플릿 파일과 테마 계층 구조
WordPress의 테마 시스템이 강력한 이유는, 그 명확한 템플릿 계층 구조 덕분입니다. 이 계층 구조에 따라 WordPress는 웹사이트의 다양한 유형의 페이지에 맞게 자동으로 적절한 PHP 템플릿 파일을 찾아내어 콘텐츠를 렌더링합니다. 이 계층 구조를 이해하는 것은 유연하고 기능이 풍부한 테마를 만드는 데 핵심적입니다.
가장 기본적인 템플릿 파일은index.php이 파일은 모든 페이지의 최종 백업 파일입니다. WordPress가 더 구체적인 템플릿을 찾을 수 없을 경우 이 파일을 사용합니다. 하지만 웹사이트에 다양한 레이아웃을 제공하기 위해 더 구체적인 템플릿들을 만들어 사용합니다. 예를 들어, 블로그 글 목록(홈페이지)을 방문할 때 WordPress는 먼저 해당 페이지에 맞는 템플릿을 찾으려고 합니다.front-page.php또는home.php; 단일 블로그 글을 방문할 때, 이 시스템은 해당 글을 찾아줍니다.single.php; 정적 페이지에 접속할 때, 그것은 해당 페이지를 찾아줍니다.page.php。
페이지 콘텐츠를 모듈화하기 위해, 우리는…get_header()、get_footer()그리고get_sidebar()공통 부분을 가져오기 위해 `etc.`와 같은 템플릿 태그를 사용해야 합니다. 이는 즉, 공통적으로 사용되는 코드나 데이터를 별도의 파일에 저장해 두고, 필요한 곳에서 해당 파일을 참조하여 사용한다는 것을 의미합니다.header.php파일에는 웹사이트의 시작 부분에 있는 모든 HTML 코드가 포함되어야 하며, 이는 주요 콘텐츠 영역이 시작되는 지점까지를 의미합니다. 일반적으로 여기에는 다음과 같은 내용이 포함됩니다:<head>일부 콘텐츠, 웹사이트 로고, 그리고 메인 네비게이션 메뉴입니다.footer.php즉, 주요 내용이 끝난 후에 나오는 모든 부분들을 포함합니다. 예를 들어, 저작권 정보, 스크립트 파일의 로딩 등이 여기에 해당합니다.
한 가지 전형적인 예는…index.php파일 구조는 다음과 같습니다:
추천 읽기 WordPress 테마 개발의 궁극적인 가이드: 원리에서 실전까지。
<?php get_header(); ?>
<main id="primary" class="site-main">
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
// 显示每篇文章的内容
endwhile;
else :
// 没有找到文章时的内容
endif;
?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>커스텀 페이지 템플릿을 생성합니다.
때로는 특정 페이지에 완전히 다른 레이아웃을 디자인해야 할 수 있습니다. 이럴 때는 사용자 정의 페이지 템플릿을 만들 수 있습니다. 어떤 PHP 템플릿 파일의 상단에 특정 주석 블록을 추가하면 해당 파일을 페이지 템플릿으로 선언할 수 있습니다. 예를 들어, “전체 화면 너비 페이지”(Full-width page)라는 이름의 템플릿을 만들려면 다음과 같이 하세요:
<?php
/**
* Template Name: 全宽页面
* Description: 一个没有侧边栏的全宽页面模板。
*/
get_header(); ?>이 파일을 다음과 같이 저장하세요:template-fullwidth.php그 후, WordPress 관리자 페이지에서 페이지를 편집할 때 “페이지 설정”의 “템플릿” 드롭다운 메뉴에서 “전체 화면 너비 페이지”를 선택할 수 있습니다.
주제 기능 및 WordPress 루프
functions.php이 파일은 테마의 “엔진룸” 역할을 하며, 테마 기능의 추가, 등록 메뉴의 생성, 툴바 영역의 설정, 특별 이미지의 활성화, 그리고 스타일시트 및 스크립트 파일의 로딩 순서를 관리하는 데 사용됩니다. 이 파일은 테마가 초기화될 때 자동으로 로드됩니다. WordPress가 제공하는 다양한 기능들을 활용하여 테마를 더욱 효과적으로 사용할 수 있습니다.add_theme_support()함수와 훅(hook)을 사용하면 테마의 기능을 크게 확장할 수 있습니다.
핵심 기능 중 하나는 네비게이션 메뉴를 등록하는 기능입니다. 이를 통해 웹사이트 관리자는 백엔드의 “외관(Appearance)” -> “메뉴(Me menu)” 인터페이스를 사용하여 메뉴 콘텐츠를 관리할 수 있습니다.functions.php중국에서 사용하세요.register_nav_menus()함수를 사용하여 메뉴 항목의 위치를 선언합니다.
function my_custom_theme_setup() {
register_nav_menus(
array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
)
);
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );
// 为文章摘要添加支持
add_theme_support( 'excerpt' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );WordPress의 반복문(루프)을 이해하고 사용하는 방법
모든 동적 콘텐츠의 출력은 “WordPress 루프”를 중심으로 이루어집니다. 이는 PHP 코드 구조로, 현재 페이지에 표시해야 할 글(또는 페이지)이 있는지 확인합니다. 만약 있다면, 각 글을 순회하며 그 내용을 출력합니다. 이 루프는 템플릿 파일의 핵심 부분입니다. 다음은…index.php또는archive.php중에서 사용된 표준 반복 예제:
、《PHP》 만약 (have_posts()) がある なら:
<div class="posts-list">
<article id="post-<?php the_ID(); ?>" no numeric noise key 1009>
<h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
<div class="entry-meta">
<?php the_time( 'Y年m月d日' ); ?>
</div>
<div class="entry-content">
</div>
</article>
</div>
<p><?php _e( '抱歉，没有找到符合条件的文章。', 'my-custom-theme' ); ?></p>반복문 내부에서는 다양한 템플릿 태그를 사용할 수 있습니다.the_title()、the_content()、the_excerpt()그리고the_permalink()기사의 각종 정보를 출력하세요. 단일 기사 페이지에서(single.php)에서는 보통 다음과 같은 방법을 사용합니다:the_content()전체 기사 내용을 출력해 주세요.
추천 읽기 WordPress 테마 개발 입문 가이드: 초보자에서 전문가까지의 완벽한 학습 과정。
스타일, 스크립트, 테마의 사용자 정의 (Customization of Styles, Scripts, and Themes)
현대적인 WordPress 테마는 CSS 및 JavaScript 파일의 올바른 로딩을 처리해야 하며, 사용자의 커스터마이징 요구사항도 고려해야 합니다. 가장 좋은 방법은…wp_enqueue_style()그리고wp_enqueue_script()이 함수는 리소스의 로딩을 순서대로 처리하여 의존 관계가 올바르게 충족되도록 하고, 중복 로딩을 방지합니다.
당신은 그것을 할 필요가 있습니다.functions.php중에서 함수를 하나 만들고, 그 함수를 사용하세요.wp_enqueue_scripts후크를 사용하여 그것을 마운트하세요.
function my_custom_theme_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 引入自定义JavaScript文件
wp_enqueue_script( 'my-custom-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );커스터마이저 지원을 구현합니다.
WordPress 테마 커스터마이저는 매우 강력한 도구로, 사용자가 웹사이트 제목, 색상, 배경 이미지 등과 같은 테마 설정을 실시간으로 미리 보고 수정할 수 있게 해줍니다. 자신의 테마 설정을 이 커스터마이저에 통합함으로써 사용자 경험을 크게 향상시킬 수 있습니다.
커스터마이저 지원을 구현하는 데에는 주로 다음과 같은 방법들이 사용됩니다:WP_Customize_Manager클래스. 여기서 사용할 수 있습니다.functions.php중에서 함수를 하나 만들어서, 그 함수를 통해…customize_register후크를 사용하여 설정과 컨트롤을 추가할 수 있습니다. 예를 들어, 배경 색상을 제어하는 옵션을 추가하는 경우가 있습니다.
function my_custom_theme_customize_register( $wp_customize ) {
// 添加一个设置项（存储在数据库中）
$wp_customize->add_setting( 'background_color', array(
'default' => '#ffffff',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage', // 支持实时预览
) );
// 添加一个颜色选择器控件（显示在定制器界面）
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'background_color', array(
'label' => __( '背景颜色', 'my-custom-theme' ),
'section' => 'colors',
) ) );
}
add_action( 'customize_register', 'my_custom_theme_customize_register' );그런 다음, 당신은 필요합니다.header.php또는 내联 스타일에서 사용할 수도 있습니다.get_theme_mod()이 함수는 해당 값을 가져와 CSS 형식으로 출력합니다.
<style type="text/css">
body {
background-color: <?php echo esc_attr( get_theme_mod( 'background_color', '#ffffff' ) ); ?>;
}
</style>요약
WordPress 테마 개발은 환경 설정, 템플릿 구조 이해, 핵심 기능 작성부터 사용자 인터랙션 구현에 이르기까지 점진적으로 진행되는 과정입니다. 가장 기본적인 것부터 시작하여 이러한 과정을 숙달하는 것이 매우 중요합니다.style.css그리고index.php파일을 시작으로, 템플릿 태그와 WordPress의 반복 구문을 숙련되게 사용하여 동적 콘텐츠를 출력하는 것은 사용자 정의 테마를 구축하는 데 있어 기본이 됩니다.functions.php파일 등록 기능, 메뉴, 그리고 다양한 유틸리티를 제공하며, wp_enqueue 시스템을 통해 리소스를 올바르게 로드함으로써 테마의 안정성과 성능을 보장할 수 있습니다. 마지막으로, 테마 설정 옵션들을 WordPress 커스터마이저에 통합하면 웹사이트 관리자에게 직관적이고 사용하기 쉬운 설정 인터페이스를 제공하여 테마의 전문성과 사용 편의성을 크게 향상시킬 수 있습니다. 이러한 핵심 원칙과 단계를 따르면, 처음부터 시작하여 기능이 풍부하고 디자인이 유연하며 현대적인 표준을 충족하는 WordPress 테마를 만들 수 있을 것입니다.
자주 묻는 질문
WordPress 테마를 개발하려면 반드시 PHP를 배워야 하나요?
네, PHP는 WordPress 테마를 개발하는 데 필수적인 기술입니다. WordPress의 코어 자체가 PHP로 작성되었으며, 모든 템플릿 파일(.php 파일)은 PHP 코드를 사용하여 HTML 콘텐츠를 동적으로 생성하고 WordPress 함수를 호출하며 데이터를 처리합니다. 레이아웃을 디자인하기 위해 페이지 빌더 도구를 사용할 수는 있지만, 테마의 구조, 기능, 사용자 정의 로직을 심층적으로 제어하려면 PHP에 능숙해져야 합니다.
내 테마는 어떻게 다국어(국제화)를 지원할 수 있나요?
주제를 다국어로 지원하려면 국제화(i18n)를 준비해야 합니다. 가장 기본적인 방법은 WordPress가 제공하는 번역 기능을 사용하여 주제 내에서 사용자에게 표시되는 모든 문자열을 감싸는 것입니다. 가장 자주 사용되는 함수는…()번역된 문자열을 다시 표시하는 데 사용됩니다.()이 함수는 번역된 문자열을 반환하는 데 사용됩니다. 사용 방법은 다음과 같습니다:functions.php중국에서 사용하세요.load_theme_textdomain()이 함수는 번역 파일을 로드하는 역할을 합니다. 그런 다음 Poedit와 같은 소프트웨어를 사용하여.pot 템플릿 파일을 생성하고, 번역자가 해당 언어(예: zh_CN)에 맞는.mo 파일을 만들 수 있습니다. 또한, 필요한 설정들을 반드시 올바르게 해야 합니다.style.css모든 WordPress 함수 호출에서 일관된 텍스트 도메인(Text Domain)을 사용해야 합니다. 이는 일반적으로 여러분의 테마 디렉터리 이름을 의미합니다.
내 테마를 WordPress 공식 요구 사항에 맞게 만들고 테마 디렉터리에 제출하려면 어떻게 해야 하나요?
워드프레스 공식 테마 디렉토리에 제출하려면 테마 검사 표준을 엄격히 준수해야 합니다. 이에는 워드프레스 코딩 표준 및 PHP 최고 사례를 준수해야 하며, 모든 동적 데이터를 올바르게 이스케이프하고 스터يل하도록 하고, 기능이 완전해야 하며, 특정 제3자 플러그인에 의존하지 않고 작동되어야 합니다. 프론트엔드 코드는 반응형이어야 하며 접근성이 있어야 합니다. GPLv2 또는 그 이상의 오픈 소스 라이센스를 사용해야 합니다. 개발 과정에서 테마 체크 플러그인을 사용하여 예비 검사를 실시하십시오. 제출하기 전에 공식 테마 개발 매뉴얼과 검사 목록을 자세히 읽은 후 워드프레스 공식 웹사이트의 제출 페이지를 통해 제출하십시오.
자주제(subtopic)와 부모주제(parent topic)의 차이점은 무엇이며, 언제 자주제를 사용해야 할까요?
부모 테마는 완전히 기능적이고 독립적인 WordPress 테마입니다. 자식 테마는 특정 부모 테마에 의존하며, 부모 테마의 모든 기능, 스타일 및 템플릿 파일을 상속하며, 부모 테마 파일을 수정하지 않고도 새 기능을 추가하거나 기존 기능을 덮어쓰도록 허용합니다. 기존 테마(특히 인기 있거나 표준 테마)를 사용자 정의하려는 경우에는 자식 테마를 사용해야 합니다. 이는 부모 테마가 업데이트되더라도 자식 테마의 사용자 정의 코드가 손상되지 않으며 안전하게 업데이트할 수 있다는 것을 의미합니다. 자식 테마를 만들려면 필요한 헤더 정보를 포함하는 파일이 하나만 필요합니다.style.css파일을 통해…@import또는 대기열을 이용하여 상위 테마의 스타일을 로드할 수도 있습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어