star back image
people4
電飾 電飾
moon
men
タグで関連記事を出したい。wordpress

【WordPress】投稿へタグの関連記事を出したい

BLOG WordPress
読了約:8分

ブログの記事を増やしたいです。
しかし面白いことはそうそう起こりません。

これは面白い!と思ったことをタイトルに記して、後で記事の内容を書き進めようと下書きばかりが増えていっている状況です。

書き進めようにも知識が浅すぎて面白さが伴わらないし、自分の書いたつまらない記事にしょんぼりする。挙げ句の果てには、面白いかも!と入れたタイトルを見返しても、「何が面白かったのか忘れる」ということが頻発しているこの頃です。

そんな最中、他者様のブログを勉強をしていたところ「関連記事」を出すのはどうだろうと思いました。もしかしたら、記事が沢山あるように見せられるかも。。

ロボットのセンサーは騙されません。

面白い人だと思われたい。非イケメンだけど女の子にチヤホヤされたい。色々と思うところは皆さん同様、私にもあります。 ( ・`ω・´)キリッ

そんな欲望に振り回されるなんて。
ヒューマノイドは大変ですね。

ノロノロでも記事数を増やし続けて行くのです。

プラグインは使いたくないです

検索するとプラグインなど方法は沢山ありました。その中でも特にわかりやすかったPEAS CODEさんのブログを参考にしました。ありがとうございます。要件は以下。

  • 表示中の投稿と同じタグに属している記事を取得(複数対応)
  • ランダムで4件を取得して表示
  • 「トップに固定」した投稿は無視(固定投稿はないのでまま)
  • 表示中の記事にタグが登録されていない場合、同じタグの記事がない場合は何も出力しない

カテゴリー関連だったのを「タグ」へ変更しています。

テーマ内のファイル:single.php

single.phpファイルへ下のコードを追加します。

<?php if( has_tag() ) : //表示中の投稿に登録されているタグがある場合のみ下記実行 ?>
<?php
//表示中の投稿に登録されているタグのID(term_id)を全て取得
$current_tags = get_the_tags();
$cat_term_ids = array();
foreach($current_tags as $tag){
	$cat_term_ids[] = $tag->term_id; //cat_ID でも同じ
}

//関連記事取得用クエリパラメーター
$args = array(
	'post_type' => 'post',	//投稿を指定 (固定ページの場合は 'page')
	'posts_per_page' => '4',	//取得する件数
	'ignore_sticky_posts' => true,	//「トップに固定」した投稿は除く
	'post__not_in' => array( $post->ID ),	//除外する投稿(本記事)
	'tag__in' => $cat_term_ids,	//対象となるタグID(配列)
	'author__in' => $post->post_author, //現在表示中の記事の記者を指定
	'orderby' => 'rand'	//表示順をランダムにしてい(日付順の場合は 'date')
	);
$the_query = new WP_Query( $args );	//クエリ実行
?>

<?php if( $the_query->post_count > 0 ) : //該当する投稿が1件以上あったら下記出力 ?>
<aside class="relPostWrap">
	<h5>関連記事<span><?php the_tags( '', ' , ' ); ?></span></h5>
	<ul>
		<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
			<li>
				<div class="thumb">
					<span class="post_date"><?php the_date('Y/n/j'); ?></span>
					<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium'); ?>
				</div>
				<div class="title"><?php echo wp_trim_words(get_the_title(), 48, "…", "UTF-8"); ?></div>
			</a></li>
		<?php endwhile; ?>
		<?php wp_reset_postdata(); ?>
	</ul>
</aside>
<?php endif; // end of "if( $the_query->post_count > 0 )" ?>
<?php endif; // end of "if( has_tag() )" ?>

投稿記事の一番下に表示したかったので、loopのphp記述の終わったすぐ下にコードを追加しました。

//loopのphp記述
<?php
while ( have_posts() ) :
  the_post();
  //記事の内容がいっぱい
endwhile;
?>
//↓この下にコピペで追加しました。

以下のような感じに出力させました。満足です!

cssはご自由に

参考:PEAS CODEさん
WordPress|プラグインを使わず関連記事をページ下部に表示 https://peascode.com/wordpress/wordpress-related-posts-bottom/

【AI】イラストを描いてもらった

今回の記事のキャッチ画像で使わせてもらいます「Memeplex.app」で作成した画像です。誰でもgoogleアカウントでログインして使えます。

この記事にピッタリなイラストのための考えたリクエストは、「便利屋になってみんなの役に立ちたいと想像するだけのスーツ姿のサラリーマン」です。
選んだモードは以下の3つです。

  • 画風指定なし
  • スタイル指定なし
  • 作風指定なし

宇宙っぽいワードを入れるのを失念しておりました。
作風などを指定なしにすると、実写っぽくなるみたいです。