コピペでOK！関連記事（アイキャッチ付き）をプラグインなしで表示する【WordPress】

2014/03/18 0 投稿者: jinnaitakumi

私がなるべくプラグインを使いたくない理由は、プラグインを使うとデザインを含めたカスタマイズが制限されやすいことだ。

表示速度にも変化があるかもしれないが、目くじらを立てるほどの差ではないだろう。

今回は、長く使っていた「YARPP」という関連記事を表示するためのプラグインを卒業し、テーマで吐き出せるようにした。

自分でカスタマイズすることが面倒な人は、「YARPP」か WordPress が公式提供している「JetPack」の機能を使ってもいいだろう。

[M] WordPressプラグイン「JetPack」に関連記事の機能が登場 | mbdb (モバデビ)

1 サムネイル（アイキャッチ）付き関連記事を表示するコード
2 じんないたくみの声

サムネイル（アイキャッチ）付き関連記事を表示するコード

準備：functions.php にサムネイルを定義する

まずは、サムネイル（アイキャッチ）を functions.php で生成する必要がある。

以下のような形で functions.php にサムネイルを定義できる。

//アイキャッチ画像
add_theme_support('post-thumbnails'); //アイキャッチを使うという宣言的なやつ
add_image_size( 'singleRelatedThumbnail', 200, 124, true ); //アイキャッチ画像の定義

この場合は「singleRelatedThumbnail」という名前のサムネイルを、幅 200px、高さ 124px（黄金比）で生成するように定義している。

数値や名前は好きに変更すればいいだろう。

関連記事を表示する

記事ページに関連記事を表示したいなら、single.php の

<?php the_content(); ?> //記事本文

の下などの、表示したい箇所に以下のコードを挿入する。

<div class="singleRelated"> //関連記事の全体を囲むタグ
     <h3>関連記事</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'=>3, //表示する記事数
          'caller_get_posts'=>1
          );
      $my_query = new wp_query( $args );
      while( $my_query->have_posts() ) {
          $my_query->the_post();
          ?>
     <div class="singleRelatedOne"> //1記事分を囲むタグ
          <div class="thumbnail"> //アイキャッチを囲むタグ
               <a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail('singleRelatedThumbnail'); ?></a> //アイキャッチの表示とリンク化
          </div>
          <div class="title"> //記事のタイトルを囲むタグ
               <a rel="external" href="<? the_permalink()?>"><?php the_title(); ?></a> //記事のタイトルの表示とリンク化
          </div>
    </div>
      <? }
          }
          $post = $orig_post;
          wp_reset_query();
     ?>
    
     <br style="clear:both;"> //floatの解除（デザインに合わせて設置や位置は調整するように）
</div>

元のソースはこちらの記事を参考にしている（元記事のソースは改行タグが入っているため注意すべし）。

WordPressプラグインを使わないでアイキャッチ付きの関連記事一覧を表示する方法 | ワードプレステーマTCD

私は div で無理やり組んでいるが、本来なら ul や li を使って、リストとして要素を囲ったほうがいい。

デザインを style.css で指定する

デザインは自分のブログに合わせて自由にカスタマイズすればいいだろう。

ちなみに私の場合は、以下のように指定している。

.singleRelatedOne {
     width: 200px;
     float: left;
}
.singleRelatedOne a{
     color: #141414;
}
.singleRelatedOne a:hover{
     color: #03A678;
}
.singleRelatedOne .thumbnail{
     position: relative;
     border-bottom: 1px solid #cccccc;
}
.singleRelatedOne .thumbnail img{
     vertical-align:bottom;
}
.singleRelatedOne .title{
     padding: 10px;
}

タグは、元のソースをいじればかなり自由に付けられるので、自分の実現したい形に合わせて考えていけばいいだろう。

▼上記のコード、CSSだと、このように表示される。