WordPressメインループ、サブループを詳しく解説

こうだい@副業WEB制作者

2021年11月5日 18:02

WordPressで何気なく実装するメインループ、サブループについて分かりやすく解説していきたいと思います。

自分自身WordPress学習を始めた当初はメインループ？サブループ？分ける必要性あるのか？理解する必要ある？ということをずっと思っていました。

実際に実装していく上でかなり重要だと実感したので、理解が不十分な方には是非ここで理解して欲しいと感じます。

ここを理解することでWordPress案件の実務で躓くポイントが一つ解消されると思っているのでひとつずつ理解していきましょう！

一度では絶対覚えれないと思うので、何度も見返して覚えていきましょう✊

メインループとサブループを使い分けるタイミング

○TOPページにデフォルトの投稿機能を使ってループ処理を使って記事の一覧を取得して、その他にカスタム投稿タイプを使用してその他のブログ、お知らせを記事一覧で取得したい場合

○投稿の一覧をアレンジして表示したい場合

この様な場合にサブループを使い分ける必要があります。

メインループとは

メインループで実装する内容は下記のお知らせの一覧ページとなります。
おしらせ3投稿を新規登録順に並べる方法を解説していきます。

目標物

下記のメインループにて上記の一覧ページが実装出来ます。
ループ処理の内容を表示したい内容へと変更することで投稿表示させることが出来るので、メインループの型を覚えておきましょう。

 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <!-- ループ処理(例) -->
  <a href="<?php the_permalink(); ?>" class="news-container">
             <div class="news-center">
             <time class="news-time"><?php the_time('Y/n/j'); ?></time>
             <div class="news-button">おしらせ</div>
             <div class="news-content"><?php echo get_flexible_excerpt(15); //抜粋を表示 ?></div>
           </div>
           </a>
<?php endwhile; ?>
<?php endif; ?>

メインループの投稿件数の指定については、下記の通りに設定変更する必要があります。
設定⇨表示設定⇨ホームページの表示を最新の投稿⇨1ページに表示する最大投稿数を3件
にすることで投稿記事の件数を3件に設定することができます。

※今回デフォルトで”投稿”となっている部分を”お知らせ”に変更しているため、メインループで表示されるのはおしらせからの投稿となっています。
カスタム投稿タイプで追加した部分は”メディア投稿””ブログ”となっています。

下記のループ処理がメインループの型となります。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- ループ処理(例) -->
<?php endwhile; ?>
<?php endif; ?>

メインループは一つのテンプレート内で基本的には一つまでなので、カスタムして投稿表示件数を設定したい、カスタム投稿タイプの投稿箇所を設定したいという場合は、サブループを使用して表示していきます。

作成物の確認（サブループでの作成）

まずはどの様な投稿機能を実装するのか見ていきましょう！

今回実装するのは下記の添付写真の様な”おしらせ”と”ブログ”に分けて投稿機能を別としておしらせでの投稿の時は”おしらせの背景色を薄いグリーン”ブログ投稿の時は”ブログタグの背景色を薄いブラウン”を新規投稿順に3投稿表示させていきたいと思います。

目標物

下記の写真がWordPress管理画面の内容となります。投稿機能を追加して”お知らせ”と”ブログ”に分けて投稿出来る様に設定していきます。

投稿機能の追加方法については最後に説明いたします。

サブループのコードを下記に記載します。

front-page.php

<?php
$args = array(
	'post_type' => array('post', 'archive-blog'),
	'posts_per_page' => 3,　 
);
$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
	while ($the_query->have_posts()) : $the_query->the_post();
?>
           <a href="<?php the_permalink(); ?>" class="news-container">
             <div class="news-center">
             <time class="news-time"><?php the_time('Y/n/j'); ?></time>
             <?php if (get_post_type() == 'post'): ?>
             <div class="news-button">おしらせ</div>
             <?php else: ?>
             <div class="news-blog">ブログ</div>
             <?php endif; ?>
             <div class="news-content"><?php echo get_flexible_excerpt(15); //抜粋を表示 ?></div>
           </div>
           </a>
<?php
	endwhile;
	wp_reset_postdata();
endif;
?>

メインループとサブループで異なる点は下記のカスタマイズが可能になることです。サブループで取得したいデータを取れる

$args = array(
	'post_type' => array('post', 'archive-blog'),
	'posts_per_page' => 3,　 
);

'post_type'　⇨　投稿タイプのスラッグを入れる部分
'post'と'archive-blog'にすることで、post＝お知らせ、archive-blog＝ブログの投稿をとっています。

'posts_per_page'　⇨　投稿数を指定する部分
今回の条件では投稿3件表示なので、3と記載しています。
全件表示したい場合は"-1"を指定する

もちろんこの他にも様々なカスタマイズを指定する方法はありますのでクライアント様の要望によってカスタマイズしてみてください。

<?php if (get_post_type() == 'post'): ?>
<div class="news-button">おしらせ</div>
<?php else: ?>
<div class="news-blog">ブログ</div>
<?php endif; ?>

”post＝お知らせ”を投稿した場合、おしらせを表示させる。
”archive-blog＝ブログ”を投稿した場合はブログを表示させる様に実装しています。

”おしらせ”のclassにnews-button、”ブログ”のclassにnews-blogを付けているので、それぞれCSSでbackground-colorに該当のカラーを付けることで適切な実装が完成します。

<?php
	endwhile;
	wp_reset_postdata();
endif;
?>

サブループの場合は、ループの終わり（endwhile;の後）にクエリをリセットする必要があります。

投稿タイプを追加する方法

Custom Post Type UI（カスタムポストタイプUI）というプラグインを使用してカスタム投稿タイプの追加を行います。

まずは、下記のCustom Post Type UIのプラグインをインストールして有効化します。

設定方法

インストールすると管理画面のサイドバーに”CPT UI”の”投稿タイプの追加と編集”にて投稿タイプを追加していきます。

必要記入箇所

上記添付写真の投稿タイプスラッグに記入したスラッグは先ほどサブループで使用していた下記の部分になります。

<?php
$args = array(
'post_type' => array('post', 'archive-blog'),
'posts_per_page' => 3,　
);

サブループで'post_type'の部分に使用していた'archive-blog'と紐づける事ができます。

functions.phpで確認すると下記の様な記述となっています。

	/**
	 * Post Type: ブログ.
	 */

	$labels = [
		"name" => __( "ブログ", "custom-post-type-ui" ),
		"singular_name" => __( "ブログ", "custom-post-type-ui" ),
	];

	$args = [
		"label" => __( "ブログ", "custom-post-type-ui" ),
		"labels" => $labels,
		"description" => "",
		"public" => true,
		"publicly_queryable" => true,
		"show_ui" => true,
		"show_in_rest" => true,
		"rest_base" => "",
		"rest_controller_class" => "WP_REST_Posts_Controller",
		"has_archive" => false,
		"show_in_menu" => true,
		"show_in_nav_menus" => true,
		"delete_with_user" => false,
		"exclude_from_search" => false,
		"capability_type" => "post",
		"map_meta_cap" => true,
		"hierarchical" => false,
		"rewrite" => [ "slug" => "archive-blog", "with_front" => true ],
		"query_var" => true,
		"supports" => [ "title", "editor", "thumbnail" ],
		"show_in_graphql" => false,
	];

	register_post_type( "archive-blog", $args );
}

add_action( 'init', 'cptui_register_my_cpts' );

この記事が気に入ったらサポートをしてみませんか？