WordPress에서 사용자 지정 단일 게시물 템플릿을 만드는 방법

동일한 사이트의 다른 게시물과 레이아웃이 완전히 다른 게시물 세부 정보 페이지를 본 적이 있습니까? 맞춤 템플릿을 사용하기 때문일 수 있습니다. 개별 게시물에 사용자 지정 템플릿을 할당하여 사이트 모양에 대한 유연성을 높일 수 있습니다.

사용자 지정 단일 게시물 템플릿을 만드는 방법에 관심이 있으십니까? 이번 포스팅에서는 간단하게 나만의 것을 만드는 방법을 알려드리겠습니다!

사용자 지정 템플릿의 이점

템플릿 만들기를 시작하기 전에 사용자 지정 템플릿이 필요한 이유와 그 기능을 살펴보겠습니다.

특정 게시물 또는 게시물 유형을 나머지 콘텐츠에서 돋보이게 하려면 사용자 지정 단일 게시물 템플릿을 만드는 것이 좋습니다. 이 템플릿은 할당한 게시물에만 적용되므로 표준 게시물과 완전히 다른 레이아웃을 가질 수 있습니다. 고유한 디자인과 레이아웃은 특정 게시물에 대한 사용자 참여를 높일 수 있습니다.

직접 개발할 준비가 되셨습니까? 사용자 지정 게시물 템플릿을 만들고 사용하는 것은 사용자 지정 페이지 템플릿과 유사합니다.

맞춤 게시물 템플릿을 만드는 방법

예를 들어 Twenty Seventeen 테마를 사용하지만 프로세스는 모든 테마에서 동일합니다.

맞춤 게시물 템플릿을 만들기 전에 먼저 하위 테마를 만듭니다. 기본 테마에서 작업할 수 있지만 사용자 지정 템플릿을 만드는 중이므로 상위 테마를 업데이트하면 템플릿이 손실됩니다. 이러한 이유로 사용자 지정 템플릿을 기본 테마와 별도로 유지하는 것이 좋습니다.

사용자 지정 템플릿의 경우 템플릿 이름(템플릿 이름) 및 템플릿 게시 유형(이 템플릿이 사용될 위치)을 정의해야 합니다. 다음과 같습니다.

 [php]
<?php
/* 템플릿 이름: 전체 너비 게시물 * 템플릿 게시물 유형: 게시물*/ /*전체 너비 단일 게시물을 표시하기 위한 템플릿입니다. */
get_header( );
?>
[/php]

파일을 저장할 때 full-width-post.php 와 같이 템플릿 이름과 관련된 파일 이름을 유지하십시오. 관리자 패널에서 게시물을 보면 게시물 속성 섹션의 드롭다운에 새 템플릿이 표시됩니다.

맞춤형 템플릿이 준비되었지만 아직 유용하지 않습니다. 조금 더 유익하게 만들어 봅시다!

참고: 여러 파일에 대해 작업할 것이므로 파일 이름과 폴더를 추적하십시오.

Twenty Seventeen 테마의 현재 블로그 게시물 페이지 레이아웃은 다음과 같습니다. 나는 그것에 만족하므로 그대로 두겠습니다.

이제 몇 개의 게시물에 대해 전체 너비 레이아웃을 원한다고 가정해 보겠습니다. 메타 데이터 위에 게시물 제목을 배치합니다. 메타 데이터는 상단과 하단에 테두리가 있어야 하며 제목과 메타 데이터는 모두 중앙 정렬되어야 합니다. 와이어프레임은 다음과 같습니다.

이 레이아웃을 만들려면 게시물 세부 정보 페이지를 표시하는 파일을 찾아야 합니다. 대부분의 테마에서 특정 미리 정의된 템플릿이 없는 한 single.php 파일입니다. 코드 구조는 테마마다 다르므로 특정 테마의 작동 방식을 이해하려면 약간의 학습이 필요할 수 있습니다.

게시물 상세 페이지를 표시하는 파일을 찾으셨다면 다른 파일을 호출하는 함수를 사용한 것인지, 템플릿을 직접 생성한 것인지 확인해야 합니다. Twenty Seventeen 테마가 있는 이 예에서는 get_template_part 함수입니다.

get_template_part 경로는 여기에서 따라야 할 가장 중요한 부분입니다.

 [php]

<div class="wrap">

<div id="기본" class="content-area">
        	<main id="main"; class="사이트 메인" role="main">
              	<?php /* 루프 시작 */ while ( have_posts() ) : the_post(); get_template_part( '템플릿 부품/게시물/콘텐츠', get_post_format() ); // 댓글이 열려 있거나 댓글이 하나 이상 있으면 댓글 템플릿을 로드합니다. if ( comment_open() || get_comments_number() ) : comments_template(); 끝; the_post_navigation( array( 'prev_text' => '<span class="screen-reader-text">' . __( '이전 게시물', 'twentyseventeen' ) . '</span><span aria-hidden="true" class="nav-subtitle">' . __( ' 이전', 'twentyseventeen' ) . '</span> <span class="nav-title"><span class="nav-title-icon-wrapper">' . span>%title</span>',
                          	'next_text' => '<span class="screen-reader-text">' . __( '다음 포스트', '트웬티세븐틴' ) . '</span><span aria-hidden="true"; class="nav-subtitle">' . __( '다음', '트웬티세븐틴' ) . '</span> <span class="nav-title">%title<span class="nav-title-icon-wrapper">' . Twenseventeen_get_svg( array( 'icon' => '오른쪽 화살표' ) ) . '</span></span>',
                    	) );
              	도중에; // 루프의 끝.
              	?>
