워드프레스 테마의 기본 구조 이해
코드를 작성하기 시작하기 전에, WordPress 테마의 구성을 이해하는 것이 매우 중요합니다. 테마는 본질적으로 특정 형식의 파일들을 포함하는 폴더이며, 이 파일들이 함께 웹사이트의 외관과 기능을 결정합니다. 가장 기본적인 테마는 단 두 개의 파일만 필요로 합니다:style.css그리고index.php。
Core Style Sheet File
style.css파일은 단순히 CSS 스타일을 저장하는 곳이 아니라, 테마의 “신분증”과도 같습니다. 이 파일의 맨 위에는 반드시 특정한 주석 블록, 즉 “스타일시트 헤더”가 포함되어야 합니다. 이 헤더는 WordPress 시스템에 테마의 이름, 저자, 설명, 버전 등의 메타정보를 알려주는 역할을 합니다. 이 헤더가 없으면 WordPress는 해당 폴더가 유효한 테마인지를 인식할 수 없습니다.
가장 기본적인 것 중 하나는…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
*/Core template file
index.php이 파일은 주제의 기본 템플릿 파일이며, 가장 중요한 파일 중 하나입니다. WordPress가 현재 요청된 페이지에 더 구체적인 템플릿 파일을 찾을 수 없을 경우, 이 기본 템플릿 파일을 사용하도록 자동으로 전환됩니다.index.php이 모듈은 데이터베이스에서 콘텐츠를 가져와서 HTML 형식으로 브라우저에 출력하는 역할을 합니다. 가장 간단한 예를 들어보면…index.php이 파일은 기본적인 HTML 구조와 WordPress 코어 함수를 호출하는 PHP 코드만을 포함하고 있을 가능성이 높습니다.
이 두 개의 핵심 파일 외에도, 기능이 완전한 테마는 일반적으로 다음과 같은 요소들을 포함합니다:
* header.php웹사이트의 페이지 상단 부분.
* footer.php웹사이트의 푸터 부분.
* functions.php주제 기능, 등록 메뉴, 사이드바 등을 강화하는 데 사용됩니다.
* page.php단일 페이지를 표시하는 데 사용됩니다.
* single.php: 단일 블로그 글을 표시하는 데 사용됩니다.
로컬 개발 환경을 설정하고 첫 번째 테마를 만들어 보겠습니다.
실제 서버에서 직접 테마를 개발하는 것은 위험하고 비효율적입니다. 가장 좋은 방법은 로컬 컴퓨터에 온라인 환경과 유사한 개발 환경을 설정하는 것입니다. XAMPP, MAMP, Local by Flywheel, DevKinsta와 같은 도구를 사용하면 PHP, MySQL, 웹 서버를 한 번에 설치할 수 있습니다.
주제별 폴더와 파일을 생성합니다.
먼저, 로컬 WordPress 설치 디렉터리 내에서 다음 파일을 찾으세요:wp-content/themes/경로입니다. 여기에 새 폴더를 만드세요. 폴더의 이름은 여러분의 주제를 나타내는 식별자가 되어야 하며, 소문자와 하이픈(-)을 사용하는 것이 좋습니다. 예를 들어, “my-topic”과 같은 형태로 지정하시기 바랍니다.my-first-theme。
그런 다음, 해당 폴더 내에 앞서 언급한 두 개의 핵심 파일을 생성하세요.style.css그리고index.php위의 스타일시트 헤더 코드를 복사하여 해당 위치에 붙여넣으세요.style.css중, 그리고 자신의 정보로 수정하세요.
추천 읽기 WordPress 테마 개발 입문: 제로에서 시작하여 첫 번째 웹사이트 스킨을 만들어보세요。
기본 템플릿 파일을 작성하세요.
다음으로,index.php아래에 가장 기본적인 코드를 작성했습니다. 이 코드에는 WordPress에 필요한 템플릿 태그들이 포함되어 있습니다.
<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1008>
<header>
<h1><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>"></a></h1>
<p></p>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
_e( '抱歉，没有找到任何内容。', 'my-first-theme' );
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
</body>
</html>위의 단계를 완료한 후, 로컬 WordPress 관리자의 “외관(Appearance)” -> “테마(Themes)” 페이지로 이동하면 “내 첫 번째 테마(My First Theme)”라는 이름의 테마가 이미 표시되어 있을 것입니다. 이 테마를 활성화한 다음 웹사이트의 홈 페이지를 방문하면 글의 제목과 내용이 정상적으로 표시되는 것을 확인할 수 있습니다.
템플릿 계층 구조와 핵심 함수를 활용하기
WordPress는 다양한 페이지 요청(홈페이지, 글 페이지, 카테고리 페이지 등)에 어떤 템플릿 파일을 사용할지 결정하기 위해 지능적인 “템플릿 계층” 시스템을 사용합니다. 이 시스템을 이해하는 것은 테마 개발의 핵심입니다.
템플릿 로딩 순서 이해
예를 들어, 블로그 글을 방문할 때 WordPress는 다음 순서로 템플릿 파일을 찾습니다:single-post.php -> single.php -> singular.php -> index.php그것은 찾은 첫 번째 파일을 사용합니다. 이러한 디자인 덕분에 다양한 유형의 페이지에 매우 맞춤화된 레이아웃을 만들 수 있으며, 동시에…index.php최종적인 대안으로서…
반복문과 템플릿 태그를 사용하기
Inindex.php여러분이 보신 그 PHP 코드가 바로 유명한 “WordPress 루프(The Loop)”입니다. 이 루프는 모든 템플릿 파일의 핵심으로, 현재 페이지에 표시되어야 할 글이나 콘텐츠를 순회하여 출력하는 데 사용됩니다.
in the loopthe_title()、the_content()、the_excerpt()이러한 함수들은 “템플릿 태그”라고 불립니다. 그 역할은 해당하는 기사 데이터를 안전하게 출력하는 것입니다. 또 다른 중요한 함수는…the_post()그것은 각 반복 iteration에서 호출되며, 전역 변수를 사용하기 위해 사용됩니다.$post현재 문서의 데이터로 객체를 설정한 후, 다음 문서로 이동합니다.
추천 읽기 핵심 기술 습득: 처음부터 첫 워드프레스 테마를 만들기。
페이지 구조를 모듈화하는 것은 코드의 유지보수성을 향상시키는 좋은 방법입니다.header.php그리고footer.php그것이 발휘될 수 있는 분야입니다.
헤더와 푸터를 분리합니다.
"将"index.php중국의<head>섹션과<header>해당 영역을 잘라내어 새로 만든 파일에 붙여주세요.header.php파일 안에 있습니다. 마찬가지로, 해당 파일도 해당 위치에 있습니다.<footer>일부를 잘라서…footer.php가운데.
그런 다음, 원래의…index.php중, 사용get_header()그리고get_footer()이 두 개의 템플릿 태그를 사용하여 해당 내용들을 가져옵니다.
<main>
<?php the_title( '<h2>', '</h2>' ); ?>
<p><?php _e( '抱歉，没有找到任何内容。', 'my-first-theme' ); ?></p>
</main>이렇게 하면 모든 페이지 템플릿이 동일한 헤더와 푸터를 공유할 수 있으며, 수정할 때는 단 하나의 파일만 변경하면 됩니다.
Functions.php를 사용하여 테마 기능을 향상시킵니다.
functions.php이 파일은 여러분의 테마의 “제어 센터” 역할을 합니다. 이 파일은 템플릿 파일이 아니라, 테마가 초기화될 때 자동으로 로드되는 함수 라이브러리입니다. 여기서 기능을 추가하거나 기본 동작을 수정할 수 있으며, WordPress 코어 파일을 직접 수정할 필요가 없습니다.
등록된 주제가 지원하는 기능들:
Infunctions.php여기서 당신은 사용할 수 있습니다.add_theme_support()함수를 사용하여 해당 테마가 어떤 WordPress 기능을 지원하는지 명시할 수 있습니다. 예를 들어, 글의 썸네일(프로필 이미지)을 활성화하거나 사용자 정의 메뉴를 설정하는 것은 흔한 작업입니다.
<?php
function my_theme_setup() {
// 添加对文章缩略图的支持
add_theme_support( 'post-thumbnails' );
// 添加对自定义菜单的支持
add_theme_support( 'menus' );
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );스타일과 스크립트를 추가하세요.
CSS와 JavaScript를 올바르게 추가하는 방법은 다음과 같습니다:wp_enqueue_style()그리고wp_enqueue_script()함수를 작성하고 이들을 매핑하십시오.wp_enqueue_scripts이 후크에 달려 있습니다. 이를 통해 의존 관계가 올바르게 설정되고, 동일한 코드가 중복으로 로드되는 것을 방지할 수 있습니다.
function my_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
// 引入自定义的JavaScript文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );이 모든 작업을 완료하면, 당신은…header.php중국에서 사용하세요.wp_nav_menu()이 함수는 사용자가 등록한 메뉴를 표시하는 역할을 하며, 글 목록을 반복 처리할 때 사용됩니다.the_post_thumbnail()이제 특별한 이미지들이 표시되기 시작했습니다.
요약
WordPress 테마 개발은 구조부터 세부 사항에 이르기까지 점진적으로 진행되는 과정입니다. 먼저, 테마가 어떻게 구성되어 있는지 이해하는 것이 중요합니다.style.css그리고index.php구성의 핵심을 이해하고 로컬 개발 환경을 잘 설정하세요. 그 다음에는 템플릿 계층 구조와 “반복”(loop)의 개념을 숙달하여 다양한 페이지에 정확한 레이아웃을 만들 수 있도록 하세요.header.php그리고footer.php모듈화를 통해 코드가 더 명확하고 유지보수하기 쉬워집니다. 마지막으로…functions.php파일은 기능 확장의 가능성을 열어줍니다. 등록 메뉴부터 안전한 리소스 로딩에 이르기까지, 파일 덕분에 테마가 정적 템플릿에서 동적이고 강력한 웹사이트 스킨으로 변신할 수 있습니다. 이 경로를 따라 계속 실습하고, 더 구체적인 템플릿 파일들을 탐구해 보세요.single.php、page.php、archive.php이를 통해 점차적으로 기능이 완벽하고 디자인이 독특한 맞춤형 WordPress 웹사이트를 구축할 수 있습니다.
자주 묻는 질문
WordPress 테마를 개발하기 위해서는 어떤 사전 지식이 필요한가요?
기본적인 HTML과 CSS를 숙달하여 웹페이지의 구조와 스타일을 만들 수 있어야 합니다. 또한, WordPress 템플릿 파일이 주로 PHP 코드로 구성되어 있으며 동적 콘텐츠를 생성하는 데 사용되므로 PHP에 대한 기본적인 이해도 필요합니다. JavaScript를 익히면 테마에 인터랙티브 기능을 추가할 수 있으며, 이는 초기에는 반드시 필요하지 않지만 나중에 매우 중요해집니다.
제 주제가 백엔드에서 표시되지 않는 이유는 무엇인가요?
가장 흔한 이유는style.css파일의 주제 정보 헤더 형식이 올바르지 않거나 누락되었습니다. 파일의 맨 위에 형식 요구 사항을 충족하는 완전한 주석 블록이 있는지 확인하십시오. 또한, 주제 폴더가 올바른 위치에 있는지도 확인해 주세요.wp-content/themes/디렉터리 내에 있으며, 폴더 이름에는 특수 문자가 사용되지 않았습니다.
내 테마에 어떻게 툴바 영역(사이드바)을 추가할 수 있나요?
먼저, 당신은…functions.php중국에서 사용하세요.register_sidebar()이 함수는 하나 이상의 툴바 영역을 등록합니다. 그런 다음, 해당 템플릿 파일(예:sidebar.php이 게임에서는 In this game, you usedynamic_sidebar()함수를 호출하여 그 결과를 표시합니다. 마지막으로, 페이지 템플릿을 통해 해당 결과를 보여줍니다.get_sidebar()이 파일을 가져오세요.
functions.php 파일을 수정한 후 웹사이트가 화면이 하얗게 나타나는 문제가 발생했다면 어떻게 해야 할까요?
이것은 보통 다음과 같은 이유로 발생합니다:functions.php파일에 PHP 문법 오류가 있습니다. 이 파일은 테마가 로드되는 초기 단계에서 실행되므로, 이 오류로 인해 전체 웹사이트가 중단될 수 있습니다. 해결 방법은 FTP 또는 호스트 제어판의 파일 관리자를 사용하여 오류가 있는 파일을 찾아서 수정하거나 삭제하는 것입니다.functions.php이름을 변경하려면 (예: ‘old_name’을 ‘new_name’으로 바꾸려면) 다음과 같이 하세요:functions.php.bak이렇게 하면 WordPress가 해당 파일을 무시하고, 웹사이트 접속이 다시 가능해집니다. 그 후에 수정된 파일을 다시 업로드하시면 됩니다.
내 테마가 다국어 번역을 지원하도록 하려면 어떻게 해야 하나요?
당신은 두 가지 일을 잘 해야 합니다. 첫째, 모든 주제 관련 텍스트 출력에서 WordPress의 번역 기능을 사용해야 합니다. 예를 들어, `wp_translate()` 함수를 사용하여 텍스트를 다른 언어로 번역할 수 있습니다.__()、_e()그리고 그것들이 위치할 장소를 지정하세요.style.css먼저, 헤더에 정의된 “Text Domain”을 확인하세요. 그 다음, Poedit와 같은 도구를 사용하여 테마 파일을 스캔하여 필요한 정보를 생성하세요..pot템플릿 파일을 기반으로 해당 언어에 맞는 콘텐츠를 생성합니다(예:zh_CN.po그리고.mo)의 번역 파일들을 주제에 맞는 곳에 저장하세요./languages/카테고리 아래에.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어