워드프레스 테마 개발을 위한 최종 가이드: 전문 웹사이트를 0부터 만들기

WordPress 테마를 개발하는 것은 PHP, HTML, CSS, JavaScript를 배우는 과정일 뿐만 아니라, WordPress의 핵심 아키텍처를 이해하는 데에도 매우 좋은 방법입니다. 서브테마나 페이지 빌더를 사용하는 것과는 달리, 처음부터 테마를 직접 만들면 웹사이트에 대한 완전한 제어권을 가질 수 있으며, 독특한 디자인과 기능을 구현할 수 있습니다. 이 가이드는 전문가 수준의 WordPress 테마를 만드는 전 과정을 단계별로 안내해 드립니다.

개발 환경 및 기본 준비 사항

첫 번째 코드 줄을 작성하기 전에, 효율적인 로컬 개발 환경을 구축하는 것이 매우 중요합니다. 이를 통해 온라인 웹사이트에 영향을 주지 않고 테스트와 디버깅을 수행할 수 있습니다.

로컬 개발 환경 설정

Local by Flywheel, MAMP, XAMPP와 같은 도구를 사용하는 것을 추천합니다. 이러한 도구들을 사용하면 PHP, MySQL, 웹 서버를 한 번에 설치할 수 있습니다. WordPress를 사용하기 위해서는 환경이 최소한 다음과 같은 요구 사항을 충족해야 합니다: PHP 7.4 이상 버전, 그리고 MySQL 5.6 이상 버전이 필요합니다.

추천 읽기 WordPress 테마 개발의 궁극적인 가이드: 제로에서 시작하여 맞춤형 웹사이트 구축까지 마스터하기。

주제 파일 구조 계획 (Theme File Structure Planning)

표준적인 WordPress 테마는 하나의 폴더로 시작하며, 이 폴더 내에는 특정한 핵심 파일들이 포함되어 있어야 합니다. 먼저, 여러분의 WordPress 설치 디렉터리 내에서…wp-content/themes폴더 안에서 새로운 폴더를 만들어 보세요, 예를 들어…my-custom-theme이 폴더 내에는 적어도 다음 두 개의 파일을 생성해야 합니다:

UltaHost의 WordPress 호스팅 서비스

30일 환불 보장, 무제한 대역폭 및 데이터베이스 이용, 무료 DDoS 보호 서비스 제공. 3년 구매 시 50% 용량이 할인됩니다.

액세스 페이지

1. style.css이것은 테마의 스타일시트입니다. 파일 헤더에 포함된 주석에는 테마에 대한 모든 메타정보가 담겨 있으며, 이 정보는 WordPress가 특정 테마를 인식하는 데 중요한 역할을 합니다.
2. index.php이 파일은 주제의 메인 템플릿 파일로, 모든 페이지의 기본 복구(리디렉션) 템플릿으로 사용됩니다.

기본적인 테마 파일 구조는 다음과 같습니다:

my-custom-theme/
├── style.css          // 主题样式与信息
├── index.php          // 主模板文件
├── functions.php      // 主题功能文件
├── header.php         // 头部模板
├── footer.php         // 底部模板
└── assets/            // 静态资源目录
    ├── css/
    ├── js/
    └── images/

Core template files and theme information

WordPress는 템플릿 계층 시스템을 사용하여 다양한 유형의 요청에 어떤 PHP 파일을 사용할지 결정합니다. 이러한 핵심 템플릿들을 이해하고 만드는 것은 테마 개발의 기초입니다.

Theme Styles and Metadata Definition

style.css파일 상단의 주석 블록은 테마의 “신분증”과 같은 역할을 합니다. WordPress는 이러한 정보를 읽어서 백엔드에서 해당 테마를 올바르게 표시합니다. 다음은 가장 기본적인 예시입니다:

추천 읽기 WordPress 테마 개발 완전 가이드: 제로에서 시작하여 사용자 정의 웹사이트 구축하기。

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://example.com
Description: 一个从零开始构建的专业WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

그중에서,Text Domain국제화를 위해 사용되며, 반드시 주제 폴더의 이름과 일치해야 합니다.

기본 템플릿 파일을 생성합니다.

