Avada의 관련 글 기능

[워드프레스] 현재 카테고리의 관련 글(Related Posts)을 표시하는 방법

들어가며

이전 글에서 다양한 방법으로 워드프레스에서 관련 글(연관 글)을 표시하는 방법을 살펴보았습니다. 경우에 따라 사용 중인 테마에서 관련 글 기능을 제공할 수 있습니다. 현재 사용 중인 이 블로그의 테마인 Pluto에서도 관련 글 기능을 제공하고 있습니다. 그리고 아바다 등의 주요 인기 테마에서도 관련 글을 표시할 수 있는 기능을 제공합니다.

Avada의 관련 글 기능

Avada의 관련 글 기능

테마에서 관련 글 기능이 제공되지 않거나 마음에 들지 않으면 플러그인을 설치하여 관련 글 기능을 구현할 수 있습니다. 또 다른 방법으로 직접 코드를 테마 소스에 추가하는 것도 가능합니다.

직접 코드를 만들어 연관 글 기능을 구현하고자 하는 경우 다음 두 글을 참고할 수 있습니다.

카테고리 기준으로 관련 글을 표시하려는 경우 위의 두 번째 글에 소개된 방법을 응용할 수 있습니다. 저는 위의 두 글을 조합하여 새롭게 만들어 최근까지 사용해왔습니다.

현재 카테고리의 관련 글(연관 글) 표시하기

다음 코드를 적절한 파일(예: single.php 또느 single-content.php – 테마에 따라 다름)의 적당한 위치에 추가하도록 합니다. 싱글 포스트(글) 파일에서 본문 바로 아래에 표시되도록 할 수 있습니다. 원하는 경우 후크를 사용하여 추가하는 것도 가능할 것입니다. (후크를 사용하여 단일 글 맨 아래에 표시하는 방법은 “워드프레스 글 끝부분(글 하단)에 사용자 컨텐츠 추가하기” 글을 참고해보시기 바랍니다.)

<div class="relatedposts">
<h3>Related posts</h3>
<?php
$args = array(
'posts_per_page' => 3, // How many items to display - 표시할 항목 개수
'post__not_in'   => array( get_the_ID() ), // Exclude current post - 현재 글 제외
'no_found_rows'  => true, // We don't need pagination so this speeds up the query - 쿼리 속도 높임
'orderby'=>'rand' // 랜덤하게 표시하기 위해 추가됨. 삭제하면 랜덤하게 표시되지 않음
);

$cats = wp_get_post_terms( get_the_ID(), 'category' );
$cats_ids = array();
foreach( $cats as $wpex_related_cat ) {
$cats_ids[] = $wpex_related_cat->term_id;
}
if ( ! empty( $cats_ids ) ) {
$args['category__in'] = $cats_ids;
}
// Query posts
$wpex_query = new wp_query( $args );

// Loop through posts
foreach( $wpex_query->posts as $post ) : setup_postdata( $post ); ?>

<div class="relatedthumb">
<a rel="nofollow" href="<?php echo esc_url( urldecode(get_permalink()) ); ?>"><?php the_post_thumbnail('pluto-top-featured-post'); ?><br />
<?php the_title(); ?>
</a>
</div>

<?php
// End loop
endforeach;

// Reset post data
wp_reset_postdata(); ?>
</div>

위에서 the_post_thumbnail(‘pluto-top-featured-post’)은 새롭게 정의한 썸네일 크기를 표시하는 부분인데요, 이미 적절한 크기가 정의되어 있으면 적절히 수정하면 됩니다. 만약 적절한 크기가 정의되어 있지 않으면 다음 코드를 테마의 함수 파일(functions.php)에 추가하도록 합니다. 숫자를 변경하에 썸네일 크기를 변경할 수 있습니다(“워드프레스 썸네일 크기 조정” 참고). 단, Pluto 테마에서는 아래 코드가 이미 추가되어 있으므로 추가하지 않도록 합니다.

function custom_thumbs()
{
add_image_size( 'pluto-top-featured-post', 200, 150, true );
}
add_action( 'after_setup_theme', 'custom_thumbs' );

그리고 style.css에 다음과 같은 코드를 추가합니다.

/* Related posts - 관련 글*/
@media only screen and (min-width : 784px) {
.single .relatedposts .relatedthumb {
display:inline-block;
width: 32%;
vertical-align: text-top;
padding-right: 5px;
padding-left: 5px;
}

.single .relatedposts {
padding: 0px 50px 50px 50px;
}
.single .relatedposts .relatedthumb img {
padding-bottom: 7px;
}

.single .relatedthumb a {
font-size: 1.22em;
}
} /* for pc */

@media only screen and (min-width : 522px) and (max-width : 783px) {
.single .relatedposts .relatedthumb {
display:inline-block;
width: 48%;
vertical-align: text-top;
padding-right: 5px;
padding-left: 5px;
}

.single .relatedposts {
padding: 0px 35px 35px 35px;
}
.single .relatedposts .relatedthumb img {
padding-bottom: 7px;
}

.single .relatedposts > .relatedthumb:first-of-type {
display: none;
}

.single .relatedthumb a {
font-size: 1.22em;
}
} /* for medium */
@media only screen and (max-width : 521px) {
.single .relatedposts .relatedthumb {
display:inline-block;
width: 98%;
vertical-align: text-top;
padding-right: 5px;
padding-left: 5px;
}

.single .relatedposts {
padding: 0px 20px 35px 20px;
}
.single .relatedposts .relatedthumb img {
padding-bottom: 7px;
}

.single .relatedposts > .relatedthumb:first-of-type {
display: none;
}

.single .relatedposts > .relatedthumb:first-of-type + div {
margin-bottom: 15px;
}

.single .relatedthumb a {
font-size: 1.22em;
}
} /* for mobile */

코드를 적절히 구미에 맞게 수정하시기 바랍니다. 그러면 다음과 같이 글 아래에 Related Posts가 표시됩니다.

Customized Related Posts

위의 코드는 이 블로그의 현재 테마인 Pluto에서만 사용되었기 때문에 다른 테마에서는 레이아웃이 제대로 표시되지 않을 수도 있습니다. 그런 경우 CSS 코드를 테마에 맞게 적절히 수정해주시기 바랍니다.

같은 태그의 글을 관련 글(연관 글)로 표시하는 방법

태그를 기준으로 Related Posts를 만들고자 하는 경우에는 맨 위의 코드 앞부분을 다음 코드로 교체하면 됩니다.

<div class="relatedposts">
<h3>Related posts</h3>
<?php
$args = array(
'posts_per_page' => 3, // 표시할 항목
'post__not_in'   => array( get_the_ID() ), // 현재 글 제외
'no_found_rows'  => true, // We don't need pagination so this speeds up the query - 쿼리 속도를 높이기 위해 페이지나움 필요 없음
'orderby'=>'rand' // 랜덤하게 표시
);

$cats = wp_get_post_terms( get_the_ID(), 'category' );
$cats_ids = array();
foreach( $cats as $wpex_related_cat ) {
$cats_ids[] = $wpex_related_cat->term_id;
}
if ( ! empty( $cats_ids ) ) {
$args['category__in'] = $cats_ids;
}
// Query posts
$wpex_query = new wp_query( $args );

... (이하 동일)

CSS 코드는 동일합니다. 이 작업을 수행하기 전에 차일드 테마(자식 테마; 하위 테마)를 만들어 수행하시기 바랍니다. 자식 테마 만드는 방법은 이 글을 참고해보세요.



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.