Learning site for website creation

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

  • 投稿日:2019年07月15日
  • 更新日:2019年07月23日

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

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

専用テンプレート

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

front-page.php フロントページ表示用テンプレート
home.php 主に固定ページの上にあるブログ投稿一覧表示用テンプレート
single.php 投稿詳細ページ表示用テンプレート
page.php 固定ページ表示用テンプレート
archive.php アーカイブ一覧全般表示用テンプレート
category.php カテゴリー一覧表示用テンプレート
tag.php タグ一覧表示用テンプレート
search.php 検索結果一覧表示用テンプレート
date.php 日付別一覧表示用テンプレート
404.php 404エラー表示用テンプレート
header.php 共通ヘッダーパーツテンプレート
footer.php 共通フッターパーツテンプレート
sidebar.php 共通サイドバーテンプレート
searchform.php 検索フォーム用テンプレート
comments.php コメント用テンプレート

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

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

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

アーカイブ

優先度(高い ← → 低い)

archive-投稿タイプ.php

archive.php

index.php

カテゴリー一覧

優先度(高い ← → 低い)

category-スラッグ.php

category-カテゴリーID.php

category.php

archive.php

index.php

タグ一覧

優先度(高い ← → 低い)

tag-スラッグ.php

tag-タグID.php

tag.php

archive.php

index.php

日付・時間一覧

優先度(高い ← → 低い)

date.php

archive.php

index.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