WordPress | トップページにカテゴリ別の全記事リストを表示する方法

2019-04-062023-02-21WordPress カスタマイズ,WordPress

WordPressのトップページ（フロントページ）にカテゴリ別の全記事一覧を表示する方法とサンプルコードを紹介しています。

紹介している内容は、一覧を表示するウィジェットに関数を実行するショートコードを記述するタイプのものです。

カテゴリ別の全記事リストを表示する方法

カテゴリ別の全記事リストを表示する手順になります。

• 「functions.php」にてショートコードを実行する関数を作成する
• テキストウィジェットにショートコードを記述する
• 表示を確認してカスタマイズする

add_shortcode()関数でショートコード[in_top_page_view]を実行するように設定します。
ショートコードは独自関数inTopPageView()を実行します。

「functions.php」に以下のコードを追加します。

function inTopPageView()
{
	// トップページかどうか判別する
	if (is_front_page() && !is_paged()) {
		// カテゴリ一覧を取得して反復処理
		$categories = get_categories();
		foreach ($categories as $category) {
			echo '<p>' . $category->cat_name . '</p><ul class="entry_list">';
			$arg = array(
				'posts_per_page' => 30, // カテゴリ別記事数
				'orderby' => 'date', // 日付ソート
				'order' => 'DESC', // 新記事順に
				'category' => $category->cat_ID
			);
			$posts = get_posts($arg);
			foreach ($posts as $post) {
				echo '<li><a href="' . $post->post_name . '">' . $post->post_title . '</a></li>';
			}

			echo '</ul>';
		}
	}
}

// ショートコードがあれば実行する
add_shortcode('in_top_page_view', 'inTopPageView');

// ウィジェットでショートコードを有効化
add_filter('widget_text', 'do_shortcode');

ウィジェットエリアに以下を追加。

[in_top_page_view]

一覧のCSSをカスタマイズします。

.entry_list li {
	font-size:1em;
	font-weight: bold;
	list-style:none;
	padding:0.5em;
	margin: 0;
}

利用しているWP関数の簡単な説明

コード中で利用しているWP関数の簡単な説明になります。