WordPress의 get_template_part() 함수에 대해 알아야 할 모든 것

프로그래밍을 배우는 가장 좋은 방법은 다른 사람들이 작성한 코드를 읽는 것이라고 읽은 적이 있습니다. 결국, 개발자로서 보내는 대부분의 시간은 아마도 귀하 또는 다른 개발자가 과거에 작성한 코드를 검토, 연마 및 수정하는 데 있을 것입니다. 이것이 바로 내가 무료 및 오픈 소스 소프트웨어를 그토록 좋아하는 이유입니다. 훌륭한 도구의 소스 코드에 대한 액세스 권한을 부여하고 그로부터 배울 수 있게 해줍니다.

당신이 WordPress 세계에 관심이 있다면(그리고 당신이 여기 있기 때문에 그럴 것이라고 생각합니다), WordPress Core의 소스 코드 또는 Gutenberg's는 더 나은 WordPress 전문가가 되고 백엔드 및 프론트엔드 개발에 대해 배울 수 있는 두 가지 매우 좋은 방법입니다.

Gutenberg의 첫 번째 릴리스 이후, 우리는 지금까지 프론트엔드 개발에 대해 배운 모든 것을 공유해 왔습니다. 따라서 예를 들어 React의 기본을 가르치고 구성 요소를 재사용하는 방법을 보고 Gutenberg를 확장하는 방법을 설명하고 더 나은 소스 코드를 작성하기 위한 JavaScript 뉴스에 대해 논의한 일련의 게시물을 작성했습니다. 우리는 썼다.

글쎄, 오늘 우리는 기어를 바꾸고 WordPress Core에 다시 집중할 것입니다. 왜요? 잘 모르겠습니다. 며칠 전에 나온 다음 Twenty Twenty-One 테마의 발표가 완벽한 핑계였기 때문이 아닐까요?. 이제 WordPress에서 테마를 만들 때 가장 중요한 요소 중 하나인 get_template_part 함수에 대해 이야기해 보겠습니다.

워드프레스 테마

먼저 워드프레스 테마가 어떻게 작동하는지 살펴볼까요? 기본적으로 테마는 사이트에서 사용할 HTML 구조와 CSS 스타일을 정의하는 파일 모음입니다.

웹 페이지의 골격에 대해 생각해 보면 항상 동일한 패턴이 반복되는 것을 볼 수 있습니다.

• html 과 head 태그를 여는 것으로 시작합니다. 여기에 스크립트, 스타일, 메타 태그 등을 추가합니다.
• 그런 다음 head 태그를 닫고 웹 사이트의 보이는 콘텐츠를 포함할 body 태그를 엽니다.
  • 일반적으로 페이지의 본문에는 웹 로고가 있는 헤더, 메뉴 등이 포함됩니다.
  • 그런 다음 페이지, 블로그 기사, 게시물 목록, 검색 결과 등이 될 수 있는 콘텐츠 자체가 제공됩니다.
  • 마지막으로 일반적으로 바닥글로 끝납니다.
• 마지막으로 전체 페이지가 렌더링되면 모든 태그를 닫고 완료됩니다.

예, 모든 웹 페이지는 다소 유사한 구조를 따르는 것 같습니다. 공통 부분(예: 머리글, 메뉴, 바닥글...)과 콘텐츠별 영역(블로그 게시물, 검색 후 얻은 결과 집합)이 있습니다. , WooCommerce 제품 등).

프로그래머는 반복되는 코드를 좋아하지 않고 우리는 (일반적으로) 조직화된 사람들이기 때문에 WordPress 테마는 매우 패턴화된 파일 구조를 따릅니다. 몇 달 전에 작성한 이 게시물에서 테마의 다른 파일에 대한 좋은 설명이 있지만 다음이 있다는 점에 유의하십시오.

