以前、ブログに関連記事を表示する LinkWithin を好きな場所に表示していたのですが、カスタマイズ性が絶望的でいつからか外していました。

ですが、「ごりゅご.com」で関連記事表示プラグイン YARPP をカスタマイズして、LinkWithin 風に関連記事を表示できるみたいで早速試してみました。

• 関連記事プラグイン YARPP をカスタマイズして LinkWithin 風にする | ごりゅご.com

しかし、画像付き関連記事を扱う場合は、記事にサムネイル画像の設定が必要であり、設定していない場合は画像が表示されません。その点を @goryugo さんは、Auto Post Thumbnail というプラグインで補っています。

• 新しい記事も過去の記事も全部自動でアイキャッチを作成してくれる Auto Post Thumbnail | ごりゅご.com

プラグインをなるべく増やしたくないので、Auto Post Thumbnail 無し YARPP だけで、アイキャッチ画像を自動で表示させてみました。

YARPP をカスタマイズする

YARPP 導入は、以下の記事を参照。

• 関連記事プラグイン YARPP をカスタマイズして LinkWithin 風にする | ごりゅご.com

で、テーマフォルダに移動した「yarpp-template-thumbnail.php」を編集します。基本的には、以下の PHP ソースをコピーして、関連記事とかの文字をお好みに変更するだけで良いと思います。

ソースとかお好みとか、お腹が空きますね。

<?php if(have_posts()): ?>
  <h2>関連記事</h2>
  <div class="related-post">
  <?php while(have_posts()) : the_post(); ?>
    <?php
      $imgset = array (
      'post_type' => 'attachment',
      'post_mime_type' => 'image',
      'post_parent' => $post -> ID,
      'numberposts' => '1' );
      $images = get_children($imgset);
      $image = array_shift($images);
    ?>
    <?php if(has_post_thumbnail()): ?>
      <div class="related-entry"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail("thumbnail"); ?><?php the_title(); ?></a></div>
    <?php else: ?>
      <div class="related-entry"><a href="<?php the_permalink() ?>"rel="bookmark"title="<?php the_title_attribute(); ?>"><?php echo wp_get_attachment_image($image->ID, 'thumbnail'); ?><?php the_title(); ?></a></div>
    <?php endif; ?>
  <?php endwhile; ?>
  </div>
<?php else: ?>
<!-- No related post -->
<?php endif; ?>

僕が使ってる CSS はこんな感じです。

.related-post {
  height: 100%;
}
.related-post {
  width: 510px;
  overflow: hidden;
  margin-top: 5px;
}
.related-entry {
  vertical-align: top;
  float: left;
  width: 150px;
  font-size: 12px;
  min-height: 150px;
  margin: 0;
  padding-right: 20px;
}
.related-entry img {
  width: 150px;
}

こんな感じで表示されます。