[/php]

보시다시피 경로를 나타냅니다.

 [php]
get_template_part( '템플릿 부품/게시물/콘텐츠', get_post_format()
);
[/php] 

그래서 single.ph 내에서 content.php 파일을 호출하여 게시물 상세 페이지를 출력합니다.

이제 single.php 파일이 어떻게 작동하는지 알았으니 여기에서 코드를 복사하여 하위 테마에서 이전에 만든 full-width-post.php 파일에 붙여넣어 보겠습니다. 전체 너비 템플릿이므로 사이드바를 제거하겠습니다.

이제 위에서 언급한 경로에서 content.php 파일을 복사합니다. 템플릿 파일이 있는 동일한 디렉토리에 붙여넣을 수 있지만 상위 테마와 동일한 폴더 구조를 따르는 것이 좋습니다.

파일 이름을 그대로 유지할 수 있지만 기본 템플릿에서 무언가를 변경하려는 경우 충돌이 발생합니다. 문제를 방지하려면 파일 이름을 바꾸고 content-full-width.php 와 같이 템플릿 이름과 관련되도록 유지하는 것이 좋습니다.

파일이 제자리에 있으므로 이제 게시물 제목과 게시물 메타 데이터를 교체하도록 코드를 수정하겠습니다.

 [php]

<header class="entry-header">
        	<?php

        	if ( is_single() ) {
              	제목( '

<h1 class="entry-title">', '</h1>

' );
        	} elseif ( is_front_page() && is_home() ) {
              	제목( '

<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) . '' rel="bookmark">', '</a></h3>

' );
        	} 또 다른 {
              	제목( '

<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '' rel="bookmark">', '</a></h2>

' );
        	}

        	if ( '포스트' === get_post_type() ) {

              	에코 '

<div class="entry-meta">';
                    	if ( is_single() ) {
                    	  	27teen_posted_on();
                    	} 또 다른 {
                          	에코 27teen_time_link();
                          	27세_edit_link();
                    	};
              	echo '</div>

<!-- .entry-meta -->';
        	};
        	?>
  	</header>

<!-- .entry-header -->
[/php]

이 템플릿을 사용하려면 WordPress 관리자에서 원하는 게시물을 편집하고 드롭다운 메뉴에서 템플릿을 할당합니다.

프런트 엔드에서 게시물을 확인하면 여전히 전체 너비가 아니지만 제목과 메타 데이터가 위치가 바뀌었으므로 게시물이 사용자 지정 템플릿을 사용하고 있음을 알 수 있습니다.

전체 너비로 만들기 위해 일부 CSS를 추가해야 합니다. WordPress는 본문 섹션의 템플릿 이름에 따라 자동으로 클래스를 생성합니다.

해당 클래스를 사용하여 이 특정 템플릿을 대상으로 지정합니다. 자식 테마 style.css 파일에 CSS를 추가할 수 있습니다.

 [CSS]
.post-template-full-width-post.has-sidebar:not(.error404) #기본{
플로트:없음;
폭:자동;
}

.post-template-full-width-post .entry-header{
텍스트 정렬:가운데;
margin-bottom:1.3em;
}

.post-template-full-width-post .entry-meta{
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
패딩:15px 0;
}
[/css]

이제 원하는 대로 레이아웃이 만들어졌습니다. 이 템플릿을 사용하는 모든 게시물은 이와 똑같은 스타일을 갖게 됩니다.

요구 사항에 맞게 원하는 만큼 사용자 지정 템플릿을 만들 수 있습니다. 게시물 카테고리를 기반으로 템플릿을 만들 수도 있습니다.

이를 위해 플러그인을 사용할 수 있습니까?

PHP 코드에 익숙하지 않은 경우 일부 플러그인을 사용할 수 있지만 사용자 지정 게시물 템플릿을 만드는 데 사용할 수 있는 플러그인이 거의 없으며 템플릿을 수동으로 만들어야 하기 때문에 대부분 유용하지 않습니다.

Post Custom Templates Lite 플러그인이 매우 유용하다는 것을 알게 되었습니다. 멋진 드래그 앤 드롭 인터페이스에서 코딩 없이 게시물 템플릿을 만들 수 있는 무료 플러그인입니다. 많은 사용자 지정 옵션이 있으므로 게시물 템플릿을 사용자 지정하려는 경우 일반적으로 이 플러그인이 도움이 될 수 있습니다.

참고: 무료 버전에서는 일반 게시물 템플릿만 사용자 지정할 수 있습니다. 사용자 지정 게시물 템플릿을 만들고 몇 가지 추가 기능을 얻으려면 프로 버전을 사용해야 합니다.

결론

수동으로 작업하든 플러그인을 사용하여 사용자 지정 단일 게시물 템플릿을 생성하든 관계없이 가장 중요한 게시물을 나머지 게시물과 차별화할 수 있습니다. 영감을 얻으려면 Brian Dean의 사이트를 확인하십시오. 그는 자신의 최종 가이드 포스트에 특정 템플릿을 사용하여 나머지 포스트에서 고유하게 보이도록 합니다.

따라서 시도해보고 자신만의 고유한 단일 게시물 템플릿을 만드십시오! 구축하는 모든 사이트에서 최상의 결과를 얻으려면 WP Engine의 관리형 호스팅 플랫폼을 WordPress 호스팅의 단일 소스로 선택하십시오!