워드프레스 관련글 필요성은 블로그를 운영하다 보면 많이 느끼게 됩니다, 글을 다 읽은 방문자에게 비슷한 글을 추천해주는 것 자체가 중요한데 그 이유는 방문자가 한 글만 보고 나가지 않고, 자연스럽게 다른 글도 읽게 만드는 아주 효과적인 방법이기 때문이죠.
하지만 워드프레스 기본 기능에는 ‘연관 글’ 표시가 기본적으로 탑재돼 있지 않기 때문에,
직접 코드로 추가하거나 플러그인을 사용하는 방식으로 해결해야 합니다.
오늘은 워드프레스 관련글 을 깔끔하고 스타일리시하게 표시하는 방법을 소개합니다.
특히 GeneratePress 테마를 사용하는 경우에도 완벽하게 적용되는 방식으로 구성했습니다.
워드프레스 관련글 HOOK으로 넣는 방법 소개
Elements 추가
모양 → Elements → Add New Element
이름은 적당한 걸로 하고 Hook 부분은 generate_after_entry_content로 합니다
Display Rules 탭으로 가서 Location 부분에 글 – All 글 로 바꿔줍니다. 영어면 post , all post일거에요. 그리고 업데이트 버튼을 누릅니다.
지금 한 것으로 훅 부분의 generate_after_entry_content에 뭔가를 추가하기로 약속이 된거에요. 하지만 지금 상태로는 아무것도 출력되지 않습니다.
스니펫에 코드 추가하기
초기 셋팅
스니펫 플러그인이 없는 경우 code snippet설치
스니펫 플러그인 설치 후
Snippets → Add New
Enter title에 적당히 이름 넣고 코드 작성 부분에 코드를 입력 후 Save Changes and Activate 버튼을 누릅니다. 나중에 deactivate만 해도 이 스니펫을 끌 수 있어서 편리합니다.
방법 1: 코드로 직접 관련 글 기능 추가하기
플러그인을 쓰지 않고도 아주 간단하게 관련 글 기능을 추가할 수 있습니다.
아래처럼 Code Snippets 플러그인에 코드를 삽입하면 글 하단에 자동으로 관련 글이 표시됩니다.
add_action('generate_after_entry_content', function () {
if (is_single()) {
global $post;
$orig_post = $post;
$categories = get_the_category($post->ID);
if ($categories) {
$cat_ids = array();
foreach ($categories as $category) {
$cat_ids[] = $category->term_id;
}
$args = array(
'category__in' => $cat_ids,
'post__not_in' => array($post->ID),
'posts_per_page' => 3,
'ignore_sticky_posts' => 1
);
$related_query = new WP_Query($args);
if ($related_query->have_posts()) {
echo '<div class=\"pretty-related-posts\"><h3>📌 관련 글</h3><ul>';
while ($related_query->have_posts()) {
$related_query->the_post();
echo '<li><a href=\"' . get_permalink() . '\">' . get_the_title() . '</a></li>';
}
echo '</ul></div>';
echo '
<style>
.pretty-related-posts {
margin-top: 3em;
padding: 1.5em;
border-radius: 12px;
background: #fefefe;
border: 1px solid #e0e0e0;
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.pretty-related-posts h3 {
font-size: 1.3rem;
margin-bottom: 1em;
border-left: 5px solid #0073aa;
padding-left: 0.75em;
color: #222;
font-weight: 600;
}
.pretty-related-posts ul {
list-style: none;
padding: 0;
margin: 0;
}
.pretty-related-posts li {
padding: 0.75em 0;
border-bottom: 1px solid #eaeaea;
transition: background 0.2s;
}
.pretty-related-posts li:last-child {
border-bottom: none;
}
.pretty-related-posts li a {
text-decoration: none;
color: #0073aa;
font-weight: 500;
font-size: 1rem;
display: block;
}
.pretty-related-posts li a:hover {
color: #005177;
background: #f0f8ff;
border-radius: 6px;
padding-left: 0.25em;
}
</style>';
}
$post = $orig_post;
wp_reset_postdata();
}
}
});
방법 2: 태그 기반으로 바꾸고 싶다면?
위 코드는 글의 카테고리를 기준으로 관련 글을 찾아 보여줍니다.
하지만 어떤 블로그는 태그 기반으로 더 정밀하게 분류하는 경우도 있죠.
그럴 땐 아래처럼 get_the_tags() → get_the_category() 로 바꾸면 됩니다.
$tags = wp_get_post_tags($post->ID);
'tag__in' => $tag_ids이 부분만 바꿔주시면 됩니다.
왜 플러그인보다 코드 방식이 좋을까?
| 항목 | 코드 방식 | 플러그인 방식 |
|---|---|---|
| 속도 | 가볍고 빠름 | 플러그인 설치 시 성능 저하 가능 |
| 디자인 커스터마이징 | CSS로 자유롭게 가능 | 테마에 따라 제약 있음 |
| 관리 | Snippets에서 손쉽게 관리 가능 | 설정 UI 복잡할 수 있음 |
| 의존성 | 없음 | 플러그인 업데이트 문제 생길 수 있음 |
마무리하며
간단한 코드 삽입만으로도 워드프레스 글 하단에 자연스럽고 예쁜 관련 글 영역을 만들 수 있습니다.
방문자 체류 시간도 늘고, SEO에도 긍정적인 영향을 주기 때문에 꼭 한 번 적용해보시길 추천드립니다!
코딩이 익숙하지 않아도 Code Snippets 플러그인만 있으면 쉽게 설정할 수 있어요.
직접 적용해보시고, 원하시는 디자인이나 기능이 있다면 추가로 커스터마이징도 가능합니다!
필요하시면 댓글 남겨주세요 썸네일형 카드 스타일, 슬라이드형 관련글도 안내드릴게요 😊
관련 글 코드 샘플
태그로 연관 글 보여주기 1 – 목록형
add_action('generate_after_entry_content', function () {
if (is_single()) {
global $post;
$orig_post = $post;
$tags = wp_get_post_tags($post->ID);
if ($tags) {
$tag_ids = array();
foreach ($tags as $tag) {
$tag_ids[] = $tag->term_id;
}
$args = array(
'tag__in' => $tag_ids,
'post__not_in' => array($post->ID),
'posts_per_page' => 3,
'ignore_sticky_posts' => 1
);
$related_query = new WP_Query($args);
if ($related_query->have_posts()) {
echo '<div class="pretty-related-posts">';
echo '<h3>📌 관련 글</h3><ul>';
while ($related_query->have_posts()) {
$related_query->the_post();
echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
}
echo '</ul></div>';
// 스타일 삽입
echo '
<style>
.pretty-related-posts {
margin-top: 3em;
padding: 1.5em;
border-radius: 12px;
background: #fefefe;
border: 1px solid #e0e0e0;
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}
.pretty-related-posts h3 {
font-size: 1.3rem;
margin-bottom: 1em;
border-left: 5px solid #0073aa;
padding-left: 0.75em;
color: #222;
font-weight: 600;
}
.pretty-related-posts ul {
list-style: none;
padding: 0;
margin: 0;
}
.pretty-related-posts li {
padding: 0.75em 0;
border-bottom: 1px solid #eaeaea;
transition: background 0.2s;
}
.pretty-related-posts li:last-child {
border-bottom: none;
}
.pretty-related-posts li a {
text-decoration: none;
color: #0073aa;
font-weight: 500;
font-size: 1rem;
display: block;
}
.pretty-related-posts li a:hover {
color: #005177;
background: #f0f8ff;
border-radius: 6px;
padding-left: 0.25em;
}
</style>';
}
$post = $orig_post;
wp_reset_postdata();
}
}
});
카테고리로 연관 글 보여주기 1 – 목록형
add_action('generate_after_entry_content', function () {
if (is_single()) {
global $post;
$orig_post = $post;
$categories = get_the_category($post->ID);
if ($categories) {
$cat_ids = array();
foreach ($categories as $category) {
$cat_ids[] = $category->term_id;
}
$args = array(
'category__in' => $cat_ids,
'post__not_in' => array($post->ID),
'posts_per_page' => 3,
'ignore_sticky_posts' => 1
);
$related_query = new WP_Query($args);
if ($related_query->have_posts()) {
echo '<div class="related-posts-box"><h3>📌 관련 글</h3><ul>';
while ($related_query->have_posts()) {
$related_query->the_post();
echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
}
echo '</ul></div>';
// 스타일 추가
echo '
<style>
.related-posts-box {
background: #f9f9f9;
padding: 1.2em;
margin-top: 2em;
border-radius: 8px;
border-left: 4px solid #0073aa;
font-family: sans-serif;
}
.related-posts-box h3 {
margin-bottom: 10px;
font-size: 1.1rem;
color: #0073aa;
}
.related-posts-box ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.related-posts-box li {
margin-bottom: 0.5em;
}
.related-posts-box li a {
text-decoration: none;
color: #333;
}
.related-posts-box li a:hover {
text-decoration: underline;
color: #0073aa;
}
</style>';
}
$post = $orig_post;
wp_reset_postdata();
}
}
});
굉장히 이쁘게 잘 출력이 됩니다.
카테고리로 연관 글 보여주기 2 – 카드형
add_action('generate_after_entry_content', function () {
if (is_single()) {
global $post;
$orig_post = $post;
$categories = get_the_category($post->ID);
if ($categories) {
$cat_ids = array();
foreach ($categories as $category) {
$cat_ids[] = $category->term_id;
}
$args = array(
'category__in' => $cat_ids,
'post__not_in' => array($post->ID),
'posts_per_page' => 3,
'ignore_sticky_posts' => 1
);
$related_query = new WP_Query($args);
if ($related_query->have_posts()) {
echo '<div class="related-posts-deck">';
echo '<h3>📌 관련 글</h3><div class="related-posts-cards">';
while ($related_query->have_posts()) {
$related_query->the_post();
echo '<div class="related-card">';
echo '<a href="' . get_permalink() . '">';
echo '<div class="related-title">' . get_the_title() . '</div>';
echo '</a></div>';
}
echo '</div></div>';
// 스타일
echo '
<style>
.related-posts-deck {
margin-top: 3em;
padding: 1.5em;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.related-posts-deck h3 {
font-size: 1.4rem;
margin-bottom: 1em;
border-left: 5px solid #0073aa;
padding-left: 0.75em;
color: #222;
}
.related-posts-cards {
display: flex;
flex-wrap: wrap;
gap: 1.2em;
}
.related-card {
flex: 1 1 calc(33.333% - 1.2em);
background: #fdfdfd;
border: 1px solid #e1e8ed;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
padding: 1em;
transition: all 0.3s ease;
}
.related-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 24px rgba(0,0,0,0.1);
}
.related-card a {
text-decoration: none;
color: #0073aa;
font-weight: 600;
font-size: 1rem;
}
.related-card a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.related-card {
flex: 1 1 100%;
}
}
</style>';
}
$post = $orig_post;
wp_reset_postdata();
}
}
});
워드프레스 관련 글
Nginx 환경에서 Sitemap이 text/xml 또는 noindex로 나오는 문제 해결기 (직접 만든 워드프레스 플러그인 포함)