워드프레스 플러그인 “AD-INSERTER”를 이용하여 포스팅에 관련글(추천글) 목록을 추가하는 방법을 알아보겠습니다. 관련글 목록을 추가하면 사용자의 편의성 및 내 블로그 체류 시간을 늘리는데 유용한 방법입니다. 진행을 위해 AD-INSERTER 플러그인을 설치하고 내용을 확인하기 바랍니다.
1. 관련글 목록 추가하기
워드프레스는 다양한 플러그인을 사용하여 블로그를 꾸미거나 다양한 기능을 추가할 수 있는 장점이 있습니다. 관련글 작성하는 방법은 구글링 하면 관련글 작성에 관한 코드들이 많이 있지만 웹 코드 작성에 대한 지식이 부족하면, 이마저도 쉽지 않습니다. 이전에 다루었던 AD-INSERTER 플러그인의 “PHP 활성화”를 통해서 관련글 목록을 추가해 보겠습니다. 우선 오늘 사용할 코드는 다음과 같습니다. 위에서 작성된 코드는 카테고리에 관련된 글을 분류하여 목록을 생성시키는 코드입니다. 원래 의도는 관련 카테고리 글을 불러오고 싶었지만, 제대로 작동을 하지 않아 추천글로 바꿔서 사용 중입니다. 사용하기 전에 어떻게 작동되는지 확인하고 사용하기 바랍니다. 워드프레스 효과적인 애드센스 광고 넣기 – Ad Inserter 설정 → AD-INSERTER 를 선택하여 설정 창으로 이동합니다. 아래 그림과 같이 빈 블록을 선택하여 위에서 제공한 코드를 추가합니다. 그리고 아래에 있는 “PHP” 버튼을 클릭합니다. PHP 버튼을 눌러야 코드를 정상적으로 인식합니다. 그리고 관련글(추천글)을 게시할 위치를 지정합니다. 이 블로그에 적용된 방법은 첫 번째 이미지와 3번째 이미지 뒤에 작성하도록 설정되어 있습니다. 위치는 모든 포스팅에 적용되기 때문에 신중히 생각해서 설정하기 바랍니다. 위에서 작성된 코드 중에서 “posts_per_page” 뒤에 오는 숫자를 조정하면 관련글 개수를 지정할 수 있습니다. CSS를 추가하여 관련글(추천글) 목록에 색상, 크기, 마진, 패딩 등을 조절할 수 있습니다. 외모 → 추가CSS로 이동하여 CSS를 추가합니다. 제가 사용했던 CSS는 아래에 남겨놓겠습니다. 입맛에 맞게 수정해서 사용하기 바랍니다. 오늘은 AD-INSERTER 플러그인을 통해서 PHP 코드를 추가하여 관련글/추천글 목록을 작성하는 방법에 대해서 알아보았습니다. 원래 의도와 다르게 같은 카테고리의 글을 불러오지 못했지만, 추후에 변경되는 내용이 있으면 다시 다루겠습니다.<!-- 추천글 -->
<div class="related-posts">
<h4>
블로그 추천글
</h4>
<?php
$current_post_type = get_post_type();
$query_args = array(
'category__in' => wp_get_post_categories($post->ID),
'post_type' => $current_post_type,
'post__not_in' => array(get_the_ID()),
'posts_per_page' => '8',
'orderby' => 'rand'
);
$related_cats_post = new WP_Query( $query_args );
if($related_cats_post->have_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 original Post Data
wp_reset_postdata();
endif;
?>
</div><!-- 추천글 -->
위에 작성된 코드는 “Single.php나 “content.php”에 추가하면 작동시킬 수 있습니다. 하지만 관련글(추천글) 목록을 적절한 위치에 삽입하기가 쉽지 않습니다. 그래서 AD-INSERTER 플러그인을 이용하여 적절한 위치를 선정하여 사용하겠습니다. AD-INSERTER는 애드센스 코드를 넣기 위해 많이 사용하는 플러그인입니다. 자세한 사용방법은 아래 링크를 남겨두겠습니다. 참고하세요.1) AD-INSERTER 사용하여 관련글 추가하기
2) 관련글 개수 지정하기
3) CSS 추가하기
/* 추천글 */
.related-posts {
margin-top: 30px;
border: 1px solid #000;
padding: 10px 10px 3px 10px;
}
.related-posts ul * {
font-size: 1.2rem;
}
.related-posts h4 {
font-weight: 550;
border-bottom: 2px solid #000;
padding-bottom: 5px;
margin-bottom: 15px;
}
.related-posts ul {
margin-bottom: 8px;
}
마치며