WordPressの関連記事をプラグインなしで表示する方法！順番や記事件数の変更方法も紹介！

WordPressをカスタマイズしようとしたときに投稿や固定ページ、またヘッダフッター、サイドメニューにWordPressで関連記事を表示したい時はないでしょうか。

けど、そんな中で悩むことは、

・WordPressで関連記事を表示する方法がわからない。
・プラグインを追加することなくWordPressで関連記事を表示したいが方法がわからない。

ですよね。

今回はそんなお悩みを解決する
WordPressの関連記事をプラグインなしで表示する方法！順番や記事件数の変更方法も紹介！について
まとめます！

WordPressで関連記事を表示するイメージ

WordPressで関連記事を表示するイメージについて説明をします。

WordPressで関連記事を表示場所は新規作成した投稿と固定ページの本文やウイジェットの編集エリア、ヘッダフッターなど共通パーツとなります。

そこにショートコードを加えます。

ショートコードの内容は、
「ショートコード名　カテゴリーID　表示件数」
となります。

次にfunction.phpにショートコードと関数を追加します。
function.phpを直接編集したくない方はプラグイン「Code Snippests」をインストールしてください。

ショートコードを追加したページやウイジェットをプレビューすると、カテゴリーに関連する記事一覧がリンク付きで表示されます。

順番を変更する場合はショートコードの位置を変えるだけでできます。

さらに、表示記事件数を変更する場合はショートコードの右端の数値を変えるだけでできます。

結果です。

カンタンですね。

それではさっそく実装してみましょう！

WordPressで関連記事を表示するショートコードと関数を追加する

こちらの記事を参考にショートコードと関数を追加していきましょう。
サンプルではプラグインの「Code Snippests」で実装していますが、プラグインを追加したくない方はfunctions.phpを直接編集するようお願いします。

タカヒロ

プラグイン「Code Snippests」はfunction.phpを直接編集することなく、機能の適用範囲を限定的にしたり、エラー発生時は中断したり、追加コードを適正に管理できるので、おすすめです。

ショートコードと関数をfunction.phpへ実装する

以下の記事に従いショートコードと関数をfunction.phpへ実装します。

関数とショートコードはまとめると以下の通りです。

今回一覧表示にあたってCSSおよびHTMLの構造は今使用してるテーマ
「OPENCAGE製のSTORK（ストーク)」
に合わせて作成されています。
CSSとHTMLの部分は各テーマごとに変更するようにお願いいたします。

//ショートコードを追加します。
add_shortcode( 'shortcode_CategoryListViewTEST', 'CategoryListViewTEST');

//カテゴリー別最新記事一覧関数
function CategoryListViewTEST($atts) {

	$cat_posts = get_posts(array(
		'post_type' => 'post', // 投稿タイプを指定します。投稿の場合は'post'、固定ページの場合は'page'です。
		'category' => $atts[0], // カテゴリIDを番号で指定します。今回はショートコードの引数を割り当てます。
		'posts_per_page' => $atts[1], // 表示件数を指定します。5～10件が適正です。今回はショートコードの引数を割り当てます。
		'orderby' => 'date', // 表示順の基準を指定します。'date'の場合は日付が基準になります。
		'order' => 'DESC' // 昇順・降順を指定します。'DESC' は降順で、最新のアイテムが頭に表示されます。
	));

	global $post;

	//H2タイトルを指定します。
	$retHtml = '<h2>' . esc_html(get_catname($atts[0])) . '</h2>';

	$retHtml .= '<div class="top-post-list">';

	//投稿されている記事の件数分繰り返します。投稿オブジェクトは1件づつ$postへ代入されます。
	if($cat_posts): foreach($cat_posts as $post):

		$retHtml .= '<article class="post-list cf" role="article">';
		$retHtml .= '<a href="' . get_permalink() . '">'; //パーマリンクを指定します。

		// 投稿情報を各種のグローバル変数へセットします
		setup_postdata($post);

		// サムネイルを表示させます。'home-thum'は今回テンプレートの設定値です。サイズはテーマごとの設定値に沿って設定してください。
		$retHtml .= '<figure class="eyecatch">' . get_the_post_thumbnail($page->ID, 'home-thum') . '</figure>';

		// VCARDを設定します。
		$retHtml .= '<section class="entry-content cf"><p class="byline entry-meta vcard">';

		// 投稿年月日とタグを取得します。
		$year = get_the_time('Y');// 年
		$month = get_the_time('n');// 月
		$day = get_the_time('j');// 日
		$posttags = get_the_tags();// タグ

		$retHtml .= '<span class="date updated">' . $year . '.' . $month . '.' . $day . '</span>';
		$retHtml .= '</p>';

		// 記事タイトルを設定します。
		$retHtml.= '<h1 class="h2 entry-title">' . the_title("","",false) . '</h1>';

		// 本文を抜粋して取得します。
		$getString = get_the_excerpt();

		$retHtml.= '<div class="description"><p>' . $getString . '</p></div>';

		$retHtml.= '</section></a></article>';

	endforeach; endif; wp_reset_postdata();
	$retHtml .= '</div>';

	//生成したHTMLを返します。
	return $retHtml;
}

