워드프레스 '영화 리뷰' 글 유형 추가하기[사용자 정의 글 유형 사용]

워드프레스에서 대표적인 글 형식(Post Type)으로 글(Post)과 페이지(Page)가 있습니다. 이외에도 워드프레스에서는 개인화된 글 형식, 즉 사용자 정의 글 형식(Custom Post Type)을 만들 수 있습니다. 예를 들어, 이 글에서 다루게 될 "영화 리뷰" 글 형식이나 "포트폴리오", 혹은 "임원 소개" 등 보통의 글과는 다른 특정 형식을 가진 글 유형을 추가할 수 있습니다. (Post Type에 대한 자세한 내용은 여기를 참고하시기 바랍니다.)

Movie Review in WordPress

위와 같은 글을 꾸준히 작성한다고 가정할 경우, 먼저 위와 같은 레이아웃을 하나 만들어 글을 작성하고 그 다음부터는 이전 글을 복제(Clone)하여 사용하는 것을 생각해볼 수 있습니다. 이 경우, 매번 글을 복제하여 수정해야 하는 번거로움이 있고, 두 번째는 레이아웃을 변경하고자 하는 경우에는 이때까지 작성한 글의 레이아웃을 모두 변경해야 하는 사태가 발생할지도 모릅니다. 그러므로 단순히 글(Post)을 활용하여 위와 같이 다소 특화된 글을 작성하는 것은 비효율적임을 깨달을 수 있습니다.

이런 경우에 위와 같은 영화 감상평에 대한 글들을 모아서 관리할 수 있다면 좋을 것입니다. 그리고 레이아웃을 수정하고 싶을 경우 쉽게 수정할 수 있어야 할 것입니다. 그리고 카테고리와 같은 별도의 분류 체계도 갖추면 좋겠습니다.

이 경우 사용자 정의 글 유형(Custom Post Type)을 이용할 수 있습니다.

참고로 글(Post)의 카테고리 기능을 활용해도 비슷한 효과를 얻을 수 있습니다. 즉, 특정 카테고리 내의 글을 위의 그림과 비슷하게 레이아웃이 나오도록 조정하는 방법이죠. 이 방법을 선택하면 사용자 정의 글 유형을 이용하는 것보다 작업 흐름이 훨씬 더 간편해지고 카테고리 기능도 그대로 이용할 수 있으므로 장점이 있는 반면, 글(Post) 유형을 활용하는 것이므로 다른 글과 확실히 분리시키는 것이 쉽지 않을 것 같고 글 템플릿에서 카테고리에 맞게 태그를 추가하는 작업이 초보자가 하기에는 쉽지 않을 것입니다. 두 가지 방법 사이에는 장단점이 있으므로 상황에 맞게 선택하시기 바랍니다.

이 글에서는 "Movies"라는 새로운 사용자 정의 글 유형을 활용하여 "영화 리뷰"를 워드프레스에 추가하는 방법을 살펴보겠습니다.

※참고로 코딩 작업 없이 영화 검색 사이트, 부동산 매물 검색 사이트 등과 같은 커스텀 포스트 타입과 커스텀 검색 기능을 구현하고 싶은 경우 Toolset 툴을 사용할 수 있습니다.

어떻게 접근할 것인가?

먼저 "영화 리뷰"에 들어갈 항목과 레이아웃에 대해 구상하도록 합니다. 위의 그림에서는 다음과 같은 항목이 포함되어 있습니다.

Custom Fields in Movie Review in WordPress

위와 같은 필드를 별도로 추가하여 개별 글에 표시되도록 해야 합니다. 이 작업도 아래에서 할 것입니다. 전체적으로 다음과 같은 순서로 "영화 리뷰" 글 유형을 워드프레스에 추가합니다.

  1. Moives 사용자 정의 글 유형(Custom Post Type) 만들기
  2. 사용자 정의 필드(Custom Field)
  3. 개별 글에 대한 템플릿 만들기
  4. 아카이브 템플릿 만들기
  5. 분류 만들기

다소 복잡할 것 같지만 프로세스는 직관적인 편입니다. 한 번만 익히면 쉽게 응용하여 다른 글 유형도 쉽게 만들 수 있습니다. 하지만, 한편으로는 초보자들이 따라 하기에 쉽지 않은 부분이 일부 있습니다. 바로 템플릿 레이아웃을 수정하는 작업입니다. 이 작업의 성공 여부는 레이아웃을 얼마나 잘 구성하는가에 달려 있다고 생각됩니다. 이를 위해서는 약간의 PHP와 CSS에 대한 지식이 필요합니다. 그리고 테마에 따라 쉬울 수도 있고 어려울 수도 있을 것 같습니다. 워드프레스에서 성공을 결정짓는 가장 큰 요소 중 하나가 테마일 것입니다. 여기서도 테마의 위력이 나타나는 것이죠. 사설이 길어졌네요. 이제 본격적으로 시작해볼까요? 먼저 새로운 "글 유형"부터 만들어봅시다.

