Blog

ブログ

WordPressの固定ページでアーカイブページを作る

前田 大地

先日、とある大規模WordPress案件との戦闘中、WordPressマスターから青魔法「固定ページでアーカイブページを作る」をラーニングしました。

詳しく調べてみると、実装方法を紹介している記事もちらほらと見かけます。せっかくなので、今回は、固定ページとサブループを使って独自のアーカイブページを作る方法をご紹介します。

固定ページでアーカイブページを作るってどういうこと?

WordPressで投稿タイプを追加するとき、has_archiveTRUEにすることで、その投稿タイプのアーカイブ(記事一覧)ページが作成されます。

さらに、カスタム分類を使えば、分類ごとのアーカイブページが作成できます。

ほとんどの場合、これら2種類のアーカイブページがあれば事足ります。ですが、さらなるアーカイブページが欲しくなるケースもあります。

例えば、「カスタムフィールドが特定の値のものだけを抽出してアーカイブページを作りたい」場合や、「複数の投稿タイプをまとめたアーカイブページを作りたい」場合などです。

そんなとき、固定ページとサブループを使って独自のアーカイブページを作ることができます。

固定ページは複数ページに分割可能

ご存知の通りWordPressには、投稿や固定ページなどのシングルページも、「1ページ目」「2ページ目」といったページ分割ができるようになっています。

ブロックエディタの「ページ区切りブロック」を使えば、その前後でページを分けることができますよね。対応しているテーマなら、自動的に「次のページ」「前のページ」といったページ送りが表示されるはずです。

ページ分割時のパーマリンク構造も用意されています。例えば固定ページのスラッグが「topics」だった場合、1ページ目は「/topics/」、2ページ目は「/topics/page/2/」、3ページ目は「/topics/page/3/」でアクセスできます。

固定ページとサブループで擬似アーカイブページを作る

というわけで、WordPressにもともと備わっているページ分割機能とサブループを組み合わせれば、擬似的なアーカイブページを作ることができます。

<?php 
//
// 固定ページのテーマファイル
//
get_header(); ?>
<?php while ( have_posts() ) : the_post(); // メインループ開始 ?>

<?php
	// アーカイブ用のサブループ
	$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
	$args = [
		'post_type' => '【投稿タイプ名】',
		'posts_per_page' => 10, // 1ページあたりの件数
		'paged' => $paged, // 現在のページ番号(何ページ目か)
	];
    $my_query = new WP_Query( $args );
    if( $my_query->have_posts() ):
			while( $my_query->have_posts() ): $my_query->the_post();
      ?>

      <!-- サブループ内のコンテンツが入る -->

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

<?php endwhile; // メインループ終了 ?>
<?php get_footer(); ?>

pagedに現在のページ番号(何ページ目か)という情報を渡してあげることで、ページ番号に合った投稿を取得してくれます。例えば1ページあたり10件の記事を表示しているなら、2ページ目は11〜20件目の投稿が表示されます。

WP_Queryで抽出する記事の条件をお好みで指定すれば、独自のアーカイブページが作成できます。WP_Queryの詳しい使い方は、解説記事がたくさんあるので自分で調べてね。

wp-pagenaviを使う

ページネーションには、wp-pagenaviプラグインを使うのが最も簡単です。wp_pagenaviテンプレートタグに引数でWP_Queryオブジェクトを渡せば、それに合ったページネーションを出力してくれます。

<?php wp_pagenavi( [ 'query' => $my_query ] ); ?>

注意点

固定ページをアーカイブページにする場合、以下のような注意点があります。

wp_link_pages()は使えない

通常の固定ページの分割とは異なるため、ページ送り用のテンプレートタグwp_link_pages()は使えません。max_num_pagesなどを利用して独自のページ送りロジックを作るか、おとなしくwp-pagenaviを使いましょう。

投稿がなくても404ページにならない

通常のアーカイブページでは、記事が1件しかないときに2ページ目にアクセスすると404ページが表示されます。しかし、今回の方法では、存在しないページ番号にアクセスしても404ページにはなりません。if( $my_query->have_posts() ):endif;までのサブループが表示されなくなるだけです。

やってみた感想

スティングレイからマイティガードをラーニングするよりは簡単です。

Web Designer / Developer

前田 大地

沼津高専中退。デザイン会社、システム開発会社を経てセブンシックスを設立。マーケティング、デザイン、テクノロジーに精通するオールラウンダーとして、県内の中小企業に向けた戦略型ホームページ制作を開始。一方で、都内の広告代理店からの要請で大企業案件にも多数参加。企業が本当に必要とするホームページ制作とは何か、を日々探求している。

Blog top