워드프레스 글 하단 글목록 만들기
웹사이트에서 글목록은 2가지가 있습니다.
하나는 웹사이트 페이지에 전체적으로 표시되는 글목록으로, 웹사이트의 얼굴과도 같은 역할을 합니다.
또 하나는 글 본문 밑에 표시되는 글목록으로, 방문자가 다른 글도 보도록 유도하여 사이트에 유치 시키는 데에 도움을 줍니다.
이번 포스팅에서는 글 하단에 표시되는 글목록을 만드는 방법에 대해 알아보도록 하겠습니다.
제가 만드는 과정을 참고하여 여러분들만의 글목록을 만드시길 바랍니다.
(페이지 표시되는 글목록을 꾸미는 방법이 궁금하시다면 이 글을 참고해주시길 바랍니다.)
테마
아바다(Avada)나 뉴스페이퍼(Newspaper)와 같은 일부 테마에서는 글 하단에 관련 글목록을 표시하는 옵션을 제공합니다.
하지만, 제가 사용하고 있는 GeneratePress 테마에서는 해당 옵션을 제공하지 않는데요.
글목록 기능이 없는 경우, 플러그인이나 테마 파일 내에 직접 코드를 추가하는 방법으로 글목록을 표시할 수 있습니다.
개인적으로 플러그인을 사용하는 것 보단 직접 코드를 추가하는 것이 사이트에 부담이 적어 속도 면에서 유리하기에 코드를 사용하는 것을 권장 드립니다.
단, 코드 입력 시 사이트의 안전을 위해 차일드테마를 이용하시길 바랍니다.
코드
위의 이미지와 같이 아래의 코드를 테마 파일(예: single.php 또는 single-content.php – 테마에 따라 다름) 내에 직접 코드를 추가하시면 글목록이 표시 됩니다.
GeneratePress 테마의 경우, content-single 파일에 입력하시면 됩니다.
(해당 코드는 워드프레스 정보 꾸러미 사이트에서 참고하였으며, 밑에 항목부터는 제목에 코드를 참고한 사이트의 링크를 달아두겠습니다.)
<!-- Related Posts Section -->
<div class="related-posts">
<?php
$categories = get_the_category();
// Check if the post has categories
if (!empty($categories) && !is_wp_error($categories)):
// Get the ID of the primary category (first category in the list)
$primary_category_id = $categories[0]->term_id;
// Display the primary category name
?>
<h4>
<?php echo esc_html($categories[0]->name); ?> 카테고리의 다른 글
</h4>
<?php
// Define the arguments for the related posts query
$query_args = array(
'cat' => $primary_category_id,
'post_type' => 'post',
'post__not_in' => array(get_the_ID()),
'posts_per_page' => '5',
'orderby' => 'rand'
);
$related_cats_post = new WP_Query($query_args);
// Check if there are any related posts
if ($related_cats_post->have_posts()):
?>
<!-- Display the list of related posts -->
<ul>
<?php while ($related_cats_post->have_posts()): $related_cats_post->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php
// Restore the original post data
wp_reset_postdata();
endif;
endif;
?>
</div><!-- End of Related Posts Section -->
만약, 위 코드가 잘 작동하지 않는다면 아래 코드로 테스트해보시기 바랍니다.
<!-- Related Posts Section -->
<div class="related-posts">
<!-- Display the Category Name -->
<h4>
<?php
$categories = get_the_category();
if (!empty($categories)) {
echo esc_html($categories[0]->name);
}
?>
카테고리의 다른 글
</h4>
<?php
// Define the arguments for the related posts query
$query_args = array(
'category__in' => wp_get_post_categories(get_the_ID()), // Using get_the_ID() directly
'post_type' => 'post', // Hardcoded 'post' post type
'post__not_in' => array(get_the_ID()),
'posts_per_page' => '5',
'orderby' => 'rand'
);
$related_cats_post = new WP_Query($query_args);
// Check if there are any related posts
if ($related_cats_post->have_posts()):
?>
<!-- Display the list of related posts -->
<ul>
<?php while ($related_cats_post->have_posts()): $related_cats_post->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</li>
<?php endwhile; ?>
</ul>
<?php
// Restore the original post data
wp_reset_postdata();
endif;
?>
</div><!-- End of Related Posts Section -->
글목록을 랜덤하게 표시하고 싶은 않은 경우, ‘orderby’ => ‘rand’ 라인을 삭제하시면 됩니다.
코드를 입력하면 위의 이미지와 같이 글 하단에 글 목록이 표시된 것을 볼 수 있습니다.
그런데, 글목록이 구분 되어 있지 않고 위치도 어정쩡한데요.
아래의 CSS를 추가하시면 글목록의 레이아웃을 적절히 변경할 수 있습니다.
해당 CSS를 [디자인 > 사용자 정의하기 > 추가 CSS]나 차일드테마 내의 style.css 파일에 추가하시면 됩니다.
/* 관련 글 */
.related-posts {
margin-top: 30px;
border: 1px solid #ccc;
padding: 10px 10px 3px 10px;
}
.related-posts ul * {
font-size: 0.9rem;
}
.related-posts h4 {
font-weight: 550;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
margin-bottom: 15px;
}
.related-posts ul {
margin-bottom: 8px;
}
CSS를 추가하고 레이아웃이 변경된 글목록 입니다.
코드 2
위에서 코드를 입력하는 방법을 자세히 다뤘으니 이번 항목부터는 간단하게 입력할 코드와 표시될 글목록만 소개하겠습니다.
위의 방법과 마찬가지로, 다음 코드를 적절한 파일(예: single.php 또는 single-content.php – 테마에 따라 다름)의 적당한 위치에 추가하도록 합니다.
<h4><span style="color:red;"><?php $categories = get_the_category(); echo esc_html( $categories[0]->name ); ?> </span>카테고리의 다른 글</h4> <?php $related = get_posts( array( 'category__in' => wp_get_post_categories($post->ID), 'numberposts' => 5, 'orderby'=>'rand', 'post__not_in' => array($post->ID) )); if( $related ) foreach( $related as $post ) { setup_postdata($post); ?> <ul> <li> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> </ul> <?php } wp_reset_postdata(); ?>
제목 색상은 변경이 가능하며, 원본에 없는 랜덤으로 목록 표시 코드를 추가 했습니다.
코드를 입력하면 위의 이미지와 같은 글목록이 표시 됩니다.
코드 3
이번 코드는 썸네일이 표시 되는 글목록 코드 입니다.
이 글목록을 표시하기 위해서는 다음 코드를 적절한 파일(예: 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)에 추가하도록 합니다.
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 */
위의 코드는 Pluto 테마에서만 사용되었기 때문에 다른 테마에서는 레이아웃이 제대로 표시되지 않을 수도 있습니다.
그런 경우, CSS 코드를 테마에 맞게 적절히 수정해주시기 바랍니다.
테마 Hook 만들기 기능
GeneratePress 유료 버전에 제공되는 Elements 기능을 사용하면 테마 파일에 코드를 입력하지 않아도 간편하게 글목록을 만들 수 있습니다. 해당 기능을 가진 다른 테마도 사용 가능하니 참고 바랍니다.
[디자인 > Elements]로 이동한 다음, Add New Element(새 엘리먼트 만들기) > Hook를 클릭하여 새로운 Element를 만들도록 합니다.
Element 편집기에서 Element 이름을 지정하고 코드를 추가합니다.
Settings(설정) 탭에서 Hook는 [generate_after_content]를 선택하고, Execute PHP(PHP 실행)를 체크하여 활성화합니다.
그리고 Display Rules(표시 규칙) 탭에서 Location(위치)에 글 > All 글을 선택하고 발행하시면 테마 파일에 코드 입력한 것과 같이 글목록이 표시됩니다.
플러그인
플로그인을 사용하면 간편하게 글목록을 만들 수 있습니다.
이번 포스팅에서는 WP Show Posts 플러그인에 대해서만 자세히 다루겠습니다.
다른 플러그인이 궁금하시다면 아래 플러그인을 참고해 보시기 바랍니다.
YARPP – Yet Another Related Posts Plugin
Ad Inserter는 애드센스 같은 광고를 원하는 위치에 넣는 플러그인으로 잘 알려져 있지만, 원하는 위치에 원하는 문장이나 숏코드를 넣을 때에도 유용합니다.
만약, 애드센스 용으로 이미 사용하고 계셨다면 플러그인을 늘리지 않아도 되니 좋은 선택지가 되겠습니다.
WP Show Posts
활성 설치 : 90,000+
WP Show Posts는 썸네일 글목록을 표시할 수 있는 플러그인 입니다.
사용 방법
[WP Show Posts > Add New]를 클릭하여 글목록 리스트를 만듭니다.
아래 제가 만들어 놓은 리스트를 참고하셔도 좋습니다.
이렇게 리스트를 만들었으면, 오른쪽에 표시된 숏코드 또는 함수를 아래 이미지와 같이 테마의 적절한 파일 내에 추가하시면 글목록이 표시 됩니다.
GeneratePress 유료 버전의 경우, Elements 모듈 기능을 사용하여 글 하단에 글목록을 표시할 수도 있습니다.
다른 테마도 해당 기능이 있으면 비슷한 방식으로 사용이 가능하며, 다른 플러그인도 해당 방법과 같이 사용이 가능하니 참고 바랍니다.
[디자인 > Elements > Hook]에서 아래 이미지와 같이 리스트의 숏코드 or 함수를 입력하고 설정하시면 됩니다.
숏코드를 사용했을 때, 동일 카테고리 내의 글이 표시되지 않고 전체 카테고리 글이 표시된다면 아래의 코드를 사용해보시길 바랍니다.
<h4><strong>관련 글</strong></h4>
[숏코드 settings="taxonomy=category&tax_term=current"]
여기서 는 단락이고, <h4><strong>관련 글</strong></h4>는 글목록 제목입니다.
파란색으로 표시한 부분에 숏코드를 붙여 넣으시면 됩니다.
(해당 글에서는 숏코드를 넣으면 글이 깨져서 넣지 않았습니다.)
Element를 발행하면, 아래 이미지와 같이 글목록이 표시 됩니다.
마치며
여기까지 글 하단의 글목록을 만드는 방법에 대해 알아보았는데요.
웬만하면 사이트에 부담을 주는 플러그인 보다 코드를 사용하여 글목록을 만드는 것을 권장 드리며,
(코드 사용이 생각보다 어렵지 않고, 플러그인도 엄청 간편한 것이 아니라서 시도해 보는 것을 추천 드립니다.
물론, 코드로 만든 글목록 디자인이 마음에 들지 않는다면 플러그인 사용도 나쁘지 않습니다.)
코드를 사용하실 때는, 사이트의 안전을 위해 꼭 차일드테마를 활용하시는 것을 권장 드리겠습니다.
차일드테마 또한 단점이 있기 때문에, Elements 기능이 있다면 해당 기능을 이용하는 것을 권장 드리겠습니다.
읽어주셔서 감사합니다.
밑에 좋아요 버튼을 눌러주시면 저에게 큰 힘이 되고 콘텐츠의 방향성을 잡는 데에도 도움이 됩니다.
혹시 궁금한 점이나 원하시는 주제가 있으시다면 댓글 남겨주세요.
구글 검색 키워드(첫 페이지 순) : 워드프레스 글목록, 워드프레스 카테고리 글목록, 워드프레스 글 하단 글목록, 워드프레스 포스트 리스트, 워드프레스 카테고리 포스트 리스트, 워드프레스 글 하단 포스트 리스트, 워드프레스 글목록 만들기, 워드프레스 카테고리 별 페이지, 워드프레스 카테고리 글 표시, 워드프레스 템플릿, generatepress 글목록, generatepress 관련 글, 워드프레스 관련 글
![트위터 공유하기](https://mryun31.com/wp-content/uploads/2024/07/sl_z_072523_61700_01-scaled.jpg")