• 스타일시트: style.css ,
• 웹 페이지를 "열기" 위한 header.php 파일(즉, head 태그와 일반적으로 모든 페이지에 공통적인 body 의 초기 부분을 출력함),
• 페이지를 "닫는" 또 다른 footer.php 파일(즉, 바닥글을 추가하고 html 태그를 닫음),
• 렌더링하려는 다양한 유형의 콘텐츠에 대한 많은 추가 파일.

get_template_part 함수는 무엇이며 무엇을 위한 것입니까?

새로운 기능을 발견했을 때 가장 먼저 해야 할 일은 아버지가 새로운 Roomba 청소기 프로그래밍을 도와달라고 요청할 때 하는 것과는 반대입니다. 설명서를 읽어보세요. Codex를 보고 함수로 이를 수행해 보겠습니다.

get_template_part 는 하위 테마가 테마에서 재사용 가능한 코드 섹션을 오버로드하는 간단한 메커니즘을 제공합니다.

테마에 대한 명명된 템플릿 부분을 포함하거나 이름이 지정된 경우 특수화된 부분이 포함됩니다. 테마에 {slug}.php 파일이 없으면 템플릿이 포함되지 않습니다.

템플릿은 require_once가 아닌 require를 사용하여 포함되므로 동일한 템플릿 부분을 여러 번 포함할 수 있습니다.

$name 매개변수의 경우 파일 이름이 "{slug}-special.php"이면 "special"을 지정합니다.

참고: get_template_part()는 자동으로 실패합니다.

WordPress.org의 get_template_part 문서

보다? 1분도 채 되지 않아 필요한 모든 정보를 얻었습니다. 이제 우리는 이 함수가 테마에서 "재사용 가능한 부분"을 생성하는 데 사용된다는 것을 알고(따라서 중복 코드를 방지함) 하위 테마가 적용할 수 있는 방식으로 그렇게 합니다. 또한 매개변수, 내부 작동(PHP의 require 함수 사용) 및 예상 가능한 정보("자동 실패")에 대한 정보도 있습니다.

불행히도 언급한 {slug}.php 및 {slug}-special.php 파일과 같이 아직 명확하지 않은 몇 가지 사항이 있습니다. 그들은 무엇인가? 그들은 무엇을 포함합니까? 그들은 무엇을합니까? 설명서만 보고 답하기 어려운 질문이 많으니 예제로 넘어갈 차례입니다.

테마에서 부분 템플릿을 만드는 방법

Twenty Twenty-One 테마를 살펴보고 이러한 "부분 템플릿"을 사용하는지, 사용하는 경우 어떻게 생겼는지, 자신의 테마에 구현하기 위해 무엇을 해야 하는지 알아보겠습니다.

WordPress 테마의 파일 계층 구조에 대한 내 게시물을 읽으면 " index.php 가 우리 테마의 기본 템플릿입니다. 콘텐츠에 특정 템플릿이 디자인되어 있지 않은 한 당사 웹사이트의 모든 콘텐츠를 렌더링하는 데 사용됩니다." 이것은 기본 템플릿이므로 거기서 시작하는 것이 좋습니다. Twenty Twenty-One 테마의 index.php 내용입니다.

 get_header(); if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); get_template_part( 'template-parts/content/content' ); } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. get_template_part( 'template-parts/content/content-none' ); } get_footer();

보시다시피 이전에 언급한 모든 부분이 있습니다.

• get_header 를 사용하는 헤더를 포함합니다.
• 콘텐츠 자체를 렌더링합니다.
• get_footer 로 페이지를 닫습니다.

여기서 흥미로운 점은 분명히 index.php 의 "콘텐츠" 영역입니다. 특히, 유효한 콘텐츠(WordPress Loop의 have_posts 기능)가 보이는지 여부를 알 수 있는 작은 컨트롤이 있으며, 있는지 여부에 따라 부분 템플릿( …/content )을 로드하거나 다른 ( …/content-none ).

