추천 기사 표시하기

톱페이지에는 최신 기사가 표시되기 때문에 오래된 기사는 구독할 기회가 적어진다. 따라서 오래된 기사 가운데 추천할만한 기사를 지정해서 ‘추천 기사’ 형태로 톱페이지에 표시한다.

  1. 추천 기사 표시하기
  2. 추천 기사 지정하기
  3. 추천 기사의 표시 확인하기
  4. 추천 기사 출력하지 않기
  5. 추천 기사를 출력하기 위한 루프 추가하기
  6. 최신 1건의 추천 기사 출력하기
  7. 추천 기사 판별하기
  8. 추천 기사의 디자인 지정하기
    style.css에 설정을 추가해서 추천 기사의 디자인을 지정한다. 추천 기사 전체를 오렌지색의 점선으로 장식하고 배경도 옅은 오렌지색으로 장식한다. padding으로는 점선의 안쪽에 15픽셀의 여백을 삽입한다.

home.php

<?php get_header(); ?>

<!– 콘텐츠 –>
<div id=”content”>

//추천 기사를 출력하기 위해 루프 추가하기, posts_per_page 파라미터가 1이므로 2건의 추천 기사와 1건의 최신 기사 모두 3건의 기사가 표시된다.
<p class=”title”>PICK-UP POSTS</p>
<?php query_posts(‘posts_per_page=1’); ?>
<?php if(have_posts()): while(have_posts()):
the_post(); ?>
<?php get_template_part(‘content’,’excerpt’); ?>
<?php endwhile; endif; ?>

<p class=”title”>RECENT POSTS</p>
//추천 기사는 최신 기사와 따로 표시하기 위해 최신 기사의 목록 위에 출력되지 않도록 한다. ignore_sticky_posts 파라미터 ‘0’은 기사 출력, ‘1’은 기사를 출력하지 않음.
<?php query_posts(‘posts_per_page=2&ignore_sticky_posts=1‘); ?>
<?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
&ignore_sticky_posts=1‘); ?>
<?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”>
//추천 기사 판별하기. 추천 기사를 다른 기사와 구별해서 스타일시트를 적용하기 위해 마크업한다.
<div id=”pickup”>

<p class=”title”>PICK-UP POSTS</p>

//최신 1건의 추천 기사를 출력하도록 지정한다. 불필요한 추천 기사를 출력하지 않도록 ignore_sticky_posts 파라미터를 1로 지정한다. 또한 get_option(‘sticky_posts’)로 추천 기사의 ID를 취득해서 post__in으로 지정한 ID의 기사만 출력한다. 이렇게 지정하면 최신 추천 기사를 1건만 출력할 수 있다.
post__in 파라미터를 이용하는 경우 파라미터의 지정은 PHP 배열 형식 array(~)로 입력할 필요가 있다. <?php $myquery_pickup = array(~); ?>로  파라미터를 지정하고, <?php query_posts($myquery_pickup); ?>이라고 지정해서 로딩한다.

<?php
$myquery_pickup = array(
‘posts_per_page’ => 1,
‘ignore_sticky_posts’ => 1,
‘post__in’ => get_option(‘sticky_posts’)
); ?>

<?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”>RECENT POSTS</p>

<?php query_posts(‘posts_per_page=2&ignore_sticky_posts=1’); ?>
<?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
&ignore_sticky_posts=1’); ?>
<?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(); ?>

->TIPS 추천 기사를 판별할 수 있는 클래스 이름

추천 기사의 경우 sticky라는 클래스 이름이 출력된다. 단, RECENT POSTS의 기사 목록에 추천 기사가 표시된 경우에도 sticky라는 클래스 이름이 출력되기 때문에 주의하기 바란다.

<div <?php post_class(); ?>>
<h2><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h2>
<p class=”postcat”><?php the_category(‘ ‘); ?></p><p class=”thumb”>
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail(‘thumbnail’); ?>
<?php else: ?>
<img src=”<?php bloginfo(‘template_url’); ?>/no_image.jpg” alt=”No Image” width=”150″ height=”150″ />
<?php endif; ?>
</p>

<?php the_excerpt(); ?>

<p class=”more”><a href=”<?php the_permalink(); ?>”>계속 보기</a></p>

<p class=”postinfo”>
<?php echo get_the_date(); ?>
</p>
</div>

->TIPS 추천 기사를 무작위로 표시하기’

<?php get_header(); ?>

<!– 콘텐츠 –>
<div id=”content”>

<div id=”pickup”>
<p class=”title”>PICK-UP POSTS</p>

<?php
$myquery_pickup = array(
‘posts_per_page’ => 1,
‘ignore_sticky_posts’ => 1,
‘post__in’ => get_option(‘sticky_posts’),
‘orderby’ => ‘rand’

); ?>
<?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”>RECENT POSTS</p>

<?php query_posts(‘posts_per_page=2&ignore_sticky_posts=1’); ?>
<?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
&ignore_sticky_posts=1’); ?>
<?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(); ?>

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

답글 남기기