워드프레스 '영화 리뷰' 글 유형 만드는 방법

"Movies" 사용자 정의 글 유형 추가하기

사용자 정의 글 유형을 추가하려면 수동으로도 가능하지만, 여기에서는 Custom Post Type UI라는 플러그인을 사용하도록 하겠습니다. 이 플러그인이 설치되어 있지 않다면 지금 설치하여 활성화하도록 합니다.

Custom Post Type UI를 설치하고 활성화하면 대시보드(알림판)에 CPT UI라는 메뉴가 왼쪽에 추가됩니다. "CPI UI"를 클릭하고 들어가서 Add/Edit Post Types를 클릭하여 새로운 글 유형을 추가합니다.
Add Movies Custom Post Type in WordPress using CPT UI
적당히 기입하도록 합니다. 저는 Movie라는 단어를 사용하여 만들어보았습니다. 포트폴리오라면 "Portfolio", 서비스라면 "Service" 등을 사용하면 되겠죠? 위에서는 영어로 입력했지만, Post Type Slug를 제외하고는 한글로 입력해도 됩니다.

그리고 여기서는 Archive를 만들 예정이므로 "Has Archive" 설정을 아래 그림과 비슷하게 설정하도록 하십시오.

Has Archive

자, 위와 같이 입력하고 저장한 후에 새로 고침하면 왼쪽 패널에 방금 만든 사용자 정의 글이 추가된 것이 보이나요?
Movie Review Menu item added to Dashboard

계속하여 각 글에 추가할 사용자 정의 필드(Custom Field)를 추가하도록 합니다.

사용자 정의 필드(Custom Field) 추가하기


여기서 만들고자 하는 "영화 리뷰"에는 일반 글에 없는 항목이 몇 개 있습니다. 바로 "영화 제목", "감독", "출연", "평점", "트레일러 YouTube 동영상"이 바로 그것입니다. 이러한 각 항목을 사용자 정의 필드로 추가하면 각 항목이 값을 가지게 되므로 나중에 다른 용도로도 활용할 수 있습니다. 우선은 각 항목을 사용자 정의 필드로 추가하고 그 값을 받아서 단일 글(Single Post)에 표시되도록 하겠습니다.

이 작업은 Advanced Custom Fields라는 플러그인을 사용하도록 하겠습니다. 이 플러그인이 없다면 설치하여 활성화하시기 바랍니다. 이 플러그인을 설치하여 활성화하면 "Custom Fields"라는 메뉴가 대시보드의 왼쪽 패널에 표시됩니다. "Custom Fields"를 클릭하여 새로운 필드를 추가하도록 합니다.

Add New Field Group

먼저 "필드 그룹"을 하나 만듭니다. 저는 "Movies"라고 하나 만들었습니다. 그런 다음 이 그룹에 사용자 필드를 추가하도록 합니다.

Add individual custom fields in WordPress

원하는 필드를 추가하시면 됩니다. 저는 위와 같이 추가했습니다. 관람평만 숫자로 지정했고 나머지는 모두 "텍스트"로 지정했습니다. 관람평의 경우 5점 만점 기준으로 숫자를 기입하면 별표로 보여주도록 만들 것입니다. 그리고 "Location"에서 "Post Type"을 "movie"로 지정하도록 합니다. 그래야 여기에서 추가하는 사용자 필드 그룹이 새로 만들 글 유형에만 표시됩니다.

이것으로 Movies 글 유형에 새로운 사용자 정의 필드 그룹이 추가되었습니다. "Movie Review"를 누르고 글을 하나 작성해보면 글 쓰기 편집기 바로 아래에 방금 추가한 사용자 필드들이 표시될 것입니다.

계속하여 개별 글에 대한 템플릿을 만들어보겠습니다.

Movies 글 유형에 대한 글 템플릿 만들기

글 템플릿을 처음부터 새로 만드는 것은 쉬운 일이 아니므로 기존의 글 템플릿을 활용하여 만들도록 하겠습니다. 다음 과정에 따라 새로운 글 유형에 대한 글 템플릿을 만들 수 있습니다.

  1. single-movie.php 파일(빈 파일)을 만듭니다.
  2. single.php 파일의 내용을 모두 복사합니다.
  3. 복사한 내용을 single-movie.php 파일에 붙여넣기 합니다.
  4. single-movie.php 파일을 수정합니다.

