최신 기사 2건만 썸네일 이미지와 요약문 표시하기

새로운 기사와 오래된 기사의 표시 방법을 바꾸면 보다 많은 기사를 표시할 수 있다. 최신 기사 2건을 썸네일 이미지와 요약문으로 표시하고, 3번째 기사~10번째 기사는 제목만 표시하도록 지정한다.

->POINT

  • 표시하는 기사의 수 지정: <?php query_posts(‘posts_per_page=~’); ?>
  • 몇 번째 이후의 기사부터 표시할 것인지를 지정: <?php query_posts(‘offset=~’); ?>
  1. 최신 2건의 기사 표시하기
  2. 기사의 썸네일 이미지와 요약문 표시하기
  3. 2번째 루프 작성하기
  4. 3번째 이후의 기사 표시하기
  5. 기사의 제목만 표시하기
  6. 이전 기사로 이동하는 링크 삭제하기
  7. 3번째 이후의 기사 디자인하기

home.php

<?php get_header(); ?>

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

//최신 2건의 기사 표시하기
<?php query_posts(‘posts_per_page=2’); ?>

<?php if(have_posts()): while(have_posts()):
the_post(); ?>
//기사의 썸네일 이미지와 요약문 표시하기​
<?php get_template_part(‘content’,‘excerpt’​); ?>
<?php endwhile; endif; ?>

<ul class=”toplist”>

//2번째 루프 작성하기(3번째~10번째 기사 표시하기)
<?php query_posts(‘posts_per_page=8&offset=2’); ?>
<?php if(have_posts()): while(have_posts()):
the_post(); ?>
<?php get_template_part(‘content’,’title’); ?>
<?php endwhile; endif; ?>

</ul>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

home.php

<?php get_header(); ?>

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

//최신 2건의 기사 표시하기
<?php query_posts(‘posts_per_page=2’); ?>

<?php if(have_posts()): while(have_posts()):
the_post(); ?>
<?php get_template_part(‘content’,’excerpt’); ?>
<?php endwhile; endif; ?>
3번째 이후 기사(8건) 표시하기​
리스트 형식으로 출력하기 위해 루프 전체를 toplis 클래스로 마크업한다.
<ul class=”toplist”>

<?php query_posts(‘posts_per_page=8&offset=2’​); ?>
<?php if(have_posts()): while(have_posts()):
the_post(); ?>
기사의 제목만 표시하기
<?php get_template_part(‘content’,‘title’​); ?>
<?php endwhile; endif; ?>
</ul>​
이전 기사로 링크하는
<?php get_template_part(‘pagenation’); ?>을 삭제한다. 2번째 페이지에 11번째 이후 기사의 제목을 표시하는 경우 조건 분기를 이옹한다. 아래 TIPS을 참고한다.

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

->MEMO

톱페이지와는 별도로 최신 기사의 인덱스 페이지를 준비해서 오래된 기사는 인덱스 페이지를 참고하는 방법도 있다. 정적 페이지를 이용해서 최신 기사의 인덱스 페이지를 작성하는 방법은 이후 기사를 참고하기 바란다.

->TIPS 2번째 페이지에 11번째 이후의 제목 표시하기

위에서 삭제한 이전 기사로 이동하는 ‘이전 기사’의 링크를 클릭하면 톱페이지의 2번째 페이지를 열 수 있고, 2번째 페이지에는 11번째 이후의 기사가 출력된다. 이때 11번째 이후의 기사 제목을 표시하기 위해 조건분기를 사용한다. 따라서 1번째 페이지와 그 이외의 페이지에 기사를 출력할 때 사용하는 소스에 조건분기를 추가한다.

home.php

<?php get_header(); ?><!– 콘텐츠 –>
<div id=”content”>
<p class=”title”>RECENT POSTS</p>

<?php if($paged == ‘0’): ?>

<?php query_posts(‘posts_per_page=2’); ?>
<?php if(have_posts()): while(have_posts()):
the_post(); ?>
<?php get_template_part(‘content’,’excerpt’); ?>
<?php endwhile; endif; ?>

<ul class=”toplist”>
<?php query_posts(‘posts_per_page=8&offset=2’); ?>
<?php if(have_posts()): while(have_posts()):
the_post(); ?>
<?php get_template_part(‘content’,’title’); ?>
<?php endwhile; endif; ?>
</ul>

<?php else: ?><ul class=”toplist”>
<?php query_posts(‘posts_per_page=10&’. $query_string); ?>
<?php if(have_posts()): while(have_posts()):
the_post(); ?>
<?php get_template_part(‘content’,’title’); ?>
<?php endwhile; endif; ?>
</ul>

<?php endif; ?>

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

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

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

“최신 기사 2건만 썸네일 이미지와 요약문 표시하기”에 대한 한개의 댓글

답글 남기기