タグを使って「関連記事一覧」を出力するWordPressカスタマイズ

2013年5月24日 2019年1月30日 Wordpress

ブログを運営するにあたって「関連記事」ってなにげに重要なんですよね。
便利なプラグインも揃っていて実装もそれほど手間ではないのでは・・・。

しかし、テーマを少々カスタマイズすることで実装できてしまうのです。
自分用の備忘録にもなるし、タグを使った関連記事一覧の出力方法を紹介します。

WordPressで関連記事を出力するイメージ

タイトルとアイキャッチ画像を表示し、記事ページへリンクします。

関連記事の出力イメージ
ただのテキスト一覧では面白くないので、やっぱサムネイル画像は欲しいと思ったので付けてみました。

ソースコード

single.phpに以下を追加。

<?php // 同じタグを持つ記事を取得
    $tags = wp_get_post_tags($post->ID);
    $tagIDs = array();
    if ($tags):
 	$tagcount = count($tags);
        for ($i = 0; $i < $tagcount; $i++) {
            $tagIDs[$i] = $tags[$i]->term_id;
        }
	    $args = array(
			'orderby' => 'rand',
		    'tag__in' => $tagIDs,
		    'post__not_in' => array($post->ID), // 現在の記事を含めない
		    'posts_per_page' => 4,
		    'ignore_sticky_posts' => true // true:先頭固定表示の投稿を無視
	    );
    $my_query = new WP_Query($args);
    if( $my_query->have_posts() ) { ?>
	<div id="related-article">
		<p class="related-title">同じタグの記事一覧</p>
		<?php echo '<ul class="index">';
	        while ($my_query->have_posts()) : $my_query->the_post(); ?>
		<li>
			<a href="<?php the_permalink();?>">
			<?php //サムネイル画像(無い場合は別の画像)を表示
				if ( get_the_post_thumbnail($post->ID,'thumbnail') ):
					echo wp_get_attachment_image(the_post_thumbnail('thumbnail')); 
				else: ?>
				<img src="<?php bloginfo('stylesheet_url'); ?>/image/noimage.jpg" alt="Noimage" />
			<?php endif; ?>
			</a>
			<span><a href="<?php the_permalink();?>"><?php the_title(); ?></a></span>
		</li>
		<?php
			endwhile;
			wp_reset_query();
			echo '</ul>'; ?>
	</div>
	<?php } // if $my_query ?>
<?php endif; ?>

画像サイズは、管理画面の「設定」→「メディア」の「サムネイルのサイズ」で表示されます。
アイキャッチ画像が未設定の記事の為に、Noimage的な画像も用意しておくと良いと思います。

参考にさせて頂いたページはこちら

プラグインを使わずに、WordPressのサムネイルつき関連記事を表示する

コメントを残す

メールアドレスが公開されることはありません。

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

このサイトの管理者

ナオユ

Wordpress初心者向けにカスタマイズ方法やWEB制作のノウハウをポロッとまとめています。広告代理店→WEB制作会社→リモート勤務になり在宅ワークしながらアフィリエイトなど副業に挑戦中|子ども大好き新米パパ@H29男児|フラット35で実家を建て直し親と同居|仮想通貨投資(絶賛含み損w)