TOP > WordPress > 【ワードプレス】記事の一覧ページ（アーカイブページ）を作る際に知っておきたい基礎知識

【ワードプレス】記事の一覧ページ（アーカイブページ）を作る際に知っておきたい基礎知識

ワードプレスを利用してブログやホームページを制作する際、「投稿」から記事を作り、ある特定のカテゴリーや月別で一覧ページを表示させるケースは多いかと思います。

まずは、一覧ページについての基礎知識をざっくり把握しておきましょう！




一覧ページの種類


Webサイトを閲覧していると、カテゴリー分けされた一覧や月別の一覧など、ある特定の条件に合致する情報を一覧表示させているサイトは検索もしやすく回遊しやすいものです。

そのようなアーカイブページには主に次の種類があります。


・同じカテゴリー別で分けられた投稿一覧

・公開された年や月で分けられた一覧

・同じタグがついている一覧

・投稿者別での記事一覧

・最新投稿の一覧

・サイト内検索での結果に基づく一覧


一言で「一覧ページ」と言っても、検索される内容別によって分類されています。



一覧ページの機能


「一覧ページ」では、記事のタイトルのみを表示させることはもちろんのこと、内容を一部抜粋したり、複数の記事がある場合はページネーションを利用して１ページに表示させる投稿数を決めることも可能です。

ほとんどの一覧ページには以下例のようなページネーションで【前のページ】【次のページ】に進めるようになっているのも特徴的です。


See the Pen Untitled by coco24coco (@coco24coco) on CodePen.



一覧ページの作り方


ワードプレスには、テンプレートファイルという概念があり、トップページ、投稿ページ、固定ページなど、「どんなコンテンツを表示するか」URLから判断します。

HTMLのみで作られたWebサイトの場合は、ある程度好きにファイル名を決めても問題ないのですが、ワードプレスはURL（つまりファイル名）から、どのテンプレートファイルを使ってページを表示するのか自動的に決定されるので、テンプレート階層の理解は必須になってきます。

※テンプレート階層についてはこちら


一覧ページには種類があると冒頭で述べましたが、表示する内容こそ違えどデザイン的には殆ど似た場合が多いので、どの一覧ページにも対応できるように先ずは【archive.php】（またはindex.php）を作成し、それをコピーして他の一覧ページへ活用していく方法が楽かと思います。


例えば、カテゴリー一覧のページと月別一覧のページを作りたい場合、それぞれのテンプレート階層は、以下のようになっています。


カテゴリー別記事一覧ページのテンプレート階層
  • 1: category-{slug}.php→例：カテゴリースラッグが”menu”の場合はcategory-menu.php
  • 2: category-{ID}.php→{ID}にはカテゴリーIDが入ります
  • 3: category.php
  • 4: archive.php
  • 4: index.php


月別記事一覧ページのテンプレート階層
  • 1: date.php
  • 2: archive.php
  • 3: index.php

ここで注目すべきポイントが優先順位です。

もし、『カテゴリー一覧はcategory-{slug}.php』、『月別一覧はdate.php』と、テンプレートファイルの優先順位が高いファイルで制作してしまうと、結果的にそれぞれに対応するページを2つ制作することになります。

しかし、このカテゴリー一覧と月別一覧ページのデザインが似ている場合、1つのテンプレートファイルで作った方が効率が良いですよね。


一覧ページの比較画像

上記図のように、タイトルが違うだけでデザインは同じようなページなら、ひとつのテンプレートファイルで管理した方が効率よく作業できます。

そこでそれぞれのページに共通するテンプレートファイルを見てみると、archive.phpまたはindex.phpになることがわかります。

どちらを使っても構わないのですが、index.phpは全てのページで最も優先順位が低いものになるので、汎用的なデザインとして扱うならindex.phpでもOKです。


あとは、表示させたい中身の部分（カテゴリー別、月別）をループさせるためのテンプレートパーツを別ファイルで制作し、表示させたいページ（archive.phpまたはindex.php）に「get_template_part($slug, $name)」というワードプレスの関数を使って呼び出せば完了です。


get_template_part($slug, $name)

・機能

ヘッダー・フッター・サイドバー以外の任意のテンプレートパーツの読み込み


$slug…一般テンプレートのスラッグ名（必須）

$name…特定テンプレートの名前（省略可）


また、テンプレートパーツを作成する際は、「任意のテンプレート名」と「任意の名前」をハイフン「 – 」で繋いだ形になります。（例： loop-tips.php）


任意のテンプレート名-任意の名前.php



上記例（loop-tips.php という名前のファイル名の場合）を呼び出す際のコード例は以下になります。

<?php get_header(); ?>
⋮
<main>
 <div>
  ⋮
  <?php if( have_posts() ): ?>
    <?php while( have_posts() ): the_post(); ?>
      <?php get_template_part('loop', 'tips'); ?>
    <?php endwhile; ?>
  <?php endif; ?>
　⋮
 </div>
</main>
<?php get_footer(); ?>

まとめ

今回はワードプレスで一覧ページを作る際の基本的な知識をざっくりとご紹介しました。新着情報一覧やカテゴリー一覧など、利用機会の多いものになるので出来るだけ効率良く制作したいものですよね。


↓テンプレート階層の記事はこちら↓

【ワードプレス】テンプレートファイルとテンプレート階層