인덱스 페이지 작성하기

이전 기사에 접속하기 쉽도록 톱페이지와는 별도로 기사의 인덱스 페이지를 작성한다. 각 기사의 썸네일 이미지와 요약문을 표시한다.

-> POINT

  • 추천 기사를 표시하지 않기: 문의 페이지 작성하기: <?php query_posts(‘ignore_sticky_posts=1’); ?>
  • 기사의 표시 수 지정:  <?php query_posts(‘ignore_per_page=~’); ?>
  • 페이지마다  앞페이지의 이어진 기사 표시하기:  <?php query_posts(‘paged=’ .$paged); ?>
  1. 인덱스 페이지 작성하기
    인덱스 페이지는 정적 페이지 기능을 이용해서 작성한다. 새로운 페이지를 작성해서 제목을 ‘POSTS INDEX’, 본문에 ‘작성한 기사의 인덱스입니다’라고 입력한 수 [공개하기] 버튼을 클릭한다.
  2. 인덱스 페이지로 이동하는 링크 추가하기
    [외모]-[메뉴]에서 링크를 추가한 후 [메뉴에 추가] 버튼을 클릭한다.
  3. 인덱스 페이지 확인하기
    네비게이션바의 링크를 클릭해서 인덱스 페이지를 열면  제목과 본문이 표시된다.
  4. 사용자정의 템플릿 준비하기
    인덱스 페이지에 기사의 목록을 표시하도록 지정한다. 그러나 인덱스 페이지는 page.php로 생성되기 때문에 page.php를 편집하면  다른 정적 페이지에도 영향을 준다. 따라서 인덱스 페이지를 생성하기 위해 ‘myindex.php’라는 사용자지정의 템플릿을 작성해서 [sample] 테마 폴더로 업로드한다.
  5. page.php의 소스 복사하기
    page.php의 소스를 myindex.php에 복사한다. 워드프레스가 사용자정의 템플릿으로 인식할 수 있게 소스 앞에 템플릿 이름을 추가로 지정한다. 템플릿 이름을 ‘My Index’라고 지정한다.

    <?php
    /*
    Template Name: My Index
    */

    ?>
    <?php get_header(); ?>

    <!– 콘텐츠 –>
    (생략)

  6. 인덱스 페이지의 생성에 사용하는 템플릿 지정하기
    [페이지]-[모든 페이지]에서 ‘POSTS INDEX’의 편집화면을 열고 ‘템플릿’ 항목의 풀다운 메뉴에서 ‘My Index’를 선택한 후 [업데이트] 버튼을 클릭한다.
    인덱스 페이지를 확인하면 화면이 변경되지 않았다. myindex.php에 page.php 소스를 복사한 후 아직 다른 변경사항을 추가하지 않았기 때문이다.
    myindex.php
  7. 제목의 디자인  변경하기
    <?php
    /*
    Template Name: My Index
    */
    ?>
    <?php get_header(); ?><!– 콘텐츠 –>
    <div id=”content”>
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>
    //7. 제목 부분의 마크업 부분을 수정해서 기존 스타일시트가 적용되게 한다.
    <p class=”title”>
    <?php the_title(); ?></p>
    <?php the_content(); ?>
    <?php endwhile; endif; ?>
    //9. 작성한 기사 표시하기, 10. 추천 기사를 출력하지 않기, 11. 기사의 표시 수를 지정하기
    <?php query_posts(‘ignore_sticky_posts=1&posts_per_page=5&paged=’ . $paged); ?>

    //8.루프 추가하기
    <?php if(have_posts()): while(have_posts()):
    the_post(); ?>
    <?php get_template_part(‘content’,’excerpt’); ?>
    <?php endwhile; endif; ?>

    12. 6번째 이후 기사 구독하기
    <?php get_template_part(‘pagenation’); ?>

    </div><?php get_sidebar(); ?><?php get_footer(); ?>
  8. 루프 추가하기
    새로운 루프를 추가해서 기사를 표시한다. 이때 각 기사의 썸네일 이미지와 요약문을 표시하기 위해 루프 안에는 content-excerpt.php를 로딩하는 <?php get_template_part(); ?>를 입력한다. 그러나 루프의 기본 설정에서는 기사의 목록이 출력되지 않고 인덱스 페이지의 제목 등이 출력된다.
  9. 작성한 기사 표시하기
    기사를 목록화해서 표시하기 위해서는 <?php query_posts(); ?>를 추가한다. 이렇게 하면 루프의 기본 설정이 초기화되어 모든 기사가 출력된다. 여기서는 앞에서 작성한 2개의 추천기사와 4개의 기사가 표시된다. 4개의 기사는 ‘페이지 당 보여줄 글의 수’를 ‘4’로 지정했기 때문이다.
    (※ 만약 ‘Warning: Missing argument~’와 같은 오류메시지가 나타나면 <?php query_posts(); ?>를 <?php query_posts(”); ?>로 수정한다)
  10. 추천 기사를 출력하지 않기
    추천 기사를 위에 출력하지 않기 위해 <?php query_posts(); ?>에 ignore_sticky_posts 파라미터를 추가하고 값을 ‘1’로 지정한다.
  11. 기사의 표시 수를 지정하기
    1페이지에 5개의 기사를 표시하기 위해 posts_per_page 파라미터를 추가하고 값을 ‘5’로 지정한다.
  12. 6번째 이후 기사 구독하기
    6번째 이후의 기사는 복수의 페이지로 나누어서 표시된다. 따라서 <?php get_template_part(); ?>로 pagenation.php를 로딩하고, 각 페이지로 이동하는 링크를 표시한다.
  13. 2번째 페이지의 표시 확인하기
    위에서 표시한 링크를 클릭하면 1번째 페이지와 같은 기사가 표시되고 페이지 번호도 변화가 없다.
  14. 1번째 페이지에 표시된 다음 기사부터 표시하기
    <?php query_posts(‘ignore_sticky_posts=1&posts_per_page=5&paged=’ 2); ?>

    2번째 페이지에는 1번째 페이지에 표시된 다음 기사(6번째~10번째 기사)부터 표시되도록 지정한다. 따라서 paged 파라미터를 추가해서 현재 페이지 변호를 ‘2’로 지정하면 2번째 페이지에는 1번째 페이지에 표시된 다음 기사 (6번째~10번째 기사)부터 표시된다. 그러나 이번에는 모든 페이지에 2번째 페이지의 기사가 표시된다.

  15. 페이지마다 앞 페이지에 표시된 다음 기사부터 표시하기
    <?php query_posts(‘ignore_sticky_posts=1&posts_per_page=5&paged=’ . $paged); ?>

    페이지마다 앞 페이지에 표시된 다음 기사부터 표시한다. 따라서 paged 파라미터의 값을 ‘$paged’로 지정한다. $paged는 표시 중인 페이지 번호를 자동으로 지정하는 변수이고, 이것을 이용하면 각 페이지에 적절히 기사를 표시할 수 있다.

->MEMO

변수 $paged는 ‘~’의 바깥에  입력하고 $paged 앞에는 ‘.'(마침표)를 입력해서 <?php query_posts(~&paged=’ . $paged); ?>라는 형식으로 입력한다. 여기에서는 ‘.'(마침표) 앞뒤로 공백을 입력했지만 공백을 입력하지 않아도 상관없다.

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

“인덱스 페이지 작성하기”에 대한 한개의 댓글

답글 남기기