第4章 1.9 ⑦ archive.php のソースコードと詳細

1.9 ⑦ archive.php のソースコードと解説　

解説）　archive.php はWordPress管理画面の投稿一覧で作成された「投稿」記事の一覧を表示するプログラムです。ここではサイドバー中段にあるカテゴリーのワードがクリックされた際に動作します。

動作した際は、ヘッダー部、フッター部、サイドバーに加え、下図の青線で囲んだ部分（記事一覧領域）にクリックされたカテゴリーのワードを含む「投稿」記事の一覧を表示します。

以下が今回のプログラムソースです。

<?php get_header(); ?>

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <?php get_sidebar(); ?>
        </div>
        <div class="col-lg-1"></div>
        <div class="col-lg-7">
            <div class="h3">
                <?php single_term_title(); ?>
            </div>
            <?php if (have_posts()) : ?>
                <?php while (have_posts()) : the_post(); ?>
                    <div id="post-<?php the_ID(); ?>" class="container-fluid border-top border-success border-2"></div>
                    <div class="container">
                        <div class="row">
                            <div class="col-3 my-3">
                                <a href="<?php the_permalink(); ?>">
                                    <?php if (has_post_thumbnail()) : ?>
                                        <?php the_post_thumbnail('archive_thumbnail'); ?>
                                    <?php else : ?>
                                        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/dummy-image.png" alt="" width="160" height="160" load="lazy">
                                    <?php endif; ?>
                                </a>
                            </div>
                            <div class="col-9 my-2">
                                <div>
                                    <a href="<?php the_permalink(); ?>">
                                        <div class="h5">
                                            <?php the_title(); ?>
                                        </div>
                                    </a>
                                </div>
                                <div class="h7">
                                    <?php the_excerpt(); ?>
                                </div>
                                <div class="text-end">
                                    <p>
                                        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/new.png" alt="new" width="30" height="30">:
                                        <time datetime="<?php echo get_the_date(); ?>"><?php echo get_the_date(); ?></time>
                                        <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/update.png" alt="update" width="30" height="30">:
                                        <time datetime="<?php echo get_the_modified_date(); ?>"><?php echo get_the_modified_date(); ?></time>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endwhile; ?>
            <?php endif; ?>
            <div class="pagination justify-content-center">
                <?php the_posts_pagination(
                    array(
                        'prev_text' => '<span class="sr-only"><i class="bi bi-caret-left-square"></i></span>',
                        'next_text' => '<span class="sr-only"><i class="bi bi-caret-right-square"></i></span>',
                    )
                );
                ?>
            </div>
        </div>
        <div class="col-lg-1"></div>
    </div>
</div>
</div>

<?php get_footer(); ?>

解説

※参考：ページネーション（ページ送り）の例
　「第5章 2.3 【歯科クリニックのWebサイト】の固定ページ（サンプル）を作り込む」の1.8にて「最大投稿数」を4と設定していますので、上記の図ではページネーションが表示されていませんが「最大投稿数」を1に変更した場合は下図の赤枠のような表示がされます。

参考）1.2 php基本プログラム一覧と簡単な解説です。