第4章 1.12 index.php のソースコードと詳細

1.12 index.php のソースコードと詳細

解説）　ここでは第3章で作成した index.php を以下のように書き換えておきましょう。【歯科クリニックのWebサイト】では「新着記事一覧」を表示する際に起動します。

【歯科クリニックのWebサイト】では、トップページ以外の全てのページで表示される「パンくずリスト」（下図のヘッダー内の青線枠）の「新着記事一覧」をクリックすると動作します。基本的には archive.php と同様の動作をします。（ヘッダー部、フッター部、サイドバーに加え、下図の青線で囲んだ部分（記事一覧領域）に「投稿」記事の新しい順に一覧を表示します。）

投稿記事一覧の最大表示数は、WordPress管理画面の「設定」>「表示設定」>「1ページに表示する最大投稿数」にて定義します。（ここでは「4」としてあります。）

第3章で作成した index.php を以下のように書き換えます。以下が今回のプログラムソースです。

<?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">
      <?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>

<?php get_footer(); ?>

解説

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