WordPress

[WordPress] 関連記事プラグイン YARPP をカスタマイズして、全自動でアイキャッチ画像表示する

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

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

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

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

YARPP をカスタマイズする

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

で、テーマフォルダに移動した「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;
}

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