ウィジェットで関連記事を表示する方法（プラグインなし、サムネイルなし）

この記事は、Wordpressブログの「THE THOR」テーマを使っていて、プラグインなし、サムネイルなし、親テーマを触らずに関連記事のリンクを表示したい人向けの情報です。

THE THOR以外のテーマを使ってる人でも大丈夫です。

目次

ウィジェットでショートコードを実行する準備

子テーマのfunction.phpに以下のコードを保存します。

add_filter('widget_text','do_shortcode');

THE THORテーマを使ってる人は「下記ユーザーカスタマイズエリア」と書かれているところの次にコピペしてください。それ以外の人も、function.php内にコピペしてください。

これで準備完了です。ウィジェットからショートコートを実行できるようになります。

※すでにこの記述がしてあった場合は何も追加しなくてOKです

関連記事を表示する関数を貼り付ける

今度は、さっきのadd_filterの下の行に次のコードを貼り付けてください。

function KarmaRelatedArticle(){
	$num = 3; //関連記事の表示件数をここに入力する
	global $post;
	$oldpost = $post;
	$q_obj = get_queried_object();
	$np_id = $q_obj->ID;
	$now_cat = get_the_category($np_id);
	$c_id = $now_cat[0]->cat_ID;
	$c_name = $now_cat[0]->cat_name;
	$args = array(
		//表示件数
			'numberposts'=>$num,

		//カテゴリID
			'category'=>$c_id,

		//日付で並び替え＞post_date
		//ランダム並び替え＞rand
			'orderby'=>'post_date',

		//古い順に表示＞ASC
		//新しい順に表示＞DESC
			'order'=>'DESC',

		//除外する投稿ID
			'exclude'=>$np_id,

		//記事だけを対象とする（固定ページを含まない）
			'post_type'=>'post'
	);
	$n_post = get_posts($args);
	$ans.='<ul class="karma_relat_list">';
	foreach($n_post as $post):
		setup_postdata($post);
		$ttl = the_title("","",false);
		$link = get_permalink();
		$ans.='<li><a href="'.$link.'">'.$ttl.'</a></li>';
	endforeach;
	$ans.='</ul>';
	$post = $oldpost;
	wp_reset_postdata();
	return $ans;
}
add_shortcode("karma_relat", "KarmaRelatedArticle");

このコードは、表示している記事のカテゴリを取得して、記事リンクを出力するプログラムです。リンクはulタグのリストになります。

2行目にある「関連記事の表示件数をここに入力する」の数字を書き換えることで、表示する件数を調整できます。

関数の解説とカスタマイズ

以下の処理で、ulタグとliタグを作っています。

$ans.='<ul class="karma_relat_list">';
//↑ansという箱にul開始タグを入れる
foreach($n_post as $post):
	//↓記事の数だけ繰り返される
	setup_postdata($post);
	$ttl = the_title("","",false);
	$link = get_permalink();
	$ans.='<li><a href="'.$link.'">'.$ttl.'</a></li>';
	//↑ansという箱にliタグに囲まれたaタグを入れる
	//ここを繰り返すのでansの中身は、
	//li aタグ /li
	//li aタグ /li
	//みたいな感じになる
endforeach;
//↓繰り返しが終わったあとul終了タグを入れる
$ans.='</ul>';

やってることはansの中にタグを入れていくだけなので、リストタグ以外に改変することもできます。

以下のように書き換えればテーブルタグで出力できます。

$ans.='<table>';
foreach($n_post as $post):
	setup_postdata($post);
	$ttl = the_title("","",false);
	$link = get_permalink();
	$ans.='<tr><td><a href="'.$link.'">'.$ttl.'</a></td></tr>';
endforeach;
$ans.='</table>';

ウィジェットから関数を呼び出す

最後は、ウィジェットからショートコードを呼び出して完成です。

ウィジェットのカスタムHTMLに以下をコピペして保存します。

投稿記事の下部にウィジェットを置けば、記事の最後に関連記事のリンクが表示されます。

スタイル設定

スタイルシートに以下をコピペすると、出力されたリストを装飾できます。

.karma_relat_list{
	background-color:#fff; /*リスト全体の背景色*/
	border-radius:5px;
	box-shadow :0px 0px 3px #999;
	padding:0.5em;
}
/*リストの間隔*/
.karma_relat_list li{
	line-height:1.5; /*折り返されたときの行間*/
	padding:0.5em; /*リンクごとの間隔*/
}
/*記号の表示*/
.karma_relat_list li::before{
	content:'◆';
	color:#999;
	text-shadow:3px 3px 2px #ccc;
	padding-right:0.8em;
}
/*リンクの色設定*/
.karma_relat_list li a{
	color:#4040FF;
	text-decoration:underline;
}

参考にしたサイト

ウィジェット内での投稿ID取得処理で参考にしたサイトです。
https://blog.kuromusubi.com/develop/platform/wordpress/20181112-post-3597