자신만의 것을 처음부터 구축하고 싶다면…WordPress웹사이트를 만들기 위해서는 먼저 그 핵심인 ‘테마’를 이해하는 것이 중요합니다. 테마는 웹사이트의 외관, 레이아웃, 기능, 그리고 사용자 경험을 결정합니다. 기성 테마를 사용하는 것과는 달리, 직접 테마를 개발하면 완전한 제어권을 가질 수 있으며, 더 높은 성능과 독특한 브랜드 이미지를 만들어낼 수 있습니다. 프론트엔드 개발자이든 아니든, 웹사이트를 심층적으로 이해하고 싶다면 특히 중요합니다.PHP동적 렌더링인가요, 아니면…PHP백엔드 개발자가 프론트엔드 기술을 향상시키고 테마 개발을 마스터한다면, 그것은 당신에게 새로운 기회의 문을 열어줄 것입니다.
준비 작업: 로컬 개발 환경 구축
첫 번째 코드 줄을 작성하기 전에, 전문적인 로컬 개발 환경을 사용하면 효율성과 개발 경험을 크게 향상시킬 수 있습니다. 이를 통해 온라인 서버에서 직접 수정하는 것으로 인한 위험을 줄일 수 있습니다.
로컬 개발 환경 설정
먼저, 우리는 로컬 컴퓨터에서 네트워크 서버 환경을 시뮬레이션해야 합니다. 소프트웨어 패키지(예: Apache, Nginx 등)를 사용하는 것을 추천합니다. Local(제공: )WP Engine제작: (Producer)XAMPP 또는 MAMP이러한 도구들은 한 번의 클릭으로 설치됩니다.Apache、MySQL그리고PHP…으로Local예를 들어, 이 제품은 다음과 같은 기능들을 통합하고 있습니다:WordPress원클릭 설치SSL인증서 및 이메일 캡처 기능은 개발자에게 매우 유용합니다.
추천 읽기 WordPress 테마 개발을 처음부터 배우기: 사용자 정의 웹사이트 테마를 구축하는 완전한 가이드。
설치가 완료되면 새로운 것을 생성하세요.WordPress웹사이트. 당신의 웹사이트가PHP버전은 7.4 이상이어야 하며, 데이터베이스 이름, 사용자 이름, 비밀번호도 꼭 기억해 두세요. 이 정보들은 후속 설정 과정에서 필요하게 됩니다.
코드 편집 및 버전 관리
“일을 잘하려면 먼저 도구를 잘 갖춰야 한다.” 강력한 기능을 갖춘 코드 편집기를 사용하는 것을 추천합니다. 예를 들어… Visual Studio Code、PhpStorm 또는 Sublime Text이들은 구문 강조 기능, 코드 힌트, 자동 완성 기능, 그리고 강력한 플러그인 생태계를 제공합니다.
동시에, 버전 관리 시스템을 즉시 사용하기 시작하세요. 가장 추천되는 방법은…Git프로젝트의 루트 디렉터리에서 초기화 파일을 생성함으로써…Git창고를 사용하세요..gitignore불필요한 파일(예: 업로드된 미디어 파일이나 캐시 파일)을 제거함으로써 코드 변경 사항을 안전하게 관리할 수 있으며, 이전 상태로 복원하거나 다른 사람들과 협업하는 것이 더 용이해집니다. 저장소(리포지토리)는 다음과 같은 서비스에 호스팅할 수 있습니다:GitHub、GitLab또는Bitbucket이것은 업계 표준 관행입니다.
파일 구조와 핵심 템플릿을 이해하는 것은 주제를 효과적으로 다루기 위해 매우 중요합니다. 파일 구조는 데이터가 어떻게 조직되어 있는지를 보여주며, 핵심 템플릿은 데이터를 표시하거나 처리하는 데 사용되는 기본 형식입니다. 이를 통해 개발자나 사용자는 정보를 쉽게
한 개의 표준적인…WordPress‘테마’(theme)는 특정 파일들을 포함하는 폴더입니다. 각 파일의 기능을 이해하는 것이 테마를 구축하는 데 있어 핵심적인 기반이 됩니다.
필수로 포함되어야 하는 주제 파일
에 따라서WordPress공식 요구 사항에 따르면, 가장 기본적인 테마는 두 개의 파일만으로 구성되어야 합니다.style.css 그리고 index.php그중에서,style.css스타일시트뿐만 아니라, 특정 테마의 “신분증”과도 같은 역할을 합니다. 이 파일의 헤더에 포함된 주석에는 해당 테마에 대한 메타정보가 담겨 있습니다.
추천 읽기 웹사이트 구축을 위한 완벽한 가이드: 제로에서 온라인 상태로 전환하기까지의 전문적인 프로세스와 핵심 기술 분석。
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/index.php이 파일은 백업 템플릿으로 사용되며, 더 구체적인 템플릿 파일들이 없을 경우에 호출됩니다. 물론, 완성도 높은 테마는 이 두 파일만으로 구성되는 것이 아닙니다.
자주 사용되는 템플릿 파일 및 그 계층 구조
WordPress템플릿 계층 시스템을 사용하여 다양한 유형의 콘텐츠에 어떤 템플릿을 적용할지 결정합니다.PHP템플릿 파일입니다. 이것이 테마 개발의 핵심 개념입니다.
일반적인 템플릿 호출 프로세스는 다음과 같습니다:
1. 단일 기사에 접근할 때는 우선 해당 기능을 사용하세요.single-post.php만약 없다면 사용하세요.single.php마지막으로는…singular.php。
2. 페이지 접속: 우선적으로 사용하기page-{slug}.php또는page-{id}.php만약 없다면 사용하세요.page.php마지막으로는…singular.php。
3. 기사 아카이브 페이지 접속: 우선적으로 사용하기archive-{post-type}.php만약 없다면 사용하세요.archive.php마지막으로는…index.php。
기타 주요 템플릿에는 다음이 포함됩니다:header.php（머리부분,）footer.php(페이지 하단),sidebar.php(사이드바)functions.php(기능 함수 파일) 그리고front-page.php(정적 홈페이지): 이 파일들이 어떻게 작동하는지 이해해보세요.get_header()， get_footer()이러한 함수들이 함께 조합되어 페이지를 구성하는 데 핵심적인 역할을 합니다.
제로에서 주제의 골격을 구축하는 방법
이제, “라는 이름의 프로젝트를 직접 만들어 보겠습니다.“MyFirstTheme”의 주제 골격을 바탕으로 실천을 통해 진정한 지식을 얻는다.”
기본 템플릿 파일을 생성합니다.
In yourWordPress`install_directory`wp-content/themes/아래에서 ‘새로운 파일’이라는 이름의 파일을 생성하세요.my-first-theme해당 폴더를 생성한 후, 다음 파일들을 만들어 주세요:
추천 읽기 현대적인 웹사이트 구축 전체 프로세스: 아키텍처 설계부터 배포 및 운영 유지 보수에 이르는 핵심 기술 및 실습。
1. style.css위에 작성된 헤더 정보를 파일에 쓰세요.
2. index.php이것이 가장 기본적인 템플릿입니다.
Inindex.php먼저, 가장 간단한 버전부터 구축해 보겠습니다.HTML5구조를 설정하고, 헤더(head)와 푸터footer)를 수동으로 추가하세요.
<!DOCTYPE html>
<html no numeric noise key 1005>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1002>
<header>
<h1>내 사용자 지정 테마</h1>
</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>다음 사항에 유의하십시오.wp_head()그리고wp_footer()이 두 개의 ‘후크(hook)’는 플러그인과 테마가 해당 위치에 코드를 삽입할 수 있도록 해주며, 반드시 호출되어야 합니다.
템플릿을 모듈화된 구성 요소로 분해하세요.
위 코드는 모든 내용을 하나의 파일에 담고 있어서 곧 유지보수가 어려워질 것입니다. 다음으로, 모듈화하여 파일들을 분리해 나갈 것입니다.
Createheader.php,将열려면태그 앞에 있는 모든 코드를 다음 위치로 이동시킵니다:
<!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>
<header>
<h1><a href="/ko/</?php echo esc_url( home_url( '/' ) ); ?>">내 사용자 지정 테마</a></h1>
</header>
<main>Createfooter.php이 기능은 곧 종료될 예정입니다.태그 뒤에 있는 모든 코드를 다음 위치로 이동시킵니다:
</main>
<footer>
<p>© 我的网站</p>
</footer>
</body>
</html>그런 다음, 내용을 간결하게 요약하세요.index.php파일:
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
the_title( '<h2>', '</h2>' );
the_content();
endwhile;
else :
_e( '抱歉，没有找到您要的内容。', 'my-first-theme' );
endif;
?>이제 주제 구조가 명확해지고 관리하기 쉬워졌습니다. 여러분은…WordPress백엔드의 “외관(Appearance)” -> “테마(Theme)”에서 해당 항목을 찾아 활성화하세요.
핵심 기능과 사용자 정의 옵션의 통합
기본적인 주제 구조가 완성되었다면, 그에 생명력을 불어넣어야 합니다. 즉, 다음과 같은 방법들을 통해 말이죠:functions.php파일 추가 기능 및 특징.
functions.php 파일을 사용하여 테마를 등록하는 기능이 지원됩니다.
functions.php이 파일은 당신의 주제인 “백엔드(Backend)”와 관련이 있으며, 함수를 정의하거나 기능을 등록하고 필터를 추가하는 데 사용됩니다. 이 파일은 템플릿 파일이 아니지만, 페이지가 로드될 때마다 자동으로 포함됩니다.
그 중에서, 우리는 사용할 수 있습니다. add_theme_support() 이 함수는 특정 주제가 지원하는 기능들을 선언하는 데 사용됩니다. 예를 들어, 기사에 특별한 이미지를 추가하거나, 사용자 정의 로고를 적용하거나, 기사의 서식을 자유롭게 설정하는 기능들을 활성화하는 데 사용될 수 있습니다.
<?php
function my_first_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和评论的RSS feed链接
add_theme_support( 'automatic-feed-links' );
// 启用文章特色图像
add_theme_support( 'post-thumbnails' );
// 启用自定义Logo
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
// 启用HTML5标记支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );스타일시트와 스크립트를 올바르게 도입하는 방법
절대로 템플릿 파일에 하드코딩된 값을 사용하지 마세요. 또는 태그를 사용하여 정적 리소스를 가져오는 올바른 방법은 다음과 같습니다: wp_enqueue_style() 그리고 wp_enqueue_script() 이 함수는 종속성 관리, 버전 제어를 보장하며, 중복된 로딩을 방지합니다.
Infunctions.php중에 다음을 추가하세요:
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-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );네비게이션 메뉴를 추가하세요.
네비게이션 메뉴는 웹사이트의 핵심 구조입니다. 먼저, 다음과 같이 사용하세요: register_nav_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' );그런 다음,header.php의해당 지역 내에서 이 메뉴를 호출하려면…
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
'container' => 'nav',
'container_class'=> 'primary-navigation',
)
);
?>위의 단계를 통해 기본적인 구조, 기능 지원, 그리고 모듈화된 코드를 갖춘 테마를 만들었습니다. 비록 간단해 보이지만, 이미 필요한 요소들이 모두 포함되어 있습니다.WordPress주제 개발의 모든 핵심 개념들.
요약
지역 환경을 설정하는 것부터 첫 번째 템플릿 파일을 작성하는 것까지, 그리고 그것을 통해…functions.php핵심 기능들을 통합하는 과정에서 우리는 많은 경험을 했습니다.WordPress주제가 처음부터 만들어지는 전 과정입니다. 핵심은 템플릿 계층 시스템을 이해하는 데 있습니다. 이 시스템은 다양한 콘텐츠 요청을 각각에 맞는 부분으로 매핑합니다.PHP템플릿 파일입니다. 또한, 모듈화된 사고방식(즉, 시스템을 여러 개의 독립적인 모듈로 분해하는 방식)이 중요합니다.header.php， footer.php등)과 표준화된 개발 방식(스크립트를 올바르게 등록하고 훅 함수를 사용하는 것)은 유지보수가 용이하고 안정적인 테마를 구축하는 데 기반이 됩니다. 이러한 기반을 바탕으로, 사용자 정의된 기사 검색 기능을 개발하거나, 위젯 영역을 만들거나, 다른 시스템과 통합하는 등의 작업을 더욱 깊이 있게 탐구할 수 있습니다.Customizer API또한 사용자 정의 템플릿을 개발하는 것과 같은 고급 주제들을 다루어, 더욱 강력하고 전문적인 웹사이트를 구축할 수 있습니다.
자주 묻는 질문
주제에 사이드바를 어떻게 추가하나요?
InWordPress여기서, 사이드바는 “위젯 영역”(Widget Area)이라고 불립니다. 먼저,functions.php중국에서 사용하세요. register_sidebar() 이 함수는 하나 이상의 위젯 영역을 등록합니다.
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小部件以显示在主侧边栏。', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );그런 다음, 사이드바를 표시하고자 하는 템플릿 파일(예:single.php또는page.php)에서 호출합니다. dynamic_sidebar() 그것을 출력하기 위한 함수입니다.
하위 주제(Sub-Topic)란 무엇이며, 왜 사용해야 하는가?
자주제(subtopic)는 다른 주제(부모 주제라고 함)의 모든 기능과 스타일을 상속받는 주제입니다. 그 핵심 파일은…style.css그 중에서 반드시 통과해야 합니다.Template:헤더 필드는 해당 필드의 상위 주제(또는 범주)를 명시합니다.
자식 테마를 사용하는 가장 큰 장점은 보안성과 지속 가능성입니다. 부모 테마가 업데이트되더라도 자식 테마에 적용한 사용자 정의 변경사항(스타일 변경, 기능 추가, 템플릿 수정 등)은 그대로 유지됩니다. 이는 기존 테마를 개성화하는 표준적이고 권장되는 방법입니다.
functions.php 파일에 오류가 발생하면 어떤 문제가 생길까요?
functions.php파일 내의 구문 오류나 치명적인 오류로 인해 전체 웹사이트가 “화면이 비어 있는 상태로 멈추는” 현상이 발생합니다. 이는 해당 파일이 제대로 작동하지 않아 웹사이트가 정상적으로 표시되지 않기 때문입니다.WordPress코어 로딩 과정 중에 필요한 파일들이 포함되며, 어떠한 오류라도 초기화 프로세스를 중단시킬 수 있습니다.
이런 상황에 처했을 때, 당신은 다음과 같은 방법을 통해 문제를 해결해야 합니다:FTP또는 호스트 파일 관리자에서 오류가 발생할 수 있습니다.functions.php파일 명명 변경(예: 변경하기)functions.php.bak이렇게 하면 웹사이트가 일시적으로 해당 파일을 무시하고 접속을 복구하여 오류를 수정할 수 있도록 해줍니다.
어떻게 사용자 정의 페이지 템플릿을 만들 수 있나요?
커스텀 페이지 템플릿을 사용하면 특정 페이지에 독특한 레이아웃을 적용할 수 있습니다. 먼저, 테마 디렉터리 내에 새로운 파일을 생성하세요.PHP파일의 맨 위에 특정 형식의 주석을 추가하여 이 파일이 페이지 템플릿임을 명시하세요.
예를 들어, ‘example’이라는 이름의 파일을 생성하려면…page-fullwidth.php의 파일:
<?php
/**
* Template Name: 全宽页面
* Description: 一个没有侧边栏的全宽度页面模板。
*/
get_header(); ?>
<!-- 你的全宽页面内容结构 -->
<?php get_footer(); ?>저장한 후에 페이지를 생성하거나 편집할 때, “페이지 속성” -> “템플릿” 드롭다운 메뉴에서 “전체 너비 페이지” 템플릿을 선택할 수 있습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어