개발 환경 구축 및 핵심 파일 작성하기
코드를 작성하기 시작하기 전에, 안정적이고 효율적인 개발 환경을 갖추는 것이 매우 중요합니다. Local by Flywheel, XAMPP 또는 MAMP와 같은 로컬 개발 환경 소프트웨어를 사용하는 것을 추천합니다. 이러한 소프트웨어들을 사용하면 개인 컴퓨터에서 WordPress에 필요한 PHP, MySQL, 서버 환경을 빠르게 설정할 수 있습니다. 또한, Visual Studio Code와 같은 적합한 코드 편집기를 선택하고, PHP 인텔리센스 및 WordPress 코드 스니펫과 같은 확장 기능을 설치하면 개발 효율성이 크게 향상됩니다.
워드프레스 테마는 기본적으로 위치에 있는 것입니다. /wp-content/themes/ 디렉터리 내에는 특정 기능을 가진 PHP 템플릿 파일과 스타일시트 파일들이 포함된 폴더들이 있습니다. 가장 기본적인 테마라도 최소한 두 개의 파일이 필요합니다.
첫 번째는 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
*/두 번째는… index.php이 파일은 테마의 기본 템플릿 파일이며, WordPress가 더 구체적인 템플릿 파일을 찾을 수 없을 때 자동으로 사용되는 파일입니다. 처음에는 간단한 HTML 코드만 포함되어 있더라도, 이 파일 덕분에 테마가 WordPress에 의해 인식되고 활성화될 수 있습니다.
템플릿의 계층 구조를 이해하고 핵심 템플릿을 만드는 방법
WordPress는 다양한 유형의 페이지에 어떤 템플릿 파일을 사용할지 결정하기 위해 정교한 “템플릿 계층 구조”를 사용합니다. 이러한 규칙은 일종의 우선순위 시스템과 같습니다. 예를 들어, 특정 글을 방문할 때 WordPress는 먼저 해당 글에 맞는 템플릿을 찾습니다. single-post.php만약 없다면 찾아보세요. single.php마지막으로, 다시 되돌아가서 index.php이러한 규칙을 이해하는 것은 효율적인 개발의 핵심입니다. 이를 통해 홈페이지, 기사 페이지, 개별 페이지, 카테고리 아카이브 등에 맞춤화된 템플릿을 정확하게 생성할 수 있습니다.
다음으로, 몇 가지 핵심 템플릿을 만드는 것부터 시작하겠습니다. 첫 번째는 홈페이지 템플릿으로, 일반적으로 ‘home.html’이라는 이름으로 불립니다. front-page.php이 파일이 존재하는 경우, 사이트의 정적 홈페이지로 우선 사용됩니다. 기본적인 홈페이지 템플릿에는 최신 글 목록을 출력하기 위한 반복문이 포함되어 있습니다.
기사 페이지의 템플릿은 보통 다음과 같은 구조를 사용합니다: single.php이 템플릿의 핵심은 WordPress의 메인 루프(The Loop)를 사용하여 개별 글의 전체 내용, 제목, 메타데이터(저자, 게시일 등), 그리고 댓글 섹션을 표시하는 것입니다.
페이지 템플릿은 “회사 소개”, “연락처”와 같은 개별 페이지를 표시하는 데 사용됩니다. 해당하는 파일은… page.php그 구조는 기사 페이지와 비슷하지만, 일반적으로 분류나 태그와 같은 기사에 고유한 메타데이터를 포함하지 않습니다.
추천 읽기 궁극의 가이드: 강력하고 유연한 워드프레스 테마를 개발하는 방법。
아카이브 페이지 템플릿 (예: archive.php이 요소는 분류, 태그, 작가 또는 날짜별로 정렬된 기사 목록을 표시하는 데 사용됩니다. 여러 기사의 요약이나 제목을 순환하여 나열하는 방식으로 작동합니다.
함수와 훅을 사용하여 테마 기능을 확장하기
순수한 템플릿 파일은 콘텐츠의 표시만을 제어할 수 있습니다. 테마에 동적 기능을 추가하고 WordPress 코어와 깊이 통합하려면 WordPress가 제공하는 다양한 함수와 훅(Hooks)을 사용해야 합니다. 먼저, 테마의 루트 디렉터리에 `functions.php`라는 파일을 생성해야 합니다. functions.php 이 파일은 템플릿이 아니라 테마의 “기능 플러그인”으로, 모든 사용자 정의 PHP 코드를 저장하는 데 사용됩니다.
기본적이면서도 매우 중요한 작업은 ‘사용’하는 것입니다. add_theme_support() 이 함수는 테마가 지원하는 기능들을 선언하는 데 사용됩니다. 예를 들어, 기사의 썸네일(특징 이미지)을 표시하거나 사용자 정의 메뉴 기능을 활성화하는 것은 대부분의 현대적인 테마에서 기본적으로 제공되는 기능입니다.
function my_first_theme_setup() {
// 支持文章特色图像
add_theme_support('post-thumbnails');
// 支持自定义菜单
add_theme_support('menus');
// 支持在文章编辑器中输出的HTML5标签
add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption'));
// 动态生成<title>标签
add_theme_support('title-tag');
}
add_action('after_setup_theme', 'my_first_theme_setup');위 코드에서,add_action() 이것은 “후크(hook)”의 사용 예시입니다. 이 후크를 통해 우리가 직접 정의한 함수를 호출할 수 있습니다. my_first_theme_setup WordPress 코어에 마운트된 after_setup_theme 이 액션 포인트에 주목해 주세요. 훅(Hook)에는 두 가지 종류가 있습니다: 액션(Action)과 필터(Filter)입니다. 액션은 특정 시점에 코드를 실행하는 데 사용되며, 위의 예시에서처럼 작동합니다; 필터는 WordPress가 데이터를 처리하는 과정에서 생성된 데이터를 수정하는 데 사용됩니다.
또 다른 중요한 과제는 다음과 같이 사용하는 것입니다: wp_enqueue_style() 그리고 wp_enqueue_script() 함수를 사용하여 스타일시트와 JavaScript 파일을 올바르게 로드해야 합니다. 이 작업은 해당 파일들을 적절한 위치에 ‘마운트(mount)’함으로써 이루어져야 합니다. wp_enqueue_scripts 후크를 사용하여 이를 구현하면, 리소스가 순서대로 로드되도록 보장하고 충돌을 방지할 수 있습니다.
function my_first_theme_scripts() {
// 引入主样式表
wp_enqueue_style('main-style', get_stylesheet_uri());
// 引入自定义JavaScript文件
wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');디자인 테마 스타일을 정의하고 반응형 레이아웃을 구현하는 방법
주제의 시각적 표현은 전적으로 CSS에 의해 제어됩니다. 먼저 기본 스타일을 초기화하여 다양한 브라우저에서 일관된 표시를 보장할 수 있습니다. 그런 다음, WordPress가 생성한 HTML 구조를 기반으로 스타일을 작성하세요. WordPress는 대부분의 요소에 대해 특정 CSS 클래스를 제공합니다. .post、.sticky、.widget 등, 이러한 클래스들을 사용하면 요소들을 정확하게 위치시키고 미화할 수 있습니다.
추천 읽기 WordPress 테마 개발 실전 가이드: 제로에서 시작하여 고성능 웹사이트를 구축하는 방법。
현대 웹 개발에서 반응형 디자인은 필수적입니다. 이는 여러분의 테마가 스마트폰에서 데스크톱에 이르기까지 다양한 화면 크기에 잘 맞게 조정될 수 있어야 함을 의미합니다. 반응형 디자인을 구현하는 데에는 주로 CSS 미디어 쿼리가 사용됩니다.
/* 基础移动端样式 */
.container {
width: 100%;
padding: 0 15px;
}
/* 平板设备及以上 */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* 桌面设备 */
@media (min-width: 992px) {
.container {
width: 970px;
}
}CSS를 작성하는 것 외에도, 다음과 같은 방법들을 통해도 작업을 수행할 수 있습니다: header.php 그리고 footer.php 템플릿 파일을 사용하여 웹사이트의 헤더와 푸터 코드를 모듈화하세요. 그런 다음 다른 템플릿에서 이 모듈화된 코드를 재사용하십시오. get_header() 그리고 get_footer() 함수를 사용하여 이들을 호출하면 코드 중복을 크게 줄일 수 있습니다. 사이드바의 경우, 해당 기능을 구현하기 위한 함수를 생성할 수 있습니다. sidebar.php그리고 사용하세요. get_sidebar() `Call it. In the sidebar template, use it.` dynamic_sidebar() 함수와 register_sidebar() 함수들을 결합하면, 백그라운드의 “외관 -> 도구” 섹션에서 동적으로 관리할 수 있는 위젯 영역을 만들 수 있습니다.
요약
WordPress 테마 개발은 템플릿 계층 구조와 같은 핵심 개념을 이해하는 것부터 실제 코딩(템플릿 파일 생성, 함수 훅 사용)에 이르기까지 체계적인 과정입니다. 환경을 설정하고 기본 템플릿 파일을 만드는 것부터 시작하여, 점차적으로 더 복잡한 기능들을 활용하는 단계로 나아갑니다. functions.php 확장 기능을 추가하고, 구조화된 CSS와 모듈화된 템플릿 요소(예: 헤더, 푸터)를 사용하여 아름답고 반응형이며 사용자 친화적인 인터페이스를 만들어보세요. 이러한 기본 기술들을 숙달하면 전문적이고 사용자 정의가 가능한 WordPress 테마를 제작할 수 있게 됩니다. WordPress 공식 문서와 커뮤니티 리소스를 지속적으로 탐색하는 것이 개발 수준을 향상시키는 데 핵심입니다.
자주 묻는 질문
워드프레스 테마를 개발하려면 반드시 PHP를 숙달해야 하나요?
네, PHP를 깊이 이해하는 것은 WordPress 테마 개발을 위한 필수 조건입니다. 모든 WordPress 템플릿 파일이 PHP 파일이기 때문에, WordPress의 핵심 함수를 호출하고 데이터 논리를 처리하며 콘텐츠 출력을 제어하기 위해 PHP 코드를 사용해야 합니다. 기본적인 스타일 수정은 CSS만으로도 가능할 수 있지만, 모든 기능적인 커스터마이징과 템플릿 생성은 PHP 없이는 불가능합니다.
주제에서 언급된 functions.php 파일은 어떤 특별한 역할을 하나요?
functions.php 파일은 테마의 기능적 핵심을 이루며, 테마가 활성화될 때 함께 실행되는 플러그인 역할을 합니다. 여기서는 레시피 등록 위치 설정, 툴바 영역 정의, 테마 관련 옵션 추가, 스크립트 및 스타일의 순차적인 로딩, 사용자 정의 함수 생성 등과 같은 테마 기능을 추가하거나 수정할 수 있습니다. 또한 다양한 액션(Action)과 필터(Filter) 후크를 사용하여 WordPress의 기본 동작을 변경할 수도 있습니다. 이 파일의 코드는 테마가 활성화될 때 자동으로 로드됩니다.
내 테마가 다국어 번역을 지원하도록 하려면 어떻게 해야 하나요?
주제를 다국어로 지원하려면 두 가지를 준비해야 합니다. 첫째, 주제의 설정을 수정하여 다국어를 지원하도록 해야 합니다. style.css 헤더 주석과 모든 텍스트 문자열을 사용하는 템플릿 함수에서는 특정 텍스트 도메인(Text Domain)을 사용해야 합니다. 예를 들어, my-theme모든 번역이 필요한 텍스트는 사용되어야 합니다. __()、_e() WordPress의 함수들을 감싸는 작업을 먼저 수행해야 합니다. 그 다음에는 Poedit와 같은 도구를 사용하여 테마 파일을 스캔하여 필요한 코드를 생성하세요. .pot 템플릿 파일을 사용하면 번역자가 다양한 언어로 콘텐츠를 생성할 수 있습니다. .po 그리고 .mo 컴파일 파일을 생성하세요. 언어 파일들을 테마 폴더에 위치시키세요. /languages/ 디렉터리 안에 두시면 됩니다.
开发过程中如何调试可能出现的错误
개발 단계에서는 WordPress의 디버깅 모드를 활성화하는 것을 강력히 권장합니다. 웹사이트의 루트 디렉터리에 있는 파일들을 확인해 보세요. wp-config.php 파일을 찾아서 다음 코드 줄을 수정하세요:define('WP_DEBUG', true);. 당신은 또한 동시에 여러 기능을 활성화할 수도 있습니다. WP_DEBUG_LOG 오류를 로그 파일에 기록하거나, 해당 기능을 활성화하세요. WP_DEBUG_DISPLAY 페이지에 오류를 표시하면 모든 PHP 경고, 알림, 오류를 시각적으로 확인할 수 있어 코드 디버깅이 훨씬 용이해집니다. 테마를 온라인에 배포하기 전에 반드시 디버깅 모드를 끄는 것을 잊지 마세요.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어