워드프레스에서 동일 카테고리 내의 다른 글 표시하기

티스토리 블로그에서는 다음 그림과 같이 관련 글 부분에 동일 카테고리 내의 다른 글을 표시하는 경우가 많습니다.

동일 카테고리 내의 다른 글 표시
동일 카테고리 내의 다른 글 표시

워드프레스에서 동일 카테고리 내의 다른 글 표시하기

워드프레스에서 위와 같이 동일 카테고리 내의 글을 관련 글(Related Posts)로 표시하려는 경우  다음 코드를 적절히 수정하여 single.php나 관련 테마 파일의 적당한 위치에 추가합니다. 코드가 추가되는 파일은 테마마다 다릅니다. Twenty Seventeen 테마의 경우 /template-parts/post/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, '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(); ?>

그런 다음 CSS를 이용하여 적절히 레이아웃을 조정하도록 합니다. 가령, 이 codepen 문서에 나와있는 CSS 코드를 응용하는 다음과 비슷하게 관련 글이 표시됩니다.

워드프레스에서 동일 카테고리 내의 다른 글 표시하기 2

워드프레스에서 CSS 코드를 추가하는 방법은 다음 글을 참고해보시기 바랍니다.

테마 파일을 직접 수정하는 경우 가급적 차일드 테마를 만들어서 작업하는 것이 안전합니다. 그렇지 않으면 테마가 업데이트되면서 수정 사항이 사라지게 됩니다. 아바다 등 일부 테마에는 자식 테마(하위 테마, 차일드 테마) 설치 파일이 포함되어 있습니다. 만약 차일드 테마가 없는 경우 워드프레스 문서를 참고하여 직접 만들거나 다음 글을 참고하여 만들 수 있습니다.

응용: GeneratePress 테마에서 관련 글 표시하기

GeneratePress 테마를 사용하는 경우 테마에서 제공하는 훅을 사용하여 쉽게 관련 글을 표시할 수 있습니다.

참고


3개 댓글

  1. 선생님 이런 양질의 글들이 있는 것을 왜 저는 이제야 보았을까요.. 현재 제가 구현하려고 하는 것은 블로그 카테고리가 왼편에 뜨게 함으로써 사용자들이 언제든지 카테고리를 옮겨 갈 수 있도록 하는 것인데 그럴 경우는 적당한 플러그인이 있습니까 ㅜㅜ?

    1. 블로그 카테고리 리스트를 표시하고 싶은 경우 테마 디자인 > 위젯에서 카테고리 위젯을 사이드바에 배치할 수 있습니다. 또는, 메뉴를 만들어 사이드바에 표시하는 것도 가능합니다.

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94%EC%97%90-%EB%A9%94%EB%89%B4%EB%A5%BC-%EC%B6%94%EA%B0%80%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/

      만약 항상 붙박이로 왼쪽에 블로그 카테고리 리스트(메뉴)를 표시하고 싶은 경우 간단한 HTML과 CSS로 가능할 것입니다.

      https://avada.tistory.com/1426

      블로그 글의 경우 브레드크럼을 표시하면 SEO에도 도움이 되고 사용자들이 관련 카테고리를 클릭하여 이동할 수 있습니다.

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EB%B8%8C%EB%A0%88%EB%93%9C%ED%81%AC%EB%9F%BC-%EC%A0%81%EC%9A%A9-%EB%B0%A9%EB%B2%95/

댓글 남기기

* 이메일 주소는 공개되지 않습니다.