이제 부분 content.php 템플릿을 살펴보면 대략 다음과 같은 내용을 볼 수 있습니다.

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> … the_title( … ); … </header> <div class="entry-content"> <?php the_content( … ); wp_link_pages( … ); ?> </div> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer> … </article>

아주 간단하지 않습니까? 블로그 게시물과 같은 일반적인 WordPress 콘텐츠를 렌더링하도록 설계된 작은 템플릿만 있으면 됩니다. 결과 HTML 스켈레톤은 제목, 내용 및 바닥글이 포함된 article 태그에 불과하며 모두 WordPress 템플릿 태그를 사용하여 실제 내용을 가져옵니다.

WordPress API가 멋진 이유

이러한 기능이 모두 존재한다는 사실을 알지 못하더라도( get_header , get_footer 또는 오늘의 별: get_template_part ) 비슷한 접근 방식에 따라 코드를 구성했을 것이라고 확신합니다. 결국, 헤더용 템플릿, 바닥글용 템플릿, 콘텐츠용 템플릿을 만든 다음 특수 파일이나 이 모든 것을 하나로 묶는 템플릿을 만드는 것이 매우 논리적으로 보입니다. 그렇죠?

이러한 접근 방식을 따른다면 index.php 파일이 다음과 같이 보일 것입니다.

 require_once 'header.php'; if ( have_posts() ) { // Load posts loop. while ( have_posts() ) { the_post(); require 'template-parts/content.php'; } // Previous/next page navigation. twenty_twenty_one_the_posts_navigation(); } else { // If no content, include the "No posts found" template. require 'template-parts/content-none.php'; } require_once 'footer.php';

이것은 Twenty Twenty-One 테마에 있는 것과 매우 유사합니다. 따라서 이 시점에서 다음과 같이 자문할 수 있습니다. 특정 WordPress 기능을 사용하여 얻을 수 있는 것은 무엇입니까? 특히 WordPress 문서에 따르면 이러한 도우미 함수가 사용하는 것이 바로 이것이라는 점을 고려하면 PHP require 를 직접 사용하는 것과 동일하지 않습니까?

글쎄, 주된 이유는 실제로 문서 자체에 언급되어 있습니다. 자식 테마를 쉽게 만들 수 있습니다. 따라서 자식 테마를 만들고 get_template_part 를 사용하는 경우 WordPress는 자식에서 템플릿을 찾고 그렇지 않은 경우 부모의 템플릿을 사용합니다.

하지만 그게 다가 아닙니다! WordPress 기능은 일반적으로 최종 결과를 조정할 수 있는 필터와 작업으로 가득합니다. 예를 들어 wp-includes/general-template.php 파일에서 내부 함수 get_template_part 를 보면 다음과 같습니다.

 function get_template_part( … ) { do_action( "get_template_part_{$slug}", … ); … do_action( 'get_template_part', … ); if ( ! locate_template( … ) ) { return false; } }

플러그인과 테마 자체에서 활용할 수 있는 몇 가지 작업이 있음을 알 수 있습니다. 그리고 스레드를 계속 당기면 WordPress가 어떻게 위치를 찾고( locate_template ) 템플릿을 로드하는지 볼 수 있습니다.

 function locate_template( $template_names, … ) { $located = ''; foreach ( $template_names as $name ) { if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in child theme break; } else if ( file_exists( STYLESHEETPATH . "/$name" ) ) { $located = …; // in parent theme break; } else { … } } if ( $located ) { load_template( $located, $require_once, $args ); } return $located; }

오늘의 포스트가 워드프레스 테마가 어떻게 작동하는지 조금 더 잘 이해하는 데 도움이 되었기를 바랍니다. 또한 문서를 읽고 소스 코드를 검색하여 WordPress에 대해 배우는 방법을 보여주기를 바랍니다. 그리고 마음에 들면 친구들과 공유하고 댓글을 남겨주세요.

Unsplash에 있는 Joshua Sortino의 추천 이미지.