index.php이 파일은 귀하의 주제와 가장 관련이 있는 파일로, 더 구체적인 템플릿이 없을 경우 이 파일이 사용됩니다. 가장 간단한 예시를 들어보겠습니다…index.php다른 템플릿 부분에 대한 호출을 포함할 수 있습니다.

header.php그리고footer.php이 파일들은 각각 모든 페이지의 공통적인 상단 및 하단 콘텐츠를 저장하는 데 사용됩니다.index.php중에서, 이렇게 그것들을 도입할 수 있습니다:

호스팅닷컴 공유 호스팅

AMD EPYC CPU, NVMe SSD 스토리지 및 LiteSpeed를 통한 고성능, 연중무휴 24시간 전문가 사내 지원, SSL, 무차별 공격, 멀웨어 및 DDoS 보호를 포함한 고급 보안 조치, 최대 73%의 비용 절감.

액세스 페이지

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环内容
        endwhile;
    else :
        // 没有找到内容
    endif;
    ?>
</main>

<?php get_footer(); ?>

functionget_header()그리고get_footer()동일한 이름의 템플릿 파일이 자동으로 로드됩니다.

주제 기능과 핵심 기능의 통합 (Theme Features and Core Integration)

functions.php이 파일은 당신의 프로젝트 주제인 “뇌(Brain)”와 관련된 내용을 담고 있습니다. 이 파일을 사용하여 새로운 기능을 추가하거나, 메뉴와 사이드바를 설정하며, 스크립트와 스타일을 도입할 수 있습니다.

스크립트와 스타일시트를 가져오기

최상의 관행을 따르고 충돌을 피하기 위해서는 WordPress가 제공하는 훅(hook)을 사용하여 CSS 및 JavaScript 파일을 올바르게 추가해야 합니다. 이는 일반적으로…functions.php중국에서 사용하세요.wp_enqueue_scripts후크를 사용하여 작업을 완료하세요.

추천 읽기 입문부터 전문가 수준까지: 프로페셔널한 WordPress 테마를 제작하는 완벽한 개발 가이드。

function my_theme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );

// 引入自定义CSS
    wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0.0' );

// 引入JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

등록된 주제 기능이 지원됩니다.

WordPress의 많은 기능들은 테마 설정에서 해당 기능을 명시적으로 지원하도록 설정해야만 사용할 수 있습니다. 여기에는 글의 특별 이미지, 사용자 정의 로고, 메뉴 위치, 글의 서식 등이 포함됩니다.

function my_theme_setup() {
    // 让主题支持翻译
    load_theme_textdomain( 'my-custom-theme', get_template_directory() . '/languages' );

// 自动添加<title>标签
    add_theme_support( 'title-tag' );

// 启用文章特色图像
    add_theme_support( 'post-thumbnails' );

// 注册一个主菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
    ) );

// 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

템플릿 계층 및 고급 템플릿

주제가 점점 더 완성되면서, 다양한 유형의 페이지에 맞는 보다 구체적인 템플릿을 만들어야 합니다. 이를 통해 더 정확하고 일관된 레이아웃과 디자인을 제공할 수 있습니다.

InterServer 공유 호스팅

공유 호스팅 월 $2.50 USD, 첫 달 $0.1 USD 프로모션 코드 tryinterserver, 461개 클라우드 앱 스크립트, 원클릭 설치.

액세스 페이지

Create single article and page templates.

single.php이것은 단일 블로그 글을 표시하는 데 사용됩니다.page.php독립적인 페이지를 표시하는 데 사용됩니다. 여기서 기반으로 할 수 있는 요소들이 있습니다.index.php그것들을 생성하고, 기사 발행 날짜, 작성자, 분류와 같은 더 구체적인 정보를 추가하세요.

아카이브 및 검색 페이지를 구축합니다.

archive.php분류, 태그, 작성자 또는 날짜별 아카이브 목록을 표시하는 데 사용됩니다.search.php이는 검색 결과를 표시하는 데 사용됩니다. 이러한 템플릿에서는 조건 태그와 같은 도구들을 사용할 수 있습니다.is_category()또는is_search()콘텐츠를 더욱 맞춤화하기 위해…

커스텀 페이지 템플릿을 구현하는 방법

