1. 플러그인을 사용하지 않으려는 이유?

많은 논란이 있지만 워드프레스는 무겁고 느리다는 데에 많은 사람들이 동의하고 있다. 물론 아니라고 주장하는 사람도 있다. 어디를 가나 완벽한 의견 일치라는 것은 없으니깐..

나도 XE에서 워드프레스로 이전하면서 워드프레스가 무겁다는 소리를 귀가 따갑도록 들어서 상당히 긴장을 하고 조금 더 빨리 할 수 있는 방법이 무엇인지를 더 고민하게 되었다. (워드프레스의 장단점을 떠나서 개인에게는 득이되었다고 봄)

워드프레스가 느린 이유에 대해서 대다수가 동의하는 것이 많은 플러그인 사용으로 인해서 이를 구동시키느라 느려진다는 것이다. 그렇기에 최적화하는 단계에서는 가능하는한 플러그인을 줄이라는 충고를 받고 있다. 주지의 사실이 아닌가??

따라서 여기에 연관글을 출력하는데 플로그인을 사용하지 않으려는 이유이다.

이미 많은 테마에서 연관글 출력을 별도 플로그인없이 출력할 수 있도록 기능을 내장하고 있다. 그런 경우는 내장 기능을 사용하면 된다.
또는 내장 기능이 마음에 들지않아 재디자인해서 사용하는 방법도 있을 수 있겠다.

• 블로그의 기능을 제3자에게 의존하지 않아도 된다. 이는 유명 플러그인이 개발자의 사정으로 인해 버려지진 경우가 너무 너무 많다. 그들의 사이트는 오래되고 해킹등의 위험이 있는 사이트로 남아 있는 경우가 있다.
• (아주 일부이긴하지만) 사이트를 느리게하거나 악화시키거나 심지어는 악성 코드를 담은 플러그인을 사용하는 위험을 없앨 수 있다는 점이다. 물론 워드프레스 공식 사이트에서 다운받는 플러그인의 경우 이런 위험이 낮다고 볼 수 있다.

2. 플러그인없이 썸네일이 있는 연관글(related posts)을 출력하는 code 만들기.

연관글(related posts)은 대부분 포스팅한 글의 아래 부분에 위치하도록 디자인 된다. 대부분 그렇다는 것이고 설계자의 맘에 따라서는 위나 또는 사이드바에 위치할 수도 있다.

2.1. tag를 활용해서 연관글(related posts)을 가져오자.

연관글(related posts)을 얻기 위해서는 포스팅한 글에서 적용한 tag를 사용한다. 글을 작성하면서 해당되는 tag를 입력해 놓았다면 그 tag를 분석해 연관성이 있는 tag가 있는 글이 출력되도록 하는 것이다. (물론 tag가 아니라 카테고리등으로 불러오는 경우도 있다. 필자가 사용했던 ColorMag라는 테마는 tag로 가져올 것인지 아니면 category로 가져올것인지를 선택하도록 되어 있었다. 많은 테마들이 그정도 친절하지는 않고 일반적으로 tag로 가져온다)

2.2. 섬네일(thumbnails) 가져오기

워드프레스는 다 알다시피 특성이미지(feature image)를 가지고 자체적으로 썸네일 만들어 이를 활용하도록 하고 있다. (다른 CMS도 방식은 다르지만 썸네일을 만들어준다. 워드프레스는 그 사용법 등등이 좀 더 요란스럽다. 사용자를 귀찮게 한다.)

이 썸네일을 사용하려면 아래 코드를 적용하자.
썸네일의 크기(높이나 폭)을 설정할 수 있다. 아래 두번째 코드
썸네일의 크기는 사용하고 있는 테마에서 어떤 크기의 이미지를 사용하는지 확인이 필요하다, 테마 디자이너의 철학(?)에 따라 지향하는 바에 따라 다양한 이미지의 크기를 사용하고 있다.

특히 연관글(related posts)은 small size를 많이 사용하는데 디자인을 중시하는 제가 현재(2016년 8월) 적용하고 있는 EXTRA 테마에서는 440x264를 요구하고 있다. 예전에 적용한 ColorMag에서는 400x250을 사용했다.

점차 사이트를 화려하게 만들면서 썸네일을 크게 만드는 방향으로 움직이는 것 같다.

요는 테마에서 사용하는 썸네일 사이즈를 확인해보고 가능하면 그 중 하나를 선택하는 게 좋다. 그렇지 않으면 연관글(related posts)용으로 썸네일 이미지를 추가만들라고 옵션을 주어야 한다.

아래에서는 상당히 작은 150*100을 책정했다.

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 100, true );

2.3. 최종 코드

2.3.1. 썸네일을 가진 연관글 코드

