WordPress 테마는 웹사이트의 외관과 기능을 결정하는 핵심 요소입니다. 기성 테마를 사용하는 것과는 달리, 테마 개발 기술을 익히면 웹사이트 디자인의 모든 세부 사항을 자유자재로 제어할 수 있으며, 독특하고 성능이 뛰어나며 비즈니스 요구사항에 완벽하게 맞는 웹사이트를 만들 수 있습니다. 이 가이드는 가장 기본적인 환경 설정부터 시작하여 점차 고급 기능 개발로 나아가, 최종적으로는 완전한 기능을 갖춘 맞춤형 테마를 독립적으로 제작하는 방법을 안내합니다.
개발 환경 및 인프라 구축
첫 번째 코드 줄을 작성하기 전에, 효율적인 로컬 개발 환경이 필수적입니다. Local by Flywheel, XAMPP, MAMP와 같은 도구를 사용하여 PHP, MySQL, Apache/Nginx가 포함된 로컬 서버를 빠르게 설정하는 것을 추천합니다.
테마를 생성하기 위해 필요한 파일들
WordPress 테마의 가장 기본적인 파일 구조는 두 개의 핵심 파일로 시작됩니다. 첫 번째 파일은 스타일시트 파일입니다. style.css이 파일은 테마 스타일을 정의하는 데 사용되는 것뿐만 아니라, 파일 헤더에 포함된 주석들이 WordPress가 테마를 인식하는 데 필수적인 “신분증” 역할을 합니다. 두 번째 파일은 핵심 템플릿 파일입니다. index.php이 파일은 주제의 기본 시작점(즉, 기본 템플릿 파일)입니다. 더 구체적인 템플릿 파일이 없을 경우, WordPress는 이 파일을 사용하여 페이지를 렌더링합니다.
추천 읽기 WordPress 테마 개발의 궁극적인 가이드: 제로에서 시작하여 사용자 정의 템플릿을 구축하는 방법。
한 가지 전형적인 예는… style.css 파일 헤더의 예시는 다음과 같습니다:
/*
Theme Name: 我的第一个自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://yourwebsite.com
Description: 这是一个用于学习 WordPress 主题开发的自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/템플릿 계층 구조 이해
WordPress는 다양한 유형의 요청에 어떤 템플릿 파일을 사용할지 결정하기 위해 정교한 템플릿 계층 시스템을 사용합니다. 예를 들어, 블로그 글을 조회할 때 WordPress는 순서에 따라 적절한 템플릿을 찾아서 사용합니다. single-post.php、single.php마지막으로… index.php이러한 계층 구조(홈페이지, 기사 페이지, 개별 페이지, 카테고리 아카이브 페이지 등에 해당하는 템플릿 파일)를 이해하는 것은 효율적인 개발의 핵심입니다. 이를 통해 다양한 콘텐츠 유형에 맞게 특화된 레이아웃을 생성할 수 있습니다.
핵심 템플릿 파일 및 테마 루프
이 주제의 기능은 주로 일련의 PHP 템플릿 파일을 통해 구현됩니다. 각 파일은 웹사이트의 특정 부분을 담당합니다.
웹사이트의 헤더와 푸터를 구성하는 것입니다.
각 페이지에서 공통적으로 사용되는 코드를 모듈화하는 것은 전문적인 개발의 첫 번째 단계입니다.header.php 파일에는 일반적으로 문서 유형을 나타내는 선언이 포함되어 있습니다. 지역(CSS, JS 파일을 로드하고 메타 태그를 설정하는 곳)과 웹사이트 상단의 공용 영역(로고 및 메인 네비게이션 등)을 구분하여 사용할 수 있습니다. get_header() 이 함수는 어떤 템플릿에서든 사용될 수 있습니다.
마찬가지로,footer.php 이 파일에는 웹사이트 하단에 표시되는 공통 콘텐츠(예: 저작권 정보, 하단 메뉴)와 페이지의 끝 부분에 관한 정보가 포함되어 있습니다. 、 태그, 통해 get_footer() 함수 소개.
추천 읽기 WordPress 테마 개발 완전 가이드: 제로에서 프로페셔널 웹사이트 테마를 만드는 방법。
워드프레스 메인 루프를 마스터하세요.
주循环(The Loop)은 WordPress 테마의 핵심 부분으로, 데이터베이스에서 글의 내용을 검색하여 화면에 표시하는 역할을 합니다. 그 기본 구조는 다음과 같습니다:
만일 게시물이 있다면 : while ( have_posts() ) : the_post(); ?>
<h2></h2>
<div class="entry-content">
</div>
<p><?php _e( '抱歉，没有找到任何内容。', 'my-custom-theme' ); ?></p>루프 내에서 여러 템플릿 태그를 사용하여 게시물 정보를 출력할 수 있습니다. 예를 들면, the_title() 출력 타이틀,the_content() 전체 내용을 출력하십시오.the_excerpt() 출력 요약,the_permalink() 기사 링크를 얻으려면…the_post_thumbnail() 출력 특징 이미지와 같은 것들.
주제 기능 및 사용자 정의 기능 개발 (Theme Features and Custom Function Development)
우수한 테마는 아름다운 인터페이스뿐만 아니라 강력한 백엔드 구성 기능도 제공해야 합니다.
테마의 핵심 기능을 활성화합니다.
통과합니다. add_theme_support() 함수를 통해 사용자 정의 테마에서 지원할 수 있는 WordPress 코어 기능들을 명시할 수 있습니다. 이는 일반적으로 테마 설정 파일이나 코드 내에서 이루어집니다. functions.php 파일 내에서 설정이 완료되었습니다. 예를 들어, 기사에 특별한 이미지를 추가하거나 사용자 정의 로고를 적용하는 코드는 다음과 같습니다:
function my_theme_setup() {
add_theme_support( 'post-thumbnails' );
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
) );
add_theme_support( 'title-tag' ); // 让 WordPress 管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );메뉴와 사이드바 영역을 생성합니다.
WordPress는 사용자가 관리자 페이지를 통해 네비게이션 메뉴를 시각적으로 쉽게 관리할 수 있도록 해줍니다. 당신은… functions.php 중국에서 사용하세요. register_nav_menus() 함수를 사용하여 메뉴 위치를 등록합니다. 예를 들어, “주 메뉴”와 “하단 메뉴”와 같은 위치들이죠. 그런 다음, 템플릿 파일에서 이 정보를 사용합니다. header.php)에서 사용됩니다. wp_nav_menu() 함수를 사용하여 그것을 표시하세요.
사이드바(또는 “툴바”라고도 함)도 등록이 필요합니다. 사용해 보세요. register_sidebar() 함수 정의 영역이 설정되면, 사용자는 “외관 -> 도구 모음” 설정을 통해 다양한 도구들을 이러한 영역에 드래그 앤 드롭할 수 있습니다. 템플릿에서는 이러한 기능을 활용하여… dynamic_sidebar() 이 함수는 도구 모음 영역의 내용을 출력합니다.
추천 읽기 0에서 1까지: WordPress 테마 개발 전체 프로세스 가이드 및 실제 기술。
스크립트와 스타일시트를 가져오기
올바른 리소스의引入 방식은 매우 중요합니다. 절대로 템플릿 파일에 리소스 정보를 직접 하드코딩해서는 안 됩니다. 또는 태그. CSS 및 JavaScript 파일은 반드시 적절한 방식으로 웹 페이지에 포함되어야 합니다. wp_enqueue_scripts 후크를 사용하여 순서대로 로드합니다. 이를 통해 의존 관계가 올바르게 처리되고 다른 플러그인과의 충돌을 방지할 수 있습니다.
function my_theme_scripts() {
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );고급 주제 기능 및 사용자 정의
기본 기능이 완성되면, 보다 고급된 기술을 사용하여 테마의 전문성과 유연성을 향상시킬 수 있습니다.
커스텀 페이지 템플릿을 개발하는 것입니다.
특정 페이지에 독특한 레이아웃을 적용할 수 있습니다. 템플릿 파일의 상단에 특정 주석을 추가하기만 하면, WordPress 관리자에서 페이지를 생성하거나 편집할 때 해당 템플릿을 선택할 수 있는 옵션으로 인식합니다. 예를 들어, “전체 화면 너비 페이지”(Full-width page)라는 이름의 템플릿을 만들려면 다음과 같이 하세요:
<?php
/**
* Template Name: 全宽页面
* Description: 一个没有侧边栏的全宽度页面模板
*/
get_header(); ?>
// ... 全宽布局的代码 ...
<?php get_footer(); ?>기사의 형식과 사용자 정의 기사 유형을 구현하기
“포스트 형식”(Post Formats)인 “일지”, “갤러리”, “동영상” 등은 다양한 유형의 블로그 글에 차별화된 스타일을 제공할 수 있습니다. add_theme_support( ‘post-formats’, array( ‘aside’, ‘gallery’ ) ) 활성화하려면 해당 기능을 켜고, 템플릿 내에서 이를 적절히 사용해야 합니다. get_post_format() 조건 태그를 사용하여 스타일을 제어합니다.
더 복잡한 콘텐츠, 예를 들어 “제품”이나 “작품집”의 경우, 사용자 정의 포스트 유형(Custom Post Types)을 생성해야 합니다. 이는 일반적으로 다음과 같은 방법으로 이루어집니다: register_post_type() 함수는 플러그인이나 테마 내에서 사용됩니다. functions.php 이 작업이 완료되면, 완전히 새로운 콘텐츠 관리 모듈을 WordPress 관리자 페이지에 추가할 수 있습니다.
集成自定义器 API
WordPress의 커스터마이저(Customizer)는 테마 옵션을 실시간으로 미리 볼 수 있는 인터페이스를 제공합니다. 커스터마이저 API를 사용하면 색상 선택기, 파일 업로드 기능, 드롭다운 메뉴와 같은 설정 옵션을 테마에 추가할 수 있어, 사용자가 코드를 수정하지 않고도 웹사이트의 외관을 쉽게 변경할 수 있습니다. 핵심은 바로 이러한 기능들을 통해 사용자 경험을 향상시키는 데 있습니다. $wp_customize->add_setting() 그리고 $wp_customize->add_control() 방법.
요약
WordPress 테마 개발은 구조부터 스타일, 기본 기능부터 고급 커스터마이징에 이르기까지 체계적인 과정입니다. 환경 설정과 기본 파일 생성부터 시작하여, 점차 템플릿 구조, 메인 루프, 핵심 기능 지원에 이르기까지 심화적으로 학습합니다. 그 후, 메뉴 등록, 위젯 영역의 활용, 그리고 리소스의 올바른 적용을 통해 테마의 사용성을 향상시킵니다. 마지막으로, 사용자 정의 페이지 템플릿, 글 형식, 사용자 정의 글 유형, 그리고 커스터마이저 API를 활용하여 기능이 풍부하고 유연성이 뛰어나며 사용자 경험이 매우 좋은 전문가급 테마를 만들 수 있습니다. 지속적인 실습과 공식 문서 및 우수한 코드 예제 참조가 이 기술을 마스터하는 가장 좋은 방법입니다.
자주 묻는 질문
테마 개발을 위해 반드시 PHP를 숙달해야 하나요?
네, PHP는 WordPress의 핵심 프로그래밍 언어이며, 테마의 템플릿 파일은 주로 PHP 코드로 구성되어 있습니다. 테마 코드를 이해하고 작성하려면 PHP의 기본 문법, 함수, 조건문, 반복문을 숙달해야 합니다. HTML과 CSS는 프론트엔드 인터페이스를 구축하는 데 필수적인 기술이며, JavaScript는 상호작용 기능을 구현하는 데 사용됩니다.
제 주제 수정 내용이 업데이트 이후에 사라졌는데, 왜 그럴까요?
이는 사용 중인 제3자 테마 파일을 직접 수정했기 때문입니다. 해당 테마의 새 버전이 출시되면 모든 수정 사항이 삭제됩니다. 올바른 방법은 자식 테마(Child Theme)를 만드는 것입니다. 자식 테마에는 사용자가 직접 추가한 설정과 수정 사항만 포함되므로, 테마가 업데이트되어도 사용자가 만든 내용은 그대로 유지됩니다. style.css、functions.php 템플릿 파일과 함께 사용하면, 자식 테마는 상위 테마의 모든 기능을 상속받으며, 상위 테마가 업데이트되더라도 사용자가 정의한 콘텐츠는 그대로 유지됩니다.
functions.php 파일은 웹사이트의 기능들을 관리하는 데 사용되는 파일입니다. 이 파일에는 웹사이트에서 사용되는 다양한 함수들이 정의되어 있으며, 이러한 함수들은 다른 파일들에서 호출될 수 있습니다. 함수는 특정 작업을 수행하는 코드 블록으로, 코드를 모듈화하고 재사용할 수 있게 해줍니다. 예를 들어, 회원 가입, 로그인
functions.php 이 파일은 해당 테마의 “기능 중심” 역할을 합니다. 이 파일은 반드시 호출되어야 하는 함수 라이브러리가 아니며, 테마가 초기화될 때 자동으로 WordPress에 의해 로드됩니다. 여기에 추가하는 코드(예: 테마 기능 활성화, 메뉴 등록, 스크립트 실행, 사용자 정의 함수 정의 등)는 전역적으로 적용되어 테마 및 WordPress의 핵심 동작을 확장하거나 수정하는 데 사용됩니다.
내 테마를 다국어로 지원하려면 어떻게 해야 하나요?
테마를 다국어로 지원하도록 하는 것(국제화 및 현지화)은 좋은 관행입니다. 이를 위해 두 가지를 잘 해야 합니다: 첫째, 테마 내에서 번역이 필요한 모든 문자열에 WordPress의 번역 기능을 사용해야 합니다. __()、_e())를 포장하고, 각각에 대해 지정된 위치로 배송하도록 합니다. style.css 먼저, 중에서 정의된 텍스트 도메인(Text Domain)을 참조합니다. 그 다음, Poedit와 같은 도구를 사용하여 코드 내의 번역 문자열을 기반으로 번역 결과를 생성합니다. .pot 템플릿 파일을 사용하여 다양한 언어로 콘텐츠를 생성할 수 있습니다. .po 그리고 .mo 변환할 파일을 업로드해 주세요. 파일이 업로드되면 자동으로 번역이 시작됩니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어