【コピペOK】WordPressでプラグインを使わずに関連記事を表示する

WordPressで関連記事を表示するには、プラグインを利用すれば簡単にできるのですが、プラグインをいれすぎるとメンテナンスするのが面倒だし、カスタマイズしにくかったりします。

今回、プラグインを使わずに関連記事を表示する方法を紹介しますので、ぜひ使ってみてください。

完成イメージ

仕様はこんな感じです。

ソースコード

single.phpに直接貼り付けてもいいのですが、ちょっとコードが長いので私は関連記事専用のphpファイルに書き出しています。
ここでは、relatedposts.phpを作成して以下を貼り付ける方法で進めますね。

<div class="relatedposts-articles">
<p>関連する記事</p>
<?php
	// カテゴリーが複数設定されている場合は、どれかをランダムに取得
	$categories = wp_get_post_categories($post->ID, array('orderby'=>'rand'));
	//表示したい記事要素を設定
	if ($categories) {
	    $args = array(
	        'category__in' => array($categories[0]), // カテゴリーのIDで記事を取得
	        'post__not_in' => array($post->ID), // 表示している記事は除外する
	        'showposts'=>3, // 取得したい記事数
	        'caller_get_posts'=>1, // 取得した記事を1番目から表示する
	        'orderby'=> 'rand' // ランダムで取得する
	    );
		$my_query = new WP_Query($args);
		if( $my_query->have_posts() ) {
			while ($my_query->have_posts()) {
				$my_query->the_post();
				//アイキャッチ画像のURLを取得
				$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail_size' );
				if ( !empty($thumb['0']) ) {
					$url = $thumb['0'];
				} else {
					$url = "http://design-ec.com/d/e_others_50/l_e_others_500.png";
				}
?>
				<div class="relatedposts">
					<!--アイキャッチ画像を表示-->
					<div class="relatedposts-thumbnail">
						<img src=<?=$url?>>
					</div>
					<!--記事のタイトルを取得-->
					<div class="relatedposts-content">
						<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
					</div>
				</div>
				<?php
			}
			wp_reset_query();
		} else {
		?>
		<span class="no-related">関連記事はありません</span>
		<?php
		}
	}
?>
</div>

上記のソースに関しては、以下のブログを参考にさせていただいています。
ワードプレスで関連記事を表示する簡単な方法プラグイン無し
【WordPress】プラグインなしで関連記事を表示する方法【CSS付き】

.relatedposts-thumbnail img {
  max-width: 100px;
  max-height: 100px;
}

.relatedposts {
  display: flex;
  padding: 5px;
  margin: 4px;
  border: solid 2px #e5e5e5;
  max-width: 500px;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);
  background-color: #f6f6f647;
  transition: all 0.3s ease 0s;
}

.relatedposts:hover {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
  transform: translateY(-0.1875em);
}

.relatedposts-articles p {
  text-align: center;
  font-size: 1.4em;
  font-weight: bold;
  color: #585858;
  border-bottom: solid 3px #f0ebeb;
}

.relatedposts a {
  padding: 10px;
  color: #337ab7;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: bold;
}

.relatedposts-content {
  margin: auto 0;
}

.no-related {
  font-size: 1.2em;
}

single.phpに以下のコードを追記することで任意の場所に表示することができます。

<?php get_template_part( 'relatedposts' ); ?>

まとめ

コピペできますので、ぜひ試してみてください。
あとCSSはお好みの形で変えてください。

それでは、また。