워드프레스 테마 개발 기초
코드 작성을 시작하기 전에 워드프레스 테마의 기본 구성을 이해하는 것이 중요합니다. 테마는 기본적으로 특정 규칙을 따르는 일련의 파일이 들어 있는 폴더로, 테마는 사이트의 모양과 느낌, 일부 기능을 결정합니다. 핵심 개념은 “템플릿 계층 구조”로, 워드프레스는 현재 방문 중인 페이지 유형(예: 홈페이지, 글 페이지, 페이지)에 따라 템플릿 파일을 자동으로 선택하여 로드합니다.
각 테마에는 두 개의 핵심 파일이 포함되어야 합니다:style.css 그리고 index.php。style.css 스타일을 제공할 뿐만 아니라 파일 헤더 주석에는 테마 이름, 작성자, 설명 등과 같은 테마의 메타 정보가 포함되어 있어 워드프레스에서 테마를 식별할 수 있는 유일한 방법입니다.index.php 는 다른 구체적인 템플릿이 존재하지 않을 때 워드프레스에서 기본으로 사용하는 템플릿 파일입니다.
테마는 템플릿 태그를 통해 워드프레스 코어와 상호 작용합니다. 다음과 같이 데이터베이스에서 콘텐츠를 동적으로 가져와 표시하는 데 사용되는 PHP 함수입니다. the_title() 기사 제목:the_content() 글 본문을 출력합니다. 이러한 함수를 올바르게 이해하고 사용하는 것이 동적 콘텐츠 프레젠테이션의 핵심입니다.
추천 읽기 워드프레스 테마 개발 완전 가이드: 입문서부터 전문가용까지。
개발 환경 설정 및 테마 구조 만들기
효율적이고 격리된 개발 환경은 테마 개발의 첫 번째 단계입니다. 컴퓨터에서 PHP 및 MySQL 환경을 빠르게 설정할 수 있는 XAMPP, MAMP 또는 Laragon과 같은 로컬 서버 소프트웨어를 사용하는 것이 좋습니다. 워드프레스 코어 파일을 로컬 서버의 루트 디렉토리에 설치합니다(예 htdocs 또는 www) 중간.
다음으로, WordPress의 설치 디렉터리 내에서… wp-content/themes/ 경로에 새 테마를 위한 폴더를 생성합니다(예: 이름 지정). my-first-theme. 이 폴더 안에 첫 번째 필수 파일을 만듭니다: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. 테마의 기본 템플릿 파일입니다. 처음에는 기본 HTML5 구조와 간단한 루프를 넣어 테스트할 수 있습니다.
<!DOCTYPE html>
<html no numeric noise key 1008>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body no numeric noise key 1005>
<header>
<h1>내 사용자 지정 테마</h1>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<article>
<h2></h2>
<div></div>
</article>
<?php
endwhile;
endif;
?>
</main>
<footer>
<p>사이트 하단의 정보</p>
</footer>
</body>
</html>핵심 템플릿 파일 및 기능
테마의 복잡성이 증가하면 다양한 기능에 대한 코드를 특수 템플릿 파일로 분리해야 합니다. 워드프레스의 템플릿 계층 구조는 현재 페이지에 가장 적합한 템플릿을 자동으로 찾아서 로드합니다.
추천 읽기 강력한 사용자 정의 워드프레스 테마를 구축하기 위한 실습 가이드。
Create header.php 파일, 저장할 거예요. index.php 중국 <head> 섹션과 <header> 섹션을 잘라냅니다. 그런 다음 코드를 index.php 주요 용도 get_header() 함수를 사용하여 소개합니다. 마찬가지로 footer.php 하단 정보를 저장하고 get_footer() 소개합니다. 만들기 sidebar.php그리고 사용하세요. get_sidebar() 도입되었습니다. 이를 통해 모듈화 및 코드 재사용이 가능해집니다.
페이지 유형에 따라 특정 템플릿을 만들 수 있습니다:
* single.php단일 기사를 표시하는 데 사용됩니다.
* page.php단일 페이지를 표시하는 데 사용됩니다.
* front-page.php: 존재하는 경우 정적 홈 페이지로 사용됩니다.
* home.php: 블로그 글의 색인을 표시하는 데 사용됩니다(홈 페이지가 “최신 글'로 설정된 경우).
* archive.php카테고리, 태그, 작성자 등에 대한 아카이브 페이지를 표시하는 데 사용됩니다.
* 404.php: 404 오류 페이지를 표시하는 데 사용됩니다.
템플릿 파일에서 가장 중심이 되는 구조는 루프입니다. 워드프레스에서 데이터베이스에서 글을 검색하고 표시하는 데 사용하는 PHP 코드 블록입니다. 기본 구조는 다음과 같습니다:
만일 게시물이 있다면 : while ( have_posts() ) : the_post(); ?>
<!-- 在这里输出文章内容，使用 the_title(), the_content() 等函数 -->
<p>죄송합니다. 찾으신 내용이 없습니다.</p>function bloginfo() 또는 get_bloginfo() 다음과 같은 사이트에 대한 기본 정보를 얻는 데 사용됩니다. bloginfo( 'name' ) 웹사이트 제목을 출력하세요.bloginfo( 'stylesheet_url' ) 테마 스타일시트 URL을 출력합니다.
스타일, 스크립트 및 테마 기능 확장
테마 스타일을 올바르게 로드하고 충돌을 방지하려면 HTML에 직접 작성하는 대신 워드프레스에서 제공하는 기능을 사용하여 스타일시트 및 스크립트 파일을 대기열에 추가하는 것이 중요합니다. <link> 또는 <script> 태그. 이는 functions.php 파일이 실현됩니다.
Create functions.php 파일에 테마 기능을 추가하거나 기본 동작을 수정하거나 스크립트 스타일을 등록하는 데 사용됩니다. 테마 기능을 추가하려면 wp_enqueue_style() 그리고 wp_enqueue_script() 함수:
추천 읽기 WordPress 테마 개발 전략: 제로에서 시작하여 고성능의 맞춤형 테마를 구축하는 방법。
<?php
function my_first_theme_scripts() {
// 注册并排入主样式表
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
// 注册并排入一个自定义 CSS 文件
wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/css/custom.css', array(), '1.0' );
// 注册并排入一个 JavaScript 文件，依赖于 jQuery
wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>In functions.php 에서도 사용할 수 있습니다. add_theme_support() 이 함수는 글의 특징적인 이미지, 사용자 정의 로고, 글 형식 등과 같이 테마가 지원하는 기능들을 선언하는 데 사용됩니다.
// 支持文章特色图像
add_theme_support( 'post-thumbnails' );
// 支持自定义 Logo
add_theme_support( 'custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
) );
// 在文章编辑器中添加编辑器样式
add_editor_style( 'editor-style.css' );테마의 최종 스타일은 일반적으로 테마의 style.css 워드프레스는 본문과 글에 다음과 같은 여러 유용한 CSS 클래스를 자동으로 추가합니다. home, single, page-id-{ID} 등. 이러한 클래스 이름을 사용하여 타깃 스타일을 작성할 수 있습니다.
요약
이 글의 단계를 통해 기본적인 워드프레스 사용자 정의 테마를 처음부터 구축하는 핵심 프로세스를 마스터했습니다. 테마 및 템플릿 계층 구조의 기본 개념 이해부터 환경 설정 및 필요한 파일 만들기, 핵심 템플릿 분석, 루프 및 템플릿 태그 이해, 마지막으로 사용자 정의 테마를 구축하는 방법을 배우기까지 functions.php 스타일, 스크립트 및 테마 기능을 올바르게 추가합니다. 이 과정은 기본이지만 테마 개발의 핵심 골격을 다룹니다. 그 다음에는 하위 테마 개발, 사용자 정의 글 유형, 고급 테마 옵션, WooCommerce 통합 등과 같은 보다 심층적인 주제를 탐색하여 테마 개발 기술을 계속 풍부하게 하고 개선할 수 있습니다.
자주 묻는 질문
테마를 개발하려면 PHP를 알아야 하나요?
예, PHP는 워드프레스의 핵심 프로그래밍 언어입니다. 테마 파일은 기본적으로 HTML과 워드프레스 PHP 함수(템플릿 태그)를 혼합하여 페이지를 동적으로 생성하는 PHP 파일입니다. 페이지 빌더를 사용할 때도 고급 기능을 사용자 정의하고 문제를 해결하려면 PHP를 이해하는 것이 필수적입니다.
테마의 style.css 파일 이름을 변경할 수 있나요?
할 수 없습니다.style.css 는 워드프레스에서 고정된 이름의 테마를 인식하는 데 필요한 파일입니다. 테마의 모든 메타 정보(예: 이름, 작성자)는 이 파일의 헤더 주석에 정의되어 있습니다. 그러나 테마의 이름을 지정할 때는 functions.php 의 기능은
테마에서 중국어 또는 번역을 지원하도록 설정하는 방법
먼저, style.css 의 헤더 주석에 올바르게 설정되어 있는지 확인합니다. Text Domain(예 my-first-theme)를 사용하고, 번역이 필요한 모든 문자열에는 __() 또는 _e() 함수를 사용하여 래핑합니다. 그런 다음 Poedit과 같은 도구를 사용하여 토픽을 스캔하여 다음을 생성합니다. .pot 템플릿 파일을 열고 해당 언어를 생성합니다(예 zh_CN.po) 번역 파일로 컴파일하고 최종적으로 .mo 파일을 테마의 languages 폴더 내부.
사용자 정의 테마에 메뉴 기능을 추가하는 방법
첫째, 다음과 같은 주제로 functions.php 파일 내에서 사용합니다. register_nav_menus() 함수를 사용하여 메뉴 위치를 등록합니다. 그런 다음 템플릿 파일(예 header.php) 메뉴가 표시되도록 하려는 위치에서 wp_nav_menu() 함수를 사용하여 등록된 메뉴를 호출할 수 있습니다. 그런 다음 사용자는 워드프레스 백엔드의 모양 -> 메뉴에서 이 위치에 있는 메뉴의 콘텐츠를 구성할 수 있습니다.
다음 단계는 무엇인가요?
확장된 독서 및 실무 지식
다음은 이 도움말의 주제와 관련이 있으며 더 깊이 있게 읽기에 적합합니다. 현재 문제와 가장 가까운 문서부터 시작하여 점차 주변 주제로 확장하는 것이 우선순위를 정하는 것이 좋습니다.
한국어