WordPress 테마의 구조

게시 됨: 2015-06-04

이것은 6월 16일에 출시되는 WordPress 개발에 대한 멀티미디어 가이드인 "Up and Running: A Practical Guide to WordPress Development"의 한 장입니다. 전체 패키지에는 전체 길이의 전자책, 50개 이상의 테마 및 플러그인 개발 튜토리얼 비디오가 포함되어 있습니다. 세계 최고의 WordPress 개발자 13명과의 코드 연습 인터뷰. 지금 upandrunningwp.com에서 20% 할인된 가격으로 예약 주문하세요!

주요 내용:

  • WordPress 테마는 일관된 부분 집합으로 구성됩니다. 비-자식 테마의 중요한 부분에는 style.css , functions.php 및 여러 종류의 PHP 템플릿 파일(예: header.php , footer.php 및 index.php )이 있습니다.
  • CSS 스타일의 테마의 주요 소스인 style.css 는 테마의 시각적 모양을 결정합니다. style.css 상단의 댓글란에도 테마명, 작성자 등이 등록되어 있습니다.
  • functions.php 는 테마에 프레젠테이션 기능을 추가하는 곳입니다. functions.php 를 통해 CSS 스타일시트, JavaScript 파일, 탐색 메뉴, 위젯 영역 및 기타 기능을 추가합니다.
  • 템플릿 파일은 비공식적으로 다음과 같이 나눌 수 있습니다. "항상 사용되는" 템플릿 파일( header.php 및 footer.php 및 해당되는 경우 sidebar.php ); WordPress 템플릿 계층 구조의 파일(예: index.php , single.php 및 page.php ); 및 "템플릿 부분"(반복을 줄이기 위해 다른 템플릿 파일에서 가져온 불완전한 스니펫).
  • 테마는 임의로 크고 복잡할 수 있습니다. 그러나 이것들은 가장 중요하고 예측 가능한 부분입니다.

이 짧은 장은 큰 다이어그램을 중심으로 진행됩니다. 왜 기다려? 여기있어:

WordPress 테마의 해부학

당황하지 말 것! 이것은 곧 이해하게 될 것입니다. 이 장의 나머지 부분에서는 다이어그램의 각 부분을 더 자세히 설명합니다.

이름에 무엇이 있습니까?

WordPress는 이름에 따라 테마 파일을 처리하는 방법을 결정합니다.

가장 먼저 주의해야 할 점은 다이어그램의 모든 파일에는 특별한 이름이 있다는 것입니다. functions.php , style.css , index.php — 이 파일들 중 어느 것도 우연히 이름이 지정되지 않았으며 임의의 이름도 없습니다.

WordPress는 이름에 따라 테마 파일을 처리하는 방법을 결정합니다. functionz.php 에 대한 특별한 처리가 있지만 functions.php 에 대해서는 전혀 없습니다. 따라서 일련의 지침을 functions.php 로 업로드하면 WordPress가 이를 해석합니다. 그러나 functionz.php 와 동일한 지침을 업로드하면 WordPress는 기본적으로 해당 파일과 해당 지침을 완전히 무시합니다.

스타일.css

style.css 는 테마의 시각적 모양의 주요 소스입니다.

style.css 는 CSS 스타일링의 테마의 주요 소스입니다. 따라서 글꼴 및 색상 선택에서 테마가 반응형 그리드에서 작동하는지 여부에 이르기까지 테마의 시각적 모양의 주요 소스입니다.

따라서 예를 들어 다음 CSS를 테마의 style.css 에 입력하는 경우:

p {
color: blue;
}

… 그러면 테마가 실행되는 동안 단락에 있는 모든 것이 사이트의 아무 곳에서나 파란색으로 바뀝니다. 정말 멋지죠?

style.css 는 대부분의 작업을 수행하여 테마가 원하는 방식으로 보이도록 하는 곳입니다.

이러한 종류의 시각적 컨트롤은 style.css 에서 해야 할 일이 많다는 것을 의미합니다. 테마를 원하는 방식으로 만들기 위해 대부분의 작업을 수행하게 될 곳입니다.

style.css는 테마를 등록하는 방법이기도 합니다.

style.css 의 헤더에는 테마 이름, 작성자, 상위 테마(있는 경우) 등 테마 데이터가 등록되는 주석 섹션도 있습니다. 다음과 같이 보입니다.

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPress는 이 댓글을 읽고 테마에 대한 정보를 얻습니다. 따라서 위의 작은 주석 블록(더 화려하거나 더 기술적인 것은 없음)이 WordPress 관리 영역의 모양 > 테마 에 있는 사이트의 테마 목록에 테마가 표시되도록 합니다.

