アーカイブページとは、記事の一覧を表示するページです。
今までに書いた記事の全てを表示したり、特定のカテゴリーやタグ、日付の記事のみを一覧で表示したりすることができます。
以下の画像はWordPressというカテゴリーのみの一覧を表示しているので、カテゴリーアーカイブになります。
アーカイブページを作成する大まかな手順
archive.phpを準備する
アーカイブページ用のhtmlファイルがあることを前提としています。
拡張子をphpに変更する
archive.htmlをarchive.phpにします。
アーカイブページはarchive.phpというファイル名をつけることでアーカイブのテンプレートであることを認識します。
テンプレートパーツの読み込み
ヘッダーやフッター、サイドバーは以下の記事で解説したようにパーツとして読み込みます。
(読み込み済み)
<?php get_header(); ?>
<div class="content">
<div class="container content__container">
<main id="main">
<!-- 省略 -->
</main>
<?php get_sidebar(); ?>
</div><!-- /content__inner -->
</div>
<?php get_footer(); ?>ループの作成
ここから皆さんも一緒に作業してもらいます。
アーカイブページはどのような作りになっているか想像できますか？
どこからどこまでループ処理をする？？
画像を見てもらうとわかるように、記事は赤枠部分を繰り返し表示しているように見えます。
<?php get_header(); ?>
<div class="content">
<div class="container content__container">
<main id="main">
<div class="card">
<a href="">
<div>
<h2>タイトル</h2>
<p>ここに抜粋分が入ります。ここに抜粋分が入ります。ここに抜粋分が入ります。</p>
<time>2022.06.22</time>
</div>
<img src="<?php echo get_template_directory_uri(); ?>/img/dammy.png" alt="">
<p class="card__category">WordPress</p>
</a>
<!--
以降aタグ×5
-->
</div>
<!-- pagination 省略 -->
</main>
<?php get_sidebar(); ?>
</div><!-- /content__inner -->
</div>
<?php get_footer(); ?>コードで見ると、以下の画像のように(中身を含む)aタグが繰り返されている状態です。
この部分を繰り返すようにコードを書き換えていきます。
ループ処理をする
ループ処理をするにはメインループというものを使用します。
今回の場合繰り返し表示したい部分はaタグ部分ですね。
ループについては別途記事を作成する予定です。
メインループの書き方
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<!-- 繰り返す部分(今回はaタグ) -->
<?php endwhile;endif;wp_reset_query(); ?>実際にメインループを使ってみる
<?php get_header(); ?>
<div class="content">
<div class="container content__container">
<main id="main">
<div class="card">
<!-- メインループはじめ -->
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<a href="">
<div>
<h2>タイトル</h2>
<p>ここに抜粋分が入ります。ここに抜粋分が入ります。ここに抜粋分が入ります。</p>
<time>2022.06.22</time>
</div>
<img src="<?php echo get_template_directory_uri(); ?>/img/dammy.png" alt="">
<p class="card__category">WordPress</p>
</a>
<?php endwhile;endif; wp_reset_query(); ?>
<!-- メインループおわり -->
</div>
<!-- pagination省略 -->
</main>
<?php get_sidebar(); ?>
</div><!-- /content__inner -->
</div>
<?php get_footer(); ?>テンプレートタグを埋め込む
このままでは全ての記事の
- タイトルが「タイトル」
- 抜粋文が「ここに抜粋分が入ります。ここに抜粋分が入ります。ここに抜粋分が入ります。」
- 日付が「2022.06.22」
- 画像がダミー画像
- 同じリンク先
になってしまうので、それぞれの記事に合ったものを表示・反映させたいところです。
そこで使用するのがテンプレートタグです。
まずはテンプレートタグを埋め込んだコードを見てみてください。
<div class="card">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<a href="<?php the_permalink(); ?>">
<div>
<h2 class="card__title"><?php the_title(); ?></h2>
<p class="card__excerpt"><?php echo get_the_excerpt(); ?></p>
<time class="card__time"><?php the_time('Y.m.d'); ?></time>
</div>
<?php
if(has_post_thumbnail()):
the_post_thumbnail();
else:
?>
<img class="card__img-dummy" src="<?php echo get_template_directory_uri(); ?>/img/dammy.png" alt="">
<?php endif; ?>
<p class="card__category">
<?php
$categories = get_the_category();
if ( $categories ) {
echo $categories[0]->name;
}
?>
</p>
</a>
<?php endwhile;endif; wp_reset_query(); ?>
</div>テンプレートタグの簡単な説明していきます。
それぞれのテンプレートタグの詳細については別途記事を作成する予定です。
タイトル
記事タイトルを表示させるにはthe_title()を使用します。
<h2 class="card__title"><?php the_title(); ?></h2>抜粋文
抜粋文を表示させるにはget_the_excerpt()をechoします。
<p class="card__excerpt"><?php echo get_the_excerpt(); ?></p>日付
日付を表示させるためにはthe_time()を使用します。
<time class="card__time" datetime="<?php the_time('Y.m.d'); ?>">
<?php the_time('Y.m.d'); ?>
</time>画像
サムネイルを表示させるにはthe_post_thumbnail()を使用します。
サムネイルが設定されているときは設定された画像を表示し、設定されていなければダミー画像を表示するように工夫しています。
<?php
if(has_post_thumbnail()):
the_post_thumbnail();
else:
?>
<img src="<?php echo get_template_directory_uri(); ?>/img/dummy.png" alt="">
<?php endif; ?>リンク
記事を表示させるためにはthe_permalink()を使用します。
該当記事へのリンク先が設定されます。
<a card="card__link" href="<?php the_permalink(); ?>">
<!-- 省略 -->
</a>アーカイブページの確認方法
アーカイブページは以下の通りテーマ別のアーカイブが存在します。
- カテゴリーアーカイブ
- タグアーカイブ
- 日付アーカイブ
- 作成者別アーカイブ
- カスタム分類アーカイブ
それぞれのアーカイブはurlが異なります。
例えばカテゴリーアーカイブにアクセスしたい場合のurlは
http://localhost:10124/category/{カテゴリースラッグ}/
で、タグアーカイブ にアクセスしたい場合のurlは
http://localhost:10124/tag/{タグスラッグ}/
です。
今回は「赤」というカテゴリーを作成し、カテゴリー「赤」の一覧を表示してみます。
カテゴリー作成
カテゴリー名を「赤」にし、スラッグをredにします。
アーカイブページ にアクセスしてみる
http://localhost:10124/category/red/
スラッグをredにしたので、上記URLでアクセスしてみます。(ドメイン部分は人それぞれ異なります。)
アーカイブページを確認する
プラグインCurrent show templateをつかって、現在どのテンプレートが使われているか確認します。
下記画像赤枠内と同じくテンプレート：archive.phpと書かれていれば正解です。
カテゴリー「赤」のみが表示されており、記事のタイトルや抜粋、日付なども個々の記事のものとして表示されているので正しくアーカイブページが作成できたと言えそうですね。
コメント