WordPress를 사용하면 모든 페이지에서 사용할 수 있는 사용자 정의 템플릿을 만들 수 있습니다. 템플릿 파일의 상단에 특정 주석 블록을 추가하기만 하면 됩니다. 예를 들어, ‘my_custom_template’이라는 이름의 템플릿을 만들려면 다음과 같이 하세요:template-fullwidth.php의 파일:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽页面模板。
 */
get_header();
?>
<!-- 你的全宽页面HTML结构 -->
<?php
get_footer();

페이지를 생성한 후, WordPress 관리자 페이지에서 해당 페이지를 편집할 때 “페이지 설정” 메뉴에서 “전체 화면 너비 페이지” 템플릿을 선택할 수 있습니다.

요약

환경 구축, 파일 구조 계획부터 핵심 코드 작성에 이르기까지…style.css그리고index.php그리고 나서는…functions.php강력한 기능들을 통합한 후, 템플릿 계층 구조를 활용하여 전문적인 페이지 템플릿을 만드는 것이 바로 WordPress 테마를 구축하는 전체 과정입니다. 이 과정을 통해 여러분의 전체 스택 개발 기술이 향상될 뿐만 아니라, WordPress의 유연하고 강력한 아키텍처에 대한 이해도 더 깊어질 것입니다. 테마를 개발할 때는 항상 WordPress의 코딩 표준과 모범 사례를 준수하는 것을 잊지 마세요. 이를 통해 여러분의 테마가 안전하고 효율적이며 유지보수가 용이해질 것입니다.

자주 묻는 질문

WordPress 테마를 개발하려면 어떤 프로그래밍 언어들을 숙달해야 할까요?

완전한 기능을 갖춘 WordPress 테마를 개발하려면 페이지 구조와 스타일을 만들기 위한 HTML과 CSS, 논리 처리 및 WordPress 코어와의 상호작용을 위한 PHP, 그리고 프론트엔드 상호작용 효과를 구현하기 위한 기본적인 JavaScript를 숙달해야 합니다. MySQL에 대한 기본적인 이해도 데이터 호출을 이해하는 데 도움이 됩니다.

主题的functions.php文件有什么作用？

functions.php파일은 테마의 기능적 핵심입니다. 이 파일을 사용하여 테마의 기능을 추가하거나 수정할 수 있습니다. 예를 들어, 네비게이션 메뉴나 사이드바(툴바 영역)를 등록하거나, CSS 및 JavaScript 파일을 가져오거나, 테마가 지원하는 기능들(예: 글의 썸네일, 사용자 정의 로고 등)을 설정하거나, 다양한 사용자 정의 함수와 후크 콜백을 정의할 수 있습니다. 이 파일은 테마가 초기화될 때 자동으로 로드됩니다.

내 테마를 다국어(국제화)로 지원하려면 어떻게 해야 하나요?

주제를 다국어로 지원하려면 주로 두 단계가 필요합니다. 첫째, 코드 내에서 번역이 필요한 모든 문자열에 WordPress의 번역 함수를 사용해야 합니다.__()또는_e()그리고 다음과 같이 지정합니다:style.css먼저, 중에서 정의된 ‘Text Domain’을 사용해야 합니다. 그 다음에는 Poedit와 같은 도구를 사용하여 테마 파일을 스캔하여 필요한 데이터를 생성합니다..pot템플릿 파일을 번역한 다음, 각 언어에 맞는 파일을 생성하세요..po그리고.mo컴파일된 파일을 생성한 후, 해당 파일을 테마 폴더에 저장하세요./languages/카테고리 아래에.

커스텀 페이지 템플릿과 일반 페이지 템플릿(page.php)의 차이점은 무엇인가요?

일반 페이지 템플릿page.php이것은 모든 페이지에 사용되는 기본 템플릿입니다. 반면에 사용자 정의 페이지 템플릿은 특별한 종류의 템플릿 파일로, 파일 상단의 주석 블록을 통해 정의되며, 개별 페이지를 편집할 때 사용자가 직접 선택할 수 있습니다. 사용자 정의 템플릿은 더 큰 유연성을 제공하여 연락처 양식, 전체 화면 너비의 레이아웃, 포트폴리오와 같은 특정 용도의 페이지에 맞게 완전히 다른 레이아웃을 만들 수 있게 해주며, 이를 위해 다른 템플릿을 수정할 필요가 없습니다.page.php또는 여러 페이지 파일을 생성할 수도 있습니다.