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関数の簡単な説明になります。
| WP関数 | 概要 | 
|---|---|
| is_front_page() | フロントページ判別 | 
| !is_paged() | 2ページ目以降は読み込まない | 
| get_categories() | カテゴリ一覧の取得 | 
| foreach($categories as $category) | カテゴリのループ処理 | 
| get_posts() | 記事一覧データ取得 | 
| foreach($posts as $post) | 記事情報ループ処理 |