사용자정의 포스트 타입을 이용해서 뉴스 기사 작성하기

뉴스 기사를 작성하기 위해 사용자정의 포스트 타입(Custom Post Type)의 기능을 이용해서 기존 기사와는 별도로 독립된 형태의 뉴스를 작성하고 관리한다.

  1. 뉴스 기사 작성하기
    뉴스 기사를 작성하기 위해 뉴스 기사를 목록으로 표시할 수 있는 인덱스 페이지와 기사의 개별 페이지를 작성한다. 인덱스 페이지에는 네비게이션바로부터 접속할 수 있게 하고, 톱페이지에는 최신 뉴스 기사를 표시한다. 이 과정에서 사용자정의 포스트 타입(Custom Post Type)의 기능을 이용해서 뉴스 기사를 관리하고 페이지를 작성한다. 포스트 타입(Post Type)이란 워드프레스가 관리하는 콘텐츠의 그룹 단위이다. 예를 들어 기본으로는 ‘포스트’와 ‘페이지’라는 포스트 타입이 준비되어 있다. 사용자정의 포스트 타입이 기능을 이용하면 독자적인 포스트 타입을 작성해서 독립된 형태의 뉴스 기사를 관리 작성할 수 있다. 출력도 ‘포스트’와 ‘페이지’의 기사와는 별도로 처리되기 때문에 기존 기사와 함께 뉴스 기사가 출력되는 것을 방지할 수도 있다.
  2. 뉴스 기사를 관리하는 포스트 타입 작성하기
    function.php

    (생략)

    //뉴스 기사의 포스트 타입
    register_post_type(
    ‘news’,
    array(
    ‘label’ => ‘뉴스’,
    ‘hierarchical’ => false,
    ‘public’ => true,
    ‘has_archive’ => true,
    ‘supports’ => array(
    ‘title’,
    ‘editor’
    )
    )
    );

    ?>

    뉴스 기사를 관리하는 포스트 타입을 작성하기 위해 function.php를 열고 register_post_type()의 지정을 추가한다. register_post_type()의 파라미터는 ‘포스트 타입 이름’, array(~)라는 형식으로 입력하고, 포스트 타입 이름을 ‘news’라고 지정하고, 포스트 타입 이름은 내부적인 처리에서 사용되기 때문에 반각 영문자로 지정한다. array(~)에서는 포스트 타입의 옵션을 지정한다. 관리화면을 열면 메뉴 안에 ‘NEWS’라는 항목이 추가된다.
    label 파라미터
    메뉴에 표시하는 포스트 타입의 라벨 이름을 지정한다. 여기에서는 ‘뉴스’라고 지정한다.
    hierarchical 파라미터
    포스트 타입의 종류를 지정한다. ‘false’라고 지정한 경우 계층 구조가 없는 ‘포스트 형식’이 되고, ‘true’라고 지정한 경우 ‘정적 페이지’와 같은 형식이 된다. ‘포스트’ 형식으로 관리하기 위해 ‘false’라고 지정한다.
    public 파라미터
    작성한 포스트 타입을 관리화면에 표시하거나 작성한 기사의 페이지를 생성하기 위해서는 public 파라미터를 ‘true’라고 지정한다.
    has_archive 파라미터
    작성한 기사를 목록으로 표시할 수 있는 인덱스 페이지를 생성하기 위해서는 has_archive 파라미터를 ‘true’라고 지정한다.
    support 파라미터
    support 파라미터는 기사의 편집화면에 표시하는 항목을 지정한다. ‘title’과 ‘editor’라고 지정해서 제목과 본문의 입력 항목을 표시한다. 지정할 수 있는 주요 값은 다음과 같다.
    support 파라미터의 값    표시하는 항목
    title                                    제목
    editor                                본문
    thumbnail                          특성이미지
    excerpt                               요약
    custom-fields                   사용자정의 필드
    post-formats                        포스트포맷

  3. 작성한 포스트 타입에 뉴스 기사 작성하기
    새로운 NEWS 기사를 작성하고 [업데이트] 버튼을 클릭한다.
  4. 톱페이지에 뉴스 기사 표시하기
    home.php
    톱페이지에 뉴스 기사를 표시하기 위해 home.php에 루프를 추가하고, <?php query_posts(); ?>의 post_type 파라미터를 ‘news’로 지정하면 포스트 타입이 ‘news’인 기사만 출력할 수 있다. 기사의 제목과 작성 연월일을 출력하기 위해 <?php get_template_part(); ?>로 content-title.php를 로딩하고, <ul class=”newslist”>로 마크업한다.

    <?php get_header(); ?>

    (생략)

    <?php query_posts($myquery_pickup); ?>
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>
    <?php get_template_part(‘content’,’excerpt’); ?>
    <?php endwhile; endif; ?>
    </div>

    //톱페이지에 뉴스 기사 표시하기, 표시하는 기사의 수 지정하기
    <p class=”title”>NEWS</p><ul class=”newslist”>
    <?php query_posts(‘post_type=news&posts_per_page=2’); ?>
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>
    <?php get_template_part(‘content’,’title’); ?>
    <?php endwhile; endif; ?>
    </ul>

    <p class=”title”>RECENT POSTS</p>

    (생략)

  5. 표시하는 기사의 수 지정하기
    최신 2개의 뉴스 기사를 표시하기 위해 <?php query_posts(); ?>에 posts_per_page를 추가하고 값을 ‘2’로 지정한다.
  6. 뉴스 기사의 디자인 지정하기
    뉴스 기사의 디자인을 지정한다. 글 앞에 삼각형 이미지(arrow.png)를 표시하고, 전체를 회색선으로 장식한다. 이미지를 [sample] 테마 폴더로 업로드하면 톱페이지가 완성된다.
  7. 뉴스 기사의 개별 페이지 표시하기
    이번에는 뉴스 기사의 개별 페이지를 작성한다. 톱페이지에 표시한 뉴스 기사에는 개별 페이지로 이동하는 링크가 설정되어 있기 때문에 링크를 클릭해서 개별 페이지로 이동한다. 화면이 표시되면 single.php로 페이지가 생성되고, 뉴스 기사의 제목과 본문, 작성 연월일이 표시된다.
    ->MEMO
    고유주소(permalink)를 ‘디폴트(기본)’로 지정하지 않은 경우 사용자 정의 포스트 타입과 관련된 페이지가 표시되지 않거나, 템플릿으로 지정한 설정이 반영되지 않는 경우가 있다. 그럴 때 [설정]-[고유주소]를 열고 아무것도 하지 말고 [변경사항 저장] 버튼을 클릭해서 저장하면 고유주소 설정에 포스트 타입 정보를 반영시킬 수 있다.
  8. 뉴스 기사의 개별 페이지 전용 템플릿 준비하기
    뉴스 기사의 개별 페이지 표시를 사용자정의로 지정한다. 단, single.php를 편집하면 뉴스 기사 이외의 개별페이지에도 영향을 준다. 따라서 뉴스 기사의 개별 페이지만 생성하는 single-news.php를 작성해서 [sample] 테마 폴더로 업로드한다.
  9. 사이드바에 뉴스 기사로 이동하는 링크 표시하기
    뉴스 기사의 개별  페이지는 기사의 개별 페이지를 기본으로 작성하기 때문에 single.php의 소스를 모두 복사해서 single-news.php에 복사한다.
    복사한 후 뉴스 기사의 개별페이지에는 사이드바에 뉴스 기사로 이동하는 링크를 표시한다. 사이드바의 출력 내용을 로딩하는 <?php get_sidebar() ?>를 삭제해서 톱페이지와 마찬가지로 뉴스 기사의 제목과 작성 연월일을 출력하는 루프를 입력한다. 여기에서 post_per_page 파라미터로 5개의 기사를 출력하도록 지정한다. 전체는 <div id=”sidebar”><ul>~</ul></div>로 마크업해서 사이드바로 표시할 수 있게 준비한다.
    single-news.php

    <?php get_header(); ?>

    (생략)

    <p class=”pagenation”>
    <span class=”oldpage”><?php previous_post_link(); ?></span>
    <span class=”newpage”><?php next_post_link(); ?> </span>
    </p>
    <?php endwhile; endif; ?>
    </div>

    <!– 사이드바 –>
    <div id=”sidebar”>
    <ul>
    <li class=”widget”><h2>최신 뉴스</h2>
    <ul>
    <?php query_posts(‘post_type=news&posts_per_page=5’); ?>
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>
    <?php get_template_part(‘content’,’title’); ?>
    <?php endwhile; endif; ?>
    </ul>
    </li>
    </ul>
    </div>

    <?php get_footer(); ?>

  10. 메뉴의 제목 추가하기
    뉴스 기사로 이동하는 링크에 ‘최신 뉴스’라고 제목을 붙입니다. 이때 사이드바 메뉴의 디자인으로 표시하기 위해 제목을 <li><h2>~</h2></li>로 마크업하고, 링크를 <ul>~</ul>로 마크업한다.

    <?php get_header(); ?>

    (생략)

    <!– 사이드바 –>
    <div id=”sidebar”>
    <ul>
    <li class=”widget”><h2>최신 뉴스</h2>
    <ul>

    <?php query_posts(‘post_type=news&posts_per_page=5’); ?>
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>
    <?php get_template_part(‘content’,’title’); ?>
    <?php endwhile; endif; ?>
    </ul>
    </li>

    </ul>
    </div>

    <?php get_footer(); ?>

  11. 이동경로에 포스트 타입 표시하기
    기사의 개별 페이지의 이동 경로는 ‘TOP>카테고리>기사의 제목’이라는 형태로 표시된다. 그러나 뉴스 기사에는 카테고리가 없기 때문에 대신 ‘NEWS’라는 포스트 타입의 라벨을 표시해서 포스트 타입의 인덱스 페이지로 이동하는 링크를 설정한다.

    <?php get_header(); ?>

    <!– 이동경로 –>
    <div id=”breadcrumb”>
    <div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
    <a href=”<?php echo home_url(); ?>” itemprop=”url”>
    <span itemprop=”title”>TOP</span>
    </a> &rsaquo;
    </div>

    <div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
    <a href=”<?php echo get_post_type_archive_link($post_type); ?>” itemprop=”url”>
    <span itemprop=”title”>
    <?php $myposttype = get_post_type_object($post_type); ?>
    <?php echo $myposttype->label; ?>

    </span>
    </a> &rsaquo;
    </div>

    <div><?php the_title(); ?></div>
    </div>

    (생략)

    <?php get_footer(); ?>

    ->MEMO
    표시 중인 기사의 포스트 타입에 관한 데이터를 get_post_type_object($post_type)로 취득해서 $myposttype에 대입하면 포스트 타입의 라벨을 <?php echo $myposttype->label; ?>로 출력할 수 있다. 포스트 타입의 인덱스 페이지의 URL은 <?php echo get_post_type_archive_link($post_type); ?>으로 출력할 수 있다.

  12. 뉴스 기사의 인덱스 페이지 표시하기
    이번에는 뉴스 기사의 인덱스 페이지를 작성한다. 앞에서 추가한 이동경로의 ‘NEWS’를 클릭해서 인덱스 페이지를 연다. 그러나 화면에 아무것도 표시되지 않는다. 이것은 아무것도 설정하지 않은 index.php로 페이지가 생성되기 때문이다.
  13. 뉴스 기사의 인덱스 페이지의 전용 탬플릿 작성하기
    뉴스 기사의 인덱스 페이지를 생성하는 archive-news.php라는 템플릿을 작성해서 [sample] 테마 폴더로 업로드한다.
    인덱스 페이지는 카테고리 페이지를 기본으로 작성하기 때문에 카테고리 페이지를 생성하는 category.php의 소스를 모두 archive-news.php로 복사한다. 이렇게 하면 ‘news’ 포스트 타입의 모든 기사의 썸네일 이미지와 요약문이 오래된 기사부터 순서대로 표시된다.
  14. 기사의 제목과 본문 표시하기
    썸네일 이미지와 요약문 대신에 기사의 제목과 본문을 출력한다. 따라서 <?php get_template_part(); ?>의 파라미터를 content라고 지정해서 content.php를 로딩한다.
    archive-news.php

    <?php get_header(); ?>

    <!– 이동경로 –>
    <div id=”breadcrumb”>
    <div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
    <a href=”<?php echo home_url(); ?>” itemprop=”url”>
    <span itemprop=”title”>TOP</span>
    </a> &rsaquo;
    </div>
    //이동경로와 페이지 제목에 포스트 타입 표시하기

    <div><?php $myposttype = get_post_type_object($post_type); ?>
    <?php echo $myposttype->label; ?>
    </div>
    </div>

    <!– 콘텐츠 –>
    <div id=”content”>
    <p class=”title”><?php echo $myposttype->label; ?></p>
    //기사의 표시 수와 표시 순서 변경하기

    <?php query_posts(‘posts_per_page=5&order=DESC&’ . $query_string); ?>
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>
    //기사의 제목과 본문 표시하기

    <?php get_template_part(‘content’); ?>
    <?php endwhile; endif; ?>

    <?php get_template_part(‘pagenation’); ?>
    </div>

    <?php get_sidebar(); ?>

    <?php get_footer(); ?>

  15. 기사의 표시 수와 표시 순서 변경하기
    5개의 기사를 새로운 기사부터 순서대로 표시하기 위해 <?php query_posts(); ?>의 posts_per_page 파라미터의 값을 ‘5’로 변경하고. order 파라미터의 값을 ‘DESC’로 변경한다.
  16. 이동경로와 페이지  제목에 포스트 타입 표시하기
    뉴스 기사의 인덱스 페이지에서도 이동경로에 포스트 타입을 표시한다. 따라서 카테고리 이름을 출력한 <?php single_cat_title(); ?>을 삭제하고, get_post_type_object($post_type)로 포스트 타입에 관한 테이터를 $myposttype으로 취득해서 <?php echo $myposttype->label; ?>로 포스트 타입의 라벨을 출력한다.
    마찬가지로 페이지의 제목에도 라벨을 표시한다. get_post_type_object($post_type)으로 데이터를 취득하는 처리는 반복해서 입력할 필요가 없다. 모든 변경이 끝나면 뉴스 기사의 인덱스 페이지가 완성된다.
    ->MEMO
    archive-news.php는 ‘news’ 포스트 타입의 인덱스 페이지를 생성할 때만 사용하기 때문에 다음과 같이 직접 ‘NEWS’라도 입력해도 상관없다. 예제에서는 다른 포스트 타입을 작성할 때 소스를 활용하기 위해 get_post_type_object($post_type)으로 데이터를 취득해서 ‘NEWS’라는 라벨을 출력한다.

    <?php get_header(); ?>

    <!– 이동경로 –>
    <div id=”breadcrumb”>
    (생략)

    <div>NEWS</div>
    </div>

    <!– 콘텐츠 –>
    <div id=”content”>
    <p class=”title”>NEWS</p>

    (생략)

    ->MEMO
    $post_type은 표시 중인 포스트 타입의 이름을 지정하는 변수이다. 예제에서는 ‘news’라는 값이 지정된다.

  17. 네비게이션바에 뉴스 기사로 이동하는 링크 추가하기
    네비게이션바에 뉴스 기사의 인덱스 페이지로 이동하는 링크를 추가한다.

출처: 바꾸면서 배우는 워드프레스 디자인

“사용자정의 포스트 타입을 이용해서 뉴스 기사 작성하기”에 대한 한개의 댓글

답글 남기기