테마해부학1

큰 그래픽인 Anatomy of a WordPress Theme에서 style.css 의 1~6행에서 테마의 실제 등록 데이터 예를 볼 수 있습니다.

기능.php

functions.php 는 테마에 사용자 정의 기능을 추가하는 곳입니다. 이것은 다음을 포함하여 엄청나게 많을 수 있습니다.

  • CSS 스타일시트( style.css 자체 포함) 및 JavaScript 파일 추가
  • 탐색 메뉴 영역 및 위젯 영역 등록
  • 사이트에서 사용할 수 있는 사용자 정의 이미지 크기 정의
  • 페이지 콘텐츠 필터링

functions.php 는 주로 WordPress 후크(액션 및 필터 후크라고도 함)를 통해 WordPress의 나머지 부분과 "통신"합니다. 이를 통해 적절한 위치에 기능을 추가할 수 있습니다. 워드프레스 테마의 핵심 개념: 3. functions.php로 functions.php 추가에서 functions.php 의 작동에 대해 더 자세히 알아봅니다. 그리고 WordPress Hooks(Actions and Filters): What They Do and How They Work에서 후크에 대해 더 자세히 알아봅니다.

PHP 템플릿 파일

WordPress 사이트의 템플릿 파일은 사이트의 마크업을 결정합니다. 그것들이 없으면 말 그대로 페이지에 아무것도 없습니다.

테마 파일의 대부분은 PHP 템플릿 파일입니다. functions.php 가 테마의 두뇌이고 style.css 가 의상이고 템플릿 파일이 실제 본문인 경우.

템플릿 파일은 HTML 마크업과 PHP 코드가 혼합된 ,code>.php 파일입니다. (그래픽을 확인하면 어떻게 보이는지 알 수 있습니다.)

템플릿 파일은 두 가지 방식으로 마크업을 생성합니다.

이러한 파일은 함께 사이트의 마크업 , 즉 브라우저가 사이트를 방문할 때 표시하는 실제 HTML을 결정합니다. 그들은 두 가지 방법으로 그렇게 합니다.

1. HTML

첫째, 템플릿 파일은 일반 .html 파일과 마찬가지로 HTML을 브라우저에 직접 인쇄합니다. <!--?php?--> 내부에 없는 것은 PHP가 아닙니다. 페이지에 바로 들어가는 일반 HTML일 뿐입니다. 따라서 테마의 header.php 에 다음과 같은 HTML이 포함되어 있는 경우: 

<body class="site-body">

그것이 바로 header.php 가 포함된 모든 WordPress 웹페이지에서 브라우저가 보게 되는 것입니다.

2. PHP

템플릿 파일은 실제로 HTML로 컴파일 되거나 HTML로 변환되는 PHP를 사용하여 마술처럼 작동합니다. 간단한 예로 동일한 header.php 파일에 다음 코드를 대신 포함할 수 있습니다. 

<body class="<?php echo 'site-body'; ?>">

추가된 PHP는 문자열 site-body 를 페이지에 바로 에코(인쇄)합니다. 따라서 서버는 끝에서 추가 PHP 처리를 수행했지만 브라우저에는 여전히 동일한 이전 HTML이 표시됩니다.

상상할 수 있듯이 테마의 템플릿 파일은 완전히 중요합니다. 템플릿이 없으면 페이지에 말 그대로 아무 것도 없습니다.

"항상 사용되는" 템플릿 파일

header.php 와 footer.php 는 일반적으로 테마의 모든 곳에서 사용됩니다. 대부분의 사이트는 서로 다른 페이지에서 일관된 머리글과 바닥글을 원하기 때문입니다.

일부 템플릿 파일은 사이트의 모든 웹페이지에서 사용됩니다. 주요 예는 header.php 및 footer.php 입니다.

이러한 파일은 너무 자주 사용되므로 WordPress에는 get_header() 및 get_footer() ) 와 같은 다른 템플릿 파일에 포함하기 위한 특수 기능이 있습니다. 매개변수 없이 이러한 함수는 단순히 header.php 및 footer.php 를 가져와서 함수가 호출된 위치에 놓습니다.

