38：アーカイブ一覧表示テンプレートを追加

ウィジェットやヘッダーに追加した月別アーカイブリンクをクリックしてもテンプレート「index.php」の「最後の砦」が表示され、アーカイブ一覧が表示されない状況です。

アーカイブ一覧表示用テンプレート「archive.php」を作成します。

専用テンプレート

必要に応じて専用のテンプレートを追加できます。他にも追加できるファイルがありますが主なファイルは以下です。

条件結果一覧表示テンプレートの最後の砦

テンプレート「index.php」がすべてのテンプレートの「最後の砦」だとしたら「archive.php」は条件に基づく一覧表示の「最後の砦」です。

様々な一覧表示の受け皿になっています。

アーカイブ

カテゴリー一覧

タグ一覧

日付・時間一覧

テーマ内に専用テンプレートを追加

カテゴリ一覧表示テンプレートを複製し、アーカイブ一覧表示用テンプレート「archive.php」を追加します。 

フォルダ構成

• lesson01
  • imgフォルダ
  • archive.php（category.phpを複製して追加）
  • category.php
  • custom-page1.php
  • custom-page2.php
  • front-page.php
  • functions.php
  • index.php
  • page.php
  • screenshot.png
  • search.php
  • style.css

アーカイブタイトル表示関数

カテゴリ一覧表示テンプレート「category.php」はタイトルにカテゴリ名を表示していました。

アーカイブ一覧テンプレート「archive.php」では「一覧表示条件」を表示するthe_archive_title関数を呼び出します。

この関数はループ外で呼び出すことができます。

<?php the_archive_title(); ?>

archive.php

変更前

<?php
get_header();
?>

<div class="blog">
  <div class="inner">
    <h2 class="title">
<?php
$cat = get_the_category();
$catSlug = $cat[0]->slug;
echo ucfirst( $catSlug );
?>
    </h2>
    <div class="subtitle">
<?php single_cat_title(); ?>:
<?php echo $wp_query->found_posts; ?>件
    </div>
    <div class="flex">

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>

      <div class="flex-item">
        <a href="<?php the_permalink(); ?>">
          <div class="image">

<?php
if (has_post_thumbnail()) {
  the_post_thumbnail('img_300_200');
} else {
  echo '<img src="'.get_template_directory_uri().'/img/no-image.png" alt="'.get_the_title().'">'.PHP_EOL;
}
?>

          </div>
          <div class="item-title"><?php the_title(); ?></div>
          <div class="item-text"><?php the_excerpt(); ?></div>
          <div class="item-date"><?php the_time('Y年m月d日'); ?></div>
        </a>
      </div><!-- .flex-item -->

<?php endwhile; ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

    </div><!-- .flex -->

<?php // ページネーション ?>
<?php
if ( pagination() ) {
  echo pagination();
}
?>

  </div><!-- .inner -->
</div><!-- .blog -->

<?php
get_footer();

変更後

<?php
get_header();
?>

<div class="blog">
  <div class="inner">
    <h2 class="title">
      <?php the_archive_title(); ?>
    </h2>
    <div class="subtitle">
      <?php echo $wp_query->found_posts; ?>件
    </div>
    <div class="flex">

<?php /***** メインループ開始 *****/ ?>
<?php if (have_posts()) :?>
<?php while (have_posts()) : the_post(); ?>

      <div class="flex-item">
        <a href="<?php the_permalink(); ?>">
          <div class="image">

<?php
if (has_post_thumbnail()) {
  the_post_thumbnail('img_300_200');
} else {
  echo '<img src="'.get_template_directory_uri().'/img/no-image.png" alt="'.get_the_title().'">'.PHP_EOL;
}
?>

          </div>
          <div class="item-title"><?php the_title(); ?></div>
          <div class="item-text"><?php the_excerpt(); ?></div>
          <div class="item-date"><?php the_time('Y年m月d日'); ?></div>
        </a>
      </div><!-- .flex-item -->

<?php endwhile; ?>
<?php endif; ?>
<?php /***** メインループ終了 *****/ ?>

    </div><!-- .flex -->

<?php // ページネーション ?>
<?php
if ( pagination() ) {
  echo pagination();
}
?>

  </div><!-- .inner -->
</div><!-- .blog -->

<?php
get_footer();

表示結果

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

the_archive_title()

WordPress変数

$wp_query

※欠席者対応：lesson29 – lesson30