이상과 같이 썸네일과 함께 연관글(related posts)을 가져오는 코드는 아래와 같이 정리 할 수 있다.

<div class="relatedposts">
<h3>Related posts</h3>
<?php
  $orig_post = $post;
  global $post;
  $tags = wp_get_post_tags($post->ID);

  if ($tags) {
  $tag_ids = array();
  foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
  $args=array(
  'tag__in' => $tag_ids,
  'post__not_in' => array($post->ID),
  'posts_per_page'=>4, // Number of related posts to display.
  'caller_get_posts'=>1
  );

  $my_query = new wp_query( $args );

  while( $my_query->have_posts() ) {
  $my_query->the_post();
  ?>

  <div class="relatedthumb">
    <a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
    <?php the_title(); ?>
    </a>
  </div>

  <? }
  }
  $post = $orig_post;
  wp_reset_query();
  ?>
</div>

2.3.2. VIVI Theme에서 제안하는 코드

아래 코드는 VIVI theme에서 제안하는 코드이다.
참고로 가져왔으미 비교해 보시길..

<div class="relatedposts">
    <h3>Related posts</h3>
    <?php
        $orig_post = $post;
        global $post;
        $tags = wp_get_post_tags($post->ID);

        if ($tags) {
            $tag_ids = array();
        foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
            $args=array(
                'tag__in' => $tag_ids,
                'post__not_in' => array($post->ID),
                'posts_per_page'=>4, // Number of related posts to display.
                'caller_get_posts'=>1
            );

        $my_query = new wp_query( $args );

        while( $my_query->have_posts() ) {
            $my_query->the_post();
        ?>

        <div class="relatedthumb">
            <a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
            <?php the_title(); ?>
            </a>
        </div>

        <?php }
        }
        $post = $orig_post;
        wp_reset_query();
        ?>
    </div>

2.3.3. JointWP에서 제안하는 코드

아래 코드는 JointWP 테마에서 사용하는 코드이다.
이 코드는 WordPress Related Posts Without a Plugin라는 글에서 소개하고 있는 코드이다.

<?php
// Related Posts Function, matches posts by tags - call using joints_related_posts(); )
function joints_related_posts() {
    global $post;
    $tags = wp_get_post_tags( $post->ID );
    if($tags) {
        foreach( $tags as $tag ) {
            $tag_arr .= $tag->slug . ',';
        }
        $args = array(
            'tag' => $tag_arr,
            'numberposts' => 4, /* You can change this to show more */
            'post__not_in' => array($post->ID)
        );
        $related_posts = get_posts( $args );
        if($related_posts) {
        echo '<h4>Related Posts</h4>';
        echo '<ul id="joints-related-posts">';
            foreach ( $related_posts as $post ) : setup_postdata( $post ); ?>
                <li class="related_post">
                    <a class="entry-unrelated" href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
                    <?php get_template_part( 'partials/content', 'byline' ); ?>
                </li>
            <?php endforeach; }
            }
    wp_reset_postdata();
    echo '</ul>';
}
?>

이 연관글은 현재 포스팅 글의 tag와 같은 tag를 가진 포스팅을 찾아서 보여주는 코드이다.

이 코드를 functions.php파일에 추가하고 템플릿에서 joints_related_posts();를 사용해 불러냄으로써 사용할 수 있다.

참고로 가져왔으미 비교해 보시길..

3. CSS에 적용하기

위에서 2개의 클래스를 정의했는데 그중 하나 “.relatedposts는 전체 연관글을 뿌려주는 공간에 대한 정의이고 또하나 “.relatedthumb”는 연관글 개개의 썸네일과 링트를 정의해주는 것인다.

통상적으로 연관글이 들어갈 공간의 폭을 640px로 보고 CSS를 정의해보자.

.relatedposts {width: 640px; margin: 0 0 20px 0; float: left; font-size: 12px;}
.relatedposts h3 {font-size: 20px; margin: 0 0 5px 0; }
.relatedthumb {margin: 0 1px 0 1px; float: left; }
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#333; text-decoration: none; display:block; padding: 4px; width: 150px;}
.relatedthumb a:hover {background-color: #ddd; color: #000;}

여기서 썸네일의 폭이 150px이므로 약 4개의 연관글을 옆으로 나열할 수 있다는 의미이다.

4. 마치며

이상으로 간단히 플러그인없이 연관글을 출력하는 방법을 살펴보았다,.

요즘 나오는 테마는 어지간하면하면 연관글이 빌트인되어 있는바 별도로 설계할 일은 적겠지만 이것이 없는경우 별도의 플로그인을 사용하지 않고 연관글을 출력할 수 있는 방안도 함께 검토해 보길..