이 파일이 모든 곳에서 사용되는 이유는 무엇입니까? 대부분의 사이트는 여러 페이지에서 일관된 머리글과 바닥글을 원하기 때문입니다. 한 페이지에 회사 로고와 기본 탐색 메뉴가 있는 경우 다른 페이지에서도 동일한 작업을 수행하는 것이 좋습니다. 페이지 하단의 바닥글도 마찬가지입니다.

참고로 sidebar.php 는 이러한 종류의 파일이기도 합니다. 왜냐하면 사이트의 대부분의 웹페이지 유형이 단일 사이드바를 공유하는 경우가 많기 때문일 수 있습니다. 게시물. sidebar.php 에는 자체 함수인 get_sidebar() 도 있습니다.

WordPress 템플릿 계층 구조의 파일

진정한 흥분은 index.php , single.php 및 single.php 와 같은 파일에서 발생 page.php . 이 파일은 다양한 종류의 게시물 데이터에 대해 표시할 마크업을 지정합니다.

다시 말해서 WordPress는 어떤 종류의 게시물 데이터에 사용할 페이지를 알고 있습니다. 예를 들어:

  • 요청 중인 웹 페이지에 페이지 유형 게시물(예: 정보 페이지)이 포함된 경우 WordPress는 page.php 를 사용하여 해당 웹 페이지를 구축할 것입니다.
  • 요청한 웹 페이지가 개별 게시물 유형 게시물인 경우(예: 특정 블로그 게시물을 보고 있는 경우) WordPress는 이를 구축하기 위해 single.php 를 사용할 가능성이 높습니다.
  • 2014년에 작성한 모든 Post-type 게시물을 살펴보고 있다면 WordPress는 archive.php 를 사용하여 해당 웹 페이지를 구축할 것입니다.

이것이 WordPress 템플릿 계층 구조 의 마법입니다. WordPress Themes의 핵심 개념: 1. 템플릿 계층 구조.

이러한 템플릿 파일은 루프를 기반으로 합니다.

이러한 "in-the-template-hierarchy" 템플릿 파일은 모두 매우 중요한 것을 공유합니다. WordPress 개발의 절대적인 핵심 원칙 중 하나인 Loop를 기반으로 구축된다는 것입니다.

WordPress 테마의 핵심 개념: 2. 루프로 게시물 처리하기에서 루프에 대해 자세히 알아보겠습니다. 루프는 정말 멋집니다. 따라서 처음 사용하는 경우 루프가 날아가지 않도록 양말을 꼭 잡으세요!

템플릿 부분

index.php 와 page.php 에 정확히 동일한 섹션이 있다고 가정해 보겠습니다. 두 파일 모두에서 해당 코드를 반복해야 합니까?

사실 DRY("Don't Repeat Yourself!")는 훌륭한 프로그래머를 위한 외침입니다. 반복은 모든 종류의 문제를 일으킵니다. 반복되는 부분을 바꾸고 싶다면? 이제 두 곳에서 변경해야 합니다. 한 곳에서 변경하는 것을 잊었거나 한 파일에서는 실수를 했지만 다른 파일에서는 실수하지 않은 경우 어떻게 합니까? 이제 코드가 동기화되지 않고 사이트에 버그가 있습니다. (지금: 동일한 코드를 20번 반복하면 어떻게 될까요? 모든 변경 사항을 20번 반복해야 하며 "모두 파악"하기를 바랍니다.)

템플릿 부분은 템플릿 파일에서 반복될 가능성이 있는 부분을 가져와 새 파일로 이동합니다. 이렇게 하면 index.php 와 page.php 모두 개별적으로 두 번 작성하는 대신 동일한 템플릿 부분을 참조할 수 있습니다. 해당 섹션을 변경하려면 한 번만 변경하면 됩니다.

이제 테마 구조를 알았습니다.

다음은 WordPress 테마에 대해 실제로 이해해야 할 사항입니다. 너무 큰 ThemeForest 테마도 이 핵심 골격을 중심으로 구축되므로 이러한 조각이 어떻게 연동되는지 이해하면 WordPress 테마를 이해하는 데 많은 힘을 얻을 수 있습니다.

해부학 수업이 끝나면 다음 세 장은 테마가 작동하는 방식을 설명하는 4가지 중요한 프로그래밍 원칙에 대해 자세히 설명합니다.

  1. WordPress 템플릿 계층 구조
  2. 루프
  3. 기능.php
  4. 워드프레스 후크

앞으로!