매우 간단하죠? 본래 알면 간단하고 모르면 고생하는 법이죠. 문제는 single-movie.php를 어떻게 수정하느냐입니다. 참고로 일부 테마의 경우 single.php에 모든 내용이 있는 것이 아니라 content.php와 같은 다른 파일을 불러오는 코드로 되어 있을 수 있습니다.

예를 들어, 테스트한 테마가 Twenty Thirteen 테마인데요, single.php 파일을 살펴보면

<?php get_template_part( 'content', get_post_format() ); ?>

위와 같은 부분이 본문 부분은 content.php 파일을 불러오겠다는 의미입니다. get_template_part()에 대한 내용은 여기를 참고하시기 바랍니다.

그래서 저는 간단하게 위 코드 부분을 "content.php" 파일의 내용으로 붙여넣기 했습니다. 그런 다음 본문 글 바로 위에 다음 코드를 추가하여 사용자 정의 필드가 표시되도록 했습니다.

<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%"><strong>제목:</strong></td>
<td width="75%"><?php the_field('title'); ?></td>
</tr>
<tr>
<td><strong>감독:</strong></td>
<td><?php the_field('director'); ?></td>
</tr>
<tr>
<td><strong>출연:</strong></td>
<td><?php the_field('actors'); ?></td>
</tr>
<tr>
<td><strong>평점:</strong></td>
<td><?php if( get_field('rating') ) {
$starNumber = get_field('rating');

for($x=1;$x<=$starNumber;$x++) {
echo '<img src="http://www.site-url.com/star.png" />';
}
if (strpos($starNumber,'.')) {
echo '<img src="http://www.site-url.com/half.png" />';
$x++;
}
while ($x<=5) {
echo '<img src="http://www.site-url.com/blank.png" />';
$x++;
}
echo '(';
the_field('rating');
echo ')';
}
?></td>
</tr>

<tr>
<td><strong>트레일러:</strong></td>
<td><?php if( get_field('youtubeurl') ){
$embed_code = wp_oembed_get( get_field('youtubeurl'), array('width'=>440) );
echo $embed_code;
} ?></td>
</tr>

</table>

그리고 참고로 "movie"에 해당하는 글 유형을 보여주려면

is_singular( 'movie' );

위와 같은 코드를 사용해야 한다고 워드프레스 설명서에 나옵니다(여기 참고). 하지만 이 코드가 안 먹힌다면 다음 코드를 사용하시기 바랍니다.

if ( 'movie' == get_post_type() )

참고로 is_single()은 모든 글 유형(attachment와 page post type 제외)의 단일 글을 표시할 때 사용됩니다. 그러므로 single.php 내용 중 is_single()은 그대로 두면 새롭게 만든 사용자 정의 글 유형까지 모두 포함하므로 single-movie.php 파일에서 위에 나와 있는 "사용자 정의 필드" 부분 외에는 굳이 수정하지 않아도 됩니다. (왜냐하면 is_single()이 이미 모든 글 유형을 포함하고 있기 때문이죠. 여기 참고.)

위의 코드에서 star.png, half.png, blank.png는 별의 모양을 나타내는 아이콘입니다. 각각 온별, 반별, 빈별(비어 있는 별)을 의미합니다. 인터넷에서 적당한 별을 다운로드하거나 직접 만드셔도 됩니다.

위와 같이 수정하고 Movie Review에서 글을 하나 작성해보면 다음과 같이 표시됩니다.
Movie Review in WordPress
어떤가요? 그럴듯하게 보이죠? 레이아웃은 구미에 맞게 수정하시면 됩니다.

이제 계속하여 아카이브 페이지를 만들어 보겠습니다.

아카이브 페이지 만들기

이 샘플에서 새롭게 만든 글 유형의 아카이브 페이지는 http://www.your-url/movie가 됩니다. 하지만 이 페이지에 접속해보면 없는 페이지로 나오거나 글 내용이 표시되지 않을 것입니다. 왜냐하면 archive 페이지가 없기 때문이죠. archive 페이지도 기존 archive 템플릿을 활용하도록 하겠습니다.

  1. archive-movie.php 파일(빈 파일)을 만듭니다.
  2. archive.php 파일의 내용을 모두 복사합니다.
  3. 복사한 내용을 archive-movie.php 파일에 붙여넣기 합니다.
  4. archive-movie.php 파일을 수정합니다.

