워드프레스 포스트 하단에 관련 포스트 추가

2013-10-06 by 편리

테마를 변경하고 해야지.. 하고 생각만 하고 있던 것은 오늘 생각난 김에 해버리고 말았다. 워드프레스에 대해서 아직 잘 모르기 때문에 시간이 무척 오래 걸리긴 했지만 무사히 기능을 추가했다. 이전 테마의 코드도 참고하면서 작업을 했는데 간만에 하려고 하니까 역시 쉽지는 않았다.

포스트 하단에 보면 이미지와 같은 리스트가 노출되고 있는데 현재 포스트와 동일한 카테고리 포스트 중에서 가장 최근의 이전 포스트를 3개 출력해주는 것이다. 포슽를 뽑아내느 방법은 다른 방법도 생각해봤지만 카테고리를 기준으로 하는 게 그나마 나을 것 같아서 그렇게 정했다.

우선 테마의 single.php 파일에 관련 포스트를 출력할 곳에 아래와 같은 코드를 추가한다.

<div id="related-posts">
    <h3>More Posts</h3>
        <?php
        $category = get_the_category();
        $count = count($category);
        $cat_id = array();
        for($i=0; $i<$count; $i++) {
            if($category[$i]->cat_ID)
                $cat_id[] = $category[$i]->cat_ID;
        }
        $limit = 3;
        $posts = $wpdb->get_results( $wpdb->prepare(
            " SELECT $wpdb->posts.*
                FROM $wpdb->posts
                  LEFT JOIN $wpdb->term_relationships ON ($wpdb->posts.ID = $wpdb->term_relationships.object_id)
                  LEFT JOIN $wpdb->term_taxonomy ON ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
                WHERE $wpdb->term_taxonomy.taxonomy = 'category'
                  AND $wpdb->term_relationships.term_taxonomy_id IN (".implode(',', $cat_id).")
                  AND $wpdb->posts.post_date < '%s'
                  AND $wpdb->posts.post_type = 'post'
                  AND $wpdb->posts.post_status = 'publish'
                ORDER BY $wpdb->posts.post_date DESC LIMIT $limit", $post->post_date ) );
        ?>

    <?php
    foreach($posts as $post) {
    ?>
        <ul class="related-post clearfix">
            <li class="related-posts-list">
                <h4><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>
                <div class="related-posts-date"><?php echo $post->post_modified; ?></div>
                <div class="related-posts-content"><?php echo the_related_post_excerpt($post, 125); ?></div>
            </li>
        <!-- /related-posts-content -->
        </ul>
        <!-- /related-post -->
    <?php
    }

    wp_reset_postdata();
    ?>
</div>

그리고 functions.php 파일에 내용을 적당히 자를 수 있는 함수를 추가한다.

<?php
function the_related_post_excerpt($post, $length) {
    $excerpt = preg_replace('/\[.*\]/', '', strip_tags($post->post_content));

    $str_split = preg_split("//u", $excerpt, -1, PREG_SPLIT_NO_EMPTY);
    $str_slice = array_slice($str_split, 0, $length + 3);

    if(count($str_slice) - 2 >= $length)
        $excerpt = join("", $str_slice).'...';
    else
        $excerpt = join("", $str_slice);

    return $excerpt;
}
?>

그리고 출력 디자인을 위한 css를 style.css 파일에 추가한다.

#related-posts {
    padding: 0 30px;
}
#related-posts ul {
    list-style: none;
}
#related-posts li {
    padding: 7px 0 7px 0;
    border-bottom: 1px solid #eee;
}
#related-posts .related-posts-list a {
    color: #3f74aa;
}
#related-posts .related-posts-list a:hover {
    text-decoration: underline;
}
#related-posts .related-posts-date {
    color: #bcbcbc;
    font-size: 11px;
    text-transform: uppercase;
}
#related-posts .related-posts-content {
    padding-top: 3px;
}

이런 식으로 코드를 추가하면 포스트 하단에 관련 카테고리의 이전 포스트를 출력할 수 있다.

Leave a Reply Cancel reply