WordPress 테마 개발의 기본 개념들
코드를 작성하기 시작하기 전에, WordPress 테마의 기본 구성을 이해하는 것이 매우 중요합니다. 테마는 본질적으로 일련의 파일들을 포함하는 폴더이며, 이 파일들이 웹사이트의 외관과 일부 기능을 결정합니다. WordPress 시스템은 이러한 파일들을 읽어서 웹페이지 콘텐츠를 렌더링합니다.
가장 기본적인 테마라도 적어도 두 개의 파일이 필요합니다:style.css그리고index.php그중에서,style.css스타일을 담당할 뿐만 아니라, 파일 헤더에 있는 주석 블록에는 테마의 메타정보도 포함되어 있습니다. 여기에는 테마 이름, 저자, 설명, 버전 번호 등이 포함됩니다. 이 정보가 WordPress가 테마를 인식하는 데 사용됩니다.
WordPress는 템플릿 계층 시스템을 사용하여 각 페이지에 어떤 템플릿 파일을 적용할지 결정합니다. 예를 들어, 특정 글을 방문할 때 WordPress는 먼저 해당 글에 맞는 템플릿을 찾습니다.single.php블로그 글 목록 페이지를 방문하면, 해당 페이지에서 필요한 정보를 찾게 됩니다.index.php또는home.php; 페이지에 접속할 때는 해당 페이지를 찾습니다.page.php이러한 계층 구조를 이해하면 올바른 위치에 코드를 작성할 수 있습니다.
추천 읽기 제로에서 일까지: 현대 웹사이트 구축 전 과정의 핵심 기술 상세 해설과 모범 사례。
주제 핵심 파일의 역할
functions.php이 파일은 테마의 기능적 핵심입니다. 필수적인 파일은 아니지만, 거의 모든 현대적인 테마에서 사용됩니다. 여기에는 테마가 지원하는 기능들, 등록 메뉴와 사이드바, 스크립트 및 스타일시트의 삽입, 그리고 다양한 사용자 정의 함수의 정의 등을 추가할 수 있습니다. 이 파일은 테마가 초기화될 때 자동으로 로드되며, 테마의 기능을 확장하는 데 있어 매우 중요한 역할을 합니다.
또 다른 중요한 파일은header.php일반적으로 문서 유형 선언, CSS 및 JS를 포함하는 구역, 그리고 웹사이트 헤더의 공통 부분을 포함합니다.footer.php이 부분은 푸터에 공통적으로 포함되는 내용과 종료 태그를 담고 있습니다. 이는 WordPress 함수를 사용하여 구현됩니다.get_header()그리고get_footer()다른 템플릿 파일에서도 쉽게 이들을 가져올 수 있어, 코드의 모듈화와 유지보수성을 유지할 수 있습니다.
로컬 개발 환경을 설정하고 테마의 구조를 만드는 방법입니다.
주제를 온라인 서버에 배포하기 전에 로컬 개발 환경을 설정하는 것이 가장 효율적이고 안전한 방법입니다. XAMPP, MAMP, Local by Flywheel 또는 Docker와 같은 도구를 사용하여 로컬 컴퓨터에 Apache, MySQL, PHP를 빠르게 설치하고 WordPress를 실행할 수 있습니다.
환경이 준비되면 첫 번째 테마를 만들기 시작할 수 있습니다. 먼저, WordPress가 설치된 디렉터리로 이동하세요.wp-content/themes폴더입니다. 여기에 새로운 폴더를 만들고, 여러분의 테마 이름으로 명명하세요. 예를 들어 “my-first-theme”와 같이 말이죠. 모든 테마 파일들은 이 폴더에 저장될 것입니다.
다음으로, 위에서 언급한 기본 파일들을 생성해 보겠습니다. 먼저는…style.css해당 파일의 헤더에는 반드시 특정 스타일시트 정보가 포함되어 있어야 합니다.
추천 읽기 전문 웹사이트 제작: 완벽한 WordPress 테마 개발 및 커스터마이징을 위한 최고의 가이드。
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/그런 다음, 가장 기본적인 것을 만듭니다.index.php파일입니다. 처음에는 매우 간단할 수 있으며, 단지 주제가 WordPress에 의해 인식되고 활성화되도록 하는 역할만을 합니다.
<!DOCTYPE html>
<html no numeric noise key 1004>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1001>
<h1>안녕하세요, 워드프레스 테마 개발입니다!</h1>
</body>
</html>이제 WordPress 관리자의 “외관(Appearance)” → “테마(Themes)” 페이지에 접속하면, 자신이 생성한 테마가 목록에 표시되어 있는 것을 확인할 수 있습니다. 해당 테마를 활성화한 후 웹사이트의 홈 페이지를 방문하면, 위 코드에서 출력된 간단한 메시지를 볼 수 있을 것입니다. 이렇게 하여 첫 번째 빈 테마 프레임워크가 성공적으로 설정되었습니다.
주제 템플릿과 반복 구조를 구축하는 방법
주제의 핵심 업무는 콘텐츠를 표시하는 것이며, WordPress에서의 콘텐츠 표시는 “루프(cycle)”에 의존합니다. 루프는 WordPress 내에서 데이터베이스에서 글(페이지, 사용자 정의 글 유형 등 포함)을 검색하여 페이지에 표시하는 데 사용되는 PHP 코드 구조입니다.
주循环을 이해하고 구현하세요.
가장 기본적인 반복 구조는 다음과 같으며, 일반적으로 다음 위치에 배치됩니다:index.php또는single.php등 템플릿 파일에서:
만일 게시물이 있다면: ?>
<!-- 在这里输出每篇文章的内容 -->
<h2></h2>
<div></div>
<p>아무런 기사도 찾을 수 없습니다.</p>have_posts()이 함수는 표시해야 할 기사가 있는지를 확인합니다.the_post()이 함수는 현재 글의 데이터를 설정하고, 이 데이터가 템플릿 태그(예:…)에서 사용될 수 있도록 합니다.the_title()、the_content())를 호출합니다.
자주 사용하는 템플릿 파일을 만드세요.
주제가 다양한 페이지를 전문적으로 처리할 수 있도록, 일련의 템플릿 파일을 만들어야 합니다.index.php이 최종 복구(리커버리) 템플릿을 사용하려면, 다음과 같은 내용들도 함께 생성해야 합니다:
추천 읽기 워드프레스 테마 개발을 위한 완벽한 가이드: 초보자부터 마스터까지 실용적인 튜토리얼。
header.php공통 헤더 코드를 추출하세요.footer.php공통적으로 사용되는 하단 코드를 추출합니다.single.php단일 기사를 표시하는 데 사용됩니다.page.php: 단일 페이지를 표시하는 데 사용됩니다.archive.php분류, 태그, 저자 등의 정보가 포함된 아카이브 페이지를 표시하는 데 사용됩니다.
그런 다음, 코드를 재구성해야 합니다.index.phpWordPress의 함수를 사용하여 모듈화된 부분을 가져오세요:
<main>
<article>
<h2><a href="/ko/</?php the_permalink(); ?>"></a></h2>
</article>
</main>이렇게 하면 페이지의 상단과 하단 부분이 각각 별도의 파일로 관리되므로, 메인 템플릿 파일은 해당 페이지에 고유한 콘텐츠 논리에만 집중할 수 있습니다. 그 결과 구조가 명확해지고 유지보수도 용이해집니다.
테마 기능을 향상시키는 functions.php 사용
functions.php이곳은 “도구상자”로, 여러분의 프로젝트에 사용할 수 있는 기능들이 모여 있습니다. 여기에 코드를 추가하면 WordPress의 핵심 기능들을 안전하게 수정하거나 확장할 수 있으며, 원본 파일을 직접 변경할 필요가 없습니다.
등록된 주제가 지원하는 기능들:
통과합니다.add_theme_support()함수를 사용하면 테마가 지원할 수 있는 다양한 기능들을 선언할 수 있습니다. 예를 들어, 테마가 기사의 특별 이미지, 사용자 정의 로고, 기사 요약 등을 표시할 수 있도록 설정할 수 있습니다.
function my_first_theme_setup() {
// 让主题支持文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
// 支持文章格式（可选）
add_theme_support( 'post-formats', array( 'aside', 'gallery', 'quote' ) );
// 为文章和页面开启HTML5标记支持
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );주의하세요, 우리는 해당 함수를 마운트했습니다.after_setup_theme이 액션은 훅(hook)에 연결되어 있습니다. 이것은 WordPress가 테마를 로드한 후에 실행되는 표준적인 훅으로, 테마를 초기화하는 데 적합한 위치입니다.
등록 메뉴 및 스타일 스크립트 (Registration Menu and Style Script)
등록된 메뉴의 위치를 관리할 수 있으며, 이를 통해 사용자는 백엔드의 “외관(Appearance)” -> “메뉴(Menus)” 섹션에서 메뉴를 편집하고 관리할 수 있습니다.
function my_first_theme_menus() {
register_nav_menus(
array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
'footer' => __( '底部菜单', 'my-first-theme' ),
)
);
}
add_action( 'init', 'my_first_theme_menus' );템플릿 파일에서는 다음과 같은 방법들을 사용할 수 있습니다:wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) )이 메뉴를 표시하려면.
마지막으로, CSS와 JavaScript 파일을 올바르게 가져와야 합니다. 이것이 최선의 관행입니다.
function my_first_theme_scripts() {
// 引入主题的主要样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( ‘Version’ ) );
// 引入自定义的JavaScript文件
wp_enqueue_script( ‘my-first-theme-script’, get_template_directory_uri() . ‘/js/script.js’, array(‘jquery’), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_first_theme_scripts’ );활용wp_enqueue_style()그리고wp_enqueue_script()함수를 작성한 후, 그 함수를 적절한 위치에 마운트해야 합니다.wp_enqueue_scripts후크(hook)는 WordPress에서 공식적으로 추천하는 방법입니다. 후크를 사용하면 의존 관계를 처리하고, 중복 로딩을 방지할 수 있으며, 플러그인 등의 환경에서도 호환성을 보장할 수 있습니다.
요약
“Create a document that contains…”style.css그리고index.php폴더부터 시작하여 템플릿의 구조와 “반복” 메커니즘을 이해하고, 그 다음에는 이를 실제로 활용하는 단계까지…functions.php파일에 다양한 기능을 추가하여 주제(테마)를 더욱 풍부하게 만들었습니다. 이제 여러분은 WordPress 테마 개발의 핵심 과정을 거쳤습니다. 테마를 개발할 때 중요한 것은 모듈화된 사고방식입니다: 페이지 헤더, 페이지 푸터와 같이 반복적으로 사용되는 부분들을 별도의 파일로 분리하는 것입니다.functions.php중앙 집중식 관리 기능을 활용하고, WordPress의 템플릿 계층 구조 규칙을 따라 콘텐츠 표시 로직을 구성하세요. 이러한 기본 지식을 숙지하면 개성화된 웹사이트를 만드는 데 필요한 기반이 마련됩니다. 이후에는 플러그인 영역, 사용자 정의 글 유형, 테마 커스터마이저 API 등 더 고급된 기능들을 탐색하며 WordPress 개발 기술을 지속적으로 향상시킬 수 있습니다.
자주 묻는 질문
주제를 수정한 후에 웹페이지가 즉시 업데이트되지 않으면 어떻게 해야 할까요?
이런 문제는 대부분 브라우저 캐시나 WordPress의 캐싱 메커니즘 때문에 발생합니다. 먼저, 브라우저에서 Ctrl+F5(또는 Cmd+Shift+R)를 눌러 강제로 새로고침해 보세요. 문제가 여전히 해결되지 않는다면, 캐싱 플러그인이나 서버 측 캐시를 사용하고 있는지 확인하고 모든 캐시를 삭제해 보세요. CSS 및 JS 파일의 경우에는…wp_enqueue_style그리고wp_enqueue_script함수 내에서 버전 번호 매개변수에 동적인 값을 설정할 수 있습니다 (예:time()개발 중에는 캐싱을 피해야 하지만, 서비스를 온라인으로 배포하기 전에는 버전 번호를 고정시켜야 합니다.
제 주제가 백엔드에서 표시되지 않는 이유는 무엇인가요?
먼저, 주제 폴더가 올바른 경로에 위치해 있는지 확인해 주세요.wp-content/themes/두번째로, 확인하십시오.style.css파일 상단의 주석 블록 형식은 완전히 올바르며, 특히 “Theme Name:”이라는 줄은 반드시 포함되어야 합니다. 마지막으로, 테마 폴더 및 그 내부 파일의 권한 설정이 올바른지 확인하고, 웹 서버(예: Apache)가 이 파일들을 읽을 수 있는 권한을 가지고 있는지 확인하십시오.
내 테마에 사이드바를 어떻게 추가하나요?
사이드바를 추가하는 과정은 두 단계로 나뉩니다. 먼저,functions.php중국에서 사용하세요.register_sidebar()이 함수는 하나 이상의 툴바 영역을 등록합니다. 그런 다음, 사이드바를 표시하고자 하는 템플릿 파일에서 해당 툴바 영역을 사용할 수 있습니다.sidebar.php이 게임에서는 In this game, you usedynamic_sidebar()함수를 사용하여 그것을 호출해야 합니다. 또한, 주 템플릿 파일(예: main_template.html)에서도 해당 함수를 사용해야 합니다.index.php)에서 사용됩니다.get_sidebar()이제 사이드바 템플릿을 도입해 보겠습니다.
테마를 개발할 때, 플러그인과의 호환성을 어떻게 보장할 수 있을까요?
WordPress의 코딩 표준을 준수하는 것은 호환성을 보장하는 기본입니다. 플러그인에 의해 추가될 수 있는 내용에 대해서는, 사용 중인 테마가 이러한 내용을 적절하게 처리할 수 있도록 해야 합니다.wp_head()그리고wp_footer()함수들은 많은 플러그인들이 필요한 코드(예: 통계 코드, CSS/JS)를 삽입하기 위해 이 두 개의 후크(hook)에 의존하기 때문입니다. 또한, 기사 내용을 출력할 때도 항상 이 후크들을 사용합니다.the_content()데이터베이스에 직접 접근하는 대신, 이 함수는 플러그인을 통해 “the_content” 필터를 사용하여 적용된 모든 변경 사항을 적용합니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어