위의 템플릿 파일 만드는 것과 동일하죠? 다만 single.php 파일이 archive.php 파일로 바뀐 것만 다릅니다. 자 그럼 archive-movie.php 파일을 어떻게 수정하면 될까요? 그대로 두면 is_single() 부분의 내용이 그대로 적용됩니다. 혹시 아카이브 페이지가 제대로 표시되면 굳이 수정할 필요가 없습니다. 저는 if ( 'movie' == get_post_type() ) 조건문을 사용하여 적절히 수정했습니다. 이렇게 수정하면 Twenty Thirteen 테마에서 다음과 같이 표시됩니다.
Movie Review Category
테스트에 사용한 테마에서는 요약문(excerpt) 대신 전체 글을 표시하는데, 요약문이 나오도록 만 수정했습니다.

이것으로도 대충 "영화 리뷰" 글 유형을 만들었습니다. 여기까지 진행해도 됩니다만, 테스트로 각 영화별로 장르를 추가하고 장르별로 분류 페이지를 만들어보려고 합니다. 이 작업을 수행하려면 Taxonomy라는 다소 생소한 개념을 이해하고 활용해야 합니다.

Taxonomy로 분류 만들기

WordPress Codex에 의하면 Taxonomy는 글을 그룹별로 묶는 방식이라고 설명되어 있습니다(여기 참고). 카테고리나 태그와 유사한 종류 중 하나로 보셔도 될 것 같습니다. 태그도 비슷한 유형을 하나로 묶는 기능을 하는 것이고 카테고리도 비슷합니다. 다만, 여기서는 새로운 글 유형에 새로운 분류를 추가하려고 하기 때문에 Taxonomy가 적절합니다. (Taxonomy는 보통 "분류"라고 번역됩니다.)

Taxonomy 만들기

워드프레스 대시보드의 CTP UI를 클릭하고 Add/Edit Taxonomies를 선택하여 새로운 분류를 만듭니다.
Genre Taxonomy
저는 "장르"라는 분류를 만들었습니다. 여기에 "액션", "멜로", "드라마"... 등과 같은 장르를 추가할 예정입니다. 여기서 위의 그림에 표시된 것처럼 Attach to Post Type에 "Movies"를 선택하도록 합니다. Taxonomy를 만들었으면 이것을 "Movies" 글 유형에서 사용하도록 설정해야겠죠?
CTP UIAdd/Edit Post Types로 이동하여 "movie" 편집 화면에서 "Built-in Taxonomies" 섹션으로 이동하여 방금 만든 분류를 체크하도록 합니다.
Built in Taxonomies for Genres

Genre 분류 아카이브 만들기

위에서 만든 "장르" 분류의 아카이브를 만들도록 합니다. 방식은 위와 동일합니다. 이제 archive-movie.php의 내용을 그대로 활용할 것입니다.

  1. taxonomy-genre.php 파일(빈 파일)을 만듭니다.
  2. archive-movie.php 파일의 내용을 모두 복사합니다.
  3. 복사한 내용을 taxonomy-genre.php 파일에 붙여넣기 합니다.
  4. taxonomy-genre.php 파일을 수정합니다.

수정할 내용은 거의 없고 하나만 수정하도록 합니다. ‘book’ == get_post_type() 부분을 다음 코드로 수정합니다.

is_tax('genre')

archive.php 파일을 수정하지 않고 그대로 archive-moive.php에 사용한 경우에는 taxonomy-genre.php 파일도 수정할 필요가 없습니다.

Genre 분류를 개별 글/아카이브에 표시하기

Show Genre Taxonomy
그림과 같이 장르 이름을 개별 글이나 아카이브에 표시하려면 다음 코드를 사용합니다.

<?php echo get_the_term_list( $wp_query->post->ID, 'genre', '', ', ', '' ); ?>

Conclusion

이상으로 모든 과정이 완료되었습니다. 미흡한 점이 있다면 하나씩 수정해 나가시면 될 것입니다. 이 글은 워드프레스 사용자 정의 글 유형을 사용하여 “북리뷰” 만들기의 후속편입니다. 사실 둘은 동일한 내용을 다루고 있지만, 이 글에서는 이전 글에서 미흡한 부분을 터치하고 싶었습니다. 하지만 시간과 역량 부족으로 자세히 설명하지 못하고 간략히 넘어간 곳이 많습니다. 만약 모르는 함수가 나왔다면 WordPress Codex 문서를 검색하여 확인해보실 것을 권장합니다. 잘 이해가 안 되는 부분이 있다면 댓글로 알려주시기 바랍니다.

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