ショートコードを固定ページへ実装する

ショートコードを固定ページへ実装しましょう。

固定ページを新規作成する

投稿ページを新規作成します。

カテゴリーのIDを確認する

カテゴリーのIDの数値を確認しましょう。メニューやURL「/?cat=***」から確認することができます。
サンプルのカテゴリー名とIDは”WordPress（129）”、”Youtuber（118）”としました。

固定ページへショートコードを入力する

作成した投稿ページへショートコードを追加します。

ショートコードの内容は、”WordPress（129）”、”Youtuber（118）”の記事、5件づつ出す内容としますので、

[shortcode_CategoryListViewTEST 129 5]
[shortcode_CategoryListViewTEST 118 5]

となります。

固定ページをプレビューする

保存して、プレビュー表示をしてみましょう。

はい、”WordPress”と”Youtuber”の記事一覧が表示されましたね。

タカヒロ

作成した固定ページを総トップページに設定することも可能です。

関連記事を表示する順番を変更する

日付順からタイトル名順へ変更する

日付順からタイトル名順へ変更してみましょう。
‘orderby’プロパティに現在指定されている「date」を「title」へ変更します。

	$cat_posts = get_posts(array(
		'post_type' => 'post', // 投稿タイプを指定します。投稿の場合は'post'、固定ページの場合は'page'です。
		'category' => $atts[0], // カテゴリIDを番号で指定します。今回はショートコードの引数を割り当てます。
		'posts_per_page' => $atts[1], // 表示件数を指定します。5～10件が適正です。今回はショートコードの引数を割り当てます。
		'orderby' => 'title', // 表示順の基準を指定します。'date'の場合は日付が基準になります。
		'order' => 'ASC' // 昇順・降順を指定します。'DESC' は降順で、最新のアイテムが頭に表示されます。
	));

日付順からランダム表示へ変更する

日付順からランダム表示へ変更してみましょう。
‘orderby’プロパティに現在指定されている「date」を「rand」へ変更します。

	$cat_posts = get_posts(array(
		'post_type' => 'post', // 投稿タイプを指定します。投稿の場合は'post'、固定ページの場合は'page'です。
		'category' => $atts[0], // カテゴリIDを番号で指定します。今回はショートコードの引数を割り当てます。
		'posts_per_page' => $atts[1], // 表示件数を指定します。5～10件が適正です。今回はショートコードの引数を割り当てます。
		'orderby' => 'rand', // 表示順の基準を指定します。'date'の場合は日付が基準になります。
		'order' => 'ASC' // 昇順・降順を指定します。'DESC' は降順で、最新のアイテムが頭に表示されます。
	));

「orderby」に設定できる値一覧

「orderby」に設定できる値一覧となります。
いろいろな設定ができますので試してみてはいかがでしょうか。

・’none’ – 順序無し
・’ID’ – 投稿 ID。パラメータ名は大文字
・’author’ – 作成者
・’title’ – タイトル
・’date’ – 日付
・’modified’ – 更新日
・’parent’ – 親ページの ID
・’rand’ – ランダム
・’comment_count’ – コメント数
・’menu_order’ – ページ順序。
・’meta_value’ – クエリに ‘meta_key=keyname’ がある場合のみ有効。アルファベット順。
・’meta_value_num’ – メタフィールドの値。