HTMLでは実現できない、投稿機能を持つワードプレスサイト。
その持ち味を活かすには、投稿の一覧を表示するページ（アーカイブページ）が必要です。
一口に投稿一覧ページと言ってもその種類はさまざま。
カテゴリ別一覧やタグ別一覧、投稿年月別一覧などあります！
今回はそんな投稿一覧ページの作成方法を、紹介していきます！
※全投稿の一覧は別記事で紹介しています。
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
それでは本文へ、レッツゴー！
投稿一覧ページが参照するファイルについて
さて、まずはそれぞれのアーカイブページがどのPHPファイルを参照するのか見ていきましょう！
少しはしょっていますが、ざっとこんな感じです。
それぞれのアーカイブの種類ごとにファイルを作るべきか、archive.phpで済ませるべきか、迷うところですよね。
こちらに関して明確な答えはなく個人の好みなのですが、一応僕なりの使い分けを紹介します。
なお本記事ではarchive.phpで作成することを前提に進めます。
※記法は全く同じなので、別のファイルにしてもOKです。
自身のテーマディレクトリ内にarchive.phpを作成しましょう！
全種類のアーカイブページが欲しいならarchive.php
まず、全種類のアーカイブページが欲しいならarchive.phpが一番楽です。
中でも例えばタグ別アーカイブだけレイアウトが違うなら、追加でtag.phpを作るという形になります。
ただし、全種類のアーカイブページでレイアウトが崩れないように配慮しなければいけません。
不要なアーカイブページがあるなら個々にPHPファイルを作る
一方、不要なアーカイブページがあるなら個々にPHPファイルを作成します。
著者別一覧は必然的にワードプレスログインIDがバレてしまうので、僕は著者別アーカイブは好んで使いません。
しかしarchive.phpを使うと、自動的に著者別アーカイブページも生成されてしまいます。
このように、archive.phpに任せてしまうと、存在してほしくないアーカイブページまで自動的に生成されてしまいます。
必要以上のアーカイブページはかえって邪魔になる場合があります！
今回作るアーカイブページのサンプルコード
さて、あらかじめ用意しておいたものがこちらでございます。
コピペして自由に使いまわせるように、できる限りシンプルかつ必要な情報を入れたアーカイブページを作りました。
<?php get_header(); ?>
<h1>
<?php if(is_category() || is_tag() || is_tax()): ?>
<?php echo single_term_title('',false); ?>
<?php elseif(is_post_type_archive()): ?>
<?php echo post_type_archive_title('',false); ?>
<?php elseif(is_year()): ?>
<?php the_time("Y年"); ?>
<?php elseif(is_month()): ?>
<?php the_time("Y年n月"); ?>
<?php elseif(is_day()): ?>
<?php the_time("Y年n月j日") ?>
<?php endif; ?>
の投稿一覧
</h1>
<?php if(have_posts()): ?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li>
<h2>【記事のタイトル】<?php the_title(); ?></h2>
<p>【投稿日】<?php the_time(get_option('date_format')); ?></p>
<p>【カテゴリー】<?php the_category('、'); ?></p>
<p>【タグ】<?php the_tags('', '、'); ?></p>
<p>【記事の抜粋】<?php the_excerpt(); ?></p>
<a href="<?php the_permalink(); ?>">記事を読む</a>
</li>
<?php endwhile; ?>
</ul>
<?php echo paginate_links([
'type' => 'list',
'mid_size' => 1,
'prev_next' => true,
'prev_text' => '前へ',
'next_text' => '次へ',
]); ?>
<?php else: ?>
<p>記事はありません。</p>
<?php endif; ?>
<?php get_footer(); ?>あっという間にアーカイブページの出来上がりです！
それでは、1から順にアーカイブページを作っていきましょう！
まずはarchive.phpを作成する
まずは「archive.php」を、自身が作ったテーマのディレクトリ内に作成します。
もちろんcategory.phpでも可！
既にアーカイブページのHTMLファイルが用意してあるならそちらを使ってもOK
先ほどのサンプルコードのスタート地点はこんな感じです。
<?php get_header(); ?>
<h1>XXXXXX の投稿一覧</h1>
<ul>
<li>
<h2>【記事のタイトル】XXXXXX</h2>
<p>【投稿日】XXXXXX</p>
<p>【カテゴリー】XXXXXX</p>
<p>【タグ】XXXXXX</p>
<p>【記事の抜粋】XXXXXX</p>
<a href="XXXXXX">記事を読む</a>
</li>
</ul>
<?php get_footer(); ?>これを今から、完成品に１歩ずつ近づけていきます！
記事の有無で出力を分岐させる
投稿一覧ページを開いたものの、そこに該当する記事が１件もない時。
例えば「おまんじゅう」カテゴリが存在しているものの、おまんじゅうに関する記事が１件もない時、閲覧者に記事が１件もないことを伝えてあげる必要があります。
have_posts()このhave_posts()は、記事があれば真、なければ偽を返してくれます。
これを使って、if文で処理を分岐させます。
<?php if(have_posts()): ?>
記事があった場合に出力される
<?php else: ?>
記事がなかった場合に出力される
<?php endif; ?>
この分岐を先ほどのコードに挿入すると、このようになります。
<?php get_header(); ?>
<h1>XXXXXX の投稿一覧</h1>
<?php if(have_posts()): ?>
<ul>
<li>
<h2>【記事のタイトル】XXXXXX</h2>
<p>【投稿日】XXXXXX</p>
<p>【カテゴリー】XXXXXX</p>
<p>【タグ】XXXXXX</p>
<p>【記事の抜粋】XXXXXX</p>
<a href="XXXXXX">記事を読む</a>
</li>
</ul>
<?php else: ?>
<p>記事はありません。</p>
<?php endif; ?>
<?php get_footer(); ?>
これで下準備が整いました。
ここから、実際にアーカイブページが保有している記事一覧の情報を出力していきましょう！
記事の件数だけ出力を繰り返す
記事の一覧ということで、保有している記事の件数だけ出力を繰り返し（ループ）しています。
そのため、whileを使って1記事ずつ出力していきます。
<?php while(have_posts()): the_post(); ?>
繰り返す部分
<?php endwhile; ?>the_postで１件ずつ記事を引っ張ってきて、引っ張る記事がなくなったらwhileがfalseとなり、ループが終了します。
今回のパターンでいくと、ulタグ内のliタグを繰り返し出力することになるので、liタグをwhileで囲みます。
<?php get_header(); ?>
<h1>XXXXXX の投稿一覧</h1>
<?php if (have_posts()): ?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li>
<h2>【記事のタイトル】XXXXXX</h2>
<p>【投稿日】XXXXXX</p>
<p>【カテゴリー】XXXXXX</p>
<p>【タグ】XXXXXX</p>
<p>【記事の抜粋】XXXXXX</p>
<a href="XXXXXX">記事を読む</a>
</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>記事はありません。</p>
<?php endif; ?>
<?php get_footer(); ?>各記事の情報を出力する
ほとんどが投稿ページの作成の際に使用したもと同じタグを使っています。
新しく登場するものは、
- 本文の抜粋
- 投稿ページへのリンク
この2つです。
記事のタイトル
<?php the_title(); ?>投稿日
<?php the_time(get_option('date_format')); ?>カテゴリー
<?php the_category('、'); ?>タグ
<?php the_tags('', '、'); ?>本文の抜粋
以下の記述で、本文からの抜粋文を出力してくれます。
<?php the_excerpt(); ?>抜粋の文字数は110文字がデフォルトです。
文字数を変更するには「functions.php」に以下の記述をコピペします。
/*--------------------------------
本文抜粋(the_excerpt();)操作
---------------------------------*/
// 文字数変更
function my_excerpt_length($length) {
return 50;
}
add_filter('excerpt_mblength', 'my_excerpt_length');
// 末尾の[...]変更
function my_excerpt_more($more) {
return '...';
}
add_filter('excerpt_more', 'my_excerpt_more');return の右にある数字（7行目）を変更することで、抜粋する文字数を変更することができます。
またデフォルトでは抜粋の最後に[…]とつくのですが、これもreturnの右にあるテキスト（13行目）を書き換えることで変更できます。
記事へのリンク
以下の記述で、投稿ページのURLを出力してくれます。
<?php the_permalink(); ?>これをaタグのhref属性部分に記述することで、投稿ページへのリンクができます。
全てを当てはめると…
こーんな感じになります。
<?php get_header(); ?>
<h1>XXXXXX の投稿一覧</h1>
<?php if(have_posts()): ?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li>
<h2>【記事のタイトル】<?php the_title(); ?></h2>
<p>【投稿日】<?php the_time(get_option('date_format')); ?></p>
<p>【カテゴリー】<?php the_category('、'); ?></p>
<p>【タグ】<?php the_tags('', '、'); ?></p>
<p>【記事の抜粋】<?php the_excerpt(); ?></p>
<a href="<?php the_permalink(); ?>">記事を読む</a>
</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>記事はありません。</p>
<?php endif; ?>
<?php get_footer(); ?>これでひとまずアーカイブ自体は作成されました！
先ほども書きましたが、ほとんどが投稿ページの作成の際に使用したもと同じタグを使っています。
さて、それっぽく見えてきたものの、完成までまだ少し足りていません。
何が足りていないか、お気づきでしょうか？
最大表示件数の設定とページャーの出力
最大表示件数とは、1ページに表示される最大投稿件数のことです。
記事の最大表示件数については、ワードプレス管理画面側からの操作となります。
管理画面 → 設定 → 表示設定 → 1ページに表示する最大投稿数
保有している記事数が、この設定した件数を超えると、古い順に記事が表示されなくなっていきます。
古い記事の一覧も見れるよう、忘れずにページャー（ページ送り）も用意しましょう！
以下をendwhileとelseの間にコピペします。
ifブロック内で、whileブロックの外です。
この位置の理由は、ページャーはループ処理する必要がなく、かつ投稿が存在する場合にのみ出力されてほしいためです。
<?php echo paginate_links([
'type' => 'list',
'mid_size' => 1,
'prev_next' => true,
'prev_text' => '前へ',
'next_text' => '次へ',
]); ?>すると以下のようになります。
<?php get_header(); ?>
<h1>XXXXXX の投稿一覧</h1>
<?php if(have_posts()): ?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li>
<h2>【記事のタイトル】<?php the_title(); ?></h2>
<p>【投稿日】<?php the_time(get_option('date_format')); ?></p>
<p>【カテゴリー】<?php the_category('、'); ?></p>
<p>【タグ】<?php the_tags('', '、'); ?></p>
<p>【記事の抜粋】<?php the_excerpt(); ?></p>
<a href="<?php the_permalink(); ?>">記事を読む</a>
</li>
<?php endwhile; ?>
</ul>
<?php echo paginate_links([
'type' => 'list',
'mid_size' => 1,
'prev_next' => true,
'prev_text' => '前へ',
'next_text' => '次へ',
]); ?>
<?php else: ?>
<p>記事はありません。</p>
<?php endif; ?>
<?php get_footer(); ?>さて、実際にブラウザを見てみると、ページャーが表示されていない人もいるかと思います。
これは「保有している投稿件数 ＜ 最大表示件数」となっており、ページャーの必要がないためです。
2記事以上あるカテゴリーなどで、最大表示件数を1件にするとページャーを確認することができます！
ページャーの詳細やカスタマイズについては、別記事にて紹介しています。
アーカイブページタイトルの出力
今回はカテゴリ別一覧やタグ一覧など、全てのアーカイブページに対応した、archive.phpを作っています。
今回ページタイトルを
XXXXXX の投稿一覧
としていますが、残念ながらこのXXXXXXの部分は自動で綺麗には出力されないのです。
そのため、カテゴリー一覧の場合はカテゴリー名を、タグ一覧の場合はタグ名を…といったように、どのアーカイブページかによって出力を分岐させる必要があります。
以下をページのメインタイトルとなる部分にコピペします。
<?php if(is_category() || is_tag() || is_tax()): ?>
<?php echo single_term_title('',false); ?>
<?php elseif(is_post_type_archive()): ?>
<?php echo post_type_archive_title('',false); ?>
<?php elseif(is_year()): ?>
<?php the_time("Y年"); ?>
<?php elseif(is_month()): ?>
<?php the_time("Y年n月"); ?>
<?php elseif(is_day()): ?>
<?php the_time("Y年n月j日") ?>
<?php endif; ?>こちらについては、別記事で紹介しています。
コピペするとこのようになりますね！
<?php get_header(); ?>
<h1>
<?php if(is_category() || is_tag() || is_tax()): ?>
<?php echo single_term_title('',false); ?>
<?php elseif(is_post_type_archive()): ?>
<?php echo post_type_archive_title('',false); ?>
<?php elseif(is_year()): ?>
<?php the_time("Y年"); ?>
<?php elseif(is_month()): ?>
<?php the_time("Y年n月"); ?>
<?php elseif(is_day()): ?>
<?php the_time("Y年n月j日") ?>
<?php endif; ?>
の投稿一覧
</h1>
<?php if(have_posts()): ?>
<ul>
<?php while(have_posts()): the_post(); ?>
<li>
<h2>【記事のタイトル】<?php the_title(); ?></h2>
<p>【投稿日】<?php the_time(get_option('date_format')); ?></p>
<p>【カテゴリー】<?php the_category('、'); ?></p>
<p>【タグ】<?php the_tags('', '、'); ?></p>
<p>【記事の抜粋】<?php the_excerpt(); ?></p>
<a href="<?php the_permalink(); ?>">記事を読む</a>
</li>
<?php endwhile; ?>
</ul>
<?php echo paginate_links([
'type' => 'list',
'mid_size' => 1,
'prev_next' => true,
'prev_text' => '前へ',
'next_text' => '次へ',
]); ?>
<?php else: ?>
<p>記事はありません。</p>
<?php endif; ?>
<?php get_footer(); ?>これで一番最初のサンプルコードと全く同じものが完成しました！
さて、これまで確認してみましょうと何度か言ってきましたが、今更すみません。
いざページを見ると言っても、アーカイブページのURLはどのようになっているのでしょうか？
アーカイブページのURL
何か特別な設定をしていない限り、大体のアーカイブページのURLは決まっています。
カテゴリー別アーカイブページのURL
カテゴリー別のアーカイブページのURLは、
サイトURL/category/カテゴリーのスラッグ/
で開くことができます。
なので当ブログのワードプレス関連記事一覧は、
https://efilamola.com/category/wp/
で開くことができます。
タグ別アーカイブページのURL
タグ別のアーカイブページは、カテゴリーとほぼ似たような感じで、
サイトURL/tag/タグのスラッグ/
で開くことができます。
当サイトではタグは使っていないのですが、用意しました。
https://efilamola.com/tag/testtag/
年月別アーカイブページのURL
まずは2048年の記事一覧など、年別のアーカイブページをみたい場合、
サイトURL/date/20XX/
となります。
これにさらに月を加えることで、月別アーカイブページに進化します。
サイトURL/date/20XX/XX/
例えば2022年1月のアーカイブページを開こうと思うと、
https://efilamola.com/date/2022/01/
となるわけです。
ここで紹介したURLでアーカイブページが開かない場合の対処法
設定によっては、このURLでは開かない場合があります。
「アーカイブページが開かないよぉ…おしまいだぁ…。」
とはなりません。ご安心ください。
適当な投稿ページ（single.php）で、リンク付きのカテゴリやタグを出力して、そのリンク先のURLを確認してください。
この方法で、強引にURLを確認することができます。
カテゴリやタグの出力方法は、以下の記事で紹介しています。
全記事の一覧ページを作る方法
今回のアーカイブページは、カテゴリーやタグ、年月など、どこかしらにカテゴライズされた記事の一覧を表示する方法でした。
では、全ての記事の一覧を表示するにはどのようにしたらいいのでしょうか？
今回は長くなってしまいましたので、別記事で紹介しています。
今日もあなたが夢に向かって一歩前進できていますように。
お疲れ様でした。