8개 댓글

  1. 이게 벌써 3년전인데...혹시 아직도 작동이 되는지 궁금합니다. 아니면 더 좋은 방법이 생겼는지도요...

    1. 안녕하세요?

      워드프레스 문서를 참고하여 작성했기 때문에 워드프레스 문서에서 내용이 바뀌지 않은 이상 제대로 작동할 것 같습니다.

      그냥 기본 글 유형을 이용하려는 경우,

      1. 레이아웃을 제대로 잡아서 글을 작성합니다.
      2. 추후부터는 글 복제 플러그인을 사용하여 글을 복제한 후에 내용을 수정합니다.

      이런 방법도 괜찮을 것 같습니다. 다른 글과의 구분은 카테고리로도 가능하고요.

      글을 복제하는 방법은 다음 글을 참고해보세요.

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EA%B8%80%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A5%BC-%ED%81%B4%EB%A6%AD-%ED%95%9C-%EB%B2%88%EC%9C%BC%EB%A1%9C-%EB%B3%B5%EC%A0%9C%ED%95%98%EA%B8%B0/

  2. 안녕하세요. 위에 예시를 따라해 보다가 약간 문제가 생겼는데요. 테마폴더에 single-movie.php이 업로드가 되지 않습니다. 새로 만든 파일은 전부 업로드가 안되네요. single.php파일은 테마에서 다운도 되고 업로드도 됩니다. 검색을 해도 답을 찾아서 문의드립니다. 이유를 알수 있을까요. SFTP는 파일질라를 쓰고요. 아마존라이트세일 bitnami로 설치했습니다.

    1. 안녕하세요?

      single.php 파일은 업로드가 되지만 single-movie.php 파일이 업로드가 안 된다는 것은 정상적이지 않은 것 같습니다.

      워드프레스와는 상관 없고요, 서버 세팅에 문제가 있는 것 같습니다.

      이 경우 경험상 ownership 문제일 가능성이 높습니다.

      http 소유자를 찾아서 올바르게 설정해주어야 할 것입니다.

      Ubuntu의 경우 보통 www-data이지만, 서버에 따라 조금씩 다를 수 있습니다.

      예를 들어, 다음과 같이 소유권을 지정할 수 있습니다.

      sudo chown -R www-data:www-data wordpress/
      sudo usermod -a -G www-data www-data

      저는 Ubuntu에 워프를 설치할 때 위와 비슷하게 소유권을 설정해줍니다. 대부분은 별 문제가 없이 작동하였습니다.

      잘 해결이 안 되면 서버 관리자나 서버 전문가에게 문의해보시기 바랍니다.

      아마존 라이트세일이 저렴하게 가상서버호스팅을 이용할 수 있어 좋기는 하지만 서버를 직접 세팅하여 운영해야 하는 번거로움이 있습니다. 리눅스 서버에 대한 지식이 부족하면 스트레를 많이 받을 수도 있을 것입니다.

  3. 안녕하세요. 알려주신 가이드대로 했는데
    스마트폰이나 태블릿에서는 보이지 않습니다.
    pc에서는 잘 구현되었고요. 원인을 알 수 있을까요?

    1. 안녕하세요?

      블로그를 방문해주셔서 감사합니다.

      위의 코드는 모바일/PC 여부에 상관 없이 적용될 것 같습니다.

      잘 안 된다면...

      1) 모바일 폰에서 브라우저 검색 기록/캐시를 삭제해보시기 바랍니다.
      2) 적용된 코드에 혹시 모바일에서 숨겨지도록 하는 코드가 적용되어 있지 않은지 확인해보세요.

      그럼, 문제가 잘 해결되기를 바랍니다.

      즐거운 하루 되세요^^

  4. 안녕하세요..... 궁금한게 있는데요...

    커스텀필드는 잘 나옵니다...

    일반 post 에 작성한 글은 나오지가 않네요....예를들면 위에서 영화상세 설명등은

    직접 써야되는부분인데요...이부부은 일반 post로 작성하는게 아닌가여?

    작성을 한다해도..해당 컨텐츠에는 커스텀필드 양식만 나오네요 ㅠㅠ

    1. 위에서 영화 상세 설명은 post에서 직접 작성하도록 해도 되고, 아니면 custom field로 별도의 필드를 추가해도 될 것입니다. 그것은 편하신 대로 처리하면 좋을 듯 합니다.

      post에서 작성한 글이 안 나온다는 것은 single post 파일(테마에 따라 다름)에서 content 부분이 삭제되지 않았는지 확인해보아야 할 것 같습니다.

댓글 남기기

* 이메일 정보는 공개되지 않습니다.