WordPress 테마 개발 기초 및 환경 설정
WordPress 테마 개발을 시작하려면 먼저 핵심 개념을 이해해야 합니다. WordPress 테마는 기본적으로 스타일시트, 템플릿 파일, 이미지, 자바스크립트 파일 등으로 구성되어 있으며, 이는 웹사이트의 모양과 기능을 결정합니다. 테마를 개발하는 것은 WordPress가 데이터베이스의 내용을 방문자에게 어떻게 제공할지 지시하는 완전한 규칙 세트를 만드는 것을 의미합니다.
개발 전 환경 준비는 매우 중요합니다. XAMPP, MAMP, Local by Flywheel 또는 Docker와 같은 도구를 설치하여 간단히 로컬 개발 환경을 설정할 수 있습니다. 로컬 환경에서는 온라인 웹사이트에 영향을 미치지 않으며 개발, 테스트 및 디버깅을 수행할 수 있습니다. 또한, 시인화된 코드, 코드 완성 및 디버깅 기능을 제공하여 개발 효율성을 극대화하는 효율적인 코드 편집기(예: Visual Studio Code, PhpStorm 또는 Sublime Text)도 필수 도구입니다.
다음으로, 주제의 디렉토리 구조를 이해해야 합니다. 각 주제는 다음 위치에 있습니다./wp-content/themes/카테고리 아래에 있으며, 별도의 폴더로 저장되어 있습니다. 가장 기본적인 테마는 두 개의 파일만 필요합니다:style.css그리고index.php. Instyle.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
*/이것style.css파일은 스타일 시트뿐만 아니라 테마의 “신분증'이기도 합니다. WordPress는 이러한 주석을 읽음으로써 백그라운드에서 당신의 테마를 인식하고 표시합니다.
핵심 템플릿 파일과 테마 계층 구조
워드프레스는 특정 페이지 요청에 대해 어떤 템플릿 파일을 사용하여 콘텐츠를 표시할지 결정하기 위해 “템플릿 계층 구조'라는 지능형 시스템을 사용합니다. 이 계층 구조를 이해하는 것은 테마 개발의 핵심입니다.
가장 중요한 템플릿 파일은index.php이것은 모든 페이지의 최종 대체 템플릿입니다. WordPress가 더 구체적인 템플릿을 찾을 수 없을 때 이 템플릿을 사용합니다. 첫 페이지는 일반적으로front-page.php또는home.php제어. 기사의 첫 페이지로 가장 적합합니다.single.php그리고, 특정 글 유형, 예를 들면 “제품'에 대해서는, WordPress가 그에 관련된 정보를 검색할 것입니다.single-product.php페이지 사용 방법page.php만일 페이지에 사용자 정의 템플릿이 있는 경우, 그것이 사용될 것입니다.page-{slug}.php또는page-{id}.php글 보관 페이지(예: 카테고리, 태그, 작성자, 날짜별 보관)는 다음과 같습니다.archive.php그리고 더 구체적인 변형들, 예를 들면,category.php、tag.php등
주제 상단 및 하단 템플릿
중복을 방지하기 위해 WordPress 테마는 DRY(Don't Repeat Yourself) 원칙을 준수합니다.get_header()、get_footer()그리고get_sidebar()공용 부분을 導入하려면 다음과 같은 함수를 사용해야 합니다. 이는 당신이 그것을 만들어야 한다는 뜻입니다.header.php그리고footer.php파일.
header.php파일은 일반적으로 HTML 문서 헤더, 메타 태그, 스타일 시트와 스크립트를 가리키는 링크, 그리고 웹사이트의 상단 네비게이션 영역을 포함합니다. 가장 중요한 점은 그것이 포함되어야 합니다.wp_head()함수 호출.이 함수는 WordPress 코어, 플러그인, 그리고 테마 자체가 서로 통신할 수 있게 해줍니다.<head>필요한 코드를 부분적으로 입력하세요.
추천 읽기 워드프레스 테마 개발 입문 가이드: 0부터 자신만의 웹사이트를 만들기。
footer.php파일에는 웹사이트의 바닥 정보, 스크립트 참조 등이 포함되어 있으며, 다음과 같은 형식으로 제공됩니다.wp_footer()함수가 끝났고, 이것은...wp_head()같은 역할을 하며, 페이지 아래쪽에 코드를 주입하는 데 사용됩니다.
템플릿 파일에서는 다음과 같이 그것들을 포함시킬 수 있습니다:
<?php get_header(); ?>
<!-- 主内容区 -->
<?php get_footer(); ?>주제 기능 및 WordPress 루프
테마의 기능은 단순히 모양 만이 아닙니다. 테마를 통해functions.php이 파일에서는 테마에 기능을 추가하고, 레이아웃 특성을 등록하며, 플러그인을 통합할 수 있습니다. 이 파일은 테마를 활성화할 때 자동으로 로드되며, 마치 테마만을 위한 専用 플러그인처럼 작동합니다.
워드프레스 루프를 이해하기
워드프레스 루프는 테마 개발의 핵심 로직입니다. 이는 현재 페이지에 표시할 게시물(또는 포스트)이 있는지 확인하는 PHP 코드로, 있는 경우 각 게시물을 순회하여 출력합니다. 기본 루프 구조는 다음과 같습니다:
만일 게시물이 있다면: ?>
<!-- 在这里输出文章内容 -->
<h2></h2>
<div></div>
<p>아무런 기사도 찾을 수 없습니다.</p>루프 내에서, 당신은 예를 들어 기사 정보를 출력하기 위해 다양한 템플릿 태그를 사용할 수 있습니다.the_title()출력 타이틀,the_content()전체 내용을 출력하십시오.the_excerpt()출력 요약,the_permalink()기사 링크를 얻으려면…the_post_thumbnail()출력 특징 이미지를 제공하십시오.
등록 메뉴와 사이드바
현대적인 테마는 종종 사용자가 백그라운드에서 메뉴와 위젯을 사용자 정의할 수 있게 해줍니다. 이는 다음과 같은 방법으로 이루어집니다.functions.php등록은 중국에서 이루어집니다.
추천 읽기 WordPress 테마 개발 입문: 제로에서 시작하여 첫 번째 커스텀 테마를 만들어보세요。
활용register_nav_menus()함수는 하나 이상의 메뉴 위치에 등록할 수 있습니다.
function mytheme_register_menus() {
register_nav_menus(
array(
'primary-menu' => __( '主导航菜单', 'my-first-theme' ),
'footer-menu' => __( '页脚菜单', 'my-first-theme' ),
)
);
}
add_action( 'init', 'mytheme_register_menus' );그런 다음, 템플릿 파일(예:header.php)에서 사용됩니다.wp_nav_menu()메뉴를 표시합니다.
마찬가지로, 사이드바(위젯 영역)는register_sidebar()함수 등록:
함수 mytheme_widgets_init() {
register_sidebar(
array(
'name' => __( '메인 사이드바', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '여기에 펜던트를 추가하세요.' , 'my-first-theme' ), 'description' => __( '여기에 위젯을 추가하세요.
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'mytheme_widgets_init' );템플릿 내에서 사용하기.dynamic_sidebar( 'sidebar-1' )이 영역을 호출하려면.
스타일, 스크립트 및 테마 커스터라이징 기능 통합
주제를 더 전문적이고 사용자 친화적으로 만들기 위해서는 스타일과 스크립트의 로드를 올바르게 처리해야 하며, WordPress에 제공된 사용자 정의 기능을 최대한 통합해야 합니다.
스타일과 스크립트를 로드하기 위해 대기하고 있습니다.
올바른 방법은 사용하는 것입니다.wp_enqueue_style()그리고wp_enqueue_script()함수를 만들고, 그것들을 추가하세요.functions.php이 코드는 의존성을 올바르게 설정하고 중복 로드를 방지합니다.
function mytheme_enqueue_assets() {
// 主题主样式表
wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
// 谷歌字体
wp_enqueue_style( 'mytheme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
// 主JavaScript文件
wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );통합 테마 커스터마이저 (Integrated Theme Customizer)
워드프레스 커스터마이저는 사용자가 실시간 미리보기에서 테마 설정을 조정할 수 있게 해줍니다. 이를 통해$wp_customize객체에 설정 및 컨트롤을 추가할 수 있습니다.
예를 들어, 사이트 타이틀의 색상을 추가하는 옵션을 추가하십시오:
function mytheme_customize_register( $wp_customize ) {
// 添加一个设置（存储在数据库中）
$wp_customize->add_setting( 'header_color', array(
'default' => '#333333',
'sanitize_callback' => 'sanitize_hex_color',
) );
// 添加一个颜色选择器控件
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_color', array(
'label' => __( '页眉颜色', 'my-first-theme' ),
'section' => 'colors',
'settings' => 'header_color',
) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );그런 다음, 당신의style.css또는 동적 출력 스타일에서 이 값을 사용하십시오:
function mytheme_customizer_css() {
?>
<style type="text/css">
.site-header {
background-color: <?php echo esc_attr( get_theme_mod( 'header_color', '#333333' ) ); ?>;
}
</style>
<?php
}
add_action( 'wp_head', 'mytheme_customizer_css' );요약
워드프레스 테마 개발은 디자인과 프로그래밍을 결합하는 재미있는 기술입니다. 이는 코어 파일(예: )에서 시작됩니다.style.css그리고index.php워드프레스의 테마 디자인에 대한 이해를 바탕으로, 템플릿 계층 구조와 워드프레스 루프에 대해 더 깊이 알아보자.functions.php강력한 기능 중 하나는 템플릿 파일을 올바르게 구성하고, 템플릿 태그를 사용하며, 메뉴와 위젯 영역을 등록하고, 리소스를 대기열 방식으로 로드하는 것입니다. 더 나아가서, 통합 테마 커스터화기는 최종 사용자에게 직관적인 커스터화 경험을 제공합니다. 이러한 기본 지식을 습득한 후, 당신은 자신의 디자인을 잘 구성된 WordPress 테마로 변환할 수 있으며, Underscores 또는 Genesis와 같은 고급 테마 프레임워크 및 블록 테마 개발을 학습하는데 필요한 견고한 기반을 마련할 수 있습니다.
자주 묻는 질문
WordPress 테마를 개발하려면 PHP에 능통해야 하나요?
전문가 수준에 도달할 필요는 없지만, 扎실한 PHP 기반은 필수적입니다. WordPress 코어 및 테마 템플릿 파일이 PHP로 작성되어 있기 때문에 PHP 구문, 변수, 함수, 루프 및 조건문을 이해할 필요가 있습니다. 동시에 HTML, CSS 및 기본 JavaScript에 대한 좋은 지식도 매우 중요합니다.
제 테마가 WordPress 공식 표준에 부합하게 만들 수 있는 방법은 무엇인가요?
당신의 테마가 표준에 준수하고 WordPress 공식 테마 디렉토리에 포함되려면 워드프레스 테마 개발 매뉴얼과 테마 검토 요구사항을 준수해야 합니다. 이에는 안전한 코딩 방식을 사용하고, 국제화를 위한 준비(텍스트 도메인과 번역 함수 사용), 반응형 디자인, 테마에 중요한 기능을 하드코딩하지 않고(서브 테마나 플러그인을 사용하는 것이 권장됩니다.), 그리고 공식 제공된 Theme Check 플러그인을 통한 테스트 등이 포함됩니다.
제 테마가 새로 고침 후에 보이지 않는 이유는 무엇입니까?
일반적으로 이는 브라우저 캐시 또는 WordPress의 캐시 메커니즘 때문에 발생합니다. 먼저, 동시에 두 개의 키보드 키를 누른 후 다시 시도해 보십시오.Ctrl + F5(Windows/Linux) 또는Cmd + Shift + R(Mac) 브라우저 캐시를 지우기 위해 하드 리프레시를 실시하세요. 만일 문제가 계속 발생한다면, 로컬 개발 환경에서 작업을 하고 있는지 확인하고 캐시 플러그인이 설치되어 있는지 확인하여 일시적으로 비활성화해 보세요. 마지막으로, 올바른 템플릿 파일을 수정했는지 확인하고 파일이 성공적으로 저장되었는지 확인하세요.
자주제(subtopic)와 부모주제(parent topic)의 차이점은 무엇이며, 언제 어떻게 사용해야 할까요?
부모 테마는 완전히 기능적이고 독립적인 테마입니다. 자식 테마는 부모 테마에 의존하며, 적은 수의 파일만 포함합니다(최소 하나의 파일이 필요합니다).style.css자식 테마는 부모 테마의 스타일과 기능을 덮거나 확장하는 데 사용됩니다. 기존 테마를 사용자 정의하려는 경우 부모 테마가 업데이트되더라도 변경 내용을 유지하려는 경우에는 자식 테마를 만들어야 합니다. 이것은 테마를 업그레이드하고 사용자 정의하는 최선의 방법입니다.
제 테마에 구텐베르크 에디터의 완전한 지원을 추가하는 방법은 무엇입니까?
구텐베르크 에디터를 완전히 지원하려면 당신은functions.php중국에서 사용하세요.add_theme_support()함수는 여러 특성을 선언합니다. 예를 들어, 추가하기align-wide그리고align-full지원, 사용자 정의 색상 팔레트, 그라디언트 배경, 글자 크기 제어 등. 동시에, 글과 페이지 편집기를 위한 별도의 스타일 시트를 만들고, 사용하세요.add_editor_style()추가하세요. 더 자세한 사용자 정화를 원하는 경우 자체 블록을 만드는 법을 배워야 할 수 있습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어